Styling & CSS · Text
Typography
Also called: Type scale, Type hierarchy, Text styles, Font styles
Planning the font, size, weight, line height, spacing, and color of text as a whole, so content is clear, easy to read, and has an obvious order of importance.
In detail
Typography decides whether an interface looks professional. It covers: font (usually the system font stack, like San Francisco on Apple devices and Segoe UI on Windows), the size scale (body 14–16px, subheadings 18–20px, large headings 24–32px), weight (regular 400, bold 600), line height (1.5–1.8 for body text), paragraph spacing, text color (dark gray for body, light gray for secondary text), and line length (about 50–75 characters per line is comfortable for English).
The key is fewer and consistent. A product usually only needs 4–6 font sizes and 2–3 weights. Define them as one type scale and reuse it on every page, instead of picking a size on the spot each time.
When asking AI, you can give it this scale directly, or say "use Tailwind's text-sm, text-base, and text-xl scale."
Developer infoTerm ID, DOM cues, match priority
- Term ID
style-typography- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026