Now, on to one of the more baffling ‘reasons’ for using rems and ems. (I don’t know why I’m numbering these headings.)

#4 Make modules that you can resize simply by changing the root element font-size

These words that you have so graciously been reading were spurred by a blog post that came out a few weeks back, Design a responsive site with em-based sizing.

It explains (accurately) that by using a combination of rems and ems, you can create a component (say, a modal window) that can scale to different sizes just by changing a single font-size on the root element of the component.

It makes sense. In the same way that “if you often murder people, it is handy to carry a shovel in the boot of your car” makes sense.

It’s great advice I’m sure. But I can’t remember the last time I did a murder, and I can’t recall the last time I wanted a component that grew in all dimensions, paddings and font-sizes, by the same factor, by changing just one value.

So here’s my advice. When you’re starting a project, ask yourself: will I need to create any modules that will sometimes be a certain size, and other times be exactly 10% bigger in every dimension. If the answer is yes, follow the advice in the blog post above, it is exactly what you are looking for. And carry a shovel in your boot, ya psycho.

You can scale all the text on your page with one property

(I’ve decided not to number the headings anymore.)

Another befuddling reason to use ems goes like this: you have defined font-size in your CSS in, totally, like, 50 different places. You want all 50 to be bigger on bigger screens, and smaller on smaller screen, and that’s a lot of media queries.

This is apparently best solved by using rems everywhere, then changing the root font size in your media queries. Boom! All your text will change size at once.

I think this advice can be safely ignored for two reasons. I shall list them for you.

It assumes that you want to increase/decrease all text on your site at the same time for a given breakpoint. Headings, menu items, body text, all at once, all by the same factor. Now that’s courage. The real problem here is that you’ve got font-size defined 50 times. If this is you, you need to get your typography organised. Oh no. Do you hear that? That’s the pounding hooves of a typography rant…

Here’s the thing, when you have a separate file just for typography, and you have, say, 12 styles in there, and for each style you have different sizes for four screen sizes, that’s 48 different font-size declarations and probably line-heights, maybe margins and letter-spacings too. As Winston Churchill once said, “that’s a lot of stuff”.

Now, it’s easy to see all this and think “oh no, that’s a lot of repetition, we need to do this a different way — no matter what the cost — to avoid repetition.”

I disagree. A lot. Too often I see complexity introduced into apps in the name of The Almighty DRY. Don’t underestimate how much complexity is introduced when you mix multiple units. NASA used two different units on their Mars orbiter, and they still can’t find it.

Don’t let your website get lost in space.

Oh and it’s not just different units, but having text in some part of your app that changes size based on the font-size in some other place? That’s the antithesis of encapsulation, it says pish to determinism, and is just generally asking for trouble.

So… think your typography through, set it up once, do it in pixels, cope with a bit of repetition, bask in the certainly that your text will be the size you told it to be, then forget about it.

That rant went on for much longer than what you just witnessed, but I wrote the rest out in a letter and didn’t post it.

In conclusion

I think it all boils down to this: there are times when you should use rems and ems — they’re in the spec for a reason. But the scenarios in which you need them are fewer and farther between than the prevailing wisdom would suggest.

So don’t go looking for a reason to use ems and rems. It is enough to what they do. Use pixels, and if a scenario pops up where ems or rems are the better tool for the job, go for it.

Bonus round; on the topic of units

The below have little to do with this article, so I shall list them with no real explanation of what they’re doing here and offer no further outro. It will be unsatisfying.