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.