editorial-type-tokenslisted

# Editorial Type Tokens One font family across a whole interface reads as a default, not a decision. Publications and consultancies that look expensive almost always run two faces with clearly separated jobs: a display face that carries drama at large sizes, and a text face that gets out of the way at small ones. The contrast between them — serif against sans, heavy against regular, tight against open — is what creates hierarchy before the reader has read a word. Set up both faces as tokens, assign every element a role, and never let the roles blur. ## The two roles **Display face** — H1, H2, hero statements, pull quotes, editorial section titles, big KPI numbers. A high-contrast serif (Playfair Display, Fraunces, Newsreader) or a heavy display sans when serif is wrong for the brand. Heavy weight (600–700), *negative* tracking (−0.02 to −0.03em — large serifs set loose look amateurish), tight leading (1.05–1.15). Its job is to be noticed. **Body / UI face** — paragraphs, H3 and below, labels, inputs, buttons, table cells, nav, metadata rails, captions. A geometric or humanist sans that is legible at 12–18px and doesn't call attention to itself. Regular 400 for reading, 500–600 for emphasis and buttons, zero tracking at body size, generous leading (1.5–1.65). Its job is to disappear. H3 goes to the *body* face on purpose: serif sub-headings at 1.25rem look smaller than the sans text around them (serif x-heights are lower), and three levels of serif dilutes the drama of t