typography

Typography

Research-grounded decisions for every surface where humans read text. The philosophy: the browser renders semantic HTML correctly; every typographic decision on top of that is a bet. This skill records the bets worth making — each grounded in research — and the ones to skip.

The iA Writer principle applies: fewer decisions, made well, applied consistently.

---

Modes

Generative — New Project

When starting a new page, component, or document:

1. Establish tokens first. Generate a typography token file (section 6) before writing any component CSS. Every size, color, and spacing value should reference a token.
2. Detect language. If the project serves Japanese content, apply the Japanese overrides (section 3) from the start — not as a retrofit.
3. Set the reading container. Every text-bearing surface gets a max-width constraint. No exceptions.
4. Ship both color schemes. Default to prefers-color-scheme. Never force one mode.
5. Verify mobile. Viewport meta tag, fluid font sizes via clamp(), touch targets ≥ 44px.
6. Reader controls. For reading-focused interfaces, provide user-facing font size control (e.g., 3 steps: small/default/large via a --fs-scale CSS variable multiplier). For Japanese content, offer horizontal/vertical mode toggle with per-content persistence.
7. Write the project ledger. Create TYPOGRAPHY.md in the project root (see section 7).

Review — Existing Project

When auditing existing CSS, HTML, or rendered output:

1. Line length — is body text constrained to 45–80 CPL (Latin) or 30–40 CPL (Japanese)?
2. Font size — is body ≥ 16px on mobile, ≥ 18px on desktop?
3. Line height — is body ≥ 1.5 (Latin) or ≥ 1.65 (Japanese)?
4. Contrast — does body text meet 4.5:1 minimum? Compute from actual hex values.
5. Dark mode — is #000 background or #fff text present? Both are violations.
6. Japanese — is lang="ja" declared? Is line-break: strict set? Is font-style: italic absent?
7. Type scale — are there more than 6 distinct sizes? Is the ratio consistent?
8. Mobile — viewport meta present? Touch targets ≥ 44px?
9. Prohibitions — scan for every item in section 4.
10. Vertical text — if Japanese content uses writing-mode: vertical-rl: is text-align set to start (not justify)? Is column height capped (~22em)? Is width: max-content set? Is overflow-x: hidden absent from body?
11. Reader controls — for reading interfaces: is font size adjustable? For Japanese: is writing mode toggleable with persistence?
12. Write the project ledger. Create or update TYPOGRAPHY.md in the project root (see section 7).