Common Typography Mistakes

Typography mistakes rarely announce themselves. A page can feel "off" without any single element looking wrong. This chapter catalogs the most common errors designers and developers make, with before-and-after comparisons so you can diagnose problems quickly and apply proven fixes.

Poor Hierarchy

The most widespread typography mistake is flat hierarchy — when headings, body text, and labels differ too little in size, weight, or spacing. Users cannot scan the page; everything competes for attention.

Symptoms: Headings only 2–4px larger than body. Multiple elements styled identically. No visual path from title to subtitle to content.

Fix: Create at least three distinct levels with size jumps of 1.5× or more between heading tiers. Pair size changes with weight and color shifts. A page title at 2–2.5× body size with semibold weight immediately separates from 16px body text.

Too Many Fonts

Using three, four, or five typefaces in a single project destroys cohesion. Each additional face adds cognitive load and increases page weight.

Common pattern: A display serif for headings, a sans for body, a second sans for UI, a script for accents, and a mono for code — five families where two would suffice.

Fix: Limit yourself to one sans-serif for UI and body, optionally one serif or display for marketing headings, and one monospace for code. That is three maximum. Most products need only one sans and one mono.

Bad Spacing and Rhythm

Typography is not just font choice — it is the space around and between text. Common spacing errors include:

• Line height too tight for body text (below 1.4)
• No margin between paragraphs
• Inconsistent spacing between sections
• Headings glued to the paragraph below with no top margin

Fix: Use unitless line heights between 1.5 and 1.65 for body text. Apply the spacing scale from your design system — if your base unit is 4px, paragraph gaps should be 16px (4 units), section gaps 32–48px (8–12 units).

Insufficient Contrast

Low-contrast text is an accessibility failure and a readability problem. Gray body text on slightly-less-gray backgrounds, thin weights at small sizes, and colored text without contrast checking are daily offenders.

Fix: Aim for 4.5:1 minimum contrast ratio for normal text (WCAG AA). For text below 18px regular or 14px bold, this is non-negotiable. Use a contrast checker during design, not after launch.

Line Length (Measure) Problems

Lines that are too long or too short disrupt reading rhythm. Desktop layouts stretched to full viewport width produce 120+ character lines. Mobile layouts with insufficient padding create cramped 30-character lines.

Fix: Constrain reading content to 45–75 characters per line (roughly 35–65rem at 16px). Use max-width: 65ch on article containers. Full-width layouts are fine for dashboards and data tables — but not for prose.

Uppercase Overuse

Uppercase text demands more letter spacing and reduces word-shape recognition, slowing reading speed by up to 10%. Yet it appears everywhere: navigation, buttons, labels, headings, and entire paragraphs.

Fix: Reserve uppercase for small labels (11–12px) with increased letter spacing (0.05–0.1em). Never set body paragraphs or headings above 14px in all caps. Navigation and buttons should use sentence case or title case.

Bad Font Pairing

Pairing typefaces that clash — similar but not identical, wildly different x-heights, or competing personalities — creates visual tension without purpose.

Fix: Pair typefaces that differ in classification (serif + sans, sans + mono) but share similar x-height, weight range, and tone. Test the pair at actual sizes — a pairing that works at 48px heading / 16px body may fail at 24px / 14px.

Additional Quick Fixes

Beyond the major categories above, watch for these recurring issues:

| Mistake | Fix | | --- | --- | | Centered body text | Left-align paragraphs longer than three lines | | Orphaned headings | Keep at least two lines of body with a heading | | Widows and orphans | Adjust line breaks or container width | | Inconsistent alignment | Pick left or center per section, not both | | Underlined non-links | Reserve underlines for interactive text | | Justified text on web | Use left-aligned; browser justification creates rivers | | Ignoring font loading | Use font-display: swap and size fallbacks to prevent layout shift |

Building a Review Habit

Typography quality comes from review, not inspiration. Before shipping any page:

1. Squint test — can you distinguish hierarchy levels?
2. Font audit — count distinct typefaces (target: 1–2)
3. Contrast check — every text color against its background
4. Measure check — character count per line on desktop and mobile
5. Spacing audit — consistent vertical rhythm between all text blocks
6. Uppercase scan — is every caps instance intentional?

Typography mistakes are forgiving — they rarely crash your app. But they silently erode trust, readability, and brand perception with every page view. Catch them early, fix them systematically, and your work will feel professional without trying.