atelier-typographylisted

# Atelier — Typography Craft Typography is one of the two fastest ways to make a frontend look bespoke or cheap (the other is whitespace). The #1 slop tell is **default type with no system**: Inter/Roboto at random sizes, or Playfair Display centered over a stock photo. This skill picks type with intent and sets it like a typographer. > **Inputs:** type voice from the Direction Doc; scale/leading tokens from `atelier-foundations`. > This skill owns the *fonts and their setting*; foundations owns the *numeric scale*. Deep reference: > `references/fundamentals-deepdive.md` (§6 typography). --- ## The flow 1. **Roles & families** → 2. **Scale + fluid** → 3. **Tracking / leading / measure** → 4. **OpenType + variable axes** → 5. **Editorial detailing** → 6. **Kinetic (only if the world calls for it)** → 7. **Expensive-type checklist**. ## 1. Roles & families Assign **roles**, then pick families for them. Limit to **1–2 families** (3 max with mono). - **Display** — headlines; big, characterful, the brand's voice. - **Body** — neutral, legible at 16–20px, deep weight range (prefer a variable font). - **Mono** — code/data/tabular; pick one with tabular figures + slashed zero. Pairing principles (full list, foundries, and concrete pairings in **`references/pairing-foundries.md`**): - **Contrast of role, harmony of mood** — pair fonts that clearly differ (serif display + grotesque body) but share temperament. Too-similar = looks like a mistake. - **Superfamily pairing is sa