File: typography.md | Updated: 11/15/2025
ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors
Getting started Styling Layout Releases Resources
Overview Color Dark mode Typography Spacing Breakpoints Radius Shadows Cursors
Box Flex Grid Container Section
Text Heading Blockquote Code Em Kbd Link Quote Strong
Alert Dialog Aspect Ratio Avatar Badge Button Callout Card Checkbox Checkbox Group Checkbox Cards Context Menu Data List Dialog Dropdown Menu Hover Card Icon Button Inset Popover Progress Radio Radio Group Radio Cards Scroll Area Segmented Control Select Separator Skeleton Slider Spinner Switch Table Tabs Tab Nav Text Area Text Field Tooltip
Accessible Icon Portal Reset Slot Theme Visually Hidden
Guides
Guidance for using and tuning typography.
Use Text
and 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.
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.
<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>
Compose formatting components to add emphasis , signal importance , present code and more.
The most important thing to remember is, stay positive.
<Text>
The <Em>most</Em> important thing to remember is,{" "}
<Strong>stay positive</Strong>.
</Text>
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
The quick brown fox jumps over the lazy dog.
<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 |
The following weights are supported. Weights can be customized to map to your own typeface.
LightRegularMediumBold
<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 |
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 |
Radix Themes typography can be customized by overriding the corresponding CSS variables of the token system. Refer to the source code 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.
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:
.radix-themes {
--default-font-family: /* Your custom default font */ --heading-font-family:
/* Your custom font for <Heading> components */ --code-font-family:
/* Your custom font for <Code> components */ --strong-font-family:
/* Your custom font for <Strong> components */ --em-font-family:
/* Your custom font for <Em> components */ --quote-font-family:
/* Your custom font for <Quote> components */;
}
To load custom fonts via next/font
, use the variable
option to define a CSS variable name. Then, add that CSS variable class to your HTML document.
import { Inter } from "next/font/google";
const inter = Inter({
subsets: ["latin"],
display: "swap",
variable: "--font-inter",
});
export default function RootLayout({ children }) {
return (
<html lang="en" className={inter.variable}>
<body>{children}</body>
</html>
);
}
Finally, assign the CSS variable in your custom CSS:
.radix-themes {
--default-font-family: var(--font-inter);
}
Be aware that you may encounter css import order issues if you are running the app router. See common styling issues for more information.
To customize the exact font weights used in your theme, remap the corresponding font-weight tokens to your own values:
.radix-themes {
--font-weight-light: 200;
--font-weight-regular: 300;
--font-weight-medium: 600;
--font-weight-bold: 800;
}
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:
.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;
}
PreviousDark mode
NextSpacing