line-height
The height of a line of text — the distance between lines.
Syntax
line-height: value;Values
| Parameter | Type | Description |
|---|---|---|
| number | number | A multiplier of the font size: `1.5`. |
| px | length | A fixed height: `24px`. |
| normal | keyword | The font's default, usually about 1.2. |
Examples
Cramped and comfortable spacing:
<style>
p { max-width: 280px; }
</style>
<p style="line-height: 1;">line-height: 1 — the lines are cramped and hard to read when the text runs over several lines.</p>
<p style="line-height: 1.6;">line-height: 1.6 — there is air between the lines, and long text reads easily.</p>Notes
Use a number without a unit: it is recalculated for every font size, while px or em are computed once and inherited as a fixed value. For body text 1.4–1.6 is comfortable, for headings 1.1–1.2.
See also
- font — A shorthand that sets the style, weight, size, line height and family of the font in one line.
- font-size — The size of the font.
- letter-spacing — Extra space between letters.
Related recipes
In the tutorial
- Text and fonts — Font family, size, weight, italics, line height, alignment and text decoration, plus loading your own font.