Why should line-height be unitless in CSS?

CSS, Layout, Visual · Nov 27, 2022

I've often heard that line-height should always be unitless. In my earlier coding years, I didn't question it much, but lately I've come to wonder why that is. In my mind 1.5 and 1.5em should produce the same result, right? Turns out, they don't.

There's a subtle difference between the two and it has to do with the fact that line-height is an inherited property. A unitless value will be inherited as-is, meaning the actual value will be recalculated for each element, accounting for the font-size of the element. However, a line-height with any unit will be calculated once and then inherited as a fixed value. This can cause vastly different results, especially if the declaration is in the body element or something similar.

Speaking of the body element, it could be a good idea to define your base line-height as a unitless value there to minimize repetition:

body {
  line-height: 1.5;

So, is line-height with units prohibited and should we always use unitless values? Not necessarily. Factors such as codebase conventions, design systems and personal preference play a role here. For example, maintaining an exact, perfect vertical rhythm with unitless line-height values can be a bit tricky. In such cases, using line-height with units can be a good idea, but remember to be consistent to avoid headaches.

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • Tips & Tricks

    Snippet collection

    A collection of quick tips and tricks to level up your coding skills one step at a time.

  • Offscreen

    CSS, Layout

    Hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible.

  • Fits an positions an image appropriately inside its container while preserving its aspect ratio.

  • Limit multiline text to a given number of lines.