Docs Foundations
Typographystable
One family runs the whole desk: Public Sans — Franklin Gothic's UI descendant — sets headings and body alike, with hierarchy carried by weight and size (the single-family product-app move; Fraunces retired 2026-07-23). Nine styles, metrics computed from real font data and snapped to the 4px grid. Values live in tokens/typography.tokens.json.
Principles
Two voices, strict casting
Fraunces (the editor) speaks in display, h1–h3 — titles and headings only. Public Sans (the desk) does everything else: body, controls, tables, forms. Fraunces never sets body text or data; Public Sans never sets a page title.
Metrics are computed, not guessed
Line-heights and tracking come from font-metric calculation per style (e.g. display tightens to -0.0387em; the uppercase label opens to +0.0660em), then snap to the 4px grid so type never breaks vertical rhythm.
Tracking travels with the style
Type is applied via the generated .type-* utilities, which set font and letter-spacing together — the 'forgot the tracking' failure mode is structurally impossible.
Guidelines
- mustApply type styles with the generated .type-* classes (or both --type-* and --type-*-ls variables together); never set font-size directly.
- mustUse font-variant-numeric: tabular-nums on any column of digits (tables, meters, timestamps).
- musttype.label is always rendered uppercase; do not use it for sentence-case text.
- shouldAt most one display style per screen.