Jakob Nielsen's Alertbox, August 19, 2002:

Let Users Control Font Size

Summary:
Tiny text tyrannizes users by dramatically reducing task throughput. IE4 had a great UI that let users easily change font sizes; let's get this design back in the next generation of browsers.

Sometimes technological progress backfires, and the "better" technology turns out to be worse for users. The Web is no stranger to this problem, and has experienced many innovations that would have been best avoided. Examples include frames, changing the color of browser scrollbars, and scrolling text.

Another example of harmful Web technology comes with the increasing use of style sheets, which let web designers specify the exact size of text down to the pixel. Unfortunately, many designers are using this ability, leading to reduced readability of an increasing number of websites.

The State of Font Control

I'm hereby launching a campaign to get Microsoft to make user preferences override any fixed font size specification in Web designs.

It may be okay for the browser to initially render the page with the designer's text size, but users should be able to easily enlarge text, no matter what the style sheet says. After all, it's my screen, my computer, and my software, and they should do what I say.

Granted, some web browsers have a geeky feature that lets users specify their own style sheets. Fine for experts, but 99% of users simply want to make text bigger if it's too small to read. The Mac-only iCab browser gives users this simple control; let's make Internet Explorer equally friendly to users' needs.

So, why is so much website text so hard to read in the first place? Two theories:

Because so many sites have made bad decisions regarding font size, users commonly need to change it. Early IE versions supported this need, offering users two standard toolbar buttons: one that made text bigger, and the other that made it smaller. That's the way things should be.

Mr. Gates, please give us back the good design you shipped in IE4 for the Mac.

Simplifying Browser Font Control

Unfortunately, recent versions of IE have eliminated IE4's good design, replacing it with an approach that has two serious usability problems: For those few experienced users who do prevail and restore the missing button to their customized toolbar, actually changing the text size in IE6 requires several steps:
  1. Acquire the button by moving the mouse pointer over it. Since buttons are reasonably big in IE, this step is fairly quick according to Fitts's Law.
  2. Press down the mouse button.
  3. This causes a pull-down menu to appear, with five possible font sizes. Scan this menu, making a mental note of which font size is currently selected.
  4. Mentally compute which new font size you want. This is typically one size bigger (or smaller) than the current selection.
  5. While you continue to press the mouse button, move the pointer down the menu until it points to the desired new font size.
  6. Let go of the mouse button.
Compare this awkward, six-step process with the interaction technique required by a design that includes separate buttons for "make text larger" and "make text smaller":
  1. Click the desired button.
Of course, I am cheating a little: You would still have the initial step of deciding whether you want the text larger or smaller, thus determining which button you'd click. Still, since the entire change-font-size procedure is triggered by your annoyance at trying to read unpleasantly sized text, you already know that you want bigger (or smaller) text by the time you decide to change the size. (The average user doesn't have a mental model of a single "change size" command that is parameterized with the desired direction of change; the user's model includes two actions: "bigger" and "smaller." How the code is implemented is irrelevant for the user illusion which should be designed to match the users' mental model.)

The two-button approach frees users from the cognitive overhead of calculating how big they want the text to be. Just make it bigger. Users don't want to specify exactly how big. They can easily keep clicking the "bigger" button if the initial click doesn't make the text big enough.

Usability is enhanced by single action buttons that move along a uni-dimensional axis in simple steps, as long as each step's result is immediately clear after each click. That's also why the Back button is so precious to users, and why it's used much more frequently than history list navigation.

Improving Future Browsers

Reverting to IE4's design for the Mac would be a great step forward for font size usability. Still, we can do better.

Instead of having users manually change the text size every time they come across a user-hostile design, let's take advantage of the Internet and track font size preferences: Every time your browser loaded a page from a new website, it would first check a database for information about your predicted font size preference:

To expedite response time, your browser might pre-fetch the preference settings for all websites that the current page linked to before you even clicked a link.

The central database itself would be a straightforward case of collaborative filtering, since it would be easy to find other users with the same text-size preferences. For any given web page, most users would either leave it alone or request text that's one or two sizes larger or smaller. Because a total of five options would account for the vast majority of users, font size preferences would be much easier to model than, say, taste in books or films.

Auto-adjusting font sizes based on collaborative filtering is a simple example of the benefits that could accrue from more network-aware browsers. It would also be possible to auto-repair many broken links, auto-remove annoying ads or pop-ups, and make many other improvements to individual users' experience based on feedback from prior site visitors.

We must stop thinking of browsers as trivial pieces of free software that aim at nothing more than rendering web page pictures on the screen. We need user-supportive environments that facilitate navigation and protect users from the excesses of bad websites.

Readability Guidelines for Websites

We can't wait for Microsoft to ship a good browser, though that has to be the ultimate solution to the font size problem. For now, websites can increase readability by following these guidelines:


Complete list of other Alertbox columns