Re-evaluating px vs em in Media Queries

It’s been a while since I considered what unit I should use in media queries. In the past, I (and many others) have recommended using ems rather than px, because “it’s the only unit that performs consistently in all major browsers.” In the past, Safari has been a bit quirky here, but I know they’ve made some major improvements recently, so I figure this is worth revisiting.

Unfortunately, what I found is that there is still no simple answer — but it is a little different than it used to be, so it’s worth taking note. You can skip to the takeaway if you want.

Zoom, default font size, etc.¶

Let’s consider all the ways users can change the font size in the browser. Some of these options are harder to find in various browsers, but here are the options available.

The first option is zoom, which can be changed using Ctrl+plus and Ctrl+minus in all major browsers (or by selecting options in the View menu) This scales everything on the page up and down. Effectively, this scales a px up and down on the page, and in turn scales ems and rems up and down.

The second option is changing the default font size. This generally changes the meaning of the medium keyword for font size, which in turn scales ems and rems up and down, but not px. This may or may not change the meaning of ems/rems inside a media query, however — more on that in a minute. In Safari, this setting is rather difficult to find; you have to open the View menu, then hold the Option key and select “Make text bigger/smaller”.

The third option — which I don’t recall seeing when I last checked several years ago — is setting a minimum font size. This option doesn’t scale the whole page, but it does guarantee no fonts ever render at tiny sizes when the user specifies.

Firefox also has a fourth option, “zoom text size only” which behaves similar to zoom, but only increases/decreases text size. As far as I can tell, this behave essentially the same as changing the default font size.

How I tested¶

I created this Codepen. It’s got three divs, each with a blue background color. Then I use different media queries to change each div to a green background above a certain width. The queries are set to a min-width of 800px, 50em, and 50rem. Depending on browser settings and viewport size, it ends up looking something like this:

Here’s the CSS; I used 50em and 50rem since those are equal to the 800px media query with default font settings:

div {
  padding: 2rem;
  margin-block: 1rem;
  background-color: hsl(211deg 40% 80%);
}

@media (min-width: 800px) {
  .px {
    background-color: hsl(179deg 40% 80%);
  }
}
@media (min-width: 50em) {
  .em {
    background-color: hsl(179deg 40% 80%);
  }
}
@media (min-width: 50rem) {
  .rem {
    background-color: hsl(179deg 40% 80%);
  }
}

Then I opened up Chrome, Firefox and Safari and started playing with the settings. Here’s what I found:

I was disappointed to see Safari is still an outlier, where ems and rems don’t scale in media queries based on the user’s default font size.

In the past, rems in media queries have been kind of unpredictable, but based on these findings, they now behave the same as ems in nearly every circumstance — with the exception of how they respond to a minimum font size in Safari.

The takeaway¶

There is no clear-cut winner I can point to after looking at this. It probably depends on what you want to prioritize.

If you want consistency across all browsers, you should now use px in your media queries.

However, this may not get you exactly the behavior you want for users who change their default font sizes. If you want your breakpoints to scale along with the user’s font size, you should favor ems instead — but keep in mind you won’t get this benefit Safari unless the user has their minimum font size setting configured.

I feel like maybe this means it doesn’t matter quite so much as it has in the past, but there is still no one perfect answer. At this point, I am comfortable using px again, but I’ll probably evaluate it on a case-by-case basis.