> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

# Typography

Guidance for using and tuning typography.

## Base components

Use [Text](/themes/docs/components/text) and [Heading](/themes/docs/components/heading) components to render titles and body copy. These components share `size` and `weight` props and map to the underlying type system to ensure consistent typography throughout your app.

```jsx
<>

<Heading mb="2" size="4">Typographic principles</Heading>

<Text>The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.</Text>

</>;
```

## Formatting components

Compose formatting components to add [emphasis](/themes/docs/components/em), [signal importance](/themes/docs/components/strong), present [code](/themes/docs/components/code) and more.

```jsx
<Text>

	The <Em>most</Em> important thing to remember is,{" "}

	<Strong>stay positive</Strong>.

</Text>
```

## Type scale

The typographic system is based on a 9-step `size` scale. Every step has a corresponding font size, line height and letter spacing value which are all designed to be used in combination.

Aa

1

Aa

2

Aa

3

Aa

4

Aa

5

Aa

6

Aa

7

Aa

8

Aa

9

```jsx
<Text size="6">The quick brown fox jumps over the lazy dog.</Text>
```

| Step | Size   | Letter spacing | Line height |
| ---- | ------ | -------------- | ----------- |
| 1    | `12px` | `0.0025em`     | `16px`      |
| 2    | `14px` | `0em`          | `20px`      |
| 3    | `16px` | `0em`          | `24px`      |
| 4    | `18px` | `-0.0025em`    | `26px`      |
| 5    | `20px` | `-0.005em`     | `28px`      |
| 6    | `24px` | `-0.00625em`   | `30px`      |
| 7    | `28px` | `-0.0075em`    | `36px`      |
| 8    | `35px` | `-0.01em`      | `40px`      |
| 9    | `60px` | `-0.025em`     | `60px`      |

## Font weight

The following weights are supported. Weights can be [customized](/themes/docs/theme/typography#custom-font-weights) to map to your own typeface.

```jsx
<Text size="6">

	<Flex direction="column">

		<Text weight="light">Light</Text>

		<Text weight="regular">Regular</Text>

		<Text weight="medium">Medium</Text>

		<Text weight="bold">Bold</Text>

	</Flex>

</Text>
```

| Weight  | Default value |
| ------- | ------------- |
| Light   | `300`         |
| Regular | `400`         |
| Medium  | `500`         |
| Bold    | `700`         |

## Font family

By default, Radix Themes uses a system font stack for portability and legibility. Continue to the next section to learn about customizing your theme with a custom font.

| Type     | Default value                                                                                                                                                          |
| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Text     | `-apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'` |
| Code     | `'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji'`                                                           |
| Emphasis | `'Times New Roman', 'Times', serif`                                                                                                                                    |
| Quote    | `'Times New Roman', 'Times', serif`                                                                                                                                    |

## Customization

Radix Themes typography can be customized by overriding the corresponding CSS variables of the token system. Refer to the [source code](https://github.com/radix-ui/themes/blob/main/packages/radix-ui-themes/src/styles/tokens/typography.css) for the full list of the typographic tokens.

Make sure that your CSS is applied after the Radix Themes styles so that it takes precedence.

### Custom fonts

You can provide your own fonts, however, how you choose to import and serve them is up to you. It is only required that you specify your named fonts using the correct syntax.

To customize the font family used in your theme, remap the corresponding `font-family` tokens:

```css
.radix-themes {

	--default-font-family: ui-sans-serif, system-ui, sans-serif;

	--heading-font-family: var(--default-font-family);

	--code-font-family: ui-monospace, monospace;

	--strong-font-family: var(--default-font-family);

	--em-font-family: var(--default-font-family);

	--quote-font-family: var(--default-font-family);

}
```

### Loading fonts with CSS

Use a stylesheet or `@font-face`; no React or Next.js font loader is needed. For example, load Inter from Google Fonts in your application's global stylesheet:

```css
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");



:root {

	--font-inter: "Inter", sans-serif;

}
```

Finally, assign the CSS variable in your custom CSS:

```css
.radix-themes {

	--default-font-family: var(--font-inter);

}
```

Import your font stylesheet before local token overrides. See [common styling issues](/themes/docs/overview/styling) for CSS import-order guidance.

### Custom font weights

To customize the exact font weights used in your theme, remap the corresponding `font-weight` tokens to your own values:

```css
.radix-themes {

	--font-weight-light: 200;

	--font-weight-regular: 300;

	--font-weight-medium: 600;

	--font-weight-bold: 800;

}
```

### Advanced settings

There’s a number of advanced typographic features that can be customized. These include a font size multiplier for certain components, font style, letter spacing, and leading trim. For example, you can customize the headings to render with a relatively larger font size than your default font, different leading trim values, and tighter letter spacing:

```css
.radix-themes {

	--heading-font-family: "Untitled Sans", sans-serif;

	--heading-font-size-adjust: 1.05;

	--heading-font-style: normal;

	--heading-leading-trim-start: 0.42em;

	--heading-leading-trim-end: 0.38em;

	--heading-letter-spacing: -0.01em;

}
```