It might seem like no big deal that the web gained two new units, lh and rlh, to reference line heights. Support shipped in every browser in 2023 without much fanfare.
https://webkit.org/blog/16831/line-height-units/

What the fuck, this is huge! The only way before was referencing the line height from a variable, but there’s never a guarantee that it really is the current line height.

@volpeon I am kinda dumb with webdev stuff. Exactly why is this a big deal? What would I use line height for?

@stefan There are two cases where this is useful for me:

The first one is also shown in the article, which is establishing spacing between paragraphs and other elements which is relative to the line height. It’s good typography to make it a multiple of the line height.

The second one is components. For instance, I have a checkbox component with custom styling, so I need to draw a box next to the label. The label has a line-height, and the box’s position depends on that. Setting a fixed line-height to the checkbox would solve that problem, but then it would mess up the way it integrates into the page, because the line height I set may be different from the current line height. With the new line height unit, I can make these calculations actually use the active line height.

@volpeon not gonna pretend I fully understand. The first one I can get atleast. Maybe time to rework some CSS on my blog?

@stefan I’ll try to explain the second one differently.

So, a checkbox component consist of two parts: the box ☑️ and a label next to it. I overwrite the styling of checkboxes, which means I need to draw a custom ☑️.
However, the problem is that the current line height offsets the positions. If the label has a line height of 1.5, it will be taller than with line height 1 and the text will be a bit lower inside of the line. And because of this phenomenon, I also have to adjust the vertical position of the box to make it line up with the text. Otherwise you might get:

☑️
    the label

One solution could be to give the check box a fixed line height. The label would always have the same height, and that means I can also give the box the same fixed position.
But then it will look weird when placed into the page itself, because the text around the checkbox may have a different line height than the fixed line height I assigned to the check box. It would look like this:

some text:
           ☑️the label

@volpeon Oh I see. I do remember such stuff being kinda dumb to align properly. (I would have even used tables or something

Seems useful and less fiddly indeed

@stefan @volpeon

That’s exactly what’s covered in the link.