browser text zoom inconsistency

26 Sep 2008 - 11:22pm
7 years ago
1 reply
543 reads
Michael Micheletti

Hi Abhishek,

Firefox defaults to the behavior you describe, where the entire page is
zoomed in or out. There is also a View / Zoom / Zoom Text Only menu item
that causes the browser to zoom only text within the original size bounding
blocks (like how IE behaves). This flexibility allows people with visual
disabilities to choose the behavior they find most useful. Nice people,
those Firefoxers.

I don't know about a best practice, but what I've observed working is for
the web designer to test the page template with text resized to the maximum,
with Javascript disabled, with a user stylesheet installed, even using the
keyboard only - to ensure that the site's content is accessible to all
users, including those with disabilities. Performing such tests frequently
during development of the site's CSS template, in common browsers, helps
prevent those awkward moments that can occur when accessibility issues are
tested only after the site is completed and more difficult to fix. Yes this
does make stylesheet development take longer, sigh.

I believe it may be possible to engineer various bounding-box expansion
behaviors into multi-column CSS page templates by specifying block widths
using ems, but it's also possible to have text resizing work fine in a fixed
width block if it's not too skinny and you leave enough margin. Creating
flexible and accessible CSS layouts can be a frustrating exercise in
compromises, especially at first. But people with disabilities also want to
read the news, buy a plane ticket, pay bills online, search for new music...
and we, in our role as designers, are uniquely situated to help them
succeed. All the best,

Michael Micheletti

On Fri, Sep 26, 2008 at 8:20 AM, Abhishek Bhor <abhishekbhor at>wrote:

> ....
> Is there a best practice to handle text zoom and its containing blocks?


28 Sep 2008 - 1:04pm
Oleh Kovalchuke

Abhishek Bhor wrote:

> I have a question about browser text zoom. While designing web-sites it is
> recommended to set font size in em or %.

> Is there a best practice to handle text zoom and its containing blocks?
> Em is unit of font size. Hence I set up the size of fonts and font
related inputs, as well as white space in ems.

I use % to setup the width of containers for flexible width layouts.

This approach seems to work so far in both IE and FF.

Oleh Kovalchuke
Interaction Design is design of time

Syndicate content Get the feed