rems and ems, and why you probably don’t need them
David Gilbertson
83835

“use rems and your layout will scale better if the user zooms.”

strawman? nobody said that. what is true, however, is that although most browsers nowadays offer full-page zoom either exclusively or at least as default, there are still browsers (and users of those browsers) that provide text-size options (e.g. IE11 View > Text Size, Firefox Zoom > Zoom Text Only). now, IE11 is not able to resize text defined in absolute units like pixels, at all. in the case of firefox, when it’s set to that, it changes text size (even if it’s defined in px), but nothing else in the layout adapts to that unless it’s also defined in a text-size-related unit like em/en.

further, although 16px is kind of the de-facto standard for 1em, it’s not true for all devices. see https://nicolas-hoizey.com/2016/03/people-don-t-change-the-default-16px-font-size-in-their-browser.html; so if you rely on defining the basis as 16px, you’re going against whatever the default of the browser may be (and yes, users may even have set their browser to a non-standard default font size).

of course we can argue over “how many users actually use those browsers, and those features” etc. but that, rather than the “scales better”, is the reason/origin for the advice not to define font sizes in pixels. less relevant nowadays perhaps, but let’s be clear why it’s there.

“ if you define your breakpoints in pixels, they are fixed and won’t change if your users zoom the page. […] I’m guessing that at some point in the past it was true, people don’t just make things up, do they?”

that was a long-standing and quite common bug in Safari, so yes. https://cloudfour.com/thinks/the-ems-have-it-proportional-media-queries-ftw/

bottom line: of course there’s an argument to say that since most users now use modern browsers, which do zoom text set in pixels, and they use full-screen zoom rather than text-only zoom for the most part, and since most (but not all) devices default to 16px = 1em, it’s not a complete deal breaker to set sizes of things in pixels. that’s a conscious choice you’d make as a developer, knowing the reason for why it may also still not be a good idea depending on your audience etc.

Like what you read? Give patrick h. lauke a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.