Text size and spacing

Start at 16 pixels

Use at least 16 pixels for normal text on a website. That is the size browsers use by default, and smaller text tires the eyes, especially on a phone. On the iPhone, Apple uses 17 points as its normal text size and treats 11 points as the absolute smallest, only for tiny notes.

Some people make the text bigger in their browser settings. Developers can respect that by setting sizes in rem units instead of fixed pixels. Then the whole page grows with the person’s setting. The accessibility rules ask that text can be made twice as big without anything getting cut off.

Lines that aren’t too long

When a line of text runs across a whole wide screen, the eye has trouble finding the start of the next line. Very short lines are tiring too, because the eye has to jump back too often. Somewhere between 45 and 80 letters per line is comfortable. The strictest level of the accessibility rules uses 80 as the upper limit. Developers can keep text in this range with max-width: 70ch, which means about 70 characters.

Room between lines

For normal text, space between lines of about one and a half times the letter size feels right. Headings can sit a bit tighter, because they are short and large. Leave a clear gap between paragraphs, about one empty line.

Some people with reading difficulties set extra space between lines and letters in their own browser. The accessibility rules ask that nothing breaks when they do. The usual problem is a box with a fixed height, where the text spills out. Boxes should simply grow when the text grows.

Only a few sizes

Most sites need only five or six text sizes: normal text, small text, and three or four sizes of headings. A simple trick is to multiply each size by the same number. Multiplying by 1.25, for example, gives 16, 20, 25, 31 and 39 pixels. With fewer sizes, it is obvious what is a heading and what is not.

Make headings different from normal text in more than one way, like bigger and bolder, or bigger with more space above. And don’t underline headings, because people expect underlined words to be links.

Space shows what belongs together

Space tells the eye what goes together. The name of a typing box should sit closer to its own box than to the box above it. A heading should sit closer to the text it introduces than to the section before it. When every gap is the same, the eye can’t tell where one group ends and the next begins.

It helps to choose a few fixed gap sizes, such as 4, 8, 12, 16, 24, 32 and 48 pixels, and use only those. The page looks more orderly, and designers and developers waste less time arguing about a pixel here and there.

Choosing a font

For screens, choose a plain, clear font where similar letters look different. A capital I, a small l and the number 1 shouldn’t look alike, and neither should the letter O and the number 0. The font already built into each device, called the system font, loads instantly and always looks at home. If you use a font from the web, load only the weights you need, and check that it has every alphabet you need, for example Cyrillic for Ukrainian.

Avoid very thin letters for normal text, especially in grey. Thin and pale together fail the contrast rules much sooner than people expect.