Switching to Em-Based Media Queries

Question

Now that the WebKit page-zoom bug has been fixed, what are the main reasons for using em-based media queries rather than pixel-based media queries?

Bounty

Answer 1

I haven't yet found any data specifically on users who change their base font size, but I did some checking into websites that have been designed by people who ought to know what they're doing. I was looking specifically at whether they used px or em to specify their media queries. While this may not answer the question entirely, I think it adds some interesting dimension to the discussion.

Some Major Players

This list is by no means exhaustive or measured in any way except that it includes the names of individuals or groups off the top of my head who seem to be at the forefront of web development, or have contributed to responsive design practice in some way.

• Filament Group: em
• Luke Wroblewski: em
• Jeffrey Zeldman: px
• Chris Coyier: em
• Ethan Marcotte (a.k.a. The Father of Responsive Web Design): px
• Jason Santa Maria: px
• Mark Boulton: px
• Nicholas Gallagher: px

One interesting thing to note is that the last entry, Nicholas Gallagher, is the person who added the media query line to the HTML5 Boilerplate CSS. In that code he uses em, though on his personal site the media queries are set in px. I looked for discussion on that commit, but couldn't find any.

A Few of Their Sites

Again, a bit of a scattered list, but it contains a few sites that I consider worth looking at. Most of these have been built in full or in part by people from the previous list.

• Boston Globe (Filament Group, 2011): px
• A List Apart: em
• dribbble (Dan Cederholm): px
• HTML5 Boilerplate: em
• HTML5 Mobile Boilerplate: px

An interesting note with HTML5 Boilerplate, the main project's CSS uses em while the mobile version of the project uses px.

Mega-Sites

It was actually really surprising how few of the most popular sites on the web have any media queries at all. Here are a few who do use media queries.

• Microsoft: px
• Twitter: px
• Wordpress.com: em
• Adobe.com: px

Conclusion

Inconclusive.

It looks like people are using both methods with success, and there doesn't seem to be agreement as to best practices.

I sort of get the feeling that some of the more progressive designers are moving to em, but I have no data for that other than it just "seems" like that might be the case. It could also be true that some of the sites listed above are older than others, and have not been updated since people started moving to em-based media queries. It's hard to really get enough data to draw a good conclusion on that front.

However, the fact that some of the biggest sites in the world are using px tells me that this approach must might still be technically sound. If there were major problems with it, I'm sure the bigger sites would have heard about it from their users or from their testing, and moved to something more technically viable to serve their audiences.