Font and typography choices that affect readability

Four typography decisions do most of the work of whether your website copy actually gets read: the size of the body text, how long each line of text runs, how weight is used to show importance, and how many typefaces appear on a page at once. None of the four require design training to judge. All four are commonly got wrong on small-business sites for the same reason. They were set once, in a template, and never revisited against the actual copy that ended up on the page.

This page is about typography choices that affect reading, not about choosing a typeface for its personality. A font can be perfectly on-brand and still make paragraphs hard to get through. Readability and brand fit are two separate design questions with two separate tests. Designers sometimes treat font choice as purely a branding decision. On a small-business site, readability should win the argument every time body copy is involved.

Font size and body text — the most common single fault

Body copy set below roughly 16 pixels reads as small on most screens. It disproportionately punishes the visitors a small business can least afford to lose: older readers, and anyone reading on a phone in bright daylight. A homepage that looks fine on a 27-inch design monitor at arm’s length can be genuinely hard to read on a phone at outstretched arm’s length in the sun. That gap between the design review and the real reading condition is where this fault survives unnoticed.

The test costs nothing: read your own homepage on your own phone, outdoors, at the size the text actually renders. If you’re straining, so is everyone else, and a text-size increase is one of the cheapest changes a website will ever get.

Line length and line height — the two nobody names but everyone feels

A line of body text that runs the full width of a wide screen is measurably harder to read than one that stops at a sensible width. The eye has to travel further to find the start of the next line, and loses its place more often doing it. There’s a well-established comfortable range for how many characters should sit on one line of body copy. Well outside that range in either direction — lines that are too long on a wide desktop layout, or too short and choppy in a narrow column — costs reading speed and comprehension. Almost nobody who feels the effect can name the cause.

Fixing line length

The practical fix is a maximum content width on body copy, applied even on wide screens, so a paragraph of text does not stretch edge to edge on a 32-inch monitor just because nothing stopped it.

Fixing line height

Line height — the vertical space between one line of text and the next, sometimes called leading — is the companion setting to line length. It is wrong on body copy almost as often. Lines set too tight run into each other visually, especially at longer line lengths. Lines set too loose make a paragraph feel disconnected, as if each line belongs to a different thought. A comfortable line height for body text sits noticeably taller than the single-spaced default most design tools ship with. Checking it costs nothing more than the same phone-in-daylight test already covered above.

Weight and hierarchy — showing importance without shouting it

Bold text, size jumps and colour are all ways of saying “this matters more.” All three lose their power the moment they’re used everywhere. A page where every second sentence is bold has no bold sentence, in the same way a page where everything is a headline has no headline. Weight should be spent like a limited resource — on the one thing per section that a skimming reader most needs to catch, not on emphasis for emphasis’s sake.

Heading levels do the same job structurally rather than visually. Doing that job properly also matters for a very different reason. It’s one of the specific things checked in an accessibility self-assessment, because a screen reader user navigates a page by its heading structure, not by scrolling past it.

How many typefaces and fonts belong on one page

Typeface count	Effect
One	Safe, consistent, sometimes visually flat if not paired with enough weight variation
Two — one for headings, one for body	The standard, workable choice for almost every small-business site
Three or more	Starts to read as inconsistent rather than varied, and rarely earns its added complexity

Two typefaces, used consistently, do more for a site’s professionalism than three or four used inconsistently. This isn’t a stylistic preference. It’s a pattern-recognition cost. A reader’s eye has to relearn what each typeface signals every time a new one appears, and that relearning is friction, however small.

Serif or sans-serif: the legibility question

The serif-versus-sans-serif choice affects legibility less than most design conversations suggest. Both families of typeface can read comfortably on screen at the sizes a website actually uses. What matters more than serif or sans is the individual letterforms. A typeface with a generous x-height (the height of lowercase letters relative to the capitals), open apertures (the opening on characters like “c” and “e”), consistent stroke widths, and enough letter spacing between characters reads more comfortably at small sizes than one without — regardless of whether it carries serifs. A common, well-tested system font — the kind already installed on most visitors’ devices — is usually a more legible, more accessible choice for body text than an unfamiliar display typeface picked for its serifs alone. This is a readability test, not a taste test. Two typefaces can look equally attractive side by side in a design mockup, and still produce measurably different reading speed once real body text and real font sizes are involved. That is why the phone-in-daylight test above should be run against the actual typeface and font size a design proposes, not a placeholder.

Contrast between text and background is a typography decision too

Type choices and colour choices intersect directly at contrast. Light grey body text on a white background is a readability failure, regardless of how attractive the typeface is on its own. Colour and contrast covers the colour side of this in full, including why it is not simply an aesthetic preference. The two pages should be read together if a current design uses low-contrast text anywhere.

What this has to do with the words themselves

Typography sets the container the copy sits in. It doesn’t fix copy that shouldn’t be there in the first place. Long, unbroken paragraphs read badly no matter how well the typeface is chosen, because the underlying content hasn’t been structured for scanning. Website copywriting covers how the words themselves get written and structured for a business site. The two disciplines — writing for scanning, and setting type that supports it — need to be solved together, rather than one papering over the other.

What to check on font, typeface and readability before approving a design

Print or screenshot one full page of body copy at the size it will actually render. Read a paragraph of it in the condition a real visitor will read it in — on a phone, outdoors, without your glasses if you wear reading glasses for close work. If it’s uncomfortable, it isn’t a taste issue, and it isn’t something a colour swap will fix. It’s a font size, line-length or weight problem. All three are cheap to correct before a build ships, and comparatively expensive to correct after.

Taken together, the typography decisions on this page — font size, line length, line height, weight, typeface count, and the legibility of the typefaces themselves — are what separate website text a visitor actually reads from website text a visitor’s eyes slide straight past. None of them require a background in typography to check. They only require reading the text the way a real visitor will, in the actual font, at the actual size, on the actual screen. A quick way to sanity-check readability across a whole page at once is to view it at reading distance and squint slightly. If the body text still holds together as text, rather than dissolving into grey blocks, the typography is doing its job.