line-height property in CSS lets you set the distance between lines of text. While you technically can use any units you want (
%, 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
So, if a paragraph’s
16px, and you set its
line-height will be
16 * 1.5 === 24.
Why should you do this?
But why should you do this instead of just setting
Let’s say I’ve decided that I want the
font-size to be
32px instead of
With the unitless value, the distance between each line of text will scale properly.
line-height will now be
32 * 1.5 === 48. The ratio is always correct, as we can see in the screenshot below:
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
Working out the proper ratio means you don’t have to deal with this if you ever change the
Just divide your desired
line-height by the element’s
- I want the
24 / 16 === 1.5.
Now I can use the unitless value, and the spacing will always be correct, no matter the
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
% 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.
Here’s a quick demo on CodePen.
If you have questions, feedback, or any other suggestions, please do email me. I'd love to hear from you!