Font size, line height and spacing: a simple guide to readable text

Choosing a beautiful font is only half the job. The same font can feel pleasant or tiring depending on its size, spacing and contrast. This guide gives you practical starting points for web pages, documents and presentations.

Font size

For body text on a web page, 16 pixels is a sensible minimum. Many designers use 17 or 18 pixels for long articles, because larger text is easier on the eyes, particularly on phones. Anything under 14 pixels is best kept for small notes, such as captions or legal text.

In printed documents, 10 to 12 points is the usual range for body text. Books are often set a little smaller, around 9 to 11 points, in fonts designed for that size. Headlines are larger, and a common rule is to make a heading about 1.5 to 2 times the size of the body text.

Not sure how pixels and points relate? On most screens, 1 point is roughly 1.33 pixels, so 12 points is about 16 pixels. Relative units such as rem are better for websites, because they respect the size a visitor chooses in their browser settings.

Line height (leading)

Line height is the space from one line of text to the next. Too tight and lines crowd each other. Too loose and the paragraph falls apart. For body text, a line height of 1.4 to 1.6 times the font size works well. Headings can be tighter, around 1.1 to 1.3, because they have fewer lines.

Fonts with large x-heights (tall lowercase letters) or long lines of text need a little more line height. Condensed fonts and short lines can use a little less.

Line length

Very long lines make it hard to find the start of the next line, and very short lines break the reading rhythm. A comfortable length is about 50 to 75 characters per line, including spaces. On a website, limit the width of the text column rather than letting it stretch across a wide screen. Our articles use this approach.

Letter spacing and word spacing

The default spacing in a good font is usually right for body text, so avoid changing it. There are two common exceptions. Headlines in all capitals look better with slightly wider letter spacing, around 2 to 5 percent. Very large display text often looks better with slightly tighter spacing. Never add letter spacing to lower-case body text, because it harms the shapes of words.

Contrast and colour

Text needs enough contrast against its background. Black text on white has the highest contrast, and very dark grey text on white is a comfortable alternative that reduces glare. Avoid light grey on white, which is common in design trends but hard to read, particularly for people with low vision or in sunlight. The Web Content Accessibility Guidelines suggest a contrast ratio of at least 4.5 to 1 for normal text.

Alignment

Left-aligned text with a ragged right edge is easiest to read in most languages that read left to right. Justified text can create uneven gaps between words unless the line is long or hyphenation is turned on. Centre alignment suits short lines, such as titles and invitations, but is tiring for paragraphs.

Choose a font that suits the size

Some fonts are made for headlines and fall apart at small sizes. Script and decorative display fonts are best at large sizes with generous spacing. For body text, choose a font with open shapes, a clear difference between similar letters (such as capital "I", lower-case "l" and the number "1") and regular spacing. Test your real text in the preview on a font page.

A quick starting recipe

• Body: 17 px, line height 1.6, dark grey on white.
• Column width: about 65 characters.
• Headings: 1.5 to 2 times the body size, line height 1.2.
• Paragraph spacing: about one line between paragraphs.

Treat these as a starting point, then check the result on your own phone and computer and adjust.