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

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:

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:

Like what you read? Give Stephen Scaff a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.