Blooper 54: Tiny Text

 <  Day Day Up  >  

Blooper 54: Tiny Text

Of all the bloopers described in this book, tiny text is the number one most common. Most websites exhibit this blooper somewhere in their pages. More people send me complaints about this blooper than any other.

What's wrong with tiny text? People who have impaired vision can't read it. That is a significant portion of the population. As people age, the minimum font size they can read increases . Most people older than 45 years can be considered "visually impaired" for reading small-print text.

Users Are Older than the Developers

Think of startup companies full of 20-something skateboarders hacking out investment websites that will be used mainly by people who are approaching retirement, and you'll begin to understand the problem.

A good example comes from, an investment planning service. The image (Figure 8.1)-like all those for this blooper-is shown full size. It has not been reduced at all from what was displayed in the browser, in this case Netscape Navigator 4.76. [1] The heading on FinancialEngine's Demo page invites visitors to "Take a closer look." Even with a closer look, I doubt many potential customers can read this. We can only wonder why the text on this page is so small. It certainly isn't for lack of space.

click to expand
Figure 8.1: (Sept. 2002)-Most of the text is too small to read.

Text that can't be read might as well not be there. It is safe to say that much of the text in many websites is functionally "not there" for a large proportion of the population.

A lack of space also cannot be the reason for tiny fonts in flight schedules at (Figure 8.2). Some people will see this table as a lot of empty space punctuated by small bits of indecipherable black and blue marks.

click to expand
Figure 8.2: (Sept. 2002)-Tiny, nonadjustable fonts in flight schedule. Many users will have trouble reading this.

Tiny Fonts in Forms

Tiny fonts can also be seen-or for many users, not seen-on the Web in the field labels of data-entry forms. Returning to, the explanations of items in the financial forecast application form are so small, they won't be helpful to many would-be customers (Figure 8.3).

click to expand
Figure 8.3: (Sept. 2002)-Tiny fonts in an online application form.

Tiny Fonts in Links

Tiny text fonts are bad enough in Web content, but they are worse when the tiny text appears in links that people are supposed to use to navigate the website. People must be able not only to read links but also to click on them. Some visitors to the Consumer Information page of the Federal Reserve Bank of Chicago website will have difficulty doing either (Figure 8.4).

click to expand
Figure 8.4: (Sept. 2002)-Tiny text in list of links.

Okay, bankers like fine print, but check out the Contact links at, the website of a computer conference (Figure 8.5). How are people supposed to read and hit these?

Figure 8.5: (Sept. 2001)-List of links displayed in tiny typeface. The links also aren't underlined .

Web Users Seldom Resize Fonts

Most Web browsers have controls for changing the size of text. However, they work only at sites that don't set explicit font sizes. Some browsers let you override explicit website font settings, displaying your preferred fonts and sizes instead. In theory, both kinds of browser font controls let you choose larger sizes if you can't read text in the size specified by a site's designer.

In practice, most Web users never adjust or override fonts in their browser. Most have no idea how to do it. Even knowing how to adjust the browser's font settings may not help, because many websites render browser controls impotent by embedding text in images. Instead of adjusting fonts, most people simply avoid websites they can't read.

Text Size Depends on Operating System and Browser

Ensuring the legibility of text on a website is complicated by the fact that text in a given font size can appear in different screen sizes for people who use different operating systems and Web browsers.

One difference is between Windows PCs and Macintoshes. Put briefly , Windows PCs normally display text 33% larger than Macintoshes do. Therefore, text on a website that is small but legible when viewed from a Windows PC may be illegibly small when viewed from a Mac. More recent Web browsers for the Mac, such as Internet Explorer 5 (IE) and Netscape Navigator 6, correct for this difference, but older Mac browsers, such as IE 4 and Navigator 4, do not. The difference can be seen in excerpts from and (Table 8.1). More detail on this is in the sidebar, Tech Talk: Ensuring Text Is Legible on All Computers and Browsers.

Table 8.1: Comparing Displayed Text Size: Navigator 4.76 vs. Internet Explorer 5.0 (Mac)
click to expand
click to expand
DILBERT reprinted by permission of United Feature Syndicate, Inc.

Many websites are designed and tested using Windows only. The market dominance of Windows PCs ensures that most of the feedback developers receive will be from Windows users. Developers may not realize that the fonts on their site aren't legible to Mac users.

Text Size Depends on Screen Resolution

Even if everyone had the same computer and browser, differences in people's monitor size and chosen screen resolution-640 — 480, 800 — 600, 1024 — 768, and so on-would cause differences in the screen size of a particular website's text. On a 9-inch monitor, 12-point text looks smaller than it does on a 19-inch monitor. Similarly, at high screen resolution (1024 — 768), 12-point text looks smaller than it does at low resolution (640 — 480).

The bottom line: Many factors affect the absolute size of text displayed in a Web browser. Designers do not have total control over it. The challenge is to make sure everyone you want to read the text can.

Excuses for Displaying Tiny Fonts

When told that the fonts on their website might be too small, Web developers often offer excuses. Here are the most common excuses, with my usual response:

  • I can read it. What's the problem? -The problem is that your intended customers are mostly Baby Boomers approaching retirement, but everyone at your company comes to work on a scooter . Whether developers can read the text is irrelevant. The question is, can the intended users read it?

  • It looks fine in Windows -How many Macintosh users visit your site? Do you know? Do you care whether they can read the site?

  • We need all this information on here. -Well, if your users can't read the information, it isn't there, is it?

  • It's not my fault; the text is in an image. -Send the image back to whoever made it and tell them you need the text in the image to be larger. Better yet, don't embed the text in an image; use actual HTML text (styled as required).

  • It's big enough in low resolution. -Have you determined how many of your intended customers use high-res versus low-res monitors ? If not, you should. Otherwise you have no basis for your choice of font size.

Avoiding the Blooper

One might ask how websites intended for seniors handle fonts. The website of the American Association of Retired People uses a straightforward approach: Most of its text can be resized by the user 's browser. But since most Web users don't know how to adjust text size, that approach may not be good enough.

A better approach can be seen at (Figure 8.6[A]), a website that promotes use of the Internet by seniors. Even though the default fonts used on its website are a reasonable size, the site's designers realized that some seniors still might not be able to read the text. They also realized that many Web users-regardless of age-never adjust or override the font size in their browser. To increase the number of seniors who will be able to read the text at the site, SeniorNet's home page includes a button labeled "Increase Text Size," which does exactly that (Figure 8.6[B]).

click to expand
Figure 8.6: (Sept. 2002)- A- Default font size, with "Enlarge Text" link (top). (b) Font size increases after clicking "Enlarge Text." Clicking "Shrink Text" restores "normal" text size.

Although SeniorNet's approach makes good sense in its case, it is probably overkill for websites designed for more general audiences. For such sites, I recommend following the following rules for displaying text:

  • Let users adjust the font size. Avoid setting absolute font sizes. To vary font sizes in your site, use semantic tags (such as (H)>) and relative font sizes (such as SIZE = 3 or SIZE = medium). Avoid embedding text in images unless you know it's big enough for everyone in your intended audience to read.

  • Ten-point minimum. If you must set font sizes, never ever use fonts smaller than 10 point. Repeat: never. Twelve point is even safer.

  • Design for high-resolution displays. If your site's fonts are large enough to be easily read on high-resolution displays, they'll be even larger and more visible for people who have low-resolution displays.

  • Test it! The only way to know whether the text is large enough is to test it on the sort of people you want to use your website. If your intended users have trouble reading the text, it's too small. You should also test the site on as many computer platforms, with as many of the popular browsers, as you can.

start example

Content in a Web page may appear larger or smaller on a computer screen than it will appear when printed. The screen size of content depends on many factors, including monitor size and screen resolution. For example, a line that prints as 1-inch long would appear longer than 1 inch on a very large screen (e.g., 25-inch) or on a low-resolution display (e.g., 640 — 480). The same 1-inch line would appear shorter than 1 inch on a very small screen (8 inch) or a high-resolution display (1024 — 768). This can be seen by holding a ruler up to the computer screen and comparing it with a ruler displayed on the screen by software: The rulers usually won't match.

Another factor that affects content size-though only text-is "text resolution." [2] Windows uses a different text resolution than MacOS. This difference can cause text on a website to look smaller when viewed on a Mac than when viewed on a Windows PC.

Text resolution is the number of screen pixels used to show one printed inch of text on the screen. MacOS uses 72 screen pixels for one printed inch of text. Windows uses 96.

Typographers measure typeface size in "points." Seventy-two points make one inch. A 72-point typeface would print as 1 inch high; a 36-point one would print as 1/2 inch high.

The Mac's scheme equates screen pixels with typographer "point" sizes: 1 point = 1 pixel. In Windows, 1 point = 1.333 pixels. A 72-point letter, which would print as 1 inch tall, would be 72 pixels tall on a Mac screen, but 96 pixels tall on a Windows PC. The number of inches on the actual screen spanned by these pixels of course depends on the monitor size and screen resolution, but, if all of that is equal, a given font size will appear 33% larger on a Windows PC than on a Mac.

Table 8.2 shows, for font sizes set for a Windows PC, the approximate effective font size when the same text is displayed on a Mac that is using MacOS's default text resolution.

Table 8.2: Effective Font Sizes on a Mac Corresponding to Font Sizes Designed for Windows

Windows PC


8 pt (illegible)

6 pt (illegible)

9 pt (illegible)

7 pt (illegible)

10 pt

8 pt (illegible)

12 pt

9 pt (illegible)

14 pt

11 pt

16 pt

12 pt

18 pt

14 pt

24 pt

18 pt

Recent Web browsers for the Mac, such as IE 5 and Netscape Navigator 6, automatically correct for this difference by using a default text resolution of 96 pixels per printed inch. In such browsers, text looks the same size on a Mac as on a Windows PC. Older Mac browsers, such as IE 4 and Navigator 4, are stuck with the Mac's native text resolution: 72 pixels per printed inch, with no way to change it. Therefore, Mac users with old browsers will see smaller text on websites than their friends who have Windows or more recent browsers.

There are several methods to ensure that a site's text is displayed at a reasonable size for all visitors:

  1. Avoid font sizes less than 14 point. This is the simplest approach, but the most limiting.

  2. Use a script to check which browser users have, and apply a different style sheet-specifying larger fonts-for older browsers than for newer ones.

  3. When defining font sizes in style sheets, use the predefined logical font-size keywords-medium, large, x-large, xx-large-instead of absolute point sizes. Avoid the smaller logical sizes-small, x-small, xx-small-because they appear too small on some computers.

  4. When defining font sizes in style sheets, use pixels (px) as the unit rather than points. Sizes specified in pixels bypass text-resolution scaling and so appear the same on Macs as on Windows PCs. The disadvantage of this approach is that fonts set in pixels cannot be resized by users. That is a significant disadvantage .

Each approach has advantages and disadvantages. I recommend the first method.

end example

[1] The browsers used to collect the examples in this section were Netscape Navigator 4.76, Netscape Navigator 6.2, and Internet Explorer 5.0, all for the Macintosh. Browser and operating system differences are discussed later in this section.

[2] That is my name for it: Netscape Navigator calls it "display resolution" and Microsoft Internet Explorer calls it "resolution," both of which can easily be confused with screen resolution, something else entirely.

 <  Day Day Up  >  

Web Bloopers. 60 Common Web Design Mistakes and How to Avoid Them
Web Bloopers: 60 Common Web Design Mistakes, and How to Avoid Them (Interactive Technologies)
ISBN: 1558608400
EAN: 2147483647
Year: 2002
Pages: 128
Authors: Jeff Johnson © 2008-2017.
If you may any questions please contact us: