Typography

Two font roles: a serif display font for headings and a monospace font for all UI chrome. Both adapt with the OS font stack.

Display font — headings

Large sizes (5xl–8xl) paired with --line-height-display (1.05) and --letter-spacing-display-tight (-0.04em) for marketing and landing headlines.

5xl · 32pxvar(--font-size-5xl)

Ship faster

6xl · 40pxvar(--font-size-6xl)

Ship faster

7xl · 56pxvar(--font-size-7xl)

Ship faster

8xl · 72pxvar(--font-size-8xl)

Ship faster

Tokens that keep dense display copy readable at large sizes.

line-height-display

1.05

var(--line-height-display)

letter-spacing-display

-0.03em

var(--letter-spacing-display)

letter-spacing-display-tight

-0.04em

var(--letter-spacing-display-tight)

2xs · 10pxThe quick brown fox jumps over the lazy dog

xs · 11pxThe quick brown fox jumps over the lazy dog

sm · 12pxThe quick brown fox jumps over the lazy dog

md · 13pxThe quick brown fox jumps over the lazy dog

lg · 14pxThe quick brown fox jumps over the lazy dog

xl · 16pxThe quick brown fox jumps over the lazy dog

2xl · 18pxThe quick brown fox jumps over the lazy dog

3xl · 20pxThe quick brown fox jumps over the lazy dog

4xl · 24pxThe quick brown fox jumps over the lazy dog

--font-display"New York", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", Georgia, serif

--font-mono"Berkeley Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", "Menlo", ui-monospace, "Courier New", monospace

--font-basevar(--font-mono)

--font-sans-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif