<Text>
and <Heading>
components to render titles and body copy.
size
and weight
props and map to the underlying type system to ensure consistent typography throughout your app.
Type scale
The typographic system is based on a 9-step size scale.Aa
1
Aa
2
Aa
3
Aa
4
Aa
5
Aa
6
Aa
7
Aa
8
Aa
9
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.Available weights
Light
Regular
Medium
Bold
Weight | Default value |
---|---|
Light | 300 |
Regular | 400 |
Medium | 500 |
Bold | 700 |
Font family
By default, Propel 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' |
Customization
Propel 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 Propel 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:With next/font
To load custom fonts via next/font, use thevariable
option to define a CSS variable name. Then, add that CSS variable class to your HTML document.