Understanding Cross-Platform Text Size Differences

Note added 2004-01-02: The problem described in this document (last updated 1999-05-17 prior to adding this note) has become less severe, at least to the extent that most Mac and PC web browsers now display text at the same size. All current Mac browsers, including Apple's Safari, Firefox and other Mozilla browsers, Netscape 6 or 7 and Internet Explorer 5, are designed to, by default, display text at the same size as a PC configured with Small Fonts. Differences may still exist between PCs configured with Small Fonts or Large Fonts. Also, not counting web browsers, different applications (even on the same platform) may display text using different assumed screen resolutions. Web authors who wish full control over displayed text sizes in pixels may use Cascading Style Sheets to specify font sizes in pixels (px).

Integration of text and graphics is a basic feature of most World Wide Web pages. Web authors must understand, however, that the relative sizes of text and graphics can vary enormously when viewed on different computers; therefore, any design that depends critically on the relative sizes of text and graphics is inherently non-robust.

All graphics on web pages are raster (pixmap) images, with fixed size in pixels. For example, the following image is 240 pixels wide by 45 pixels high. All browsers on all platforms display it this size (in pixels), although its physical size (measured in millimetres, for example) varies on different computers according to the resolution (i.e., pixel spacing) of their monitors:

While graphic images are always drawn the same size (in pixels) in all browsers, this is not true of text. The following table compares screen captures of the same text, as rendered by browsers on various computers:

Macintosh 72dpi assumed	PC-Small 96dpi assumed	PC-Large 120dpi assumed	UNIX 75dpi X-font	UNIX 100dpi X-font

Every text sample was generated in a browser on the indicated platform using the same HTML test file, which displays the text passage in a one-cell table 100 pixels wide. All table entries are screen captures; i.e., graphic images of screen contents. These may not appear on your computer at the same physical size as on the original computers where the text was generated, but they appear at the same size in pixels as on the original computers; thus, they show true relative size compared with graphics (Remember that web graphics are displayed at the same size in pixels on every computer).

In the above table, the left-most sample shows how Macintosh browsers draw the text. The "PC-Small" sample shows rendering by Windows browsers on a PC configured with "Small Fonts." The "PC-Large" sample shows how Microsoft Internet Explorer and current versions of Netscape draw the text on a PC configured with "Large Fonts" [Curiously, Netscape 3 draws text at the "PC-Small" size, even on a PC set up with Large Fonts. The two right-most samples show rendering by UNIX (X-Windows) browsers on workstations with either 75dpi or 100dpi versions of X-fonts installed.

(Note: Resolutions of monitors and other output devices are almost always described in "dpi" [dots per inch], or sometimes "ppi" [pixels per inch], where the "inch" is an archaic unit of length defined as 25.4 mm. I wish I could avoid these archaic units, but due to their overwhelming use, I will--very reluctantly--refer to resolutions in dpi throughout this article.)

In all text samples in the above table, the browser was using default font settings; thus, the font was Times [Mac & UNIX] or Times New Roman [Windows], in 12-point size. In Netscape, this could be seen explicitly in its Preferences (Options) settings. In Internet Explorer, font sizes are specified only in qualitative terms (Smallest, Small, Medium, Large, Largest) instead of explicit point sizes. Nevertheless, IE's default "Medium" setting does generate 12-point type for default (size=3) text, as explained in Microsoft's Font Size Page.

If every sample in the above table consists of Times (or Times New Roman) in 12-point size, why do the sizes vary so much? Actually, every browser tried to display this text at the same physical size as it would appear on a printed page; namely, with letter height about 12 points, equal to about 1/6 inch, or about 4.2 mm. Then, in translating this physical size to pixels, every browser assumed a different monitor resolution:

On a Macintosh, screen resolution is always assumed to be 72dpi. On a PC set up with Small Fonts, most programs assume screen resolution to be 96dpi; therefore, they draw text 33% bigger in pixels (factor of 96/72 = 4/3) than programs on a Macintosh. On a PC set up with Large Fonts, the assumed screen resolution is 120dpi, so programs draw text 67% bigger in pixels (factor of 120/72 = 5/3) than is done on a Mac.

Note: These assumed screen resolutions (72dpi on a Mac, 96dpi on PC with Small Fonts, 120dpi on PC with Large Fonts) do not necessarily match the actual monitor resolution on any of these computers. They are merely conventional values assumed by the software on these platforms. (In reality, people often use the same monitors on both Macs and PCs!)

The text size differences between PCs and Macs are clearly illustrated in the following screen shots, where the left side shows 12-point text drawn on-screen in various PC applications, while the right side shows the point size on the Mac needed to match (in pixels) the PC text on the left.

Here, Times New Roman font (abbreviated TNR) was used on both platforms. This is a standard font on every Windows PC, where it's the usual default web browsing font. A Mac version of TNR may also be downloaded from Microsoft [Note: downloadable Microsoft web fonts no longer available]. While there is very little difference between TNR and Times, (the usual default browsing font on the Mac), I nevertheless chose to use exactly the same typeface on PC and Mac for these tests.

"TNR 12-point on PC-Large" shows 12-point TNR on a PC set up with Large Fonts, as rendered by Microsoft Internet Explorer and current versions of Netscape and by many other programs such as word processors (e.g., Microsoft Word). This is the same size (in pixels) as 20-point TNR on a Mac (5/3 ratio).

"TNR 12-point on PC-Small" shows 12-point TNR as rendered by most software on a PC configured with Small Fonts (Also, as noted previously, Netscape 3 draws text at this size even if the PC is set up with Large Fonts). This is the same size (in pixels) as 16-point TNR on a Mac (4/3 ratio).

"TNR 12-point in PC-Canvas" shows 12-point TNR as drawn on-screen (at 100% "true size") by the Windows version of Canvas from Deneba Software (version 5.0.2) [This was done on a PC configured with Large Fonts]. This is exactly the same size (in pixels) as 12-point TNR on a Mac. Canvas is a graphics program that was originally written for Mac and later ported to Windows. Apparently, even in its Windows version, it assumes screen resolution 72dpi, just as if it were running on a Mac. It probably does this for compatibility of files between its Mac and PC versions. Possibly, other graphics and DTP programs originally written for Mac and later ported to Windows behave this way as well.

UNIX (X-Windows) case: My earlier table included two UNIX examples. The X-Windows fonts used here are bitmaps, which are not scalable in the same sense as the TrueType and PostScript fonts used on PCs and Macs. The X-fonts are, however, available in a number of versions for screens of different resolutions. The two most common variants are those intended for 75dpi and 100dpi screens. The 75dpi X-fonts are roughly the same size (in pixels) as text on the Macintosh, which assumes 72dpi screen resolution. The 100dpi X-fonts are comparable to the PC-Small case, where 96dpi is assumed.

The above examples show the huge variation in displayed text size when people use their browser's default font settings. However, variations can be even bigger because users may change these default settings. In Netscape, people change them by using its Options (or Preferences) menu choices. In Microsoft Internet Explorer, users can instantly change the size of displayed text by clicking the "A" button at the top of the browser window:

This screen shot shows the Windows version of Internet Explorer (version 3.0). Here, the "A" button cycles between IE's five qualitative text-size settings (Smallest, Small, Medium, Large, Largest). In the Mac version of IE, it's even easier because it has two "A" buttons: one for increasing, the other for decreasing the text size.

Some Practical Lessons

I have shown that displayed size of text on-screen varies greatly in different browsers on different computers. Moreover, while web graphics are always displayed at the same size (in pixels) on every computer, text is drawn at very different sizes (in pixels); therefore, the size of text relative to graphics varies greatly. From these facts, I draw two practical lessons for web designers:

1. Test robustness of page designs to text-size changes. When testing page designs, vary your browser's font display settings to make the text appear at least 50% bigger and 50% smaller than you would normally see it (This is probably easiest when checking the pages in Microsoft Internet Explorer). If it looks unacceptable when you alter the text size this way (e.g., if table arrangements of text & graphics get distorted & look really ugly), then the design is non-robust and should be rejected.

2. Keep your text readable - be wary of small text sizes. The same text looks considerably bigger to some users than others. As noted earlier, the screen resolution assumed by your software isn't necessarily the real resolution of your monitor. For example, if your software assumes 120dpi (PC-Large case), but your monitor's actual resolution is 80dpi, then the displayed physical size of text is 50% bigger than your software thinks it draws the text. If you are such a user, you may be tempted to compose pages with long text passages in smaller-than-default size (e.g., SIZE=2 instead of HTML default: SIZE=3). Please resist that temptation; the text may look considerably smaller to other people, and you may cause severe eyestrain (or--more likely--they just won't read your page). On pages consisting mostly of text, most of the text should be at least as big as the HTML default (SIZE=3).

• Use of special characters (ISO 8859-1) - cross-platform considerations
• Fixing readability problem of Arial font on the Macintosh platform

This page by Bob Baumel: Home page |
Last revised 2005-07-26