Encodera

Thanks for reading!

Donate to the site — we work hard for you.

How to change the line spacing

Short answer

line-height sets the line spacing:

<p style="width: 260px; line-height: 1.2;">Tight lines are fine for short headings but hard to read in long text.</p>
<p style="width: 260px; line-height: 1.7;">Looser lines make long paragraphs much easier to read.</p>

For body text 1.5 to 1.7 works well, for headings 1.1 to 1.3.

Without units

A unitless number is a multiplier of the element's own font size. Descendants inherit it and recalculate it for their font. A value in px or em is inherited as a fixed number and can be too small for a large heading inside:

<div style="line-height: 16px; width: 260px;">
  <h3 style="margin: 0;">This heading overlaps itself when it wraps</h3>
</div>

Space between paragraphs

line-height changes the spacing inside a paragraph. The space between paragraphs is margin:

p { margin: 0 0 1em; }

Common mistake

Trying to space out paragraphs with line-height or tighten the spacing with a negative margin. Each property has its own job: lines inside a paragraph are line-height, space between blocks is margin or gap.

Functions used in this recipe

  • line-height — The height of a line of text — the distance between lines.
  • margin — The outer spacing of an element — the distance to its neighbors.
  • font-size — The size of the font.

Thanks for reading!

Donate to the site — we work hard for you.