Typography tokens
Primitive families and a modular scale resolve into semantic roles. Components reference roles, never raw sizes.
Primitives — type scale
| Token | Value | Preview |
|---|---|---|
--step-5 | clamp(2.7rem, 4.6vw, 3.7rem) | Legacy |
--step-4 | clamp(2.4rem, 4.6vw, 3.6rem) | Legacy |
--step-3 | 2.4rem | Legacy |
--step-2 | 1.9rem | Legacy |
--step-1 | 1.42rem | Legacy |
--step-0 | 1.0625rem | Legacy |
--step--1 | 0.78rem | Legacy |
Semantics — roles
| Role | Family | Size · weight |
|---|---|---|
font-display | Cormorant Garamond | --step-5 · 700 |
font-heading | Cormorant Garamond | --step-4 / 3 · 700 |
font-body | Newsreader | --step-0 · 400 · lh 1.65 |
font-text (long-form) | Newsreader | --step-0 · 400 · lh 1.8 |
font-lead | Newsreader | --step-1 · 400 · lh 1.55 |
font-eyebrow | Newsreader | --step--1 · 600 · 0.26em |
font-quote | Cormorant Garamond italic | 1.22rem · 600 |
One serif for reading: Newsreader.
--font-body and --font-text resolve to the same family — Newsreader, an optical-size text serif designed for sustained on-screen reading. Body sets it at --step-0/lh 1.65; long-form bumps the leading to 1.8. Cormorant Garamond carries headlines and metrics. Defined in src/styles/ds/brand.css.