The combination of responsive design and more component-based systems means that when we write CSS for an element, there’s a good chance we have absolutely no idea where it will be used. Because of this, something I like to do is allow an outer context to have control over font-size and colour and let the cascade do the rest.
This approach is absolutely fine, but it can create some issues if you are using fixed sizes on elements, because the text scaling will put those fixed elements out of proportion really quickly.
Relative sizing helps in this situation and I like to let
font-size do the work for me. By using
em units to size elements that would be previously sized with
px, we can let things scale, whilst maintaining a sensible scale of its parent’s
font-size. We also have the flexibility to use
em units for
height with this strategy.
I’ve set up three examples of contexts which I think are ideal candidates for this approach.
I pushed this tip out a while ago and it blew people’s minds. Let’s dive into it a little deeper.
The first step is to set your SVG icons css like this:
With that, their
height will be exactly 100% of their parent’s
font-size. You can even skip the CSS class and set the dimensions with
<svg> attributes instead:
<svg width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>
This approach is especially useful for when your SVG icon sits within a link or a button, and just like in the example shows: if it’s in a large context, it’ll scale with perfect proportion.
See the Pen Piccalilli Tip #5 —Relative sizing with EMs — Icon by Andy Bell (@andybelldesign) on CodePen.
Circular user avatars are a very common design pattern and they work really well if they are relative to the font-size of their sibling elements. This example has a font-size set on the parent
.profile component. The
.profile__heading elements are both using
em units to size themselves.
This is great because when we add a modifier of
.profile--large, which sets the component font-size to
5rem, both of these elements scale up and maintain their relative size in the component.
See the Pen Piccalilli Tip #5 —Relative sizing with EMs — Avatar by Andy Bell (@andybelldesign) on CodePen.
Just like on this site, sizing
<code> elements with
em units is super handy. The main reason it’s handy is because
<code> elements tend to look a bit small—especially if you’re using a serif like Georgia. Because of this, I knock up the
font-size to about
1.2em. This’ll then scale well if it’s in a
<p> or even a
See the Pen Piccalilli Tip #5 —Relative sizing with EMs — Code by Andy Bell (@andybelldesign) on CodePen.
This is a quick trick to add to your tool belt. Sizing things with relative units is great—not just for design systems—but also for accessibility. For all of the examples in this article, a user could set their system font-size to whatever they want and everything would be appropriately sized for them.
If you do end up using this utility, let me know on Twitter. I’d love to see these utilities provide real value for people.