The debate over page zooming vs. text scaling
~ 18 June 2009 ~
After posting my reasons for switching back to px for 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 Ctrl+/- (Windows) or Command+/- (Mac).
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 Ctrl+/- and Command+/- 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 em and % 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 px for font-size.
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.
Additional reading:
- 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.
39 Comments
Veer: Visual Elements for Creatives.Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
Should the browser be the piece of software responsible for making things accessible to low-vision users? Or are we looking for answers at the wrong level?
For example, if I am a low-vision user I don’t just need my web browser to make things bigger. I need every single piece of text on the screen to be bigger including my desktop, the menus, my email client, etc. Since it’s just not practical to expect every software vendor to include accessibility features in their software, the responsibility then falls to the operating system to do what it can.
For example, in OS X you can use the Universal Access pane in your system preferences to control full screen zooming. And the best thing is, there’s no horizontal scrolling involved. The zoom simply follows the mouse. For vision impaired users, this is the best option, to run an operating system that enables full screen zoom and not rely on individual apps to do it.
BTW, a shortcut on OS X to enable the full-screen zoom is to hold down Ctrl and scroll with the mouse wheel. I find it comes in very handy with my design work when I need to zoom in on a pixel.
There seem to be a lot of advantages to using EM’s still and it is just as easy as using pixels if you set the body font size to 62.5%. Then 1em = 10px, 1.5em = 15px etc. Boom, problem solved!
To me, all that’s changed is that using PX for font-sizing is now “acceptable” rather than “frowned-upon”. Does that change necessarily make it better, more acessible, or more extensible than relative sizes? I’m not convinced it does.
I think one of the bigger questions, that would affect both the mobile debate, and the font-size debate, is how well the 1024 (960px) wide standard will hold up in the future…it seems inevitable that resolutions are getting bigger and bigger, but the 1024 (assumed) minimum resolution has remained the de-facto standard…12px these days looks a lot smaller than 12px, 5 or 10 years ago….
“Low-vision users don’t like horizontal scrolling.”
Does anybody like horizontal scrolling? It seems like font-scaling was/is such a better solution.
Why not support both? Using relative font sizing (em’s/%) allows for proper text scaling but still renders correctly using page zooming. Both options have the same result: making text readable for low-vision visitors.
I’m a recent convert to using px for font-sizing for several reasons, but one question that should be asked is “will users change, or even know how to change the zoom feature in their browsers?” I doubt that “most” people will know how or care to find out how. Another question to ask is “what percentage of this site’s audience would be likely to change the zoom setting in their browser, for visibility reasons?” If the number is high enough, I’d recommend using ems for font sizing.
I have good vision, but some sites use tiny text (or poor contrast) & I will occasionally zoom the text so it’s easier on my eyes. A majority of the time page zooming requires me to scroll horizontally or resize my browser when I use it. Both are extremely obnoxious to me & would just assume to squint than use it.
I don’t mind page zooming as long as the page does not go beyond the horizontal bounds of my web browser. Perhaps if page zooming zoomed the page within the bounds of the browser window then changed to text zooming, then it be just fine. Otherwise, more often than not it just turns a perfectly fine site into an unusable one.
In one of my project Emastic I use ems for doing everything. So there are no dilemmas this system will work in every browser and there is no difference if users have zoom or text zoom like default.
Using ems is just different(more systematic) approach to your work. Ems are relative units and you need more planing at the begging but at the end you have more flexibility and control.
As someone that does accessibility for a living, I think things can be summarized quite simply…
Make sure your site is *readable* and *usable* when page zooming is implemented AND when the text itself is increased 200%-300%. This is quite easy to ensure on any site. Use % and/or em for font sizes (it’s not THAT difficult), make sure that the page doesn’t break when the font is increased a bit, and ensure that non-text content scales well.
Users that need more than 3X font enlarging will be using page scaling or other technology to enlarge the page.
Hi Cameron,
I believe it comes down to how we work, individually. There are so many differences between design processes. I, for example, mock up everything in Photoshop - where I fine-tune the proportions and render most of the text.
Here is the thing: Photoshop’s sizes are absolute. If you make a three column layout in Photoshop, the right two columns have no idea what the left one is doing.
So when it comes time to create the living website, I’ve got a simple 1 to 1 pattern to follow in order to get it completed. I don’t have to rethink relativity, I don’t have to recalculate anything. I measure the pixels and type it in my CSS.
People like Drew McLellan are correct in identifying the problem if you are accustomed to making small design changes on your site quite often. If you keep changing one element, relativity is a gorgeous thing. But the amount of time it takes for me to make my entire layout relative is often much more than the amount of time I’m going to tweak the CSS once it is complete.
So it’s simple, there is no right answer. It depends on how you design and how much maintenance you anticipate.
But I admit to not being the accessibility expert that some previous commentators are.
-Christopher Meeks
My vision is fine. But on this particular website I prefer to make the text bigger whenever I’m reading full article. So I scale.
I use default Firefox scale settings (page zooming) and it works really good. I didn’t like much the previous default behavior (text scaling), because the line length didn’t feel right for me - it was much narrower than I prefer.
Plus to the above, I have widescreen notebook with resolution 1280 x 800, so for me the font size is perfect with no horizontal bar.
@Christopher Scott
I agree. And in my opinion, as this site designed a while ago, the same font size displays smaller today.
Redesign is being a trend now, so Cameron is probably getting something ready ;)
@Christopher Meeks:
The approach you describe is fine for a fixed medium such as print. However, the web is a flexible medium. Your users may be using a font-size other than the one you specify. They may be using a browser with a different size than yours. They may be zooming the page. As you allude to, the content on your page might change.
If all you want is a static, inflexible view of your content, you might as well save your photoshop design as an image and deliver that. (OK, there are still some non-visual differences, but the point is: the web is NOT fixed :)
@ Nikita (and Cameron)
Lol… totally didn’t mean to call out CM like that, I only just realized the site is set in 12px.
I agree that horizontal scrollbars should be avoided, if em solves that problem over px+zoom, then that’s the direction I would go.
Looks like you only used the title of that article as your own title to pull some Google juice in, which is a bit despicable.
Zooming depends on how good the zooming algorithm is. Is it just a magnification or does it do something to take screen width into account when zooming? Opera has a pretty goof algorithm IMHO (although I may be biased). We also have the fit to width option (the icon next to the zoom control), which tries to keep the content fitting to the width of the page without having to scroll to read runs of text.
For different languages you could just use the lang selector to detect the language code and make the elements that break to have the different styling they need.
For things like low vision, I think the job primarily rests with the User Agent. Opera has some default stylesheets in the View -> Style menu for things like low and high contrast view, and users can install or write custom stylesheets of their own to adapt layouts. Firefox can do something similar with Grease Monkey.
I don’t really get the debate over page zooming vs. text scaling. I think we can all agree that some people prefer text scaling and some people prefer page zooming. That’s why it is great the browsers are now letting the user decide how they want to zoom. This means I don’t have to deal with designing my whole layout using ems (which in some cases might annoy the people who expect just the text to zoom)
If this is a debate about fonts using px vs. ems then I still don’t get it. Why would you want to limit the users options by using px?
I much prefer text zoom to page zoom: I don’t want everything bigger, just the text.
If the designers actually tested the readability of their pages with real people, they’d use bigger fonts themselves.
Just wanted to comment on Mr Jackson’s comment.
I have low vision and, no, you don’t necessarily need everything enlarged. You memorize where stuff is. I don’t need to enlarge anything to use the navigation buttons on my local newspaper’s website. I’m there every day. I do need to scale up text to actually read an article, however.
What’s weird is how their pop down menus don’t work with Safari’s page zoom but work fine with text zoom. Their comments forms don’t work with text zoom, however & are buggy with page zoom.
I doubt there is an absolute solution, especially since low vision encompasses a broad range of visual acuity.
@ Anonny:
Looks like you only used the title of that article as your own title to pull some Google juice in, which is a bit despicable.
Absolutely. The text has nothing to do with the title, nothing at all.
@ Quimbob: Very helpful remarks, thank you. That’s precisely what I think we need more of in this debate — “I use it like this” rather than “what if users did this?”. Your last line is particularly helpful:
I doubt there is an absolute solution, especially since low vision encompasses a broad range of visual acuity.
I’ve too, wrote on this topic, so it’s of interest to me. Back in late October of ‘08 I asked myself: Layout Flexibility – Still A Requirement? I answered my own questions and started going with defining font-sizes in em and %, but specifying all box-model dimensions in px. I really gained some sanity back taking this approach and assuming people will be using full-page zoom.
Recently Smashing Magazine ran an article on a very similar topic: Adaptive CSS-Layouts: New Era In Fluid Layouts? I felt very unsatisfied with their approach to bend-over backwards to make one interface to serve all users: from big screens to small, mobile browsers to computers. I reacted to their post by answering their question that: Adaptive CSS-Layouts: Comprimising Ideals.
I’ve now landed somewhere close to where you have and what you’ve posted here. I like how you’ve touched on this idea that there really isn’t a one-interface-fits-all approach that’s reasonable, and I would add, it forces you into compromising ideal situations because you have to find a common-denominator.
At this time I place to continue my approach to using em and % to specify font-sizes, and using px to set box-model dimensions. Full Page Zoom in here, and is going to just keep getting better; monitors are going to keep getting larger (hopefully alleviating the horizontal scroll issue).
Thank you, Cameron, for keeping an eye on this. A subtle change has taken place. Page Zoom is being passed off as a replacement for Text Zoom and they are NOT interchangeable.
The browsing public will be the poorer for it if Text Zoom disappears. Both tools should exist in every browser.
Plus, the Text Zoom menu, like the menu for Alternate Style Sheets, should be made accessible to developers via a metatag or some other switch so the effectiveness of the zoom can be enhanced and controlled via CSS and/or JavaScript.
I’ll be writing quite a bit about this over the next month or two. Proposing a specification of sorts. Some of it will make it’s way onto my blog Readable Web where I’ll be keeping a close eye on fonts, text rendering, and similar issues.
When we talk about users hating horizontal scrollbars, I think we’ve entered a different discussion… maybe. The line I’m having trouble drawing here is where does “usable” and “accessible” cross into “enjoyable” and “pleasurable?”
I think at some point, we just need to accept that we all have disabilities to some extent that make life less enjoyable. Low-vision people live in a world where driving is difficult and dangerous, menus at restaurants are hard to read, and desktop Internet browsing involves scrolling left-to-right.
And I also want to agree with the sentiment and understanding that browser text-scaling and page-zooming aren’t typically the only tools in a low-visioned user’s belt. The OS typically has more (maybe better) accommodations.
“There seem to be a lot of advantages to using EM’s still and it is just as easy as using pixels if you set the body font size to 62.5%. Then 1em = 10px, 1.5em = 15px etc. Boom, problem solved!”
For who??? Leave my font size alone. All of you, but especially those who think like this. You don’t know what I have my browser set to or what my screen resolution is or what it looks like to my eyes. I am so sick of little itty-bitty type on websites. Let the user figure it out for himself. You really think you’re smarter and wiser than everyone else?
I think that the best for layouts is the percentage values for better scaling and for the content the em’s. When you scaling the entire page, while the text on the content is scaling th layout is adapting ffor this content.
(I cite from recent discussion in czech language on my blog - these findings are based on user testing with people WITH disabilies)
- users usually do NOT need to scale text
- if user really need to scale text, he uses assistive technology (magnifiers and so on), not altering settings of his browser
- user uses magnifier, because he has bad experience with websites using pixels
Should we be expecting a browser built for the average person to accommodate a user with low vision?
We don’t expect Firefox or IE to include screen-reading features - we know that completely blind users will use Jaws, since that product is built for their needs.
Why then do we expect Firefox or IE to include features for those who need text magnified 300% greater than the average person?
These users need a browser that can accommodate their specific needs. I would have no problem building my website so that this product could display it properly, just as I build my websites to be accessible to Jaws users.
However I do not think it is our responsibility to ensure websites display correctly when effectively the wrong tool is being used for the job.
Do low-vision users care about design persistence or just the designer? Em-based layouts were invented to maintain balance, contrast, and proportion in the face of scaling content.
I have normal vision and prefer page-zoom. I use it for reading while leaning way back in my chair.
Bumping sizes 2-3x rarely invokes the crawlbar using page-zoom, but provides sufficient enlargement. Text-zoom is more likely to wreck a solid design with obtrusively overflowing text in my memory.
I imagine that users requiring accessibility aids use OS-based or third-party applications for consistency and configurability.
Nobody complains about page-zooming in Safari for iPhone (I’m sure they do) where reading requires constant pinching and flicking. Scrolling and crawling on the desktop hasn’t changed in 10 years. It’s broken &ndash fix it, then complement with zooming features.
Thanks for linking to my article, Cameron. My main problem with pixel-sized text is that, although browser zoom lets the user get back to his or her default text size, the user shouldn’t have to use zoom, because you shouldn’t override the user’s default text size in the first place. I say more about this in a comment on The Fallacy of Page Zooming, so I won’t repeat all that here.
I think i’ve seen this somewhere before…but it’s not bad at all
i am developer and also user and my experience is that page zooming really rocks, my scenario is that my display is much wider than most webpages so i often zoom as much as possible without having to scroll horizontally, most of the time i zoom even more hiding some ad or navigation columns i do not really need to see.
Thanks, great post on scaling problem. The IE 6 problem with px, em and % is kind of tricky (and ugly :().
I have low vision, and I can tell you right now that text zooming is the most ridiculous thing ever created. Why designers spend so much of their time concerning themselves with pixel to EM conversions and css hacks to make images scale with text is beyond me.
If I send you a Word document with a small font, or a PDF with a small font, do you change the font size? Of course not! You simply change the zoom level on the document?
With regards to horizontal scrolling, this is most often a *complaint* but not one directed at you. If you’re low vision, it’s annoying but it’s a fact of life and you learn to compensate easily. Look at the pinch and zoom on the iphone for example. You move the viewport with your finger to see areas of a map. Nobody minds the horizontal scrolling all that much.
#2: Most low vision users I know, including myself, don’t even use the browser zoom fetures. We use ZoomText on Windows or the Mac Universal Accessibility zoom if we’re on the Mac.
You’re wasting your time making your site scalable. You really are. Use pixels. You don’t measure images in Photoshop in EMs. Use a grid in pixels and design accordingly. You’ll get done quicker, and your users will still be able to read your content. Remember.. I may need to zoom in to clearly see what’s going on in a photo or graph you have too, and your text-zooming won’t help me there. Remember - I’m not blind - I can see your images too, but I just might not be able to see them well.
FYI: I’m filling in this form right now zoomed in. I will have to move my viewport to click the “post” button. It’s only a problem if you’re not used to doing it, and developers and designers with good eyesight are not used to it.
Very interesting and amusing subject. I read with great pleasure.
Good post, Cameron. Some very interesting thoughts and opinions on a subject which I feel will become increasingly important in 2009 and onwards: the mobile web and dedicated mobile web strategies.
Designing mobile web sites with mobile devices in mind is one way of overcoming the problem of poor formatting and awkward levels of zooming.
We’ve recently published a paper on our blog about the mobile web this year, if you’d like to check it out: http://tr.im/uTCe
I only ever use text scaling if I’m screwing around with a layout to see if it breaks under certain conditions. If something starts to get pulled apart, I need to be more specific with my CSS. (for example, a site looking fine in windows and apple but looking horrible in linux when non-standard fonts are used).
Zooming is useful for things like presenting sites on a projector… And old people I guess.
Glad I skipped to the end of this one. The one thing I’ve learned about these type of articles and discussions is they tend to generate more opinion than results. 200 : 1
I’ll hold off and get the results of extensive user-testing and just go that route. The rest is just chatter.
Despite many web sites now being fixed at at 1024 width, I still run at 800x600 because I found a long time ago that 1024x768 gave me eye strain. When I view something on screen, what I’d ideally like is the ability to use a 12-point font at 800x600 without scrolling the page. Having images scale with text makes sense too.
I’m disappointed that many web designers don’t get this, with all the ironic hype lately about using CSS to separate content from presentation and what-not. The original intention of HTML years and years ago was to be flexible and not make too many assumptions (E.g. about details like the number of pixels on screen), and look where we are now. I like choice. Page zooming isn’t a choice. It just simulates one resolution at a different resolution without wrapping text.
(This page displays great, by the way. The ability to “Zoom Text Only” in FireFox let’s me view it at 800x600 with any font size I want, and the text wraps so there’s no need for any horizontal scrolling. I wish all web sites would display this way.)
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.
Linkage:
Follow me: 
1 Chris Johnson ~ 18 June 2009
With the advent of page zooming, I’ve started taking a hybrid approach. I do most of the design using pixels, but then when it comes to the core content of the page (and sometimes the navigation), I use ems.