Typography for readability

Size first

Body text smaller than about sixteen pixels is uncomfortable for a substantial share of readers and unreadable for some. It is also the commonest fault on self-built sites, because it looks tidy to somebody with good eyesight on a large screen.

Err larger than feels right. Text that seems slightly too big on your own monitor is usually about right for a reader on a phone in imperfect light, which describes most visits.

And never disable the reader's ability to zoom. Our page on text resizing covers why that setting exists and what disabling it costs people who rely on it.

Line length decides comfort

A line holding roughly sixty to seventy-five characters is comfortable. Much longer and the eye loses its place returning to the start; much shorter and the rhythm breaks every few words.

This is the setting most often broken by full-width layouts on large screens, where text stretches the whole width of a monitor and becomes genuinely tiring to read.

Constrain the text column rather than the page. A wide page with a readable column of text is the standard arrangement and it works at every screen size.

Spacing does the rest

Line spacing of about one and a half times the type size separates lines enough for the eye to track them. Tight spacing looks compact and makes a paragraph feel like an obstacle.

Space between paragraphs matters as much. A clear gap turns a wall of text into a set of manageable pieces, which is what lets somebody scan rather than commit.

Space around headings should be uneven on purpose: more above than below, so a heading attaches to the text it introduces rather than floating between two blocks.

The settings that matter

The list below is what to check on any business site. Getting these right makes an ordinary typeface read well; getting them wrong makes an expensive one read badly.

• Body text around sixteen to eighteen pixels
• Lines of roughly sixty to seventy-five characters
• Line spacing about one and a half times the size
• A clear gap between paragraphs
• More space above a heading than below it
• Two typefaces at most, or one
• Zoom never disabled

The typeface matters least

Almost any well-made typeface reads acceptably at the right size and spacing. The choice carries character, and character is a much smaller part of readability than the settings around it.

One typeface used well is a completely respectable answer. Two is the practical maximum for a small business site, and the second should be doing a distinct job rather than adding variety.

Avoid anything decorative for body text, and avoid very light weights entirely. Thin type at small sizes fails the same readers that low contrast does, and usually at the same time.

Loading type without slowing the page

Every additional font file is a request and a delay, and a page that renders with no text while a font loads is a worse experience than one that renders in a system typeface.

Limit the weights you load to the ones you actually use. A site loading six weights and using two is paying for four on every visit for no benefit.

Our page on page speed covers the wider budget. Fonts are one of the easiest places to recover load time without changing how a site looks.

Headings and hierarchy

Size differences between levels should be obvious enough to scan. Headings that are only slightly larger than body text give a reader no structure to navigate by.

Keep the visual hierarchy matched to the markup hierarchy, because a screen reader and an answer engine follow the markup and never the size. A line styled to look like a major heading but marked up as a minor one confuses screen readers and parsers alike.

Our page on heading structure covers that pairing, which is where visual design and structural meaning most often come apart.