3 ms·
> line-height: calc(1em + 0.5rem); Even cleaner imho, at least in theory, if you dont use 'em' but 'ex' for the relative sizing, the x-height of the element's
by moritz 3y ago
> line-height: calc(1em + 0.5rem);
Even cleaner imho, at least in theory, if you dont use 'em' but 'ex' for the relative sizing, the x-height of the element's first available font.
Good looking leading is often more influenced by the x-height of a typeface than by cap height (try setting Verdana and Times with the same line-height). So especially if your design has more than one typeface, using ex makes it more consistent.
Caveat: If the metrics are not set correctly in the font file, FF on Mac, and the Windows browsers will freak out. Should not be a problem with system fonts, but if you use web fonts, keep an eye on that.
I usually also set a unitless fallback, at least on the html element.
- chrismorgan 3y agoI think you’re misunderstanding what my invocation achieves: reduced line height on larger text.
- moritz 3y agoNo, I am proposing you write line-height: calc(2.5ex + 0.5rem); instead. The effect is the same, but based on the x-height of the font used, which can be beneficial for the reasons outlined. Adjust the ex to taste, between 2 and 2.5 or so.
- chrismorgan 3y agoAh, sorry, I missed that. Hmm, dunno. Interesting idea, but I suspect the uncertainty of actual value might cause me very mild difficulties occasionally. I’d want to play around with it in various fonts. Its failure mode is probably worse than using em, seen in a font with particularly tall ascenders or descenders. But then again, I have a vague feeling such fonts might commonly just extend beyond their box, in which case it’s not actually any worse. In other news, I really want wide browser support for the lh unit.