Thomas Zilliox
Expert CSS Freelance à Lyon

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.

Happy coding, Thomas.

Thomas ZILLIOX

That's my face!

Je suis un développeur CSS freelance sur Lyon.
En tant qu’expert CSS, on dit parfois que je suis « l’homme qui murmure à l'oreille des chevrons ».

Je suis également le co-créateur de Zupple Escape Game Lyon qui propose une salle d’escape game, des jeux de piste, des team building, de nombreuses énigmes en ligne, et même un podcast. Une aventure extraordinaire, grâce à laquelle il n’y a pas deux jours qui se ressemblent.