Line Height

When type was set by hand, strips of metal went between the lines to create the spacing. On screen it's a single value, and matching the font size while skipping this one produces a paragraph nobody can read.

The symptom usually arrives described as something else. In a five-line paragraph people lose their place and reread the same line, and they report that as the text being too small or the screen feeling cramped. Enlarging the text doesn't help; opening the line spacing fixes it at the same size. Cause and symptom point in different directions, which is why this value gets caught late. Size and typeface get checked at every design review, while this one tends to pass through on its default.

Decide what multiple of the font size to use, and lower the multiple as the text gets larger.

1. Keep body text between 1.5 and 1.7. At 16 pixels that's 24 to 27 pixels. Give 16-pixel text 16 pixels of spacing and the letters of adjacent lines nearly touch, turning the paragraph into a wall.
2. Lower the multiple for large text. A 32-pixel heading at 1.6 leaves a two-line heading so loose it doesn't read as one heading; 1.2 to 1.3 suits it.
3. Consider line length at the same time. Long lines make the start of the next one harder to find, so they need more spacing. Setting column width so a line holds roughly 45 to 75 characters reduces the problem.
4. Give denser scripts a little more. Scripts whose characters fill a square cell look tighter than Latin at the same size, so a 1.5 that works in English can feel cramped. In mixed paragraphs, set it for the denser script.
5. Write it as a unitless multiple. At 1.6, nested elements that change font size carry the spacing with them. Fixed at 27 pixels, small text inside keeps the wide spacing it shouldn't have.

Values get attached to each step of the type scale rather than chosen per screen.

"Raise this paragraph to 1.6. The lines are sitting on each other."

Body spacing is too tight to read comfortably.

"Headings need 1.2 so a two-line one reads as a single block."

Large text needs a different rule from body text.

"They're reporting small text, but it's set at 16. Check the line height first."

The symptom and the cause are different things here.

This happened on the Pagedeck help screens. Tickets kept arriving about text being hard to read, while body text measured 16 pixels and met the standard. Noa checked and found the line height at 1.3; after raising it to 1.6, the same complaint arrived twice in the following quarter.