How to tame line-height in CSS | CSS Tricks

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.

Explore Other Notes

Older

CSS fix for 100vh in Safari

Important Caveat: YMMV on this trick. Matt himself notes that there are potential issues and there's a discussion with Šime in the comments which highlights actual problems in …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>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 …</p> </body> </html>
  • Murray Adcock.
Journal permalink