Fonts

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