Typography Mistakes To Avoid

Using Too Many Fonts

Using three or more different font families on a single website is one of the most common typography mistakes. It creates visual noise, makes the brand feel inconsistent, and forces the eye to work harder to process the page.

Most websites need two fonts at most — one for headings and one for body text. Many excellent websites use a single font family at different weights and sizes. If you find yourself reaching for a third font, ask whether the problem could be solved with a different weight or size of an existing font.

The fix: Audit your current font usage. Identify every font in use across your website and materials. Reduce to two fonts or fewer, applied consistently.

Body Text That Is Too Small

Text smaller than 16px is difficult to read on screens, particularly on mobile devices. This is one of the most common mistakes on small business websites, often because website templates default to smaller text sizes that look fine on a large desktop monitor but fail on a phone.

The temptation to use small text to fit more content on a page is understandable, but it is counterproductive. Readable text that visitors actually read is more valuable than dense text that they skip.

The fix: Set body text to a minimum of 16px. Many designers now use 17px or 18px as a default for content-heavy pages. Check your website on a mobile device to confirm text is comfortable to read.

Poor Spacing

Spacing problems come in several forms, and all of them make text harder to read.

Line height that is too tight

When lines of text are too close together, the eye struggles to track from the end of one line to the beginning of the next. A line height of 1.5 to 1.7 times the font size is comfortable for most body text. If your body text is 16px, a line height of 24px to 27px is a good starting point.

Paragraphs without clear separation

Paragraphs that run together without adequate space between them make content feel dense and difficult to scan. Add space below each paragraph equal to roughly one line of text.

Lines that are too long

Very long lines of text are harder to read because the eye has to travel further across the page and then find the beginning of the next line. A comfortable line length is roughly 60 to 80 characters. On wide screens, this often means constraining the content column width rather than letting text stretch across the full page.

The fix: Set line height to 1.5 to 1.7 for body text. Add paragraph spacing. Constrain content column width on wide screens.

Weak Hierarchy

Hierarchy is what allows visitors to scan a page and understand its structure before reading a word. When heading sizes are too close to body text size, or when multiple heading levels look nearly identical, the hierarchy breaks down.

A visitor should be able to look at your page and immediately identify the main heading, section headings, and body text. If everything looks the same size and weight, nothing stands out.

The fix: Ensure your main heading is noticeably larger than section headings, which are noticeably larger than body text. Use weight differences to reinforce size differences. A common approach: H1 at 2–2.5rem, H2 at 1.4–1.6rem, H3 at 1.1–1.2rem, body at 1rem.

Alignment Issues

Inconsistent text alignment creates visual disorder. The most common alignment mistake is mixing centred and left-aligned text without a clear reason for the difference.

When to use left alignment

Left alignment is the default for body text in left-to-right languages. It is the most readable alignment for paragraphs because the consistent left edge gives the eye a clear starting point for each line.

When centred alignment works

Centred alignment works for short, isolated text elements — a hero headline, a pull quote, a call-to-action button label. It does not work for body text or multi-line passages because the ragged left edge makes it difficult to track from line to line.

Justified text on the web

Justified text — where both left and right edges are aligned — can create uneven spacing between words on screens, particularly on narrow columns. It is generally not recommended for web body text without careful hyphenation settings.

The fix: Use left alignment for all body text. Reserve centred alignment for short, isolated display text. Be consistent.

Low Contrast Text

Light grey text on white backgrounds is the most common contrast failure on small business websites. It looks refined and subtle in design software but fails for many users in real-world conditions — particularly on mobile screens in bright light, or for people with visual impairments.

WCAG accessibility standards require a contrast ratio of at least 4.5:1 for normal body text. A grey like #999999 on white (#ffffff) has a contrast ratio of only 2.85:1 — well below the minimum. A grey like #595959 on white has a ratio of 7.0:1, which passes comfortably.

The fix: Use a contrast checker to verify your text colours. For body text on white, use #595959 or darker. Never rely on visual judgment alone — what looks fine on a high-quality monitor may fail for many users. See Colour Contrast Explained for more.

Decorative Fonts For Body Text

Script, handwritten, and highly decorative fonts can work well for logos, headings, and short display text. They are not appropriate for body text because they sacrifice readability for visual interest.

At body text sizes, the decorative details that make these fonts distinctive become difficult to distinguish. Letters that look elegant at 48px become hard to read at 16px.

The fix: Reserve decorative fonts for headings and short display text only. Use a clean, readable font for all body text.

All-Caps Body Text

All-caps text is appropriate for short labels, buttons, section markers, and navigation items. It is very difficult to read in paragraphs.

The reason is that capital letters all have the same height. In mixed-case text, the varying heights of letters — the ascenders on letters like “h” and “d”, the descenders on letters like “p” and “g” — create a distinctive shape for each word that helps readers recognize words quickly. All-caps text removes these visual cues.

The fix: Use all-caps only for short labels and interface elements. Never use it for body text or multi-line passages.

Accessibility Concerns

Typography mistakes are not just aesthetic problems. Many of them directly affect whether people can use your website.

• Text that is too small is inaccessible to people with visual impairments.
• Low contrast text fails WCAG standards and is inaccessible to many users.
• Decorative fonts can be difficult or impossible to read for people with dyslexia.
• Inconsistent heading hierarchy confuses screen readers and makes navigation difficult for people who rely on them.
• Thin font weights are difficult to read in low-contrast situations and on mobile screens.

Fixing typography mistakes is not just about aesthetics — it is about making your content accessible to everyone. Use the Accessibility Auditor™ to check your contrast ratios.