Nope, nope, nope, line-height is unitless

Here’s a bit of CSS trivia that, at least on the surface, seems straightforward but that I see misused repeatedly. Let’s start with an oldie-but-goodie CSS interview question:

You want the text on your website to be double-spaced by default. Which of the following line-height values is the best way to do this?

200% 2em 2 double

Well, if you read the title of this post then you probably already figured it out. But let’s dig into it a bit first.

For starters, double is an invalid option. Yup, tricked you! The only keyword value that line-height accepts is normal . Now, 2em will certainly give you double-spaced text for the element that it’s applied to, but so will 200% .

The correct answer is 2 .

What the whaaat?

Okay, that may have confused you a bit, especially since browsers will accept length and percentage values. Let’s break it down together.

You should always specify line-height as a unitless number (say this into the mirror five times). That way descendent elements that specify a different font size will inherit that number instead of a fixed line height.

By making the line height unitless, the browser preserves the font-size / line-height ratio even if the font size changes. For example, the line height for the browser’s default 16px font size will be 32px , but the line height for the heading’s 32px font will increase to 64px .