Leading

Every body paragraph you ship has a line height. Most of the time you never set it. The browser default or a CSS reset does it for you. That's why leading is the variable developers forget and readers feel.

Compare

At 1.2, lines stack on each other. Descenders collide with ascenders. The block reads like a wall: dense, urgent, exhausting.

At 1.6, the same words have room to breathe. Each line is distinct. Your eye tracks horizontally without fighting vertical crowding.

Line height controls the vertical rhythm between lines. It doesn't change what the text says. It changes how hard your brain works to read it.

Line Height

Body text needs room to breathe. Line height controls the vertical rhythm between lines. Too tight and the block feels cramped; too loose and paragraphs start to float apart. Drag from 1.0 to 2.0 and notice where the text opens up without losing cohesion.

Line Height1.20

At 1.4, multiline paragraphs still feel compressed, especially on mobile, where line breaks are frequent. At 1.75 and above, individual lines start to disconnect. The sweet spot for body copy on the web is 1.5 to 1.65.

Developers often inherit line-height: 1.5 from a reset and never touch it. Then they tighten headings to 1.1 and wonder why long form content feels wrong. Leading is not one global number, but body text should never drop below 1.5.

The Rule

Set body line-height between 1.5 and 1.65, and never below 1.5 for reading text.

Tight leading increases saccade error on multiline blocks. The eye loses its place moving to the next line. Loose leading breaks paragraph unity. Lines read as separate units instead of one thought.

body {
line-height: 1.6;
}

p, li {
line-height: inherit;
}

h1, h2, h3 {
line-height: 1.2;
}

body {
line-height: 1.6;
}

p, li {
line-height: inherit;
}

h1, h2, h3 {
line-height: 1.2;
}

Common Mistake

Using line-height: 1.2 on body text because it looks clean in a single line label or button. Body paragraphs need more air than UI chrome.