What are the most common typography mistakes on websites?

The most common typography mistakes on websites are body text that's too small or too low in contrast, lines that run too long, line height that's too tight, and headings that barely differ from the text around them. Close behind come using too many fonts and weights, setting sizes in fixed pixels so user preferences are ignored, centring or justifying long paragraphs, and long passages in all caps. On the technical side, web fonts that load slowly or shift the layout, faked bold and italic styles, and straight quotes instead of proper punctuation are all widespread. Nearly all of these are cheap to fix with a few lines of CSS once you know to look for them.

Typography makes up most of what people see on a typical web page, so small mistakes add up to a site that feels hard to read, untrustworthy or simply unfinished. Visitors rarely say "the line height is too tight"; they just leave sooner. In this article you'll learn the mistakes that come up most often, why each one hurts readability, and the practical fix for each, grouped into readability, hierarchy, spacing and alignment, font choice and loading, and finishing details. The last section gives you a quick audit to run on your own site.

Readability Mistakes

These are the mistakes that most directly affect whether people can comfortably read your text.

Body Text That's Too Small

Small text looks neat in a design mock-up and is tiring to read on a real screen. Body text below about 16px on desktop is a common culprit, and so are captions, form help text and footers at 11px or 12px.

Fix: Use 16px as a minimum for body text, and consider 17px to 20px for long-form reading. Keep secondary text at 14px or above where people need to read it.

html {
  font-size: 100%;
}

body {
  font-size: 1.0625rem;
}

.caption,
.form-help {
  font-size: 0.875rem;
}

Low-Contrast Text

Light grey text on a white background is one of the most common accessibility failures on the web. WCAG 2.2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, which WCAG defines as at least 24px, or about 18.66px if bold.

Fix: Check every text colour against its background. For a white background, a mid-to-dark grey such as #595959 gives a ratio of about 7:1, which also passes level AAA, while #767676 is close to the 4.5:1 minimum. Lighter greys such as #999999 fail for body text.

:root {
  --text: #1f2328;
  --text-muted: #595959;
  --bg: #ffffff;
}

Lines That Are Too Long

On wide screens, a paragraph that spans the full width of the browser can run to 150 characters or more per line. Readers lose their place when moving from the end of one line to the start of the next.

Fix: Limit the width of text containers. Around 45 to 75 characters per line is the widely used guideline, and the ch unit makes this easy to express.

.prose {
  max-inline-size: 68ch;
  margin-inline: auto;
}

Line Height That's Too Tight

Browser default line height, often around 1.2 for many fonts, is too tight for paragraphs. Lines feel crowded and the eye struggles to track them.

Fix: Use a unitless line height around 1.5 to 1.7 for body text, and tighter values around 1.1 to 1.3 for large headings, where wide spacing looks disconnected. For more detail, see what line height to use.

body {
  line-height: 1.6;
}

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

Keep line height unitless. A value in px or em is calculated once and inherited as a fixed length, so nested text at a different size gets the wrong spacing.

Hierarchy Mistakes

Hierarchy tells readers what's important and how content is organised. When it's weak, pages feel flat and are hard to scan.

Headings That Don't Stand Out

A common pattern is an h2 at 18px over body text at 16px, in the same weight. The heading is technically larger but doesn't register as a heading.

Fix: Use clear steps in size, weight or both. A fixed type scale, where each level is noticeably larger than the next, makes this consistent across the site.

Too Many Sizes and Weights

The opposite problem is just as common: twenty different font sizes and five weights spread across a site, each added for a single component. Nothing feels related, and the CSS becomes hard to maintain.

Fix: Define a small type scale of six to ten sizes and a limited set of weights, usually regular and one or two bolder options. Remove values that aren't on the scale.

Using Heading Tags for Size

Choosing h4 because it happens to be the right size, or skipping from h1 to h4, breaks the document outline that screen reader users rely on to navigate.

Fix: Choose heading levels for structure, then style them with classes.

<h2 class="text-heading-sm">Delivery and returns</h2>

Spacing and Alignment Mistakes

Centred or Justified Body Text

Centred text is fine for a short headline or a two-line call to action. Across a long paragraph, each line starts in a different place, which makes reading slow. Justified text on the web, without good hyphenation, often creates uneven gaps called rivers, especially in narrow columns on phones.

Fix: Left-align (start-align) body text. If you must justify, turn on hyphenation and set the correct lang.

.prose {
  text-align: start;
}

.prose--justified {
  text-align: justify;
  hyphens: auto;
}

Paragraphs With No Space Between Them

Some resets remove all margins, and paragraphs end up running together with no visual break. Readers can't see where one idea ends and the next begins.

Fix: Add space between paragraphs, usually close to one line height, and more space above headings than below them so each heading belongs to the content it introduces.

.prose > * + * {
  margin-block-start: 1em;
}

.prose :is(h2, h3) {
  margin-block-start: 2em;
  margin-block-end: 0.5em;
}

Headings That Wrap Badly

A long heading that leaves a single word on its last line looks unbalanced, especially on mobile.

Fix: Use text-wrap: balance on headings and text-wrap: pretty on paragraphs. Browsers that don't support them simply use normal wrapping.

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

Font Choice and Loading Mistakes

Too Many Typefaces

Using three or four different typefaces on one page usually makes it feel disjointed, and each one adds download weight.

Fix: One typeface is often enough, used in a few weights. Two can work well when they have clearly different roles, such as a serif for headings and a sans-serif for body text.

Decorative Fonts for Body Text

Script, condensed and highly stylised display fonts can work in a large headline. In paragraphs, labels and buttons they quickly become hard to read.

Fix: Keep display fonts for short, large text, and use a typeface designed for reading at small sizes for everything else.

Thin Weights at Small Sizes

Light and thin weights look elegant on a high-resolution monitor and can almost disappear on a standard-density screen or a phone in bright light.

Fix: Use weights of 400 or above for body text, and reserve light weights for large display sizes.

Faux Bold and Italic

If you use a weight or style you haven't loaded, the browser creates a synthetic one by smearing or slanting the regular glyphs. The result looks clumsy and inconsistent.

Fix: Load every weight and style you use, or use a variable font that covers them. You can also stop the browser faking them:

body {
  font-synthesis: none;
}

With synthesis turned off, a missing weight shows as the regular style, which makes the problem obvious during development.

Fonts That Cause Layout Shift

When a web font loads and replaces a fallback font with different metrics, text reflows and the page jumps, which hurts Cumulative Layout Shift. Loading many font files, or loading them late, makes this worse.

Fix: Preload the one or two most important font files, use font-display: swap or optional, and adjust the fallback font's metrics with size-adjust and related descriptors so the swap barely moves anything.

@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 exact override values depend on the fonts involved. Tools such as the Fontaine library and the font utilities in some frameworks calculate them for you.

Fixed Pixel Sizes

Font sizes set in px don't respond to the default font size users choose in their browser settings. People who increase it to read more comfortably get no benefit.

Fix: Use rem for font sizes, and avoid setting html to a fixed pixel value.

/* Avoid */
html { font-size: 16px; }

/* Prefer */
html { font-size: 100%; }
h2 { font-size: 1.75rem; }

Finishing Mistakes

These details don't stop people reading, but they make a site look less polished.

All Caps for Long Text

All-caps text removes the varied word shapes that help readers recognise words, and many people perceive it as shouting. It's fine for short labels if spaced well, not for sentences or paragraphs.

Fix: Write text in normal case and apply uppercase with CSS only for short labels, adding a little letter spacing. Keeping the source text in normal case also helps screen readers and copy and paste.

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
}

Wrong Punctuation

Straight quotes, double hyphens for dashes and three full stops for an ellipsis look like typewriter text.

Fix: Use the proper characters, such as curly quotes, en dashes for ranges and em dashes for breaks. Most CMSs and static site generators can convert them automatically, and you can type them directly in UTF-8 source files.

<p>“It’s open 9–5,” she said — and then left…</p>

Links You Can't Recognise

Removing underlines from links in body text and relying on a slightly different colour means many readers, including those with colour vision deficiencies, can't spot them.

Fix: Keep underlines in running text, and refine them rather than removing them.

.prose a {
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.prose a:hover {
  text-decoration-thickness: 0.14em;
}

Misaligned Numbers

Prices and figures in tables jump around when each digit has a different width.

Fix: Use tabular figures in tables, dashboards and anywhere numbers line up in columns.

table,
.price {
  font-variant-numeric: tabular-nums;
}

A Quick Typography Audit

Run through this list on any page to catch most of the mistakes above.

1. Read a full paragraph on your phone: If you have to squint or zoom, the body size is too small or the contrast too low.
2. Measure a line: Count characters in a typical body line on a wide screen. Above about 80 means the column is too wide.
3. Check contrast: Test every text colour with a contrast checker or your browser's DevTools.
4. Increase the browser's default font size: Text should grow. If nothing changes, sizes are fixed in pixels.
5. Count fonts and weights: Open DevTools, filter the Network panel by Font and see how many files load.
6. Watch the page load on a slow connection: Look for invisible text or jumping layout.
7. Scan the headings: Make sure each level is clearly distinct and the order makes sense.

You can find hard-coded pixel font sizes in your stylesheets quickly:

grep -rnE "font-size:[[:space:]]*[0-9.]+px" src/

src/styles/footer.css:4:  font-size: 11px;
src/styles/card.css:19:  font-size: 13px;

---

FAQ: Common Typography Mistakes

---

Conclusion

Most typography mistakes on websites come from a handful of root causes: text that's too small, too faint or too tightly spaced, lines that are too long, hierarchy that's either too weak or too fragmented, and fonts that are badly chosen or badly loaded. Each one makes reading slightly harder, and together they make a site feel tiring and unfinished.

The good news is that the fixes are small. A sensible base size in rem, accessible contrast, a limited line length, generous line height, a short type scale, one or two well-loaded typefaces, and attention to details like punctuation, links and numerals will put your site ahead of most of the web. Run the quick audit above on your key pages, fix what it finds, and make those rules part of your style guide so the mistakes don't creep back.