by Bob Baumel
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:
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
(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
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
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,
"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.
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:
This page by Bob Baumel: Home page |
Last revised 2005-07-26