Your Body Text Is Probably Too Small, and 16px Isn't the Whole Answer

Whenever I audit a product, the first thing I do is zoom out and look at the body text. More often than not, it is set somewhere between 13 and 15 pixels, in a light grey, on a white background, in lines that stretch across the entire screen.

The usual advice is just use 16px. That is a fine start. But size is only one of four dials, and turning one without the others rarely fixes reading comfort.

Dial 1: Size depends on the typeface

Two fonts at 16px can look wildly different. Typefaces have different x-heights, the height of lowercase letters like x and n. A font with a large x-height looks bigger and reads more easily at the same size.

In one project, we switched from a typeface with a small x-height to one with a generous one. We kept the size at 16px. In usability sessions, five of seven participants said the new version felt bigger. It was not. It was simply more legible.

So instead of picking a number, I put a paragraph in front of real people on a real phone at arm's length.

Dial 2: Line length

Long lines are tiring. Your eye has to travel a long way back to find the start of the next line, and it often lands on the wrong one.

A comfortable range is roughly 50 to 75 characters per line, including spaces. On a wide desktop layout, that often means the text column should be narrower than the designer wants, around 600 to 700 pixels. White space on either side is not wasted. It is breathing room.

Dial 3: Line height

Line height, or leading, is the vertical space between lines. Browser defaults are usually too tight for long reading.

For body text I start at 1.5 times the font size and adjust from there. Longer lines need more leading. Shorter lines, like on mobile, can use a little less. Headings usually need much less, around 1.1 to 1.25, or they start to fall apart into separate words.

Dial 4: Contrast

Light grey text looks elegant in a design review on a calibrated monitor. It looks like fog on a cheap laptop in a sunny room.

I aim for body text that is close to black on white, or a very dark grey. Accessibility guidelines suggest a contrast ratio of at least 4.5 to 1 for normal text. I treat that as the floor, not the goal.

A quick checklist

• Is the body text at least 16px, and does it look comfortable in the actual typeface?
• Are lines between 50 and 75 characters?
• Is line height around 1.5 for paragraphs?
• Does the text pass contrast checks with margin to spare?
• Have you read a full paragraph on a real phone, outdoors?

Typography is not decoration. It is the interface between your words and someone's attention.

Get these four dials right and your text will quietly do its job. Get them wrong and no amount of beautiful illustration will make people read.

Cover: Photo by Brett Jordan on Unsplash.