Demystifying Line Height on the Web — Part 1

What line height really means in Sketch and CSS

Foreword

You probably think:

“What’s so special about line height? This is basic typography knowledge and I just tell the developer what line height he should use.”

But line height is not a self-explaining topic when it comes to the CSS implementation. I realized that there are still many designers who don’t know what line height really means for the developers.

This article aims at UI designers who work close together with web developers on a regular basis. But that doesn’t mean it’s not interesting for developers as well. The good news is that the way Sketch renders fonts is very similar to how the browsers render them. So there’s not much abstraction or transformation needed like in the past when using Photoshop.

This article is divided into three parts. Part 1 explains the basic line height handling in Sketch and in the browser. Part 2 will explain the different line height options.

Let’s start with an essential rule:

With great line height comes great padding

This sentence is probably a little too epic, but good to keep in mind 🙂

As a designer especially for those doing mainly print design using InDesign, Photoshop or Illustrator you learned that line height is the distance between the baselines of successive lines of type. Due to historical reason from the good old hand-typesetting days this actually isn’t called line height but leading.

The distance between the baselines

Browsers as well as Sketch handle that differently. Every line is handled as an individual box with vertically centered text inside.

In browsers line height is NOT the distance between the baselines

To validate my claim just give a text a background color in the browser. Or go ahead and mark this text. When you increase the line height you’ll see that this makes the whole label larger, on the top as well as on the bottom.

So when making line breaks it’s like having many boxes below each other with vertically centered text inside.

A label with a line height of 35px and two line breaks shown in Photoshop vs. Sketch

Note: I know in Sketch there’s an option to make the text align to the bottom, top and center, but since this is not reflecting the CSS world, I would not recommend to use this option for web design.

The vertical space to following elements

As a result of the prior described facts the margins to each object and text field become larger or smaller depending on the line height. That’s the case for the designer as well as for the web developers.

So in the name of all web developers: Please stop calculating margins from the baseline, capital letter or anything else.

Example

In the following example you see two text fields below each other. The headline has a line height of 60px and the sub line has a line height of 22px. The margin between these text fields has a fix value of 10px. When you now decrease the line height of the headline from 60px to 40px, the space inside the headline (aka padding) becomes smaller by 10px on the top and 10px on the bottom. Due to that the sub line moves up 20px, and so the space between headline and sub line becomes smaller, although the margin value didn’t change.

How to handle baseline grids

Google’s Material Design shows a beautiful example of a baseline based line height approach. They don’t use the term line height, they use leading, what means they refer to the distance between the baselines. If I used InDesign this would be perfectly applicable. But since there’s technically no such things as a baseline grid in Sketch and CSS this must be transformed.

Example

On the left side of the following example taken from the Material Design Guidelines I found out that they use a headline with font size of 34px and a line height of 40px. The body text has a font size of 16px and a line height of 24px. This looks very nice with a baseline grid. Of course you can design it like that. But in contrast to InDesign Sketch doesn’t offer any native option to use a baseline grid where text automatically sits on. So unfortunately this must be handled manually if you want to go this way of designing typography. Means you have to draw a baseline grid and attach two labels with a specific line height and a specific vertical margin on it in the way that it sits on the grid.

The result looks like that:

For every web developer who still wants to use this approach (or is forced by the designer to use it ;) there’s a CSS baseline workaround.

Conclusion

Line height in Sketch and on the browser is not the distance between the baselines. Every line is handled as an individual box with vertically centered text inside. This implies by increasing the line height you add space to the top and to the bottom of the text field. Which in turn implies that designers who want to use a baseline grid have to do that manually. Life is hard 😉

The second part of this article shows you how the different line height options are defined in CSS compared to Sketch. Did you know that relative line height is the recommended line height option in the browser? And have you ever used a relative line height in Sketch? I will show how you can transfer this to Sketch.

Demystifying Line Height on the Web — Part 2

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 🤓