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.
double is an invalid option. Yup, tricked you! The only keyword value that
line-height accepts is
2em will certainly give you double-spaced text for the element that it’s applied to, but so will
The correct answer is
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
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
Hopefully this helped explain the proper way to use
line-height. If you’re still using a length or percentage value, strongly consider switching to a unitless number. This will give you greater control over your website’s text.