Line height and line length for readable text

Line height is the distance from the baseline of one line of text to the baseline of the next, and line length (called the measure by typographers) is how many characters sit on one line. For body text, a line height of about 1.4 to 1.6 times the font size and a line length of about 45 to 75 characters is the range that reads comfortably in most fonts. Headings want less line height, often 1.05 to 1.25. Those two settings do more for readability than almost any font choice.

This guide explains why the ranges work, how the two settings affect each other, and how to set them for web pages, slides and social posts. It sits inside the wider typography basics guide, alongside letter spacing.

What line height and line length actually control

Reading is a series of jumps. Your eye takes in a few words, jumps along the line, then makes a long return sweep back to the left to find the next line. Line length decides how long that journey is. Line height decides how easy it is to land on the right line at the end of the sweep.

Too tight, and lines crowd together: descenders touch ascenders and the return sweep lands on the wrong line. Too loose, and the paragraph falls apart into strips. Lines that are too long lose the eye on the way back; lines that are too short make reading choppy.

How to choose a line height for body text

Start at 1.5 and adjust by eye. Three things push the number up or down.

• x-height. Fonts with a tall x-height (lowercase letters that are large relative to capitals) look denser, so they need more line height. Fonts with a small x-height can sit tighter.
• Line length. Long lines need more line height so the return sweep has a wider target. Short lines, like a narrow column or a phone screen, can use a little less.
• Weight and colour. Bold text and light text on a dark ground both look heavier on the page, so they benefit from slightly more space between lines.

Accessibility guidance points the same way. The W3C's text spacing success criterion asks that content keeps working when a reader raises line height to 1.5 times the font size, so any layout built around 1.5 already passes that part of the test. Never fix the height of a text box so tightly that extra line height would clip the words.

Line height for headings and big type

Line height is a ratio, so the space it creates grows with the font size. At 16 px, a line height of 1.5 adds 8 px of space. At 72 px, the same ratio adds 36 px, which is far more than a headline needs. That is why large type looks loose at body settings and needs tightening as it grows.

A practical scale: body text at 1.5, subheadings at about 1.3, headlines at 1.1 to 1.2, and very large display lines at 1.0 to 1.05. Check the tightest settings for collisions: a descender on line one (g, y, p) can hit an accent or ascender on line two. If it does, open the line height a little rather than moving individual lines.

How long a line of text should be

The long-standing range from book typography is 45 to 75 characters per line, counting letters, spaces and punctuation, with something around 60 to 70 feeling most natural for continuous reading. On a website that usually means a text column somewhere between about 560 and 720 px wide at a 16 to 18 px font size, but it depends on the font, so measure in characters rather than pixels.

To check, count the characters in a typical line. Regularly over about 80 means the column is too wide; under about 40 means it is too narrow, with ragged edges and stranded short words.

Too wide: 110 characters

1100 × 180

Comfortable: 65 characters

650 × 260

Too narrow: 30 characters

300 × 480

Setting line height and line length in CSS

Two habits cover most of it. Write line height as a unitless number, so every element calculates it from its own font size, and limit line length with the ch unit, which is based on the width of the zero character in the current font. MDN's page on line-height explains why unitless values inherit more safely than pixels or ems.

:root {
  --measure: 65ch;
}

body {
  font-size: 1.0625rem; /* 17px */
  line-height: 1.55;
}

.prose {
  max-width: var(--measure);
  margin-inline: auto;
}

.prose p + p {
  margin-block-start: 1em;
}

h1, h2 {
  line-height: 1.12;
  text-wrap: balance;
}

h3 {
  line-height: 1.3;
}

.caption {
  font-size: 0.875rem;
  line-height: 1.45;
  max-width: 55ch;
}

Line height and line length on posts and slides

Social posts and slides are read in seconds, often on a phone, so the rules shift. Lines are short by nature and there are few of them. Keep headlines tight, around 1.05 to 1.2, and keep any supporting line to one or two short lines at around 1.3. If a post needs a paragraph at body line height, it probably needs fewer words instead.

On a 1080 by 1350 post, a headline of three to six words per line reads well at phone size. On a 1920 by 1080 slide, the same principle applies from across a room: short lines, tight headings, generous margins. The guides to fonts for social media and presentation backgrounds cover the size side of the problem.

Text on a busy background needs a little more of everything: more line height, a larger size and a calmer area behind it. Text on a gradient covers the full method.

A quick checklist for readable spacing

1. 1

   Set body text first

   Choose the size, a line height around 1.5 and a measure of 60 to 70 characters. Tune everything else from here.

2. 2

   Tighten as type grows

   Step line height down through subheads to headlines, and check the tightest lines for collisions.

3. 3

   Measure in characters

   Count a real line. If it falls outside 45 to 75, fix the container, not the font size.

4. 4

   Let the reader override it

   Avoid fixed-height text boxes, so larger text or wider spacing never clips your words.