Line height and spacing

Improve text readability with line-height and letter-spacing.

Line height

Line height is the vertical distance from one line of text to the next; it is set with the line-height property. The value can be a number, pixels or em.

If you write a number, it means a ratio: line-height: 1.5; is 1.5 times the font size. On a 16px text this gives 24px line height. A unitless number improves readability in long paragraphs.

Tight text (below 1) feels tiring; very loose text (above 2) looks scattered.

Letter and word spacing

The gap between letters is set by letter-spacing, the gap between words by word-spacing. Both accept pixels or em.

A slight gap on a heading adds air to the text: letter-spacing: 0.05em; opens letters up a bit. A negative value tightens: letter-spacing: -0.02em; gives a denser look.

Change word spacing only when readability suffers; most fonts set a good default.

Exercise Make the paragraph comfortable to read

Open a block for the p selector. Add the declarations line-height: 1.6; and letter-spacing: 0.02em; inside it.

Show example solution

p {
  line-height: 1.6;
  letter-spacing: 0.02em;
}

Test yourself

What does line-height: 1.5; mean?
```
p {
  font-size: 16px;
  line-height: 1.5;
}
```
- A fixed 1.5 pixel line height
- 1.5 times the font size (24px)
- 1.5 lines are skipped
- The font size grows by 1.5 pixels
Show answer

1.5 times the font size (24px) — Correct. A unitless 1.5 means 1.5 times the font size; on 16px text it gives 24px line height.

Readable line height

article {
  line-height: ____;
}

Show answer

article {
  line-height: 1.6;
}

Match each property to its job

line-height

Vertical gap between lines
letter-spacing

Horizontal gap between letters
word-spacing

Gap between words
font-size

Size of the text
Which property sets the gap between letters?
- line-height
- word-spacing
- font-size
- letter-spacing
Show answer

letter-spacing — Correct. letter-spacing sets the horizontal gap between letters.

Next lesson: Text align and transform

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies