An interesting read that covers some of the basic terminologies of typesetting, as well as the technicalities of how browsers actually interpret the line-height
value. Hint: it's not what you'd probably expect. Line height is more accurately a "line box", another layer of the HTML box-model, which is why you can set padding
and margin
to zero on text and you'll still have a gap between lines.
That's interesting stuff, but Caleb also shares a Sass mixin based on a formula used in the Basekick package which can actually get the browser to remove the intrinsic line-box whitespace. As he explains, that means you can create web layouts which are actually aligned to the pixel, not an arbitrary box object that you can't really control. It's a hack and I'm not sure I'd ever want to use it personally (not least of all because it would make Sass a core dependency), but the idea that native support might be coming to CSS in the shape of line-height-trim
or leading-trim
is very exciting. I foresee a future where a CSS value like one of those becomes a part of universal resets, much like box-sizing
is today.