Line length, leading and the comfort of reading

Some pages are tiring to read even when the writing is good and the font is well chosen. The reader drifts, loses their place, rereads a line, and eventually skims. More often than not the cause is not the words or the typeface but two unglamorous settings: how long each line is, and how much space sits between the lines.

These are the details readers never consciously notice when they are right, and always feel when they are wrong. Fortunately they are among the easiest things on a website to fix.

Measure: how long a line should be

Typographers call line length the measure. It is usually described in characters per line, counting letters, spaces and punctuation.

The long-standing guidance from print typography is that comfortable body text sits somewhere around 45 to 75 characters per line, with something in the region of 60 to 70 often feeling just right. This is a convention rather than a law, but it is a useful one, and it holds up well on screens.

Here is why it matters. When lines are very long, the eye has a long journey back from the end of one line to the start of the next. On that return trip it can easily land on the wrong line. Readers compensate by slowing down or by giving up and scanning. When lines are very short, the opposite happens: the eye jumps back so often that reading becomes choppy, and sentences get broken into awkward fragments.

How to check your measure

You do not need special tools. Take a paragraph from your site, count the characters in a typical line (or count roughly ten words, since an average English word with its space is around six characters), and see where you land.

A common problem is a blog or "about" page on a wide desktop screen where the text stretches the full width of the browser. On a large monitor that can easily mean well over a hundred characters per line. A sole trader's services page, for example, might have a single long paragraph spanning the entire window, which looks sparse and reads poorly at the same time.

How to fix it

The simplest fix is to give your text container a maximum width. Setting it in character units ties the width to the font itself, so it stays sensible if you change the size later:

.prose { max-width: 66ch; }

The ch unit is based on the width of the zero character in the current font, so 66ch lands close to the comfortable range for most typefaces. Centre that container, or align it with your grid, and the page immediately feels calmer.

On phones, the screen width usually limits the measure for you. At typical phone widths with a 16 to 18 pixel font, lines tend to fall around 35 to 45 characters, which is on the short side but perfectly readable. Just make sure your side margins are not so large that lines get squeezed even further.

Leading: the space between lines

Leading (pronounced "ledding", after the strips of lead that printers once placed between lines of metal type) is what CSS calls line height. It is the vertical distance from one line of text to the next.

Browsers default to a fairly tight line height, which suits short labels but feels cramped in paragraphs. For body text on screens, a line height of about 1.4 to 1.6 times the font size is a dependable starting range.

Leading and measure work together

These two settings are linked. Longer lines need more leading, because the extra space gives the eye a clearer path back to the start of the next line. Shorter lines can take a little less.

So if your layout must have slightly long lines (perhaps in a two-column layout where columns are wide), nudge the line height up towards 1.6 or even 1.7. If your text sits in a narrow card or sidebar, 1.4 may be plenty.

Leading changes with size

Large text needs proportionally less leading. A 40 pixel heading with a 1.6 line height will have huge gaps between its lines, so a wrapped headline looks like two separate statements. Headings generally look better somewhere around 1.1 to 1.3. Small print, such as captions and footnotes, often benefits from slightly generous leading because small letters are harder to track.

The font matters too

Fonts with a large x-height have tall lowercase letters that fill more of the line, so they usually need a bit more leading to avoid feeling dense. Fonts with a small x-height and long ascenders and descenders already carry built-in space and can sit a little tighter. Always judge leading in the actual font, never in the abstract.

Paragraph spacing: the overlooked third setting

Between lines within a paragraph, and between paragraphs, there should be a clear difference. If paragraph spacing is the same as line spacing, paragraphs merge into one grey block. If it is enormous, the text breaks apart into floating islands.

A simple approach is to set the space after each paragraph to roughly the same as the line height, so a 17 pixel font with a 1.5 line height gets around 25 pixels of space between paragraphs. That keeps the rhythm consistent while making each new paragraph obvious.

Avoid indenting paragraphs and adding space between them at the same time. Pick one method. On the web, spacing is far more common and generally clearer.

Alignment and its effect on comfort

Left-aligned text with a ragged right edge is the most comfortable choice for most web content in left-to-right languages. Each line starts in the same place, so the eye always knows where to return.

Justified text (straight edges on both sides) can look tidy in print, where careful hyphenation smooths out the spacing. Browsers handle this less gracefully, and you often get uneven gaps between words, sometimes forming distracting vertical channels of white running down the paragraph. Unless you have tested it carefully, leave body text left-aligned.

Centred text is fine for a short headline or a two-line introduction, but becomes hard to read beyond three or four lines because every line starts in a different place.

A worked example

Imagine a garden centre's seasonal planting guide, laid out in a single column that stretches across a wide desktop screen. The font is a pleasant 16 pixels, the line height is the browser default, and paragraphs are separated by a small gap.

To improve it, you would:

1. Raise the body size to 17 or 18 pixels for easier reading.
2. Constrain the text column to around 65 to 70 characters.
3. Set the line height to 1.55.
4. Add paragraph spacing roughly equal to one line.
5. Tighten the headings to a line height around 1.2.

Nothing about the content or the colours has changed, yet the guide becomes something people can actually read from start to finish.

Reading comfort checklist

• Body text lines fall within roughly 45 to 75 characters on desktop.
• Text containers have a maximum width, ideally in ch units.
• Body line height sits around 1.4 to 1.6, adjusted for measure and font.
• Headings use tighter leading than body text.
• Paragraph spacing is clearly larger than line spacing.
• Body text is left-aligned, with centring kept for short passages.
• You have read a full page on both a phone and a wide screen.

Comfortable reading is a kindness to your visitors. They may never thank you for it, but they will stay long enough to read what you wrote.