Skip to content
Glasspage.studio

People say our website is hard to read, but the font size is fine. What is actually wrong?

Font size is rarely the cause. Reading difficulty almost always comes from line length, line spacing, contrast and paragraph rhythm, and those four are set by the layout, not the type scale.

By Ethan Hibble

The complaint is about the line, not the letter

When someone says a page is hard to read, they are describing an effort they cannot name. They felt tired. They lost their place. They gave up two paragraphs in. Almost nobody says “the measure is too wide,” because almost nobody knows the word.

Reading is a series of returns. Your eye sweeps left to right, then jumps back to the left edge and has to find the next line down. On a short, well-spaced line that jump is automatic. On a long, tightly spaced line it becomes a guess, and every wrong guess costs you the sentence you were holding in your head.

That is why a 16px font can be perfectly legible and the page still exhausting. Legibility is whether you can tell an a from an o. Readability is whether you can get through four hundred words without effort. They are different problems with different fixes.

Line length is usually the culprit

Body text running the full width of a 1440px container gives you roughly 130 to 150 characters a line. Comfortable reading is 60 to 80. So a page like that is asking the eye to make a return jump twice as long as it wants to, on every line.

This is the fault we find most often when a client sends us a page and says the type feels wrong. The type is fine. Someone built the page with one content container, set it to the full grid width, and body paragraphs inherited it along with everything else. Images and tables want that width. Prose does not.

The fix is a maximum width on the text block, usually somewhere between 600px and 750px depending on the font. It is one line of CSS. Nothing about the typeface changes and the page reads differently immediately.

A counterexample worth knowing: a two-column layout with a 400px text column can be too narrow. Below about 45 characters the eye returns so often that reading feels choppy, and hyphenation gaps start appearing in justified text. Narrow is a real fault, just a much rarer one than wide.

Line spacing has to grow with line length

Most sites set one line height, often 1.5, and apply it everywhere. That works at 65 characters a line. At 100 characters it fails, because the longer the line, the harder the return jump, and the more vertical separation the eye needs to land on the right line.

Practical numbers we use: around 1.5 for a 60 to 70 character measure, 1.6 to 1.7 as you push past 80, and closer to 1.4 for short lines such as captions or a narrow sidebar. Headings go tighter still, 1.1 to 1.2, because they are two or three words and the eye is not doing returns.

The failure shows up as a wall. If a paragraph looks like a solid grey rectangle from a metre away rather than a set of distinct lines, the spacing is losing to the length.

Grey body text on white is a designer habit, not a design decision

Light grey text looks calm and expensive in a Figma file on a bright monitor in a dim room. On a laptop at 40% brightness, or to a reader over forty, or on a phone in daylight, it reads as blur.

The measurable version: body text should hit a contrast ratio of at least 4.5 to 1 against its background, which is the WCAG AA threshold. #767676 on white just clears it. #999999 on white is about 2.8 to 1 and fails. Both look like “grey” in a mockup, and one of them is the reason your reader is squinting.

You can check this in a minute. Chrome DevTools shows the contrast ratio when you inspect a text element, and free checkers like WebAIM’s do the same if you paste in two hex values. Do it for body copy, small print, form labels and placeholder text. Placeholders are the worst offenders on almost every site we review.

Paragraph rhythm decides whether people start at all

Two layout habits slow reading without anyone attributing it to design.

The first is the unbroken block. A twelve-sentence paragraph gives the reader nowhere to pause and no visual sense of progress, so they skim it or skip it. Five sentences is a reasonable ceiling. On mobile, three.

The second is centred text. Centring is fine for a heading or a one-line statement. Beyond two lines it removes the fixed left edge the eye returns to, so every return has to search for a new starting point. A centred four-line intro paragraph under a hero heading is one of the most common readability faults on marketing sites, and it is always described as “the hero feels heavy” rather than as a text alignment problem.

Diagnose the reading problem in ten minutes, before changing any type

Run these in order. The cheap tests come first, and each one either finds the fault or rules it out.

If steps one to four all come back clean and the page still reads badly, then look at the typeface. Some fonts genuinely fail at body size: a geometric sans with thin strokes and a small x-height can look sharp in a 48px heading and turn muddy at 16px. Variable fonts set at a light weight do the same. But this is the last thing to check, not the first.

  1. Count the characters on one full line of body text. Select a line, paste it into a character counter, or just count words and multiply by six. Aim for 60 to 80.
  2. Compare that count to the line height. Past 80 characters, line height under 1.5 is too tight.
  3. Check body text contrast at real screen brightness. Inspect the element, read the ratio, and treat anything under 4.5 to 1 as a fault.
  4. Read a full page on your phone, outdoors, and mark every point where you lose your place or reread a line.
  5. Only after those four, consider changing the typeface or the size.

What you should not pay for

A readability complaint does not justify a typography overhaul. Line length, line height, text colour and paragraph width are container and spacing changes. A developer who already knows your codebase can make all four in an afternoon, and you can hand them the numbers from the ten-minute diagnosis above.

Be especially wary of a licensed custom typeface as the answer. A new font costs money, adds a load-time penalty, and changes how every page looks, which makes the change feel dramatic. But if the real fault was 140-character lines, you now have 140-character lines in a nicer font. The complaint comes back in a month and nobody connects it to the fault that was never fixed.

There is a case where the type itself is the problem: a body font with strokes too thin to hold up at 16px, or a font stack that falls back to something with completely different metrics. That is worth fixing. It is worth fixing after you have measured the line, not instead.

When we take on a redesign, the current website review is where these measurements get made, and more often than not the reading problem is resolved in the design foundations rather than by changing the font. If your site is otherwise working, you do not need us for this.

The one thing to remember

If a page is hard to read, measure the line before you blame the letters.

Frequently asked questions (FAQ)

What is the ideal line length for body text?

60 to 80 characters per line, including spaces. That usually means a maximum text width of 600px to 750px depending on the font. Below about 45 characters reading gets choppy because the eye returns too often. Above 100 the return jump becomes unreliable and readers lose their place. Set the limit on the text container, not on the page container, so images and tables can still run wider.

Is 16px too small for body text?

No. 16px is the browser default and reads fine for most people on most screens. 17px or 18px gives a little more comfort on long-form pages and is a reasonable choice, but going up in size will not fix a page whose lines are too long or whose text is too pale. Larger type on a full-width container actually makes the line-length problem worse, because you fit fewer characters per line but the return jump stays just as long in pixels.

How do I check whether my text contrast is good enough?

Inspect the text in Chrome DevTools and it shows the contrast ratio against the computed background, or paste your two hex values into WebAIM's contrast checker. Aim for 4.5 to 1 or better on body text, which is the WCAG AA standard. Check placeholders, form labels, captions and footer links too, since those are usually set lighter than body copy and are where sites fail most often.

Could our font itself be the problem?

Sometimes, but check it last. A typeface with thin strokes and a small x-height can look sharp at 48px in a heading and turn muddy at 16px in a paragraph, and a light or extra-light weight used for body copy does the same. Also check what happens when your web font fails to load, because a fallback with different metrics can make lines longer and spacing tighter than intended.

Related articles