Design5 min read

Typography

Create typographic systems - modular type scales, line height, letter spacing, and font pairing - that make text scannable, readable, and on-brand.

TypographyType ScaleFontsReadabilityDesign

skill: Typography category: Design tags: [Typography, Type Scale, Fonts, Readability, Design] readingTime: 5

Typography is 95% of design. Good typography is a system - a scale, a line height, a measure - not a collection of ad hoc font sizes. Establish the system first, then apply it. Web fonts add 100-400KB of payload; subset aggressively and use modern formats (woff2, variable fonts).

Workflow

Define a modular type scaleA type scale based on a mathematical ratio (Major Third: 1.25, Perfect Fourth: 1.333) creates visual harmony and eliminates arbitrary font size decisions.
Set line height and measureLine height and line length directly control readability. Too tight = crowded; too loose = disconnected. Too wide = fatiguing to read; too narrow = choppy rhythm.
Pair fonts effectivelyFont pairing creates typographic hierarchy and personality. Most products need 2 fonts maximum - one for headings, one for body - or one versatile font family.
Optimize font loadingA 400KB font file that blocks rendering increases LCP by 2-3 seconds. Aggressive subsetting, modern formats, and display: swap eliminate this.
Apply the scale consistently in codeInconsistent application of the type scale (one-off font sizes via inline styles) defeats the system. Enforce through design tokens and component APIs.

Output Format

Typography system: modular scale, line height per size, optimal measure, 2 font families, and loading optimization.

Type System:
  Scale: Major Third (×1.25) from 1rem base
  Body: 1rem / 1.6 / max 65ch
  Headings: 1.875-3rem / 1.1-1.2
  Fonts: Inter (body, 100-900) + local monospace
  Loading: preload + font-display:swap + Latin subset

Examples

Input

Output

Edge Cases & Gotchas

CLS from font swap - font-display: swap causes layout shift when the web font loads (different metrics from fallback). Mitigate with font-display: optional (no swap if > 0ms late) or size-adjust in @font-face.
Italic/bold font variants missing - If woff2 files don't include bold/italic, the browser faux-bolds (thickens strokes) - looks terrible. Always include regular, bold, and italic woff2 files or use a variable font.
Right-to-left language support - Arabic, Hebrew, and Farsi require RTL layout and different font choices. Use dir='rtl' and font-family fallbacks that include Arabic Unicode ranges.
Retina vs. regular screen rendering - Text on retina displays looks sharper - designs that look acceptable on retina may be hard to read on 1x screens. Test typography on non-retina monitors.

When to Break These Rules

Use system fonts (font-family: system-ui) for performance-critical applications - zero network cost, instant rendering, familiar to users on each platform.
Use one font family with wide weight range (Inter 100-900) instead of pairing two families - simpler loading, guaranteed visual harmony, and one less font choice to make.

Reference Files

https://typescale.com/
https://developer.chrome.com/docs/lighthouse/performance/font-display/