Typography

What is it?

Typography in design systems encompasses the selection of typefaces, the definition of a type scale (sizes and weights for each heading level and body text), and the rules for line height, letter spacing, and maximum line length. It is the primary tool for communicating hierarchy and content structure.

Why it matters

Approximately 95% of web design is typography (Oliver Reichenstein). The way text is set determines readability, hierarchy, tone, and trust. Poor typography — illegible body text, insufficient heading contrast, inappropriate line lengths — makes content harder to parse and products feel unpolished.

Best Practices

• Limit typefaces to 2 maximum in a design system: one for headings, one for body. Mixing too many fonts creates visual chaos.
• Type scale: establish a clear hierarchy with at least 4 levels (h1–h4) and body text. Each level should differ meaningfully in size, not incrementally.
• Body text minimum size: 16px on web (mobile), 14px acceptable for dense interfaces.
• Optimal line length: 45–75 characters per line. Beyond 80 characters reduces readability.
• Line height: 1.4–1.6 for body text, 1.1–1.2 for headings.
• Letter spacing: tight for large headings, neutral for body text, slightly expanded for small caps or overlines.
• Weight hierarchy: bold (700–800) for headings, regular (400) for body, medium (500) for labels and UI text.
• Avoid using more than 3 font weights in a design system — each addition adds load time and complexity.
• Use system fonts for UI chrome (menus, buttons, tooltips) to reduce load time where brand typography is not critical.
• Test readability across devices and conditions — text readable on a calibrated designer monitor may fail on a cheap Android screen.

Common Mistakes

• Body text below 14px — difficult to read for most users, inaccessible for users with visual impairments.
• Type scale with incremental sizes (14, 15, 16, 17px) — insufficient contrast between levels.
• Lines too long — body text stretching full-width on large screens.
• Insufficient color contrast on text — common with light grey text on white backgrounds.
• Using thin font weights (300, 100) for body text — elegant but illegible.
• All text in the same weight with only size changes — creates flat, hard-to-navigate pages.

Checklist

Research & Theory

Real-World Examples