LH units are cool

I’ve seen a few examples of the new(ish) lh unit out in the wild, but what I haven’t seen is examples of what I think is one of the most useful things you can do with them: sizing icons!

Historically, I’ve used em, ch and ex units to size icons in contexts like buttons so font sizes icon sizes are nice and synced. Using ex units is especially useful because 1ex is the height of the x character in the chosen font and size.

The lh unit is even more useful though because it is relative to the computed line height. This makes sizing icons relatively and aligning them relatively, much easier.

.button svg {
  width: auto;
  height: 0.8lh;
}

See the Pen LH Unit Icons by Andy Bell (@piccalilli) on CodePen.

The lh unit isn’t really even very new — it’s been around for a few years — but it is now supported across all evergreen browsers since Mozilla finally implemented it earlier this year.

What happens for older browsers though? Good question! This is where progressive enhancement steps into the equation. I’ve set this global style:

svg {
  width: 1em;
  height: 1em;
}

Then, my CSS that implements the lh unit is more specific, so that minimum viable experience is overridden by the more specific CSS. Easy! Everyone gets a good experience too.

Pretty cool.