Why you should use ems for media queries

Posted by on

I have bad eyes. Really bad eyes. So even though I wear glasses, often I find myself needing bigger fonts. On my Chromebook that means that I browse with the zoom set to 125% by default. And I’ve been noticing some bad things in your media queries. We need to talk about that.

But let’s talk about font sizes first. Or if you’re already up to date, jump to where I get to the point.

Relative font sizes

Over the course of the past few years, us webdevelopers have been told over and over again to use relative font sizes. A pixel is a pixel (well not really, but that’s beside the point here), and using them forces your visitor to try and read things in a certain size they may not be able to handle. So we use ems and percentages that scale along with whatever font size the user needs.

Most browsers have a default font size of circa 16px. If you have a sidebar for example that has a width of 160px, you could write exactly that, or you could use 10em – aka “10 times the fontsize this element has”.

Now if a visitor wants to see it all a bit more clearly and they set the font size to say 20px, you can guess what happens: the sidebar that had its width declared in pixels stays at 160px wide, but the one that uses em will now span 200px. The contents still fit in exactly as they did before zooming.

Responsive design

After the relative font size trend came the responsive design trend, and it’s still going strong. Where we got away with making pixel-perfect designs in times past, often served with a “best viewed in x screen resolution”, nowadays it’s all about adapting your design to the size of the visitor’s browser. And that’s where media queries come in.

Media Queries

Responsive design and media queries go hand in hand. In our stylesheet we query the device or browser size, and if it falls below (or above) a certain treshold, we apply some additional styles.

So we build a site in a big screen first*. Say it has two columns, one 640px (40em) wide for content and another one 320px (20em) for the navigation menu. Then we size down the browser until the site doesn’t look good anymore. In this case that’s at 960px, at which point the site is wider than the screen.

We add some styles in a media query for min-width: 960px in which we tell the browser to do things differently. We could put that navigation menu above the content instead of next to it, for example.

This all works quite well, but here comes the problem: this breakdown at 960px only works at a zoom level of 100%.  It has become a magic number.

Some build for the small screen first and then size up, which has it’s own merits, but hat is a discussion that I don’t want to go into now.

Using relative media queries

Think of it, with the zoom of 125% like I use by default, all these relative elements get bigger. The font size is now not 16px but 20px. The sidebar grows to (20px * 20em = ) 400px. The content column is 800px. This means that the page will start breaking down at a width of 1200px (or 60em), but our media query doesn’t know that yet. Between the screen widths of 1200px and 900px, your site will not look good.

So to make a long story short, when you use media queries in pixels, you’re not being fully responsive. Using ems will make sure that your media query adapts itself to your font size or zoom level.

One comment (in two parts) I got on Twitter was:

What would breakpoints be relative to? Em would mean ppl with large font settings could get a layout meant for smaller viewports, wich could provide a suboptimal user experience. What would you suggest?

I disagree though. The whole idea of responsive design is to serve an optimal user experience, no matter the screen size. If I’m serving someone a layout that was built for smaller screens because they are zoomed, I’m not providing a suboptimal experience at all, I’m doing them a favor. Stubbornly showing them the bigger version even though it doesn’t fit in their screen would be providing a suboptimal experience, I’d say.

(This is why it’s also important to not hide content for smaller screens, just re-arrange it. Some website makers seem to think that “mobile” users need less content, but since you can never guess their intent anyway this is a bad practice in itself.)

Some additional notes

Zooming and font size

The ems in the media queries seem to be based on the browser’s font size, not on that declared in your stylesheet. Even if you set your font-size to 12px at the html element and then use relative sizes onward based on these 12px (as made popular by many reset stylesheets), the media query will use your browser’s font size of ~16px. What this means for websites with a “change font size” button that affects the document’s font size  I’m not sure. I have yet to test this.

The zooming that most browsers use nowadays is not just enlarging font-size, but making everything bigger. Come to think of it, it’s kind of strange that everything grows (even the pixel-based elements) but the media query’s pixels stay the same. Except in one case:

Internet Explorer

To my total surprise, IE9 seems to be the only browser so far that actually scales up the pixel-based media queries automatically when you zoom in. Kudos, IE9! Luckily, that doesn’t mean em-based media queries don’t work, so no worries. Use them for the other browsers and IE9 will still handle them equally well.

Practice what you preach

While I’m writing all this, I’m aware that my website is not yet reflecting my stance, so go ahead, zoom in and see for yourself what’s going wrong. I have plans to re-write the CSS entirely, but there’s never enough time. You know how it goes.

Your thoughts?

Last of all, please let me know what you think. I might have overlooked some consequences of using relative media queries (although I tried to at least test for side-effects), or maybe the whole premise is broken, but unless you tell me so I’ll start using ems.

I can be found on Twitter and App.net, and there’s also a comment section below.

11 Responses to “Why you should use ems for media queries”

  1. Roberto De Vivo said on

    Increasing the font-size through CSS has no effect on the media-queries in Chrome, FireFox or IE9. Other versions I have not tested *yet*. But using EM’s definitely does not show any *drawbacks* and only improvements for accessibility at this point in time. Refactoring some of my CSS as we speak :)

    The caveat is the doubling up of the browser-zoom and a css-based zoom (through the setting of the body font-size), this may break the layout/usability. I think people who use an increased zoom on websites don’t increase font-size by using a sites functionality but mostly browser zoom. Combinations are unlikely ;)

    I still have to test how javascript handles EM’s in this context, if it is relative to body or browser set values.

    Interesting topic nonetheless and probably one I will revisit from time to time when I struggle with the hybrid em/%/px-models to get things ‘usable’ for most everyone.

  2. Stephan said on

    Hey, thanks for your input. I didn’t find any browsers where increasing the font size influenced the media queries either. As you say I don’t think this is much of a problem, at least it doesn’t make things any worse when you use ems for the media queries so there should be no difference for those users.

    I’m not sure what you mean with the ems in javascript, I think when you read out a width in js it will always return as pixels anyway, and if you set them with js they will just be handled through the stylesheets anyway. Or do you actually calculate stuff in js using ems?

  3. Roberto De Vivo said on

    Yes, some resolution dependent items and interactions take place. So that is why I need to test that out. But so far it seems to take the body pixels only, meaning you will need a jQuery library to make it all scalable in EM’s. So Filament Group is coming to the rescue again :) https://github.com/filamentgroup/jQuery-Pixel-Em-Converter, works like a charm! (By default only for sizes set on the body, not set by the browser. If you set the scope of the script to ‘html’ it will see the browser setting, so some workarounds still needed ;) )

  4. Stephan said on

    Hmm, not sure if this is a good or a bad thing, but I’ve never had use for something like that before. Looks interesting though.

  5. jape said on

    Just wondering, is this still needed if you use percentage-based layouts? I think they should resize anyway no matter the zoom so aren’t these media queries a bit superfluous? And how to handle device-width?

  6. Stephan said on

    If you use percent-based layouts I’d say you need media queries as well sometimes, and then why shouldn’t you use ems? I don’t see why this should change.

    Device-width I’m not sure of. My first guess is that you should actually stick to px for that, but I need to test that as well.

  7. Justin O'Neill said on

    Thanks for writing this.

    I’m in the process of shifting the way I think about CSS from pixels to relative sizing. I had a question though,

    Are you saying that:
    If we use ems in media queries instead of pixels and someone scales they’re browser up (let’s say to the max of 500%) then they’re screen will take the effect of its smallest @media query? So it would be displaying the mobile version of the site since it was scaled up so high?

    I’m not lazy I swear (well, maybe a little).. but I plan on testing this out immediately after writing this ;)

    Thanks!

  8. Stephan said on

    Hey Justin,

    Yeah, that’s exactly what I’m saying. I tested it on a couple of browsers, and as far as I remember all of them do that when you use EMs.
    When you use pixels for media queries, IE9 will still serve you the mobile layout when you’re zoomed in. But we shouldn’t be calling it “mobile layout” anyway, it’s just responsive to make sure the content fits the screen. When you zoom in, stuff will have to look different ;)

    Stephan

  9. Justin O'Neill said on

    Very interesting! I just tested out and it is true.

    Their is a catch though: in order for it to take effect the page must be refreshed or already set to zoomed in. Do you think its possible to apply an animation to this? Or is it a bit different the way a browser handles real-time zooming vs. real-time browser scaling?

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>