CSS media queries are used to create responsive layouts. Conventional wisdom tells us that we should use relative font sizes to specify layout dimensions, because that improves accessibility, however this wisdom is outdated in the current browser landscape.

Here’s an example of a media query in vanilla CSS:

#navigation-sidebar {
  display: none;
}


@media (min-width: 1024px) {
  #navigation-siderbar {
    display: block;
  }
}

You are already using media queries to design responsive layouts, either like that example, or using breakpoints with Tailwind CSS or other CSS framework, or maybe even a useMediaQuery React hook in JS. At the end of the day, responsive designs come down to setting up breakpoints using media queries.

Media queries can be specified in px, of course, but also with rem and em units. Conventional wisdom tells us that we should always use em and rem units, so that our design adapts to the user’s preferred font size. Today we’re going to reevaluate this conventional wisdom.

The spec says that in a media query, “the em unit is relative to the initial value of font-size, defined by the user agent or the user’s preferences, not any styling on the page.” (Source). All browsers these days use 16px as the default initial font-size, although users can customize this in browser settings and with user-agent stylesheets.

Up until the mid-2010s, users could also change the font size using the browser’s “zoom in” feature. However, this generally wreaked havoc on the site layout: designers wanted the sidebar to be able to fit a certain number of characters, but changing the font size without making the sidebar bigger breaks the design. This led to two things happening. The first is that developers learned that in order to create proper responsive designs, it’s necessary to use em and (later) rem units.

The second thing was that browsers stopped doing the thing that broke the site layouts. These days, the browser’s “zoom in” feature actually zooms in the pixels of the page, instead of just the font size. This makes things much easier on website designers, because a zoomed in page is just the same as a smaller browser window; and it’s generally what a user expects to happen when they “zoom in”. Notice how the entire bo