Typography
DM Sans for display, SF Pro for everything else, Menlo for numbers.
Families
Aa
Display
--font-displayDM Sans, SF Pro Display, system-uiPage titles and hero type only.
Aa
Sans
--font-sansSF Pro Text, SF Pro, -apple-system, system-uiEverything else: UI, body, labels.
Aa
Mono
--font-monoSF Mono, Menlo, ui-monospaceCode, tokens, measurements.
DM Sans is loaded with next/font and exposed as --font-display. SF Pro and SF Mono resolve from the system on Apple platforms and fall back to the platform UI font elsewhere, so there is nothing to download for body text.
Scale
Display
DM Sans · 48–72 · 500 · −0.05emBuild it once.
Heading 1
DM Sans · 36 · 500 · −0.04emFoundations first
Heading 2
SF Pro · 24 · 600 · −0.025emComponents that compose
Heading 3
SF Pro · 20 · 600Blocks and charts
Body
SF Pro · 16 · 400 · 1.75Every surface, control, and chart pulls from the same tokens, so both themes stay in step without per-component overrides.
Small
SF Pro · 14 · 400Used inside panels, tables, and menus.
Caption
SF Pro · 12 · 400Updated 2 minutes ago
Mono
SF Mono / Menlo · 13 · tabular0123456789 96.8% --border
Usage
<h1 className="font-display text-4xl font-medium tracking-[-0.04em]">Foundations</h1>
<p className="text-base leading-7 text-muted-foreground">Supporting copy.</p>
<code className="font-mono text-[13px] tabular-nums">96.8%</code>- Do keep display type at weight 500 with tight tracking.
- Do use
tabular-numsanywhere numbers line up: tables, stats, charts. - Don't use the display face below 30px or for UI labels.
- Don't use more than two weights in one view.