Universal Line Height

I’ve discovered a simple formula for a universal line height in CSS:

line-height: (1em + 1ex);

It’s surprising how well this works. This formula often results in a line height close to 1.5. For example, Helvetica Neue has 1000 units per em and an x-height of 500 units. So 1em + 1ex equals exactly 1.5em.

It’s especially useful in cases where people can choose fonts without being able to set the line height. For fonts with a smaller x-height, like Garamond, this will result in smaller line heights, and fonts with a larger x-height, like Inter, it’s the other way around.