Fonts

---
name: Fonts
description: Choose and implement web typography avoiding common rendering, pairing, and hierarchy mistakes.
metadata: {"clawdbot":{"emoji":"🅰️","requires":{},"os":["linux","darwin","win32"]}}
---

## Display vs Text Fonts

- Display fonts (Abril Fatface, Bebas Neue, Lobster) are for headings 24px+ only—using them for body text destroys readability
- If a font looks decorative or has extreme thick/thin contrast, it's display—not for paragraphs
- Text fonts (Inter, Roboto, Georgia) are designed for 12-18px—use these for body copy

## Pairing Traps

- Two fonts too similar look like a mistake—if you can't tell them apart instantly, use one font
- Contrast in category works: serif heading + sans-serif body, or different weights of same family
- Two decorative fonts clash—never pair Lobster with Pacifico
- Safe pairs: same superfamily (Roboto + Roboto Slab) or proven combos (Playfair Display + Source Sans Pro)

## Weight and Rendering

- Thin weights (100-300) render poorly on Windows—avoid for body text, use 400+ for cross-platform
- Light fonts on dark backgrounds look thinner—bump weight up one level for dark mode
- Faux bold (browser-generated) looks wrong—only use weights the font actually includes
- Check font has italic—faux italic (slanted roman) is noticeably worse than true italic

## Line Height and Length

- Body text needs 1.4-1.6 line-height—1.0 or 1.2 makes paragraphs unreadable walls
- Headings need tighter line-height (1.1-1.3)—large text with 1.5 line-height has awkward gaps
- Line length 45-75 characters max—wider than 75 chars causes readers to lose their place
- Set `max-width` on text containers in ch units: `max-width: 65ch`

## All Caps

- ALL CAPS needs increased letter-spacing—without it, letters collide and look cramped
- `text-transform: uppercase` + `letter-spacing: 0.05em` minimum
- Never use all caps for more than a few words—extended caps text is significantly harder to read
- Small caps (`font-variant: small-caps`) only if font supports it—faux small caps look amateurish

## Widows and Orphans

- Single word alone on last line of paragraph looks broken—adjust text or container width
- `text-wrap: balance` (CSS) distributes lines more evenly in headings
- `text-wrap: pretty` for body text—prevents orphans in browsers that support it
- Manual fix: non-breaking space (` `) between last two words

## Loading and Performance

- `font-display: swap` prevents invisible text—without it, text is blank until font loads
- Subset fonts to characters you need—Latin-only saves 60%+ over full Unicode
- WOFF2 is the only format you need—universal support, best compression
- Preload critical fonts: `<link rel="preload" href="font.woff2" as="font" crossorigin>`

## System Font Stack

```css
font-family: system-ui, -apple-system, BlinkMacSystemFont, 
  'Segoe UI', Roboto, sans-serif;
```
- Zero load time, native look per platform—use for UI-heavy apps
- `system-ui` is now widely supported—simpler than listing all fallbacks
- Always end with generic fallback (`sans-serif`, `serif`, `monospace`)

## Hierarchy Mistakes

- Using too many font sizes—stick to a type scale (1.25 or 1.333 ratio), not random sizes
- Headings not distinct enough from body—skip at least one scale step between h1 and body
- Overusing bold—if everything is emphasized, nothing is emphasized
- Color as only differentiator—size and weight should establish hierarchy before color