Typography
Type scale, weights, and line heights for the design system. Use the Text primitive instead of raw HTML to inherit the right scale automatically.
Type scale
xs
12px
The quick brown fox
sm
14px
The quick brown fox
base
16px
The quick brown fox
lg
18px
The quick brown fox
xl
20px
The quick brown fox
2xl
24px
The quick brown fox
3xl
30px
The quick brown fox
4xl
36px
The quick brown fox
5xl
48px
The quick brown fox
Weights
normal (400)
The quick brown fox
medium (500)
The quick brown fox
semibold (600)
The quick brown fox
bold (700)
The quick brown fox
Line heights
| Token | Value | Use |
|---|---|---|
tight | 1.2 | Display headings |
snug | 1.3 | Section headings |
normal | 1.5 | Body |
relaxed | 1.625 | Long-form prose |
loose | 2 | Captions, finely-spaced lists |