Text and Heading components for 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.
Radix Primitives · all subjects
typography
10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Formatting components for emphasis and code
Compose formatting components like Em, Strong, and Code to add emphasis, signal importance, and present code within text.
Type scale: 9-step size 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.
Supported font weights
The following weights are supported in Radix Themes: light, regular, medium, and bold. Weights can be customized to map to your own typeface.
Default font family in Radix Themes
By default, Radix Themes uses a system font stack for portability and legibility.
Customizing typography with CSS variables
Radix Themes typography can be customized by overriding the corresponding CSS variables of the token system. Make sure that your CSS is applied after the Radix Themes styles so that it takes precedence.
Font family CSS variables for customization
To customize the font family used in your theme, remap the corresponding font-family tokens: --default-font-family (default font), --heading-font-family (for Heading components), --code-font-family (for Code components), --strong-font-family (for Strong components), --em-font-family (for Em components), and --quote-font-family (for Quote components).
Custom font weights CSS variables
To customize the exact font weights used in your theme, remap the corresponding font-weight tokens: --font-weight-light, --font-weight-regular, --font-weight-medium, and --font-weight-bold to your own values.
Advanced typography customization tokens
Advanced typographic features that can be customized include: font size multiplier (e.g., --heading-font-size-adjust), font style (e.g., --heading-font-style), letter spacing (e.g., --heading-letter-spacing), and leading trim (e.g., --heading-leading-trim-start and --heading-leading-trim-end).
Example: Using next/font with Radix Themes
To load custom fonts via next/font, use the variable option to define a CSS variable name, add that CSS variable class to your HTML document, and then assign the CSS variable in your custom CSS by setting --default-font-family: var(--font-inter). Be aware that you may encounter CSS import order issues if you are running the app router.