# Typography

> Text styles as single utilities that set family, size, weight, line height and tracking.

Source: /docs/foundations/typography

Each text style sets family, size, weight, line height and tracking together. Line heights follow `data-fontlineheight`, so Thai text gets the taller Thai values.

Render text with the [Typography](/docs/components/typography) component, and use `typography(variant)` for the class on an element you render yourself. Both take the style name without the `typography-content-` prefix.

```tsx
<Typography variant="body-regular">Body text</Typography>
<textarea className={typography('body-regular')} />
```

The catalog below lists each style by its class name, which works anywhere a class does.

```tsx
<p className="typography-content-body-regular">Body text</p>
```

| Utility | Style |
| --- | --- |
| `typography-content-body-bold` | fontFamily: var(--font-content-body-typography-content-body-font-family); fontSize: var(--font-content-body-typography-content-body-size); fontWeight: var(--font-content-body-typography-content-body-bold-font-weight); lineHeight: var(--font-content-body-typography-content-body-line-height); letterSpacing: var(--font-content-body-typography-content-body-tracking) |
| `typography-content-body-medium` | fontFamily: var(--font-content-body-typography-content-body-font-family); fontSize: var(--font-content-body-typography-content-body-size); fontWeight: var(--font-content-body-typography-content-body-medium-font-weight); lineHeight: var(--font-content-body-typography-content-body-line-height); letterSpacing: var(--font-content-body-typography-content-body-tracking) |
| `typography-content-body-regular` | fontFamily: var(--font-content-body-typography-content-body-font-family); fontSize: var(--font-content-body-typography-content-body-size); fontWeight: var(--font-content-body-typography-content-body-regular-font-weight); lineHeight: var(--font-content-body-typography-content-body-line-height); letterSpacing: var(--font-content-body-typography-content-body-tracking) |
| `typography-content-body-semi-bold` | fontFamily: var(--font-content-body-typography-content-body-font-family); fontSize: var(--font-content-body-typography-content-body-size); fontWeight: var(--font-content-body-typography-content-body-semi-bold-font-weight); lineHeight: var(--font-content-body-typography-content-body-line-height); letterSpacing: var(--font-content-body-typography-content-body-tracking) |
| `typography-content-code-bold` | fontFamily: var(--font-content-code-typography-content-code-font-family); fontSize: var(--font-content-code-typography-content-code-size); fontWeight: var(--font-content-code-bold-typography-content-code-bold-font-weight); lineHeight: var(--font-content-code-typography-content-code-line-height); letterSpacing: var(--font-content-code-typography-content-code-tracking) |
| `typography-content-code-medium` | fontFamily: var(--font-content-code-typography-content-code-font-family); fontSize: var(--font-content-code-typography-content-code-size); fontWeight: var(--font-content-code-typography-content-code-medium-font-weight); lineHeight: var(--font-content-code-typography-content-code-line-height); letterSpacing: var(--font-content-code-typography-content-code-tracking) |
| `typography-content-code-regular` | fontFamily: var(--font-content-code-typography-content-code-font-family); fontSize: var(--font-content-code-typography-content-code-size); fontWeight: var(--font-content-code-typography-content-code-regular-font-weight); lineHeight: var(--font-content-code-typography-content-code-line-height); letterSpacing: var(--font-content-code-typography-content-code-tracking) |
| `typography-content-code-semi-bold` | fontFamily: var(--font-content-code-typography-content-code-font-family); fontSize: var(--font-content-code-typography-content-code-size); fontWeight: var(--font-content-code-typography-content-code-semi-bold-font-weight); lineHeight: var(--font-content-code-typography-content-code-line-height); letterSpacing: var(--font-content-code-typography-content-code-tracking) |
| `typography-content-display-1-bold` | fontFamily: var(--font-content-display-1-typography-content-display-1-font-family); fontSize: var(--font-content-display-1-typography-content-display-1-size); fontWeight: var(--font-content-display-1-bold-typography-content-display-1-bold-font-weight); lineHeight: var(--font-content-display-1-typography-content-display-1-line-height); letterSpacing: var(--font-content-display-1-typography-content-display-1-tracking) |
| `typography-content-display-1-medium` | fontFamily: var(--font-content-display-1-typography-content-display-1-font-family); fontSize: var(--font-content-display-1-typography-content-display-1-size); fontWeight: var(--font-content-display-1-medium-typography-content-display-1-medium-font-weight); lineHeight: var(--font-content-display-1-typography-content-display-1-line-height); letterSpacing: var(--font-content-display-1-typography-content-display-1-tracking) |
| `typography-content-display-1-regular` | fontFamily: var(--font-content-display-1-typography-content-display-1-font-family); fontSize: var(--font-content-display-1-typography-content-display-1-size); fontWeight: var(--font-content-display-1-regular-typography-content-display-1-regular-font-weight); lineHeight: var(--font-content-display-1-typography-content-display-1-line-height); letterSpacing: var(--font-content-display-1-typography-content-display-1-tracking) |
| `typography-content-display-1-semi-bold` | fontFamily: var(--font-content-display-1-typography-content-display-1-font-family); fontSize: var(--font-content-display-1-typography-content-display-1-size); fontWeight: var(--font-content-display-1-typography-content-display-1-semi-bold-font-weight); lineHeight: var(--font-content-display-1-typography-content-display-1-line-height); letterSpacing: var(--font-content-display-1-typography-content-display-1-tracking) |
| `typography-content-display-2-bold` | fontFamily: var(--font-content-display-2-typography-content-display-2-font-family); fontSize: var(--font-content-display-2-typography-content-display-2-size); fontWeight: var(--font-content-display-2-bold-typography-content-display-2-bold-font-weight); lineHeight: var(--font-content-display-2-typography-content-display-2-line-height); letterSpacing: var(--font-content-display-2-typography-content-display-2-tracking) |
| `typography-content-display-2-medium` | fontFamily: var(--font-content-display-2-typography-content-display-2-font-family); fontSize: var(--font-content-display-2-typography-content-display-2-size); fontWeight: var(--font-content-display-2-medium-typography-content-display-2-medium-font-weight); lineHeight: var(--font-content-display-2-typography-content-display-2-line-height); letterSpacing: var(--font-content-display-2-typography-content-display-2-tracking) |
| `typography-content-display-2-regular` | fontFamily: var(--font-content-display-2-typography-content-display-2-font-family); fontSize: var(--font-content-display-2-typography-content-display-2-size); fontWeight: var(--font-content-display-2-regular-typography-content-display-2-regular-font-weight); lineHeight: var(--font-content-display-2-typography-content-display-2-line-height); letterSpacing: var(--font-content-display-2-typography-content-display-2-tracking) |
| `typography-content-display-2-semi-bold` | fontFamily: var(--font-content-display-2-typography-content-display-2-font-family); fontSize: var(--font-content-display-2-typography-content-display-2-size); fontWeight: var(--font-content-display-2-typography-content-display-2-semi-bold-font-weight); lineHeight: var(--font-content-display-2-typography-content-display-2-line-height); letterSpacing: var(--font-content-display-2-typography-content-display-2-tracking) |
| `typography-content-display-3-bold` | fontFamily: var(--font-content-display-3-typography-content-display-3-font-family); fontSize: var(--font-content-display-3-typography-content-display-3-size); fontWeight: var(--font-content-display-3-bold-typography-content-display-3-bold-font-weight); lineHeight: var(--font-content-display-3-typography-content-display-3-line-height); letterSpacing: var(--font-content-display-3-typography-content-display-3-tracking) |
| `typography-content-display-3-medium` | fontFamily: var(--font-content-display-3-typography-content-display-3-font-family); fontSize: var(--font-content-display-3-typography-content-display-3-size); fontWeight: var(--font-content-display-3-medium-typography-content-display-3-medium-font-weight); lineHeight: var(--font-content-display-3-typography-content-display-3-line-height); letterSpacing: var(--font-content-display-3-typography-content-display-3-tracking) |
| `typography-content-display-3-regular` | fontFamily: var(--font-content-display-3-typography-content-display-3-font-family); fontSize: var(--font-content-display-3-typography-content-display-3-size); fontWeight: var(--font-content-display-3-regular-typography-content-display-3-regular-font-weight); lineHeight: var(--font-content-display-3-typography-content-display-3-line-height); letterSpacing: var(--font-content-display-3-typography-content-display-3-tracking) |
| `typography-content-display-3-semi-bold` | fontFamily: var(--font-content-display-3-typography-content-display-3-font-family); fontSize: var(--font-content-display-3-typography-content-display-3-size); fontWeight: var(--font-content-display-3-typography-content-display-3-semi-bold-font-weight); lineHeight: var(--font-content-display-3-typography-content-display-3-line-height); letterSpacing: var(--font-content-display-3-typography-content-display-3-tracking) |
| `typography-content-h1-bold` | fontFamily: var(--font-content-h1-typography-content-h1-font-family); fontSize: var(--font-content-h1-typography-content-h1-size); fontWeight: var(--font-content-h1-bold-typography-content-h1-bold-font-weight); lineHeight: var(--font-content-h1-typography-content-h1-line-height); letterSpacing: var(--font-content-h1-typography-content-h1-tracking) |
| `typography-content-h1-medium` | fontFamily: var(--font-content-h1-typography-content-h1-font-family); fontSize: var(--font-content-h1-typography-content-h1-size); fontWeight: var(--font-content-h1-medium-typography-content-h1-medium-font-weight); lineHeight: var(--font-content-h1-typography-content-h1-line-height); letterSpacing: var(--font-content-h1-typography-content-h1-tracking) |
| `typography-content-h1-regular` | fontFamily: var(--font-content-h1-typography-content-h1-font-family); fontSize: var(--font-content-h1-typography-content-h1-size); fontWeight: var(--font-content-h1-regular-typography-content-h1-regular-font-weight); lineHeight: var(--font-content-h1-typography-content-h1-line-height); letterSpacing: var(--font-content-h1-typography-content-h1-tracking) |
| `typography-content-h1-semi-bold` | fontFamily: var(--font-content-h1-typography-content-h1-font-family); fontSize: var(--font-content-h1-typography-content-h1-size); fontWeight: var(--font-content-h1-typography-content-h1-semi-bold-font-weight); lineHeight: var(--font-content-h1-typography-content-h1-line-height); letterSpacing: var(--font-content-h1-typography-content-h1-tracking) |
| `typography-content-h2-bold` | fontFamily: var(--font-content-h2-typography-content-h2-font-family); fontSize: var(--font-content-h2-typography-content-h2-size); fontWeight: var(--font-content-h2-bold-typography-content-h2-bold-font-weight); lineHeight: var(--font-content-h2-typography-content-h2-line-height); letterSpacing: var(--font-content-h2-typography-content-h2-tracking) |
| `typography-content-h2-medium` | fontFamily: var(--font-content-h2-typography-content-h2-font-family); fontSize: var(--font-content-h2-typography-content-h2-size); fontWeight: var(--font-content-h2-medium-typography-content-h2-medium-font-weight); lineHeight: var(--font-content-h2-typography-content-h2-line-height); letterSpacing: var(--font-content-h2-typography-content-h2-tracking) |
| `typography-content-h2-regular` | fontFamily: var(--font-content-h2-typography-content-h2-font-family); fontSize: var(--font-content-h2-typography-content-h2-size); fontWeight: var(--font-content-h2-regular-typography-content-h2-regular-font-weight); lineHeight: var(--font-content-h2-typography-content-h2-line-height); letterSpacing: var(--font-content-h2-typography-content-h2-tracking) |
| `typography-content-h2-semi-bold` | fontFamily: var(--font-content-h2-typography-content-h2-font-family); fontSize: var(--font-content-h2-typography-content-h2-size); fontWeight: var(--font-content-h2-typography-content-h2-semi-bold-font-weight); lineHeight: var(--font-content-h2-typography-content-h2-line-height); letterSpacing: var(--font-content-h2-typography-content-h2-tracking) |
| `typography-content-h3-bold` | fontFamily: var(--font-content-h3-typography-content-h3-font-family); fontSize: var(--font-content-h3-typography-content-h3-size); fontWeight: var(--font-content-h3-bold-typography-content-h3-bold-font-weight); lineHeight: var(--font-content-h3-typography-content-h3-line-height); letterSpacing: var(--font-content-h3-typography-content-h3-tracking) |
| `typography-content-h3-medium` | fontFamily: var(--font-content-h3-typography-content-h3-font-family); fontSize: var(--font-content-h3-typography-content-h3-size); fontWeight: var(--font-content-h3-medium-typography-content-h3-medium-font-weight); lineHeight: var(--font-content-h3-typography-content-h3-line-height); letterSpacing: var(--font-content-h3-typography-content-h3-tracking) |
| `typography-content-h3-regular` | fontFamily: var(--font-content-h3-typography-content-h3-font-family); fontSize: var(--font-content-h3-typography-content-h3-size); fontWeight: var(--font-content-h3-regular-typography-content-h3-regular-font-weight); lineHeight: var(--font-content-h3-typography-content-h3-line-height); letterSpacing: var(--font-content-h3-typography-content-h3-tracking) |
| `typography-content-h3-semi-bold` | fontFamily: var(--font-content-h3-typography-content-h3-font-family); fontSize: var(--font-content-h3-typography-content-h3-size); fontWeight: var(--font-content-h3-typography-content-h3-semi-bold-font-weight); lineHeight: var(--font-content-h3-typography-content-h3-line-height); letterSpacing: var(--font-content-h3-typography-content-h3-tracking) |
| `typography-content-h4-bold` | fontFamily: var(--font-content-h4-typography-content-h4-font-family); fontSize: var(--font-content-h4-typography-content-h4-size); fontWeight: var(--font-content-h4-bold-typography-content-h4-bold-font-weight); lineHeight: var(--font-content-h4-typography-content-h4-line-height); letterSpacing: var(--font-content-h4-typography-content-h4-tracking) |
| `typography-content-h4-medium` | fontFamily: var(--font-content-h4-typography-content-h4-font-family); fontSize: var(--font-content-h4-typography-content-h4-size); fontWeight: var(--font-content-h4-medium-typography-content-h4-medium-font-weight); lineHeight: var(--font-content-h4-typography-content-h4-line-height); letterSpacing: var(--font-content-h4-typography-content-h4-tracking) |
| `typography-content-h4-regular` | fontFamily: var(--font-content-h4-typography-content-h4-font-family); fontSize: var(--font-content-h4-typography-content-h4-size); fontWeight: var(--font-content-h4-regular-typography-content-h4-regular-font-weight); lineHeight: var(--font-content-h4-typography-content-h4-line-height); letterSpacing: var(--font-content-h4-typography-content-h4-tracking) |
| `typography-content-h4-semi-bold` | fontFamily: var(--font-content-h4-typography-content-h4-font-family); fontSize: var(--font-content-h4-typography-content-h4-size); fontWeight: var(--font-content-h4-typography-content-h4-semi-bold-font-weight); lineHeight: var(--font-content-h4-typography-content-h4-line-height); letterSpacing: var(--font-content-h4-typography-content-h4-tracking) |
| `typography-content-h5-bold` | fontFamily: var(--font-content-h5-typography-content-h5-font-family); fontSize: var(--font-content-h5-typography-content-h5-size); fontWeight: var(--font-content-h5-bold-typography-content-h5-bold-font-weight); lineHeight: var(--font-content-h5-typography-content-h5-line-height); letterSpacing: var(--font-content-h5-typography-content-h5-tracking) |
| `typography-content-h5-medium` | fontFamily: var(--font-content-h5-typography-content-h5-font-family); fontSize: var(--font-content-h5-typography-content-h5-size); fontWeight: var(--font-content-h5-medium-typography-content-h5-medium-font-weight); lineHeight: var(--font-content-h5-typography-content-h5-line-height); letterSpacing: var(--font-content-h5-typography-content-h5-tracking) |
| `typography-content-h5-regular` | fontFamily: var(--font-content-h5-typography-content-h5-font-family); fontSize: var(--font-content-h5-typography-content-h5-size); fontWeight: var(--font-content-h5-regular-typography-content-h5-regular-font-weight); lineHeight: var(--font-content-h5-typography-content-h5-line-height); letterSpacing: var(--font-content-h5-typography-content-h5-tracking) |
| `typography-content-h5-semi-bold` | fontFamily: var(--font-content-h5-typography-content-h5-font-family); fontSize: var(--font-content-h5-typography-content-h5-size); fontWeight: var(--font-content-h5-typography-content-h5-semi-bold-font-weight); lineHeight: var(--font-content-h5-typography-content-h5-line-height); letterSpacing: var(--font-content-h5-typography-content-h5-tracking) |
| `typography-content-h6-bold` | fontFamily: var(--font-content-h6-typography-content-h6-font-family); fontSize: var(--font-content-h6-typography-content-h6-size); fontWeight: var(--font-content-h6-bold-typography-content-h6-bold-font-weight); lineHeight: var(--font-content-h6-typography-content-h6-line-height); letterSpacing: var(--font-content-h6-typography-content-h6-tracking) |
| `typography-content-h6-medium` | fontFamily: var(--font-content-h6-typography-content-h6-font-family); fontSize: var(--font-content-h6-typography-content-h6-size); fontWeight: var(--font-content-h6-medium-typography-content-h6-medium-font-weight); lineHeight: var(--font-content-h6-typography-content-h6-line-height); letterSpacing: var(--font-content-h6-typography-content-h6-tracking) |
| `typography-content-h6-regular` | fontFamily: var(--font-content-h6-typography-content-h6-font-family); fontSize: var(--font-content-h6-typography-content-h6-size); fontWeight: var(--font-content-h6-regular-typography-content-h6-regular-font-weight); lineHeight: var(--font-content-h6-typography-content-h6-line-height); letterSpacing: var(--font-content-h6-typography-content-h6-tracking) |
| `typography-content-h6-semi-bold` | fontFamily: var(--font-content-h6-typography-content-h6-font-family); fontSize: var(--font-content-h6-typography-content-h6-size); fontWeight: var(--font-content-h6-typography-content-h6-semi-bold-font-weight); lineHeight: var(--font-content-h6-typography-content-h6-line-height); letterSpacing: var(--font-content-h6-typography-content-h6-tracking) |
| `typography-content-label-bold` | fontFamily: var(--font-content-label-typography-content-label-font-family); fontSize: var(--font-content-label-typography-content-label-size); fontWeight: var(--font-content-label-typography-content-label-bold-font-weight); lineHeight: var(--font-content-label-typography-content-label-line-height); letterSpacing: var(--font-content-label-typography-content-label-tracking) |
| `typography-content-label-medium` | fontFamily: var(--font-content-label-typography-content-label-font-family); fontSize: var(--font-content-label-typography-content-label-size); fontWeight: var(--font-content-label-typography-content-label-medium-font-weight); lineHeight: var(--font-content-label-typography-content-label-line-height); letterSpacing: var(--font-content-label-typography-content-label-tracking) |
| `typography-content-label-regular` | fontFamily: var(--font-content-label-typography-content-label-font-family); fontSize: var(--font-content-label-typography-content-label-size); fontWeight: var(--font-content-label-typography-content-label-regular-font-weight); lineHeight: var(--font-content-label-typography-content-label-line-height); letterSpacing: var(--font-content-label-typography-content-label-tracking) |
| `typography-content-label-semi-bold` | fontFamily: var(--font-content-label-typography-content-label-font-family); fontSize: var(--font-content-label-typography-content-label-size); fontWeight: var(--font-content-label-typography-content-label-semi-bold-font-weight); lineHeight: var(--font-content-label-typography-content-label-line-height); letterSpacing: var(--font-content-label-typography-content-label-tracking) |
| `typography-content-large-bold` | fontFamily: var(--font-content-large-typography-content-large-font-family); fontSize: var(--font-content-large-typography-content-large-size); fontWeight: var(--font-content-large-typography-content-large-bold-font-weight); lineHeight: var(--font-content-large-typography-content-large-line-height); letterSpacing: var(--font-content-large-typography-content-large-tracking) |
| `typography-content-large-medium` | fontFamily: var(--font-content-large-typography-content-large-font-family); fontSize: var(--font-content-large-typography-content-large-size); fontWeight: var(--font-content-large-typography-content-large-medium-font-weight); lineHeight: var(--font-content-large-typography-content-large-line-height); letterSpacing: var(--font-content-large-typography-content-large-tracking) |
| `typography-content-large-regular` | fontFamily: var(--font-content-large-typography-content-large-font-family); fontSize: var(--font-content-large-typography-content-large-size); fontWeight: var(--font-content-large-typography-content-large-regular-font-weight); lineHeight: var(--font-content-large-typography-content-large-line-height); letterSpacing: var(--font-content-large-typography-content-large-tracking) |
| `typography-content-large-semi-bold` | fontFamily: var(--font-content-large-typography-content-large-font-family); fontSize: var(--font-content-large-typography-content-large-size); fontWeight: var(--font-content-large-typography-content-large-semi-bold-font-weight); lineHeight: var(--font-content-large-typography-content-large-line-height); letterSpacing: var(--font-content-large-typography-content-large-tracking) |
| `typography-content-supporting-bold` | fontFamily: var(--font-content-supporting-typography-content-supporting-font-family); fontSize: var(--font-content-supporting-typography-content-supporting-size); fontWeight: var(--font-content-supporting-typography-content-supporting-bold-font-weight); lineHeight: var(--font-content-supporting-typography-content-supporting-line-height); letterSpacing: var(--font-content-supporting-typography-content-supporting-tracking) |
| `typography-content-supporting-regular` | fontFamily: var(--font-content-supporting-typography-content-supporting-font-family); fontSize: var(--font-content-supporting-typography-content-supporting-size); fontWeight: var(--font-content-supporting-typography-content-supporting-regular-font-weight); lineHeight: var(--font-content-supporting-typography-content-supporting-line-height); letterSpacing: var(--font-content-supporting-typography-content-supporting-tracking) |

To compare font sizes and English or Thai line heights, open the [Playground](/playground).