# Typography.

> Markdown twin of [/brand/typography](/brand/typography).

Three faces, three jobs: serif is the voice, sans is the work, mono is the
evidence. A reader should know what kind of sentence they're in before they
read it.

## The faces

- **serif** — Georgia, Cambria, "Times New Roman", Times, serif
- **sans** — -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- **mono** — ui-monospace, SFMono-Regular, Menlo, Consolas, monospace

All three are system font families: no webfonts, no licenses, no layout shift. Do not
add a webfont without amending this page first.

## The scale

| level | spec | sample |
|---|---|---|
| display | text-6xl · font-serif · wood-800 | "Display." |
| h1 | text-5xl · font-serif | "Page title" |
| h2 | text-3xl · font-serif | "Section heading" |
| h3 | text-xl · font-serif | "Subsection" |
| body | text-base · sans · wood-700 · leading-relaxed | Body text trusts the reader: contractions, concrete nouns, paragraphs that end on details. |
| caption | text-sm · wood-500 | Captions and supporting notes sit one step down in size and ink. |
| label | text-xs · font-mono · wood-400 | labels · file paths · chart annotations |

## Rules

- **Serif never does chrome.** No serif buttons, nav items, or form labels. If it functions, it's sans.
- **Mono means verifiable.** Numbers in tables, file paths, code, tokens. If a reader could check it, set it in mono.
- **Two weights are enough.** Regular and semibold. Bold-everything is the typographic equivalent of shouting.
- **Punctuation on a budget.** At most one em dash per ~500 words; the orange full stop belongs to the wordmark, not to body text.