Optimal line height with calc in CSS

The problem with unitless line-height

When setting line-height to a unitless number, it uses that number and multiply it with the font size. The result calculated by the browser is then used as the line-height.

line-height: 1.5;

In this case the line-height is 150% of the font size. Even if this value is relative, it will not solve the problem for us.

The optimal line height for small texts are close to 1.5. For large texts the optimal line-height is closer to 1. Therefor we need to find a way for the browser to calculate the best line-height depending on the font size.

The line-height for the small text above works fine, while it for large texts does not. Still, the line-height is 1.5 in both cases.

Calc does not work with unitless numbers

Maybe we can mix relative and absolute numbers to achieve what we want?

Let's use the tighter relative line-height 1, mainly to control the large texts. Then we apply absolute pixel values to make line-height a bit larger for smaller texts.

line-height: calc(2px + 1 + 2px);

No, that does not work because we can´t use unitless numbers in our calculation.

So how can we fix it? We have a few options.

Solution 1 - The ex-unit

Jesús Ricarte has come up with an interesting solution. He uses the ex-unit to get around the problem with unitless numbers. The ex-unit is the height of the lowercase letter x. When using 2ex we should get close to the height of the text.

line-height: calc(2px + 2ex + 2px);

While this solution works great, I think there is room for improvement.

Solution 2 - My final solution

As stated before, we can't use calc with unitless numbers, but we can use perentages. The number 1 is the same as 100%.

Also, instead of having two pixel numbers, we can add them together. That leaves us with one single pixel value, which will make the code a bit easier to read.

The result is very simple, yet very powerful.

line-height: calc(100% + 4px);

Different fonts may require different numbers. To change the line-height primarily for large texts, change the percentage value. To primarily change the line-height for small texts, change the pixel value.

Feel free to experiment to get the result you need.