oborchers/typography

Typography Is the Foundation — Get It Right and Everything Else Follows

Typography accounts for 95% of web design (Oliver Reichenstein, iA). A correct type system makes every page look intentional. A broken one makes every page look amateur — regardless of color, imagery, or layout.

The 2-3 Font Family Maximum

Limit every project to 2-3 font families maximum. More than three creates visual noise and increases page weight.

Pairing strategy — contrast, not similarity:

| Pairing Type | Heading | Body | Example | |-------------|---------|------|---------| | Serif + Sans-serif | Playfair Display | Inter | Editorial, marketing | | Geometric + Humanist | Poppins | Source Sans Pro | SaaS, dashboards | | Monospace + Sans-serif | JetBrains Mono | Inter | Developer tools | | Single family | Inter (bold) | Inter (regular) | Minimal, utilitarian |

The single-family approach (one typeface, varied weights) is the safest choice for applications. It guarantees harmony and reduces load time.

Modular Type Scale

Define font sizes using a mathematical ratio, not arbitrary values. Multiply the base size by the ratio for each step.

Base size: 16px (1rem). Never go below 16px for body text on screens.

| Scale Name | Ratio | Sizes from 16px base | |-----------|-------|----------------------| | Minor Third | 1.200 | 16 / 19.2 / 23.0 / 27.6 / 33.2 | | Major Third | 1.250 | 16 / 20 / 25 / 31.3 / 39.1 | | Perfect Fourth | 1.333 | 16 / 21.3 / 28.4 / 37.9 / 50.5 | | Golden Ratio | 1.618 | 16 / 25.9 / 41.9 / 67.8 / — |

Selection guide: Use Minor Third for dense UIs (dashboards, admin panels). Use Major Third or Perfect Fourth for content-heavy pages. Use Golden Ratio sparingly — only for dramatic editorial layouts.

Line Height Rules

| Context | Line Height | Reason | |---------|-------------|--------| | Body text | 1.4–1.6 | Optimal readability per Bringhurst | | Headings | 1.1–1.3 | Tighter to maintain visual weight | | ALL CAPS text | 1.0–1.2 | Caps are uniform height; needs less leading | | Small/caption text | 1.5–1.7 | Smaller text needs proportionally more space |

Add letter-spacing: 0.05em–0.1em to ALL CAPS text to compensate for reduced legibility.

Line Length (Measure)

Optimal: 45–75 characters per line. The ideal is 66 characters (Bringhurst). Lines shorter than 45 characters cause excessive eye jumps. Lines longer than 75 characters cause readers to lose their place.

Implementation: Set max-width: 65ch on text containers. The ch unit is based on the width of the "0" character, making it font-aware.

Responsive Typography with clamp()

Replace media-query-based font scaling with clamp() for fluid sizing between breakpoints.

Formula: clamp(min, preferred, max) where preferred uses viewport units.

| Element | clamp() Value | |---------|----------------| | Body | clamp(1rem, 0.95rem + 0.25vw, 1.125rem) | | H3 | clamp(1.25rem, 1rem + 1vw, 1.75rem) | | H2 | clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem) | | H1 | clamp(2rem, 1.5rem + 2vw, 3.5rem) | | Display | clamp(2.5rem, 2rem + 3vw, 5rem) |

Web Font Loading

Optimize font delivery to prevent layout shift and invisible text:

1. Use WOFF2 format — 30% smaller than WOFF, supported by all modern browsers
2. Set font-display: swap — show fallback text immediately, swap when font loads
3. Preload critical fonts — <link rel="preload" as="font" type="font/woff2" crossorigin>
4. Subset fonts — strip unused glyphs for languages you do not support
5. Limit weights — load only the weights you use (typically 400, 500, 600, 700)

Anti-Patterns

| Anti-Pattern | Why It Fails | Fix | |-------------|-------------|-----| | More than 3 font families | Visual noise, slow load times | Limit to 2-3; prefer single-family with weight variation | | No type scale (arbitrary sizes) | Inconsistent hierarchy; sizes feel random | Adopt a modular scale ratio | | Body text below 16px | Unreadable on mobile; fails accessibility | Minimum 16px (1rem) for body | | Thin font weights (100-200) at small sizes | Disappears on low-DPI screens | Use 400+ for body, 300 minimum at 18px+ | | Line length exceeding 75 characters | Readers lose their place between lines | Set max-width: 65ch on text containers | | No font-display strategy | Flash of invisible text (FOIT) | Always set font-display: swap |

Cross-Media Notes

• Presentations: Use 40px+ for headlines, 24px+ for body. Limit to 6-8 lines per slide. Sans-serif fonts project better on screens.
• CVs/Resumes: Use 10-12pt for body text, 14-16pt for section headings. Stick to widely available fonts (system fonts or Google Fonts) to avoid rendering issues.
• Print documents: Body at 10-12pt, line height 1.4-1.5. Serif fonts (Georgia, Garamond) are more legible in print than on screen.

Examples

Working implementations in examples/:

• examples/type-scale-and-pairing.md — Complete modular type scale in CSS custom properties, Tailwind configuration, and React heading component with responsive sizing

Review Checklist

When reviewing or building typographic systems:

• [ ] Maximum 2-3 font families used across the entire project
• [ ] Font pairing uses contrast principle (serif+sans, geometric+humanist)
• [ ] Type scale follows a mathematical ratio (Minor Third, Major Third, or Perfect Fourth)
• [ ] Body text is at minimum 16px (1rem)
• [ ] Line height is 1.4-1.6 for body text, 1.1-1.3 for headings
• [ ] Line length constrained to 45-75 characters (max-width: 65ch or equivalent)
• [ ] ALL CAPS text has increased letter-spacing (0.05em-0.1em)
• [ ] Responsive typography uses clamp() instead of breakpoint-only scaling
• [ ] Web fonts use WOFF2 format with font-display: swap
• [ ] Critical fonts preloaded in <head>
• [ ] No thin font weights (100-200) used below 18px
• [ ] Heading hierarchy is visually distinct at every level (no ambiguous sizes)