Bisexual Pride

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:

  1. Scaling
  2. 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-size is 16px.
  • I want the line-height to be 24px.

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.


Here’s a quick demo on CodePen.