The debate over page zooming vs. text scaling
~ 18 June 2009 ~
After posting my reasons for switching back to
font-size citing page zooming as the primary justification, it was apparent that enthusiasm for page zooming wasn’t as unanimous as I had thought.
As a refresher from the article, low-vision users (or anyone) can alter their browser’s text size by changing the default text size permanently via the browser’s settings, or on-the-fly using the keyboard commands
- (Windows) or
Until recently, these commands would cause all major browsers to scale up or down the size of the text while retaining the formatting and layout of the page, commonly called text scaling or text zooming. Now, however, recent versions of every major browser now default to page zooming instead of text scaling for
- commands AND for the “Zoom” option in the browser’s menu. Page zooming literally zooms the entire page — layout, formatting, and text size — in unison. Elements retain their size and shape, which greatly reduces the need for us to compensate for text scaling. In effect, the browser assumes the burden of relative sizing.
Below are examples of each. First, page zooming:
Next, text scaling:
If you’re running Firefox or Safari on Mac or Windows, you can easily switch between these two options. Select the “Zoom Text Only” option under the “View” or “Zoom” menus to override page zooming.
So, what’s wrong with page zooming?
There are at least two compelling arguments I’ve heard that are unfavorable towards page zooming, and I am listening to what is being said:
“Low-vision users don’t like horizontal scrolling.” I’ve not done extensive research in this area myself, so it’s hard to counter-argue. Besides, it’s safe to say nobody — good vision or not — likes horizontal scrolling.
However, I’d like to see conclusive evidence that accompanies statements such as this from “Nik”, who commented in my previous article:
We found during usability testing for a site with a large proportion of users with vision problems that most of them preferred to use text zoom instead of page zoom because page zoom almost always means horizontal scrolling.
We need to know more about how these users configure their browsers in the first place, the keyboard commands they do and don’t use, and the like. Being asked to rate the two options in a usability lab vs. configuring and using one’s own computer are often two very different things.
“What about IE6?” First, if your project, organization, or client still requires supporting IE6, you have far worse things to be concerned about than page zooming vs. text scaling. I have the luxury of not being concerned about IE6 in my corporate and personal projects. That is not a luxury afforded to everyone.
With IE6, only text scaling is an option. IE6 (and 7 and 8 actually) will not rescale
px values. There are valid arguments for and against this approach, but regardless the only option for text scaling in IE6 is with
% values. So, if supporting IE6 is still part of your game plan, the argument here is that relative values should be too.
Is one site for all feasible?*
For me, at the core of this debate is a much bigger question: Is one site for all really feasible? Traditionally, I’ve believed it is. But increasingly I’m finding that it’s not always practical. Some examples:
- I make the argument in Mobile Web Design that a mobile-optimized site is better for mobile users than a handheld style sheet that marginally modifies your existing site. I published this book nearly two years ago, and today I still believe that to be true, as do several other mobile experts.
- Although I argue repeatedly in “The Highly Extensible CSS Interface” in favor or markup that endures the rigors of language translation, there are often elements (menus, buttons, etc.) within an interface that are virtually impossible or impractical to code in way such that any amount of text can be fitted properly. I’m seeing this right now with a project at work that has to be translated in 10 languages. The more practical solution has been to have a style sheet for each language,
(language).css, that modifies the width, height, padding, etc. of those elements that cannot be compensated for otherwise.
- In his article for A List Apart, “Big, Stark & Chunky”, Joe Clark points out the fact that merely compensating for text scaling may not be enough for low-vision users. Separate CSS files specifically for these users may be needed. “Standardistas were able to stomach the idea that blind people were simply ignoring the appearance of their sites because, self-evidently, they were blind,” he states. “It was no big deal; nothing happens to your visual design when you accommodate blind people. But to accommodate low-vision people, you have to totally rearrange your multicolumn site. You have to knowingly destroy your original graphic design.”
The reality of all this debate is the fact that, as I’ve already mentioned, every major browser seems to be trending towards page zooming as the default for the “Zoom” option, whether via keyboard or menu option. This trend, along with the other arguments in this article, leaves me unsettled about the right approach for extensibility within a layout, and even unsettled about
So, if you were expecting a conclusion of some sort at the end of this article, there isn’t one. I’m thinking aloud. Please do the same — let’s keep the discussion going.
- Drew McLellan: The Fallacy of Page Zooming
- Zoe Mickley Gillenwater: Why Browser Zoom Shouldn’t Kill Flexible Layouts
- Pierre Igot: Safari 4’s Full-Page Zoom: Impressive
- Universal Usability in Practice: Blind and Low Vision User
* This heading text is taken from a report of the same name, “Helping low-vision and other users with Web sites that meet their needs: is one site for all feasible?” by Mary Frances Theofanos and Janice Redish. The report, which is one of the references in Joe Clark’s article, can be purchased here.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
Authentic Boredom is the platitudinous web home of Cameron Moll, designer, author, and speaker. More…
Full-time and freelance job opportunities. Post a job...
A selection of fine reading, available for a limited time only:
- Easy dad project: Football/rugby uprights
- Taking a stand against American Apparel
- Adjusting to family life with diabetes
- The "No Retweet Necessary" Contest
- The new Authentic Jobs
CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.
Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.
Letterpress Posters The unassuming beauty of a freshly letterpressed print.
That Wicked Worn Look. Techniques for that worn, aged, distressed look.
Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.
Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.
Basecamp My preferred web app for internal and client project collaboration.
HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.
Web Design World Seattle, July 20–22. Practical sessions on web design.
Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.