We are very familiar with the em
unit in CSS (which counter to traditional print typography measures the font’s point size or height not width), but have you ever used the ex
unit? It is defined as the x-height of a font, which is the height of its lowercase letters.
Ex unit expression can especially be useful for content-heavy sites, in which case, you can preserve alignment and font-rhythm much more consistently without relying on cumbersome line-height calculations, which can also allow better control with mixed font designs.
For example, 1.8 is usually considered a good measure for line-height. If you have the ex height, you can simply set the line height as 1.8 × ex
.