Typography and Readability: Why People Do Not Read Your Pages
Typography is discussed as taste and settled as taste, which is why the same three defects appear on site after site: text too small, lines too long, and grey where black was meant. None of these are aesthetic disagreements. They are measurable properties that decide whether the page is read, and two of them are legal requirements for a large share of European businesses.
The useful reframing is that typography is not how the text looks. It is how much of the text arrives.
The four numbers that do most of the work
| Property | Target | Why |
|---|---|---|
| Body text size | 16px minimum, 17–19px commonly better | Below this, comprehension drops and mobile browsers may zoom |
| Line length | Roughly 45–75 characters | Longer lines lose the return sweep; shorter ones fragment |
| Line height | About 1.5 for body copy | Tighter and the lines blur together; much looser and they separate |
| Contrast | 4.5:1 for normal text, 3:1 for large | A legal minimum in scope of accessibility rules, not a preference |
These are the defaults that a browser would give you if nobody intervened. That is the uncomfortable part of the subject: unstyled HTML is more readable than a large proportion of designed pages, because the design process optimises for how the page looks in a mockup at full width on a large screen, and every one of these four properties degrades under that view.
Grey text, the most common defect
Light grey body copy on white reads as calm and modern in a design tool, and it is the single most frequent accessibility failure on business websites. The reason is that designers work on colour-accurate screens at full brightness in controlled light, and customers do not.
The threshold is specific: 4.5:1 for text under roughly 24px, 3:1 above it. Mid-grey on white, the shade most commonly chosen, tends to land somewhere around 3:1, which fails. The fix is free and takes minutes, and it improves comprehension for everyone rather than only for users with low vision, because contrast affects reading speed for all readers.
Two related failures travel with it: placeholder text used instead of labels, which is both low-contrast and disappears when typing, and light text over photographs where the contrast varies across the image and is unmeasurable in practice.
What the law actually requires
For businesses in scope of European accessibility rules, several typographic properties stop being preferences.
- Contrast minimums as above, applied to text and to meaningful non-text elements.
- Resizable text. Content must remain usable when text is enlarged up to 200%. Layouts built with fixed pixel heights break here, and the breakage is invisible until tested.
- Text spacing overrides. A user must be able to increase line height, paragraph spacing and letter spacing without content being cut off or overlapping. Tight containers fail this.
- No images of text where real text would do, because an image cannot be resized, recoloured or read aloud.
Those obligations sit inside the wider framework described in what accessibility law requires and why it pays, and typography is the cheapest part of that compliance to fix because it is settings rather than structure.
Choosing a typeface, briefly
Most typeface decisions matter far less than the settings applied to them, with three exceptions worth knowing.
Distinguishable characters. Capital I, lowercase l and the digit 1 are identical in several popular geometric sans faces. This is invisible in a headline and a real problem in an order reference, a password field or a part number.
Numerals that line up. Tables of prices and specifications need tabular figures, where every digit occupies the same width. Proportional figures make columns ragged and comparison harder.
A working italic and bold. Faux styles generated by the browser when the real weights are missing look wrong and read worse. If the weight is not loaded, the emphasis is decorative.
Beyond that, restraint: two families is plenty and one is usually enough, and the discipline of keeping a small set is exactly what a small design system exists to enforce.
The scale nobody defined
Open the stylesheet of a site that has grown for a few years and count the distinct font sizes. Twenty is common. They accumulate one at a time, each added because a particular block looked slightly wrong, and the result is a page with no visible hierarchy: everything is nearly the same size as something else, so nothing reads as more important than anything else.
A scale fixes this and takes an afternoon. Pick a body size, then derive the rest from a consistent ratio so that each step is visibly different from the one below it. Five or six sizes cover an entire site: body, small print, and three or four heading levels. The specific ratio matters far less than the constraint of having one.
Two rules keep it honest afterwards. Heading levels are semantic, so use them in order and do not skip from a first-level to a third because the size looked better; the visual weight is a separate setting from the level. And any request for a new size should be refused first, because in most cases the correct answer is an existing size with different weight or spacing.
The commercial argument is that hierarchy is what makes a page scannable, and scanning is what most visitors do before deciding whether to read.
Fonts are also a performance and privacy decision
Web fonts arrive with two costs that typography discussions usually skip.
The performance cost is straightforward. Every weight is a separate file; four weights of two families is eight downloads before the first paragraph renders correctly. Subsetting to the characters actually used, self-hosting rather than fetching from a third party, and setting the font to swap so text is visible immediately in a fallback all reduce it. On slower connections the difference is the gap between text appearing in half a second and text appearing in three, which shows up in field metrics rather than in a design review, as covered in what the field data actually shows.
The privacy cost is specific to Europe and frequently overlooked. Loading fonts from a third-party service transmits the visitor’s IP address to that provider, and a German court found in 2022 that embedding Google Fonts this way without consent breached data protection rules. Self-hosting the font files removes the question entirely, costs nothing, and is faster.
Reading on a phone is a different problem
Line length behaves differently on a narrow screen: the constraint is usually the opposite one, with lines too short and text fragmented into slivers by generous padding. Reduce the horizontal padding on small screens rather than keeping the desktop proportions.
Two further mobile specifics. Text over background images fails more often because the crop changes, so the light part of the photo lands under the text at some widths and not others. And font size should not shrink on mobile: the reading distance is similar and the conditions are worse, so if anything the mobile size should match or exceed the desktop one.
The environment matters as much as the screen. Much mobile reading happens in bright daylight on a device with the brightness turned down to save battery, which is a far harsher test than any office monitor, and it interacts with everything in designing for the hardware people actually own.
Structure is part of typography
Readability is not only about the characters. Three structural habits change how much of a page gets absorbed.
- Paragraphs of three to four lines. Not a rule about writing but about the visual weight of a block; long paragraphs are skipped as objects before they are read as text.
- Headings that say something. A reader scanning headings should get the argument. “Our approach” conveys nothing; the specific claim does.
- One idea per paragraph, with the point first. This is also what makes content extractable by assistants, which now read pages alongside people.
For readers who struggle with dense text for reasons unrelated to eyesight, these structural choices matter more than the type settings, which is the substance of designing for reduced attention and neurodivergent readers.
A fifteen-minute audit
No tools beyond a browser and a phone.
- Open a content page and check the computed body font size in the inspector. If it is below 16px, that is the first finding.
- Count the characters in a full line of body text at desktop width. Above about 80, the container is too wide.
- Run any contrast checker against your body text colour and your background. Note the ratio rather than the pass or fail.
- Zoom the browser to 200% and look for text that is cut off or overlapping.
- Open the same page on a phone outdoors, at fifty percent brightness. This is the real test and it fails more sites than every other check combined.
The short version
Typography decides how much of the text arrives, not how it looks. Four numbers carry most of it: body text at 16px or more, lines of roughly 45 to 75 characters, line height around 1.5, and contrast of at least 4.5:1 for normal text. Grey body copy is the most common defect and it fails a legal minimum rather than a stylistic one. Accessibility rules also require text to survive 200% zoom and user spacing overrides, which fixed-height layouts do not. Choose typefaces with distinguishable characters and tabular figures, load real weights rather than faux ones, self-host the files to avoid both the third-party privacy question and the extra requests, and do not reduce type size on mobile. Then test the page outdoors on a phone at half brightness, because that is the condition your customers actually read in.
