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.