web-typographylisted

# Web Typography Set type for screens, not print: **legible**, **readable**, and hierarchically clear across viewports, zoom, and font preferences. Work top-down: roles, measure, scale, loading, polish. Fit reading task, language coverage, density, and brand. ## The decision order Make these decisions in sequence; each constrains the next. 1. **Font choice** — A fast system stack is deliberate for operational UI. For brand, marketing, portfolio, or launch surfaces, start from the design-system interview and choose a display/body stance. Plan web-font loading (step 6) up front. 2. **Base size & measure** — Start around `1rem` and 45–75 characters per line; test the actual face, language, density, and viewport. 3. **Type scale** — Define a small role scale. Use a modular ratio to start, then set optical values; use fluid sizing only where the role benefits. 4. **Vertical rhythm** — Start body line-height around 1.4–1.6, tighten display roles, and verify clipping/spacing with the chosen face and scripts. 5. **Hierarchy & polish** — Use weight/size/space contrast, `text-wrap: balance` on headings, `pretty` on body where supported, OpenType features, and optical tracking. Numeric tracking recipes are starting points, not universal values. 6. **Loading & performance** — Choose `font-display`, preload only a genuinely critical known resource, prefer WOFF2, and metric-match the fallback where reflow matters. 7. **Accessibility pass** — Check contrast, zoom