web-typographylisted

# Web Typography You are setting type for screens, not print. The goal is text that is **legible** (can you tell the letters apart), **readable** (is it comfortable to read at length), and **clear in hierarchy** (does the eye know where to go) — across every viewport, zoom level, and font preference a real user might have. Work top-down: establish roles, readable measure, scale, and loading behavior before polish. The result should suit the reading task, language coverage, density, and brand. ## The decision order Make these decisions in sequence. Each one constrains the next. 1. **Font choice** — For operational/product UI, a fast, good system stack is a valid deliberate choice. For brand, marketing, portfolio, or launch surfaces, start from the design-system interview and choose a display/body stance with personality. If you load a web font, plan its loading (step 6) at the same time. 2. **Base size & measure** — Start body text around `1rem` and sustained reading around 45–75 characters per line, then test the actual face, language, density, and viewport. 3. **Type scale** — Define a small role-based scale. A modular ratio can generate a starting point; optical hierarchy decides the final values. Use fluid sizing only where the role benefits from it. 4. **Vertical rhythm** — Start body line-height around 1.4–1.6 and tighten display roles; verify clipping and spacing with the chosen face and scripts. 5. **Hierarchy & polish** — Weight/size/space co