Readable Text: Font Size, Line Length, and Spacing

Most visitors come to read. If your text is small, cramped, or stretches across the whole screen, they will struggle or leave. Readable typography is less about style and more about a handful of measurable settings.

For body text, 16 pixels is the usual minimum on the web, and many sites use 17 to 20 pixels for comfortable reading. Smaller text is difficult for many people, especially on phones. Use relative units like rem so that text respects users' browser settings, and make sure the page remains usable when zoomed to 200 percent.

Headings should clearly step up in size so structure is obvious. See visual hierarchy.

Line length

Very long lines make it hard for the eye to find the start of the next line, and very short lines break the rhythm. A common target is around 50 to 75 characters per line, which on most layouts means limiting the text column with max-width rather than stretching text across a wide screen. A width of about 60 to 75 characters, set with the ch unit, works nicely.

Line height

Spacing between lines affects how easy it is to track text. WCAG's text spacing guidance suggests that users should be able to set line height to at least 1.5 times the font size without losing content. For body text, a line height of about 1.4 to 1.7 is a common sweet spot. Headings can be tighter.

Paragraph spacing

Leave clear space between paragraphs, roughly at least 1.5 times the font size under WCAG's text spacing criterion. Short paragraphs are easier to scan, especially on mobile.

Alignment

Left-aligned text, for left-to-right languages, is easiest to read. Avoid fully justified text on narrow columns, which can leave uneven gaps, and avoid long centered paragraphs.

Contrast

Dark text on a light background, or the reverse, with strong contrast keeps text legible. Aim for at least 4.5:1 for normal text. See color contrast.

Font choice

Pick clear, well-designed typefaces with open letter shapes. Avoid decorative fonts for body text. See typography basics.

Avoid walls of text

Break content into short paragraphs, subheadings, and lists. Use plain language where you can. Descriptive headings help readers navigate.

Respect user preferences

Some visitors use larger default text, high contrast modes, or custom stylesheets. Layouts that use flexible units and avoid fixed heights adapt better. See responsive design basics.

Do not put text in images

Text inside images cannot be resized or read by assistive technology, and may be too small on phones. Keep text as real text.

Test on a phone

Read a long page on an actual device, at arm's length. If you strain, adjust. See the mobile-friendly checklist.

The bottom line

Use at least 16 pixels for body text, keep lines to roughly 50 to 75 characters, give lines and paragraphs room, and maintain strong contrast. Readers will notice the comfort even if they never notice why.