Guide
Common Typography Mistakes on the Web
The most common web typography mistakes developers make: lines too wide, gray text that fails WCAG, flat heading hierarchy, wrong line height, bold everywhere, and inconsistent tokens.
These mistakes appear on otherwise well-built interfaces. They are not about choosing the wrong font — they are about measurable variables with clear fixes.
1. max-width on the page, not the text
The layout looks bounded because the hero and sidebar are constrained, but paragraphs run full width inside the column. Measure is a property of the text block.
2. Gray text that fails WCAG
#9E9E9E helper text, timestamps, and captions ship because they look fine on a calibrated display. They fail at 2.7:1 on white and slow every reader.
3. Flat heading hierarchy
h1 at 24px and body at 16px is only 1.5:1. Hierarchy requires reading instead of registering at a glance. Use a modular scale with larger jumps.
4. One line-height for everything
Tight heading line-height copied to body text, or body 1.5 never adjusted for long-form content. Multiline paragraphs need 1.5–1.65 minimum.
5. Bold as the only emphasis tool
Nav links, labels, card titles, and fake headings in divs all compete at 700. Weight stops meaning structure.
6. Dark mode as inverted light mode
Reusing light-theme gray tokens on #121212 drops contrast without visual warning. Every text token needs a dark-mode value.
Interactive lessons
Related guides
Glossary
Frequently asked questions
- What is the most common typography mistake on websites?
- Line length — body text that spans the full viewport on wide screens. It is also one of the fastest fixes: max-width: 65ch on reading containers.
- Why do typography mistakes persist in production?
- They look acceptable on the developer's monitor. Contrast and measure failures often only appear on large screens, outdoor lighting, or for low-vision users.