line-height controls the vertical space between lines of text. It is one
of the most important properties for readability. Too tight and text feels cramped. Too
loose and it feels disconnected. Getting line height right is essential for good typography.
How to Set Line Height
You can use unitless numbers, pixels, percentages, or length values. The recommended approach is to use a unitless number, which acts as a multiplier of the font size.
body {
line-height: 1.6;
}
.tight {
line-height: 1.2;
}
.loose {
line-height: 2;
}
A unitless value of 1.6 means the line height is 1.6 times the font size. So if the font is 16px, each line takes up 25.6px of vertical space. This scales automatically if you change the font size.
Try it Yourself →Why Unitless Is Best
When you use line-height: 1.6 without units, the value is inherited as a
ratio. Every child element inherits this ratio, so the line height scales proportionally
with each element's font size. With pixel values, children inherit a fixed number that
may not suit their own font size.
/* Bad: fixed pixel value */
.parent {
font-size: 16px;
line-height: 24px;
}
.child {
font-size: 24px;
/* Still inherits 24px line height, which is too tight */
}
/* Good: unitless multiplier */
.parent {
font-size: 16px;
line-height: 1.5;
}
.child {
font-size: 24px;
/* Gets 36px line height (24 × 1.5), nice and proportional */
}
This is one of those small CSS details that separates amateur typography from professional typography. Always use unitless line-height values.
Recommended Values
For body text, 1.5 to 1.8 works well. Headings can be tighter at 1.1 to 1.3. Code blocks and preformatted text often look good at 1.4. These are guidelines, not rules — always test with your actual content and font.
body {
line-height: 1.6;
}
h1, h2, h3 {
line-height: 1.2;
}
pre, code {
line-height: 1.4;
}