Variable line-height

The ideal measure — that is the length of a line in body text — should normally be somewhere between 20em and 40em, according to Robert Bringhurst, and he knows these things. If it gets wider it’s hard to find the beginning of the next line while reading, and if it gets smaller not enough words fit on a line. This is a very good rule of thumb for most designs, but of course there are exceptions. And there are also factors that influence the ideal width of the measure. For instance, simply said, when the line-height is larger the measure can be wider. Which makes sense: it’s much harder to find the next line on a wide text if all the lines are cramped together. Extra white-space between the lines can solve this.

This is an exceptional design, I know, but I created this new site that shows an ever growing string of related words. Once it starts filling up, with takes at least a few weeks, the measure of this string will be as wide as your viewport. Which can be very small if you’re on a phone, but it can be very wide as well. On a small viewport a smaller line-height makes sense, and on a very wide screen it should be very big. Of course I could use media queries to solve this, but nowadays we have viewport relative units. So I decided to try a few of those instead. I have to warn you before you read on. I think the techniques I describe here are close to useless.

Viewport width

The first unit I tried is vw. Of course. Here’s an example of a page that uses 3vw for line-height. This works fine on large screen. It is a disaster on smaller screens though. Completely unusable. Again, we could use media queries to solve this. But first I tried vmax.

Viewport Maximus

The problem with using the viewport width as a unit for the line-height is that most small screens are not wide at all. Usually they are pretty high though. At least higher that the width. Maybe, I thought, they are high enough to use the vmax unit instead. Here’s an example page that uses 3vmax for line-height. And if you look at this page in your desktop browser in a tool like Ish, then this looks like a pretty good solution. A very high line-height on wide screens and a pretty good line-height on a small screen as well. Of course this is not true: the issue with tools like Ish is that the height of the screen is unusually high. This is what this code looks like on a regular sized screen. So nope, vmax isn’t good enough. What we really need is min-line-height.

Calculations

Ever since I saw this incredible piece of code I want to calculate all the things. So why not calculate line-height. With a calculation we can make sure that the line-height never gets smaller than a certain level. For my example line-height: calc(1.414em + 1.414vw) works really well. It results in a very high line-height on wider screens, but it never gets too small on tiny screens.

Warnings!

There are two problems with this technique. First of all, calc() doesn’t work in line-height in Firefox. So don’t depend on it.

The second problem is bigger. Viewport relative units ignore all user settings. When you zoom in your desktop browser, the line-height will not change, which is especially problematic in the first two examples.

Conclusion

You shouldn’t use units for your line-height. No em, no vw, no vmax, no calc(), nothing. A simple line-height: 1.5 works best. And if you have a weird design like mine, use media queries.