Common Typography Mistakes That Hurt Your Website

Every few months I audit a site that looks great in the design file and feels tiring in the browser. The fonts are well chosen, the colors are on-brand, and the layout is clean. Then you open it on a phone and the body text is 14px light gray, the headings wrap into awkward single-word lines, the page jumps when the web font finally loads, and zooming to 200% makes the navigation overlap the content. None of these are dramatic failures. Together they make the site harder to use than it should be.

This article lists the typography mistakes I see most often on real websites, explains why each one hurts, and gives you the specific CSS or workflow fix. Use it as a checklist for your next audit.

Why Small Typography Mistakes Add Up

Typography problems rarely break a site outright. They add friction: a little more effort to read, a little less trust, a little more chance the visitor leaves. Because text is most of the web, that friction applies on every page. Fixing a handful of systemic mistakes in your base styles improves the entire site at once.

Here is a quick overview of the mistakes covered below and their impact.

Mistake	Main impact	Who it hurts most
Body text too small	Fatigue, zooming, bouncing	Mobile users, older readers
Low contrast text	Illegibility, WCAG failure	Low vision, bright-light users
Lines too long or too short	Lost place, choppy reading	Desktop readers, long content
Cramped line height	Lines blur together	Everyone, especially dyslexic users
Too many fonts and weights	Slow loading, inconsistency	Users on slow connections
Weak hierarchy	Hard to scan	Skimmers, search visitors
Justified text	Rivers and uneven spacing	Dyslexic readers, mobile users
Overused all caps	Slower reading	Everyone
Pixel-locked sizes	Breaks zoom and user settings	Low vision users
Poor font loading	Invisible text, layout shift	Users on slow networks

Readability Mistakes

The first four mistakes make text physically harder to read, and they are the ones users feel immediately.

Mistake 1: Body Text That Is Too Small

Designs created on large monitors often specify 14px or 15px body text. On a phone, that becomes uncomfortable, and users either zoom or leave.

Fix: Use at least 16px for body text, which is the browser default. Content-heavy sites usually benefit from 17–20px. Express sizes in rem so they respect user settings.

html {
  font-size: 100%; /* do not set 62.5% or a fixed px value */
}

body {
  font-size: 1.0625rem; /* 17px at default settings */
}

Our guide to the best font size for body text covers sizing by content type in depth.

Mistake 2: Low-Contrast Text

Light gray text on white looks refined in a mockup and fails in real conditions. WCAG 1.4.3 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Common offenders include #999999 on white (about 2.8:1) and placeholder text used as labels.

Fix: Check every text color against its background. Use darker grays for secondary text:

:root {
  --text-primary: #1f2328;   /* about 15.8:1 on white */
  --text-secondary: #57606a; /* about 6.4:1 on white */
  --text-muted: #6e7781;     /* about 4.6:1 on white, use sparingly */
}

Remember that text on images, buttons, and colored backgrounds needs checking too.

Mistake 3: Lines That Are Too Long

Full-width paragraphs on a desktop monitor can run 150 characters or more. Readers lose their place when jumping back to the start of the next line.

Fix: Cap text containers at about 45–75 characters using ch:

.prose {
  max-width: 68ch;
}

The opposite problem, very narrow columns in sidebars and cards, produces choppy reading and excessive hyphenation. Details are in our article on ideal line length.

Mistake 4: Cramped or Fixed Line Height

Browsers default to line-height: normal, which is usually around 1.2 depending on the font. That is too tight for paragraphs. Another frequent error is setting line height in pixels, which does not adjust when font size changes.

Fix: Use unitless values: about 1.5–1.7 for body text and 1.1–1.3 for headings.

body {
  line-height: 1.6;
}

:is(h1, h2, h3) {
  line-height: 1.2;
}

Structure and Style Mistakes

The next four are design-system problems: too many choices, too little contrast between levels, and alignment that fights the reader.

Mistake 5: Too Many Fonts and Weights

Three typefaces, each with four weights plus italics, can mean 20+ font files. That slows the first render, increases layout shift, and makes the design feel inconsistent.

Fix: Use one or two families. Load only the weights you use, or use a single variable font file. Audit your CSS for every font-weight and font-family declaration:

grep -rhoE "font-weight:[[:space:]]*[0-9a-z]+" src/ | sort | uniq -c | sort -rn

If that command returns nine different weights, consolidate. Our guide on how many fonts a website should use explains how to decide.

Mistake 6: Weak or Inconsistent Hierarchy

Headings that are only slightly larger than body text, or ten different heading styles across the site, make pages hard to scan.

Fix: Define a type scale with clear steps, map it to h1 through h4, and use it everywhere. Combine size with weight and spacing so each level is distinct. See how to create a typographic hierarchy for a complete process.

Also make sure visual levels match semantic levels. Choosing an h4 because it "looks right" breaks screen reader navigation.

Mistake 7: Justified Body Text

Justified text in print relies on careful hyphenation and manual adjustment. On the web, browsers stretch word spaces to fill lines, creating uneven gaps and "rivers" of white running down the paragraph, especially on narrow screens.

Fix: Use left-aligned text for body copy:

.prose p {
  text-align: start;
}

The full argument is in our post on why justified text is usually a bad idea on the web.

Mistake 8: Overusing All Caps and Centered Text

All-caps text removes the varied word shapes that help fluent readers. It works for short labels and fails for headings longer than a few words or for paragraphs. Centered text has a similar problem: every line starts in a different place, so readers have to hunt for the next line.

Fix:

• Limit uppercase to short labels, eyebrows, and buttons, and add 0.05–0.1em letter spacing.
• Write uppercase text in sentence case in the HTML and use text-transform: uppercase in CSS, so screen readers and copy-paste get normal text.
• Center only short blocks: headlines, one- or two-line intros, and CTAs. Left-align anything longer than about three lines.

Technical Mistakes

The last two live in the implementation rather than the design, which is why they often survive design reviews.

Mistake 9: Locking Text Sizes in Pixels

Setting html { font-size: 62.5%; } or using px everywhere can override the user's browser font preference. Fixed-height containers with text inside break when users zoom or increase text spacing.

Fix: Use rem for font sizes and avoid fixed heights on text containers. Test at 200% zoom (WCAG 1.4.4) and with WCAG 1.4.12 text spacing applied: line height 1.5, paragraph spacing 2em, letter spacing 0.12em, word spacing 0.16em.

/* Fragile */
.card {
  height: 180px;
  font-size: 14px;
}

/* Resilient */
.card {
  min-height: 11rem;
  font-size: 0.875rem;
}

Mistake 10: Poor Font Loading

Without care, web fonts cause invisible text during loading (FOIT) or a visible jump when the font swaps in (FOUT with layout shift). Both hurt Core Web Vitals and user experience.

Fix:

• Self-host fonts in WOFF2 format.
• Use font-display: swap or optional.
• Preload only the one or two most critical files.
• Use metric overrides such as size-adjust on the fallback font to reduce layout shift.

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body {
  font-family: "Inter", "Inter Fallback", sans-serif;
}

The override values above are illustrative; calculate them for your specific font pair with a tool such as Fontaine or Capsize, or let next/font generate them automatically in Next.js. See our guide on FOUT vs. FOIT for loading strategies.

More Mistakes Worth Checking

A few more that come up regularly in audits:

• Faux bold and italic. If you load only the regular weight, browsers synthesize bold and italic, which look smeared. Load real styles or set font-synthesis: none to spot them.
• Straight quotes and double hyphens. Use curly quotes (“ ” ‘ ’) and proper dashes (– —) in content. Most CMSs and Markdown processors can do this automatically.
• Underlines removed from body links. Color alone is not enough to identify links for many users.
• Thin weights for body text. Weights below 400 disappear on low-density screens.
• Headings with single-word last lines. Apply text-wrap: balance to headings.
• Missing lang attribute. It affects hyphenation, screen reader pronunciation, and font selection for some scripts.

A Quick Typography Audit Checklist

Run through these on any page:

1. Body text is 16px or larger and set in rem.
2. All text meets 4.5:1 contrast (3:1 for large text).
3. Body line length is 45–75 characters.
4. Body line height is 1.5 or more, unitless.
5. No more than two families and a small set of weights.
6. Headings follow a clear scale and correct semantic order.
7. Body text is left-aligned, not justified or centered.
8. Page works at 200% zoom and with WCAG text-spacing overrides.
9. Fonts are WOFF2, self-hosted or well-cached, with a sensible font-display.
10. No synthesized bold or italic.

---

Typography Mistakes FAQ

Conclusion

Most typography mistakes on the web are not about taste. They are about small, measurable settings — size, contrast, line length, line height, alignment, units, and font loading — that either support reading or get in its way. Because they live in base styles, fixing them once improves every page on the site.

Use the checklist in this article as a recurring audit. Start with contrast and size, then work through line length, spacing, hierarchy, and performance. When your typography stops creating friction, users notice the content instead of the struggle to read it.

Here are some useful references for going deeper on avoiding typography mistakes:

1. W3C: Understanding Success Criterion 1.4.4: Resize Text — why text must scale to 200% without loss of content.
2. WebAIM: Contrast Checker — a quick tool for verifying text and background combinations.
3. web.dev: Best practices for fonts — loading, subsetting, and rendering guidance for web fonts.
4. MDN Web Docs: font-synthesis — controlling synthesized bold, italic, and small caps.
5. Butterick's Practical Typography: Summary of key rules — a compact list of rules that prevent most typographic errors.