Demystifying Line Height on the Web — Part 2
Why you should always use relative line height
Foreword
In the first part you learned that line height in the web is NOT defined as the distance between the baselines. The line height of a text field is like a box with a specific height and a vertically centered aligned text inside.
I guess many of you designers simply use absolute values to define the line height, so that each font style in your design has a specific font size and an associated line height. But in the world of CSS code there are more options than just using absolute values. And the good thing is: they are all adaptable and applicable in Sketch, not by default but by calculation and little workarounds. That means you as a designer can adapt this to your workflow to increase flexibility and to improve the communication between you and the developers. And in the end the coded result looks and behaves much closer to the design. That’s what we always want, right? 🎨
In CSS the line height is conceptually defined in two different ways: Absolute and relative. If you decide to use absolute values you need to define a specific line height for each and every font size you’re using. However, if you go with the the relative option it’s totally sufficient to use the same line height for every font size.
How does this work you ask? Let’s get down to the nitty gritty details. 🤓👇
Absolute line height
Using absolute values is the fundamental and basic way of defining the line height like we always did in common graphic design software. Pixel is the commonly used unit while point (=pt) is only used for print CSS files.
Sketch uses also px, but doesn’t show it in the text properties.
By defining line height in the absolute way you give each text field a specific font size and an associated line height value. This leads us directly to the biggest disadvantage of the absolute defined line height: If you increase the font size value of a text field, the line height value stays the same and the lines become narrower.
With using an absolute line height there’s no calculated relative relationship between the font size and the line height.
Relative line height
Developers can define the line height with a decimal Number without any unit. The result is a relative line height which acts as the multiplier to calculate the absolute line height. The little math happening in the background looks like this:
absolute line height / font size = relative line height
To make this clearer, let’s look at the example:
Imagine a text field in your design file with an absolute line height of 28px and a font size of 19px. Your calculation is now: 28px/19px = 1.48
(Note: Actually it’s 1.47, but there are some rounding inaccuracies in Sketch. You should always double check design against code. That’s why I used 1.48 in my example)
1.48 is now your relative line height value which can be used in Sketch by multiplying it with each font size. Unfortunately you have to do this manually or by using the ‘Set Line Height’ Plugin. So when the font size changes just don’t guess the line height, but rather calculate it by using this formula:
font size * relative line height = absolute line height
The developer is now able to work with one simple value which equals the absolute line height for each font style but calculated. Font sizes can now easily be customized for e.g. special cases or responsive breakpoints without losing its associated line heights.
Using a relative line height is the recommended method because you define only one value for every font size. You then have a consistent line height which is relative to each font size and very easy to change globally.
Sidenote: There are diverse unit options: Number, percentage, em and rem but the visual result is basically the same. Since Number is the most recommended option I only went into detail of this.
Default line height (aka Normal)
The default line height is just a special relative line height option. It occurs when nothing is specifically defined. And if the developer defined it, the code would be line-height: normal.
Every font family has its own Normal value which in the most cases is not far away from 1.2, as well as in Sketch as in the browser.
This invisible number of roughly 1.2 is multiplied by the font size to calculate the absolute line height (see recent topic). This is equal to the one Sketch uses. So when both the developer and the designer don’t define the line height, it should lead to the same result.
In Sketch the Normal value is shown as greyed out absolute line height value. It adapts automatically when you change the font size. That means the calculation of the absolute line height happens on the fly in real time.
This is a big advantage for your design workflow in Sketch, but since the default line height is in most cases the most boring choice you can make you will not benefit from that advantage very often. A real pity.
Conclusion
I hope you can now see the benefit of knowing the difference between these two approaches. Even though Sketch is not able to show relative values, you should still always try to apply it by using this workaround. This will help to avoid misunderstandings and inconsistencies between code and design, I promise 🤞
By the way: There are tools out there being able to do it. With Figma you can use percentage instead of px, which basically is the same as numbers.
Framer X does ONLY offer relative line height. You can’t even use absolute line height.
Please Sketch, give us relative line height, so we don’t need a workaround anymore!
And in case you missed the first part, here it is:
I really hope I showed you something you didn’t know so far. If so, please share it by simply leaving some 👏 here. Thanks for reading 🤓
