Journal

Choosing a Font for Your Homepage. The Longer You Hunt for a Typeface, the Less Gets Read

Choosing a Font for Your Homepage. The Longer You Hunt for a Typeface, the Less Gets Read

The first decision in choosing a font for a homepage is not the name of the typeface. It is the size of the text, the length of a line, and the space between lines. Type that refused to settle after weeks of comparing recommendations tends to settle the moment those three are fixed.

Changing the typeface and finding that nothing changes is a common experience. Sans becomes serif, serif becomes a lighter sans, and the page still does not invite reading. The problem is almost never the choice of typeface. It is how the type was set.

The same face, given a long measure, gets skimmed. Given a tight leading, it looks heavy. A typeface takes its character from the setting, not from the moment of selection.

Why Lists of Recommended Fonts Never Settle Anything

Choosing from an article of recommended fonts rarely produces a decision.

Specimens are shown large. At heading size the skeleton of a face is unmistakable. The text people actually read is less than half that size, and once you shrink a good face to body size, the difference between good faces all but disappears.

There is a second problem: specimens carry no environment. Nothing tells you which device, which weight, or how many lines that face was living in. Import the name without the setting and it will look beautiful on your desk and collapse on a phone.

Light weights are the most dangerous of all. The hairline that looked refined on a studio monitor evaporates on a bright pavement. Refinement comes from space, not from thin strokes.

When type fails, the chosen typeface is rarely wrong.
What is wrong is the size and the measure it was given.

Legibility Is Not a Typeface. It Is the Number of Characters in a Line

Most requests for a more legible font are not about the face at all. They are about the length of the line.

English body text reads most easily somewhere between sixty and seventy-five characters a line. Past that width, the eye loses its place on the return journey from the end of one line to the start of the next. Readers do not experience this as difficulty. They experience it as reluctance. People leave a page because it looks like effort, long before they find it hard.

That is why full-width text is not read. Screens have grown wider every year, and the measure has quietly crept past ninety characters. No amount of refinement in the typeface survives a line that long.

Leading does the same work. Body text usually settles between one and a half and one and three-quarter times the size of the type. Tightening looks sophisticated — but that belongs to headings. Tighten body text and the words become a block.

On a phone the measure takes care of itself: the screen is narrow, so the line is short. What changes instead is the number of returns the eye has to make. The same passage asks more of the reader on a small screen, and leading is what absorbs the difference. Type set with desktop leading arrives on a phone as one grey slab.

Narrow the column first. Change nothing else, and the reading changes.

Set the Size by Reading Distance, Not by a Number

Font size is decided faster when you stop memorising numbers.

Sixteen has been the working standard for body text for a long time. That number is not correct in itself. It is simply the size that stays readable on a phone held at arm's length. The measurement that matters is the distance.

Bring print instincts to a screen and the type will always end up too small. Paper is read at thirty centimetres; a screen at closer to forty. What looked generous on paper is a step too small on a display.

And the casualty is never the body text. It is everything beneath it — notes, the small print under a price, the help text in a form. Drop those to eleven or twelve and the number of people who can read them falls sharply. Making text small so it will not be read is design. Small text that must be read is an accident.

There is one way to check. Send the unfinished page to a phone, hold it at arm's length, and walk outside. Judged from a desk, this mistake is invisible.

Do Not Start by Choosing Between a Serif and a Sans

Most font decisions begin with an argument about serif or sans. That is the wrong end.

Decide first whether type is the subject of the screen. Where photographs lead, type stands aside. Where the argument is carried by writing, type leads. Once the role is settled, the candidates fall to two or three on their own.

Then the guidance is simple. Serifs modulate, so they hold expression across long passages — but they carry thin horizontals that vanish at small sizes. Sans faces are even in weight and survive being made small, at the cost of going flat over long passages.

For most brand sites, a serif for headings and a sans for body text is enough. The reverse works too, provided the body size goes up a step.

Keep to two faces. When a third feels necessary, what is actually missing is usually a difference in weight, a difference in size, or space. Varying the weight within one family settles a page more reliably than adding another family to it.

And make the switch happen in exactly one place. Headings in one face, body in the other — that is the end of it. Give the buttons their own face, then the footnotes, then the field labels in a form, and the page starts to read as an assortment. What carries a brand is not the number of typefaces but the fact that one of them lasts to the bottom of the page.

I have never seen a page settle because a typeface was added.
Pages settle when one is taken away.

Mixing Scripts Is the Only Time to Distrust the Size

Setting more than one script on a page comes with a single caution.

At the same specified size, Latin letters look smaller beside CJK characters. Japanese and Chinese glyphs fill their square body, while Latin sits inside that body with air around it. Set the Latin to match and it will look thin.

The fix is small. Raise the Latin a little, or weight it a little. A few percent is usually all it takes.

One more: words set entirely in capitals need letters slightly further apart. Capitals are full of vertical strokes, and tightened they build a wall. A brand name in capitals that reads as stiff is a spacing problem, not a typeface problem.

And web fonts for CJK are heavy — the character sets are an order of magnitude larger. Load them on every page and the first second falls silent. Use them for headings and let the body text fall back to what the device already has. That single concession changes how fast a site feels.

Type That Reads Well Never Reminds You of the Typeface

When the setting is right, nothing about the face survives the reading. What survives is what was said.

When a typeface is memorable, something is usually off — too heavy, too light, too long a measure, sizes that do not agree. Readers blame the face, and so do we, and so we change it. It does not help.

The order never changes. Measure, size, leading. Choose the typeface last.

The face you choose is allowed to be dull. Writing that holds a reader in a dull face will hold them in any face. The reverse has never been true.

Read next
A Homepage Needs Three Colours. Decide the Areas Before You Collect Palettes
Reduce the words. Not the value.
All Articles
Type Direction

Measure Before Typeface.

The length of a line, the size of the type, and the space between lines — decided in that order. Tell us about your brand — we usually reply within 2–3 business days.

Start the Conversation