Design System · Typography
type scale
Font Size
xs
0.75rem / 12px
The quick brown fox jumps over the lazy dog.
sm
0.875rem / 14px
The quick brown fox jumps over the lazy dog.
base
1rem / 16px
The quick brown fox jumps over the lazy dog.
lg
1.125rem / 18px
The quick brown fox jumps.
xl
1.25rem / 20px
The quick brown fox.
2xl
1.5rem / 24px
The quick brown.
4xl
2.25rem / 36px
Type.
line-height
Leading
Tight leading compresses vertical rhythm. Useful for large display headings where extra space between lines feels loose. Keep it short.
Normal leading works well for body text. It gives each line room to breathe without pushing lines so far apart that the eye struggles to track back to the start of the next line.
Loose leading opens up the text block considerably. Works well for small sizes or sparse UI copy where generous whitespace signals calm and clarity.
letter-spacing
Tracking
tight
-0.02em
DISPLAY HEADLINE TEXT
normal
0em
Body text tracking
wide
0.08em
Label text
ultra
0.2em
CAPS TAG
font family
Monospace Specimen
AaBbCcDdEeFfGgHhIiJjKkLlMm
NnOoPpQqRrSsTtUuVvWwXxYyZz
0 1 2 3 4 5 6 7 8 9
! @ # $ % ^ & * ( ) - _ = + [ ] { } | ; : ' " , . < > / ?