---
name: Typography
menu: General
route: components/typography
---

import { Playground, Props } from 'docz';
import { Typography } from '@ohif/ui';

# Typography

Use typography to display text using the available props for customizing your
content.

## Import

```javascript
import { Typography } from '@ohif/ui';
```

## Basic usage

<Playground>
  <div className="p-4">
    <Typography variant="h1">
      h1. The five boxing wizards jump quickly.
    </Typography>
    <Typography variant="h2">
      h2. The five boxing wizards jump quickly.
    </Typography>
    <Typography variant="h3">
      h3. The five boxing wizards jump quickly.
    </Typography>
    <Typography variant="h4">
      h4. The five boxing wizards jump quickly.
    </Typography>
    <Typography variant="h5">
      h5. The five boxing wizards jump quickly.
    </Typography>
    <Typography variant="h6">
      h6. The five boxing wizards jump quickly.
    </Typography>
    <Typography variant="subtitle">
      subtitle. The five boxing wizards jump quickly.
    </Typography>
    <Typography variant="body">
      body. The five boxing wizards jump quickly.
    </Typography>
  </div>
</Playground>

## Changing the HTML element

There are different semantic elements to be used in the Typography component.
You can use the prop `component` to associate the component to be rendered with
a semantic element. The style of a Typography is independent of the semantic
element.

<Playground>
  <div className="p-4">
    <Typography variant="h1" component="h2">
      This is a h2 using the h1 styles.
    </Typography>
  </div>
</Playground>

## Properties

<Props of={Typography} />