Setting type for screen reading: size, leading, measure

Picking a body font is the first half of the job. Setting it correctly is the second, and it is where most beginner typography falls down. A great body font set badly reads worse than a mediocre font set well. The difference comes down to three numbers and how they behave on a phone.

This is the practical companion to font pairing and choosing a body text font. Once you have a font, here is how to size, space, and width it so people actually read it.

The three numbers

Almost all comfortable body text on the web is described by three values, and the defaults in most code editors are not quite right.

• Body size. 16 to 18 pixels for desktop body. 16 pixels as the floor on mobile. Most browsers ship 16 pixels as the default, which is the right floor, not the right ceiling.
• Line height. 1.5 to 1.6 for body text. Editors often default to 1.2, which is too tight for screen reading and will make paragraphs feel cramped.
• Measure. The line length in characters. Aim for 60 to 75 characters per row, which on most layouts means a content column between 600 and 700 pixels wide.

That is the whole game. Get all three inside those ranges and your paragraphs will read like a professional publication. Get any one of them badly wrong and even a good font will look amateur.

Why size has a floor

Browsers default to 16 pixels for a reason. Below that, readers start to lean in. The cost shows up not in complaints about the text but in lower engagement and shorter sessions, because nobody thanks you for body copy they have to pinch to read.

A useful range:

• 16 pixels. The honest floor. Fine for dense interfaces and footers.
• 17 to 18 pixels. The sweet spot for article body. Generous without feeling large.
• 19 to 20 pixels. Long form reading, where the page exists for the words. Use sparingly on marketing pages, where it can feel heavy.

Pair the size with a weight of 400 for regular body. Drop to 500 if the font runs thin at small sizes (Inter and Work Sans sometimes do at 400 on low resolution screens). Avoid 300 or lighter for body text on the web. It looks elegant in the editor and reads thin in the world.

Why line height has a range

Line height is the vertical space a line of text occupies. Too tight and the eye loses the row, too loose and the lines drift apart so the reader has to hunt for the next one.

The useful ranges, with the reason behind each:

• Body text: 1.5 to 1.6. This is where most screen body wants to live. Long form articles and narrow mobile columns lean toward 1.6. Dense interfaces lean toward 1.45.
• Headings: 1.1 to 1.2. Large text needs less leading, because the letterforms themselves take up more of the line. Default browser line height on headings is too loose and makes headlines float away from their subheads.
• Captions and small text: 1.4 or so. Small text actually wants slightly tighter leading than body, because the letters are smaller and the gaps read proportionally larger.

The rule of thumb: as text gets larger, tighten the line height. As text gets smaller, the default range works.

Why the measure has a ceiling

The measure is the length of a line of text in characters, and it has been studied for a century. Eye tracking studies consistently land in the same place: somewhere between 60 and 75 characters per line, including spaces, is where reading is comfortable.

The failures on both ends are predictable:

• Too short (under 45 characters). The eye snaps back and forth too often. Paragraphs feel choppy and the rhythm breaks.
• Too long (over 80 characters). The reader reaches the end of a row and loses the start of the next one. Comprehension drops measurably.

On a desktop layout, that range maps to a content column of roughly 600 to 700 pixels. On mobile, the screen does the capping for you. The mistake to avoid is letting body text run the full width of a wide screen. Cap it.

Cap the column, not the text

A common beginner mistake is to cap the body font itself at a maximum pixel size and call the job done. The result is text that scales up forever on a 4K monitor and runs the full width of the screen, blowing past the 75 character measure.

The fix is to cap the column, not the text. Use a max width on the reading container, and let the font breathe inside it. A typical article layout:

.prose {
  max-width: 65ch; /* caps the measure at roughly 65 characters */
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16 to 18 pixels */
  line-height: 1.6;
}

The ch unit is the width of the zero character in the current font, and it is the most honest way to set a measure. Sixty five ch gives you roughly sixty five characters per line, regardless of the font. The clamp() lets the body size scale smoothly between a 16 pixel floor and an 18 pixel ceiling as the viewport grows.

Set the type scale at the same time

Body size does not exist in isolation. Once it is set, the rest of the type scale falls out of it. A simple, reliable scale for most sites:

Element	Size	Line height	Notes
Body	16 to 18 pixels	1.5 to 1.6	The starting point. Everything else is relative.
Lead	20 to 24 pixels	1.4 to 1.5	The opening paragraph or article dek.
H3	20 to 24 pixels	1.3	Subheadings inside an article.
H2	28 to 36 pixels	1.2	Section headings.
H1	40 to 64 pixels	1.1	The page title. Use clamp() for the range.

The ratio between each step should be consistent. A common pattern is a 1.2 to 1.25 multiplier between steps, which is what designers mean by a modular scale. Pick a ratio, apply it, and your hierarchy reads as intentional instead of improvised.

For the underlying logic of why this hierarchy matters, see our guide to visual hierarchy and layout.

The checklist

Before you ship a reading layout, run it past this list. Most amateur typography fails at least one.

• Body text is at least 16 pixels, ideally 17 to 18.
• Body line height is between 1.5 and 1.6.
• No line of body copy runs past 75 characters.
• Headings have a line height of 1.1 to 1.2, not the browser default.
• The content column has a max width, set in ch or pixels, so text never runs the full screen width.
• Body text scales with viewport, with a floor and a ceiling via clamp().

Set these and the typography will read as deliberate, even to readers who could not articulate why. The point of all three numbers is the same: remove the small frictions between the reader and the words, so the words can do their job.