Don’t Get Caught in the Responsive Zoom Trap
Simon White
12

Ems and proportional sizing is still the answer.

I’ve been building everything fluid/proportional for some time now, making everything sized to percentages, ems, rems, etc. This allows you to use a single font-size declaration on the body tag to globally control all page elements, while maintaining a consistent relationship between your typographic scale and layouts.

After reading your article, I went to a few of the sites I recently built (all mobile-first/proportional/fluid) and was able to size up to 200% no worries. (Though, at 250%, my medium break was triggered).

Not to spam, but as reference:

http://admissionado.com/
http://vrge.us/blog/

Zoom them. Stuff stays pretty legit until 250%, when a med breakpoint is triggered. For me, that break is at 54ems, but I’m nudging the body’s font-size up slowly across breaks, and this impacts the relative value of the em (and keeps stuff proportionally growing).

Granted, I rarely take accessibility into account, but for projects where it’s a priority (yes, yes, it should always be a priority), seems like you just have to play around and experiment a bit with proportional sizing.

Note, i did come across a W3c proposal for zoom feature in media queries: http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Zoom_feature_for_media_queries