Render titles and body copy.
<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.
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 |
Light
Regular
Medium
Bold
Weight | Default value |
---|---|
Light | 300 |
Regular | 400 |
Medium | 500 |
Bold | 700 |
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' |
variable
option to define a CSS variable name. Then, add that CSS variable class to your HTML document.