Website typography mistakes that make pages hard to read

Key takeaways

Most website typography mistakes come down to small text, too many fonts, lines that are too long and too little spacing. A business site reads well with one or two typefaces, body text of at least 16px, lines of roughly 50 to 75 characters, line spacing around 1.5 and left-aligned paragraphs.

• Body text at least 16px; never shrink it on mobile.
• One or two typefaces: one for headings, one for body.
• Lines of about 50–75 characters on desktop.
• Left-align paragraphs; centre only short headings.

What is website typography?

Website typography is the choice and arrangement of type on a page: typefaces, sizes, weights, line length, line spacing, alignment and the contrast between headings and body text. Good typography is invisible; visitors simply find the page easy to read. Poor typography makes them skim, squint or leave.

• The most common business website design mistakes

Mistake 1: body text that is too small

Body text below 16px is hard to read on phones and for older visitors. Many templates set 14px for a tidy look. Use at least 16px for body text, and let visitors zoom: blocking zoom on mobile fails WCAG's resize text criterion, which expects text to work at 200% zoom.

• Font size for mobile websites: what is readable?

Mistake 2: too many typefaces

Three or four fonts on one page look disorganised and slow the site, because each font file has to download. Use one typeface for headings and one for body text, or a single family in different weights. Each extra font should earn its place.

• Web fonts and page speed: brand type without the wait

Mistake 3: decorative fonts for body text

Script, handwritten, condensed and very thin fonts can work for a logo or a short heading. For paragraphs they slow reading. Choose a plain, well-spaced sans-serif or serif for body text, at a regular or medium weight rather than light.

Mistake 4: lines that run too long

On a wide screen, text that stretches across the full width makes it hard to find the start of the next line. Common typographic guidance is around 50 to 75 characters per line. Set a maximum width on text columns so paragraphs stay comfortable on large monitors.

• White space in web design: why empty space sells

Mistake 5: cramped line spacing

Line spacing (line height) that is too tight makes paragraphs feel dense. Around 1.5 times the font size suits body text. WCAG's text spacing criterion also expects content to still work if visitors increase spacing, so avoid fixed-height boxes that clip text.

Mistake 6: centred and justified paragraphs

Centred paragraphs give each line a different starting point, so the eye has to search for it. Full justification creates uneven gaps between words, especially on narrow mobile screens. Left-align body text and keep centring for short headings and single lines.

Mistake 7: weak heading hierarchy

If headings are barely larger than body text, or every heading is the same size, visitors cannot scan the page. Make H2s clearly larger and bolder than body text, and H3s smaller than H2s. Nielsen Norman Group's research on scanning shows people rely on headings to decide what to read.

• Visual hierarchy: guide the eye to the next step
• Too much text on your website? How to tell and what to cut

When can you break these rules?

Short marketing headlines can be centred, very large or use a display typeface. A premium brand may use a serif and generous spacing. The rules apply most strictly to body text, forms and anything a visitor must read to make a decision.

What does this look like in practice?

A pattern we see: a template sets 14px light-weight grey text across a full-width column. Moving to 17px regular-weight dark text in a narrower column makes the same words noticeably easier to read, with no change to the content.

• See client work
• Website Design & Development for UK businesses
• Colour contrast on websites: why grey text loses readers

Typography checklist

• Set body text to at least 16px.
• Use no more than two typefaces.
• Use regular or medium weight for body text.
• Limit lines to about 50–75 characters.
• Set line height around 1.5.
• Left-align paragraphs.
• Make headings clearly larger than body text.
• Allow zoom on mobile.

Next step

Open your longest page on a phone and a wide monitor and read one paragraph on each. Note what feels like effort.