Type
Type
The typefaces, and where each one is used. Four faces, no more. Part of the shared SoR design system, used by the experiences and the website. Experience-only notes live in common.md. How the faces were chosen, and everything rejected: type/research-notes.md.
The faces
Tokens in system/tokens.css; specimens and scale in guide.html.
| Role | Token | Face | Used for |
|---|---|---|---|
| Display | --font-display | Polyamine | Every headline and title up to ~10 words: hero, page titles, section headlines, card and list titles, wordmark |
| Quote | --font-quote | Restora | Display text past ~10 words: pull quotes (.pull), standout passages, long titles |
| Body | --font-body | Bricolage Grotesque | All reading; light (300) for statement paragraphs |
| Label | --font-label | Apfel Grotezk | Eyebrows, buttons, dates, captions, credits, figure numbers: 11–14px, uppercase, tracked .1–.16em |
| Poem | --font-poem | Restora italic | Dedications, a line set alone, one emphasised sentence |
The rule: length decides
Polyamine for almost all display. Heroes, big titles, section headlines, card titles: if it is display text under about ten words, it is Polyamine.
Restora beyond that. Polyamine is not readable at length, so once display text runs past about ten words it moves to Restora: pull quotes, a bigger passage that should come through, a long title. The poetic italic is Restora too, not a fifth face.
Bricolage for reading. Apfel Grotezk for small uppercase labels.
Papers and other print follow their own type table: print.md.
Scale
| Token | Size (px) |
|---|---|
--t-hero | 40–96 |
--t-title | 40–84 |
--t-section | 36–64 |
--t-card | 24–32 |
--t-quote | 26–38 |
--t-lead | 20–28 |
--t-reading | 19 |
--t-body | 17 |
--t-caption | 14 |
--t-label | 12 |
Fallbacks and licences
Bricolage Grotesque and Apfel Grotezk are free (SIL OFL). Apfel Grotezk (Regular, Mittel, Fett) is embedded in system/fonts.css, so it loads anywhere.
Polyamine and Restora are commercial and not yet licensed. Pages name them and they show only where installed; everyone else sees Fraunces (then Georgia) for display, quotes and the poetic italic. Fraunces is only the fallback, never a face of its own. If Apfel Grotezk fails to load, labels fall back to Hanken Grotesk.
Using them
- Polyamine is a face for a statement, not a sentence. It has a single weight, so it does not step down: keep it at card-title size or larger.
- Restora has eight weights, thin to black, with matching italics. Build hierarchy from size and weight within Restora; there is no separate subheading face.
- Bricolage: no bold, no italic. Emphasis comes from rhythm and space.
- Apfel Grotezk covers the small interface chrome: section labels, eyebrows above headings, captions, credits, invitation lines.
Decisions: planning 2608 · decision log