Fonts Too Small to Read at Arm's Length

Where small type comes from

Not from carelessness. From two entirely reasonable pressures pulling the same way.

Smaller text looks more considered. Generous spacing and fine type read as design, while large text reads as a document, and designers are correct that the smaller version usually looks better.

Smaller text also fits more on a screen, which resolves the argument about the homepage being too long.

Both are decided on a large bright monitor at a fixed distance by somebody whose eyes are working well, and neither reflects how the page will be read.

How a phone is actually held

Further away than people assume, particularly by anybody over about forty-five.

Close focus declines with age, gradually and universally, and the response is unconscious: the phone moves away rather than the person admitting anything.

So the same text that was legible at thirty centimetres is being read at fifty, in worse light, often one-handed and at an angle rather than square on.

A design tested at reading distance in an office is being used at arm's length in a car park.

The sizes that hold up

• Body text: sixteen pixels minimum, and seventeen or eighteen is better.
• Secondary text: fourteen pixels, and not for anything important.
• Captions and legal text: twelve at the absolute floor.
• Form labels and inputs: sixteen, for a separate reason below.
• Never below twelve for anything a visitor must read.

Sixteen has become a practical standard because it is roughly what browsers default to and roughly what turns out to work, which is not a coincidence.

The form field exception

Worth knowing because it explains an irritating behaviour people blame on their phone.

Some mobile browsers zoom the page in when a visitor taps a text field whose type is set below sixteen pixels, on the reasonable assumption that it would otherwise be too small to read while typing.

The page then stays zoomed, the layout is wrong, and the visitor has to pinch back out mid-form.

Setting form inputs at sixteen pixels removes it entirely. It is a one-line change and it fixes a fault that costs completed forms.

Size is not the only variable

Two other things determine whether text is comfortable, and a page can have adequate sizes and still be hard work.

Line height, which needs to be around one and a half times the text size for body copy. Tightly set lines look elegant and are noticeably harder to track on a small screen.

Line length, which should sit somewhere around sixty to seventy-five characters. Full-width text on a large phone held sideways runs too long, and the eye loses its place returning to the next line.

Contrast matters too, and it is a large enough subject that it deserves its own treatment rather than a paragraph here.

A worked example

A financial services firm had body text at thirteen pixels in a light grey, chosen to look understated, with tight line spacing.

Their client base skewed heavily over fifty.

Nobody had complained, which was taken as evidence that it was fine.

They changed body text to seventeen pixels, darkened it, and opened the line height. Nothing else about the design changed.

Time spent on the service pages rose noticeably and the pattern of enquiries changed: people began referring to details that were three-quarters of the way down pages, which previously almost nobody had reached.

The absence of complaints had never meant the text was readable. It meant people had stopped reading and not mentioned it.

Nobody reports this

The reason it persists in businesses that would fix it immediately if they knew.

Struggling to read something does not feel like a fault in the website. It feels like a fault in your eyes, which people do not report to a supplier.

They zoom in, or they give up and go elsewhere, and either way no message arrives.

So this has to be checked deliberately rather than waited for, and the check takes two minutes.

Checking it properly

On a real phone, held where you would actually hold it, outdoors if possible.

Better still, hand your phone to somebody over fifty who has not seen the site and ask them to find a specific piece of information on it.

Watch what they do rather than asking what they think. If the phone moves away from their face, or they pinch to zoom, or they angle it toward the light, you have your answer without anybody having to say anything awkward.

Browser tools will also report text below a readable size across a whole page, which catches the places nobody thinks to look, such as footers, captions, and form hints.

Let people zoom

One setting worth checking while you are in there.

It is possible to disable pinch zoom on a page, and some templates do it by default on the reasoning that it keeps the layout tidy.

It removes the only remedy available to somebody who cannot read your text, and there is almost never a good reason for it on an ordinary business site.

Find the viewport line in your template and make sure scaling is not being blocked. If a design only holds together when zoom is disabled, the design is the problem.

The counter-case

Larger is not universally better and the advice can be overapplied.

Body text at twenty-two pixels on a phone puts very few words on screen, turns a short page into a long scroll, and reads as though the site is shouting.

Dense reference material, specification tables, and data that people scan rather than read can reasonably sit smaller, since the reading pattern is different and the alternative is a table nobody can see the shape of.

The floor is what matters rather than the target. Sixteen for anything a person reads in sentences, with genuine judgement about the rest, and no design decision that forces somebody to zoom in order to use the page at all.

The check

1. Set body text to sixteen pixels or more on mobile.
2. Set form inputs to sixteen to stop the zoom jump.
3. Open the line height to about one and a half.
4. Confirm pinch zoom is not disabled.
5. Run a browser audit for undersized text.
6. Hand your phone to somebody over fifty and watch.

The last one takes five minutes and is worth more than the other five combined.

Reading without zooming is covered in text somebody can read without zooming.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.