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. In the example above, if the line height is set on the body selector:

body {
  line-height: 2;
}

• the line height for the browser’s default 16px font size will be 32px
• the line height for the heading’s 32px font will increase to 64px

Hopefully this helped explain the proper way to use line-height. If you’re still using a length or percentage value, consider switching to a unitless number. This will give you greater control over your website’s text.

• CSS