LH units are cool

Categories

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 emch 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.

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

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:

Code language
CSS
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.

Hello, I’m Andy and I’ll help you to level up your front-end development skills.

I’m a designer and front-end developer who has worked in the design and web industries for over 15 years, and in that time, I have worked with some of the largest organisations in the world, like Google, Harley-Davidson, BSkyB, Unilever, The Natural History Museum, Oracle, Capita, Vice Media and the NHS.

On Piccalilli, I share my knowledge and experience to make you a better front-end developer.

I’m the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone. Check out what we're all about.