Line-height units

Which unit should we use for our CSS line-height? This property has a specific behaviour and its maintainability depends on the unit we will use.

Fixed units

I advise not to set line-height values with fixed units like 'px', 'pt', 'rem', 'vh', etc. The main problem is that we have no landmarks with this kind of values.

Line-height is often between 120% (compact) and 150% (large) of the font-size. In the following example, I need a calculation to tell if it is too compact or not.

.element {
  font-size: 16px;
  line-height: 20px;
  /* equivalent to 125% */
}

Play with this example on jsbin

There could be one good reason to use fixed units, when the designer gave you specific values, like "12/21pt", and you want to keep the same format.

Relative units

I also advise not to set line-height values with 'em' or '%' units. In this case, the problem is that we break the cascade.

The line height will be relative to the font-size for the elements matching the selector. However, it will be fixed for its children.

.element {
  font-size: 16px;
  line-height: 1.25em;
}
.element > .children {
  font-size: 12px;
  /* line-height computed to 20px */
}

Play with this example on jsbin

I found one use case for relative units, it allows you to keep a vertical rhythm whatever the children font-size.

Unitless

I advise to set line-height with unitless values. It is easy to read, for example, '1.25' is equivalent to 125% of the font-size. It respects the cascade, so the line-height will be proportional to the font-size, even for children elements.

.element {
  font-size: 16px;
  line-height: 1.25;
}
.element > .children {
  font-size: 12px;
  /* line-height computed to 15px */
}

Play with this example on jsbin

tl;dr

Use unitless values for line-height.