Unless you’ve been living under a rock the past couple of years, you’ve at least heard of the approach to design that says begin with your content, i.e. content is king as the UX buzzword factory refers to it. But what you don’t hear as much about is after curating your content, how do you optimize its readability?
Many factors go into to clean, legible content, such as signal to noise ratio, choice of font-families, contrast, kerning, and countless other considerations. But one property that we often overlook on the web is line-height.
I know, I know, line-height…who cares? But before you bail, just know that many of the best user experiences had a lot of thought and effort put into hand crafting vertical rhythm in ways that cater to how our minds work in regards to pattern recognition. While you may not find line-height explicitly called out on Little Big Details, a site that highlights digital experiences that exemplify the finer details of interaction design, good use of it helps turn good user experiences into great ones much the same way many other finer details do.
When you consider all of the options at your disposal, it’s kind of confusing trying to understand how to best use line-height, the distance between baselines of consecutive lines of text, for your web content. But first, what does that even mean – the distance between baselines? Well, in layman terms, it’s the space above and below lines of text such as in a paragraph, for example. On the web, it applies to any elements that have either inline or inline-block display properties, but is most commonly used with lines of text. Sounds pretty straight forward, but wait…
If you do nothing, line-height defaults to “normal”, which even according to the definition from the W3C is somewhat ambiguous: a “reasonable” value based on the font of the element set somewhere between 1.0 and 1.2. First, how can a definition rely on such a subjective term like “reasonable?” But then it goes on to reference some seemingly vague numbers like 1.0 and 1.2.
When assigning line-height, in addition to using keywords such as “normal” or “inherit,” you can assign a number, a percentage, or a length, such as 1.5, 150%, 1.5em, 24px, etc. In the aforementioned definition, 1.0 and 1.2 refer to number values, but what do those numbers mean? Well, simply put it’s that number multiplied by the element’s font-size. So if you have a paragraph tag set to 1em or 16px, a 1.5 line-height would be equivalent to 24px.
But sometimes you’ll see line-heights defined in ems or px, which are examples of length assignments. So likewise, taking the same paragraph tag and assigning a line-height of 1.5em would result in 24px. And the same thing can be said for a line-height of 150% as well in this case.
But are there differences, advantages, or certain situations you should use one method over another? What’s the difference between a 1.5 or 150% or 1.5em?
Unitless values—or using a number, are recommended as they are based off of computed values, and more importantly, is the only option that scales across different font sizes in conjunction with inheritance. Let me explain.
Let’s say you’ve declared your font-size and line-height in a parent element, it could be anything, but for the sake of illustration assume we’ve declared in a section tag a font-size of 1em and a line-height of 1.25em. Most browsers would translate that as 16px and 20px respectively. Now let’s say in a heading tag in the same section you set the font-size to 3em (48px) and allowed the line-height to cascade or be inherited from the parent element. Guess what happens to its line-height…it stays at 20px!! Contrast that to what would happen if you declared your section’s line-height to a unitless value of 1.25 your heading’s line-height would scale to 60px, which nine times out of ten is the desired result.
Here’s an interactive demonstration contrasting length and unitless line-heights:
See the Pen Understanding line-height by Jason McGovern (@maccgizzle) on CodePen.
So be careful when working with inheritance and line heights. On the surface, 1.5, 1.5em, and 150% may all seem like the same thing, but they’re not. Unless you have a specific reason not to, you should go unitless when it comes to line-heights.
I’d love to hear your thoughts and comments, or if you have a different approach to handling line-heights in your armory, please do enlighten us! Thanks.