A Complete Guide to Web Design

44 Chapter 3 – Web Design Principles for Print Designers

Typography on the Web

Web Design in a Nutshell, eMatter Edition

whatever their default font happens to be. In addition, platforms handle type size

display in different ways. Using these tags is more likerecommendingfonts and

sizes than actually specifying them.

Type size

Traditionally, type size is specified in points (there are approximately 72 points per

inch), but unfortunately, point sizes do not translate well between platforms. In

part, this is because their operating systems drive monitors at different resolutions.

Typically, Windows uses 96ppi for screen resolution and the Mac OS uses 72ppi,

however, multiscan monitors allow higher resolutions.

On a Mac, a font is displayed at roughly the same size at which it would appear in

print (e.g., 12pt Times on screen looks like 12pt Times on paper).

Microsoft, however, threw out that convention and chose to display point sizes

larger to make it easier to read on a monitor. As a result, 12pt type on a Windows

machine is closer to 16pt type in print. To get 12pt print-size type on Windows,

you need to specify a point-size of 9 (but then Mac users will see that text at a

nearly illegible 6.75pt type).

Selecting fonts for web pages

Each platform has its own set of standard fonts (and font file formats), making it

difficult to specify any one font that will be found universally. Although there are

many commercial fonts available for both Mac and PC, you can’t assume that your

audience will have them. The majority of users are likely to be content with the

collection of fonts that are installed with their systems or packaged with software

such as Internet Explorer, as shown in the following list.

Macintosh OS 7.0

Chicago

Courier

Geneva

Helvetica

Mishawaka

Monaco

New York

Palatino

Symbol

Times

OS 8.0

Apple Chancery

Charcoal

Chicago

Courier

Geneva

Helvetica

Monaco

New York

Palatino

Skia

Symbol

Times

Wingdings

Windows 3.1 and 95

Arial

Courier New

Times New Roman

Wingdings

Symbol

Marlett (Win95 only)

NT 3.x

Arial

Courier New

Times New Roman

Wingdings

Symbol