The line-height property in CSS lets you set the distance between lines of text. While you can technically use any units you want (px, em, rem, %, etc), it's best to go with no units at all—just a number.
How does it work?
When you leave off the units, you're setting the line-height to the number you specify multiplied by the element's font-size.
So, if a paragraph's font-size is 16px, and you set its line-height to 1.5:
p {
font-size: 16px;
line-height: 1.5; /* 16px * 1.5 === 24px */
}Then its line-height will be 24px because 16 * 1.5 === 24.
Why should you do this?
But why should you do this instead of just setting 24px directly?
Two reasons:
- Scaling
- Inheritance
1. Scaling
Let's say I've decided that I want the font-size to be 32px instead of 16px.
With the unitless value, the distance between each line of text will scale properly.
The line-height will now be 48px because 32 * 1.5 === 48. The ratio is always correct.
The pixel value, on the other hand, will always have an absolute line-height. If I had explicitly set it to 24px instead of 1.5, then it would look ridiculous after I increase the font-size to 32px.
Working out the proper ratio means you don't have to deal with this if you ever change the font-size.
Just divide your desired line-height by the element's font-size:
- The
font-sizeis16px. - I want the
line-heightto be24px.
OK, so 24 / 16 === 1.5.
Now you can use the unitless value, and the spacing will always be correct, no matter the font-size.
2. Inheritance
The unitless value is also safer.
The MDN Web Docs explain that in most cases, this is the preferred way to set
.line-height and avoid unexpected results due to inheritance
Units like em and % leave you vulnerable to all sorts of inheritance issues. Sure, the rem unit is always based on the font-size of the root element, so that might be OK.
But the safest way is to just stick with the unitless value.