Line Length

Long lines are tiring in a way people rarely put into words. Your eyes jump along a line a few words at a time, then sweep back to the left to find the next one. The longer the line, the longer that sweep, and the easier it is to land on the wrong line.

Keep body text between 45 and 75 characters per line.

Line length90 characters

Your eyes do not glide along a line of text. They jump a few words at a time, then make one long sweep back to the left to find the next line. Short lines break that rhythm with constant returns. Long lines make the sweep so long that it is easy to land on the wrong line.

Your eyes do not glide along a line of text. They jump a few words at a time, then make one long sweep back to the left to find the next line. Short lines break that rhythm with constant returns. Long lines make the sweep so long that it is easy to land on the wrong line.

Too long

Zoomed out to fit

Sources disagree at the edges. Butterick allows up to 90 characters, Baymard recommends 50 to 75, and WCAG caps lines at 80. 45 to 75 is where they all overlap, so that is the band I use.

Finding the next line

The cost of a long line shows up at the return. The dashed line traces one, from the end of a line to the start of the next.

Reading is a series of small jumps. Your eyes land on a word, take in a few letters on either side, and hop forward to the next spot. At the end of the line they make one long jump back to the left and down, and that return is the part that fails first. The further the eye has to travel, the flatter that diagonal gets, and the easier it is to drop onto the line below the one you meant, or to read the same line twice. Nobody notices this as a problem with the layout. They just feel that the page is tiring and start to skim.

Reading is a series of small jumps. Your eyes land on a word, take in a few letters on either side, and hop forward to the next spot. At the end of the line they make one long jump back to the left and down, and that return is the part that fails first. The further the eye has to travel, the flatter that diagonal gets, and the easier it is to drop onto the line below the one you meant, or to read the same line twice. Nobody notices this as a problem with the layout. They just feel that the page is tiring and start to skim.

Reading is a series of small jumps. Your eyes land on a word, take in a few letters on either side, and hop forward to the next spot. At the end of the line they make one long jump back to the left and down, and that return is the part that fails first. The further the eye has to travel, the flatter that diagonal gets, and the easier it is to drop onto the line below the one you meant, or to read the same line twice. Nobody notices this as a problem with the layout. They just feel that the page is tiring and start to skim.

120 characters65 characters

120 characters65 characters

At 120 characters the return is a long, almost flat diagonal, and a small slip drops you a line too low. At 65 it is short and steep. Both are set small here so that 120 characters fit in this column.

Line height

Line length and line height move together. More space between lines gives the return a bigger target, so longer lines need more of it. For body text, start at 1.5.

Line height1.20

Your eyes do not glide along a line of text. They jump a few words at a time, then make one long sweep back to the left to find the next line. Short lines break that rhythm with constant returns. Long lines make the sweep so long that it is easy to land on the wrong line.

Your eyes do not glide along a line of text. They jump a few words at a time, then make one long sweep back to the left to find the next line. Short lines break that rhythm with constant returns. Long lines make the sweep so long that it is easy to land on the wrong line.

Butterick suggests 1.2 to 1.45, WCAG asks for at least 1.5. On screens I side with 1.5. This page is a good reference: its column is 576px, about 72 characters of 16px Inter, inside the band, with a 1.75 line height.

Usage

1ch is the width of the 0 glyph, which makes it the natural unit for a measure. Tailwind's max-w-prose is 65ch. But a zero is wider than the average letter in most interface fonts. In Inter, 65ch holds about 85 characters and 55ch about 70.

Pick the ch value for your font, then count a few lines. Anything that changes letter widths changes the result, including letter spacing. A narrower column also strands more single words at the end of paragraphs, which text-wrap: pretty cleans up.