Fonts

Choose and implement web typography avoiding common rendering, pairing, and hierarchy mistakes.

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