home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  

Book HomeWeb Design in a NutshellSearch this book

3.2. Typography on the Web

HTML was created with the intent of putting ultimate control of the presentation in the hands of the end user. This principle makes its most resounding impact when it comes to typography. Take a look at your browser's preferences and you will find that you (and every other surfer) are able to specify the fonts and sizes that you prefer for online viewing.

For anyone accustomed to designing for other media, this loss of font control is cause for major frustration. From the time they discovered the Web, designers (and their corporate clients) have been pushing for ways to control typography in order to produce attractive and predictable web sites.

Great strides have been made in this effort since the early days of the Web and HTML 1.0; however, as of this writing, the font issue is still unfolding. This section discusses possible strategies and technologies (along with their advantages and disadvantages) for designing type in web documents.

3.2.1. You Have Two Fonts

About the only thing you can be sure of when you're designing web pages with basic HTML is that you have two fonts to work with: a proportional font and a fixed-width font. The problem is that you don't know specifically which fonts these are or at what size they will be displayed.

3.2.2. Text in Graphics

Designers quickly learned that the sure-fire way to have absolute control over font display is to set the text in a graphic. It is common to see headlines, subheads, and call-outs rendered as GIF files. Some web pages are made up exclusively of graphics that contain all the text for the page. Advantages of GIF text

The advantage to using graphics instead of HTML text is fairly obvious -- control!

  • You can specify text font, size, leading, letter spacing, color, and alignment -- all attributes that are problematic in HTML alone.

  • Everyone with a graphical browser will see your page the same way. Disadvantages of GIF text

As enticing as this technique may seem, it has many serious drawbacks. Many professional sites have adopted a "no text in graphics" rule. Keep the following disadvantages in mind when deciding whether to use graphics for your text.

  • Graphics take longer to download than text. Graphics are likely to be many orders of magnitude larger than HTML text with the same content, and will result in slower downloads.

  • Content is lost on nongraphical browsers. People who cannot (or have chosen not to) view graphics will see no content. Alternative text (using the alt attribute) in place of graphics helps, but this is a limited solution and not always reliable.

  • Information in graphics cannot be indexed, searched, or copied and pasted. In effect, by putting text in a graphic, you are removing useful pieces of information from your document. Again, the alt attribute helps here.

3.2.3. Why Specifying Type Is Problematic

Cascading Style Sheets and the nonstandard <font> tag give web designers an added level of control over typography by enabling the specification of fonts and sizes. Although it is a step in the right direction, using these tags by no means guarantees that your readers will see the page exactly the way you've designed it.

Specifying fonts and sizes for use on web pages is made difficult by the fact that browsers are limited to displaying fonts that are already installed on the user's local hard drive. So, even though you've specified text to be displayed in the Georgia font, if users do not have Georgia installed on their machines, they will see the text in whatever their default font happens to be. Fortunately, HTML allows you to specify backup fonts if your first choice is not found (this technique is described in Section 10.5.2, "Specifying Fonts with <font>" of Chapter 10, "Formatting Text").

Platforms also handle type size display in different ways. Using style sheets and the <font> tag is more like recommending fonts and sizes than actually specifying them. 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. Table 3-1 lists the fonts that are installed with various platforms.

Table 3-1. Fonts installed on Windows, Macintosh, and Unix platforms

Microsoft Windows(3.1x, 95, 98, NT, 2000, ME):

Arial (Bold, Italic)

Courier New (Bold, Italic, Bold Italic)

Times New Roman (Bold, Italic, Bold Italic)



Lucida Sans Unicode (NT 3.x and higher only)

Marlett (95 and 2000 only)

Unix/Xfree bitmap fonts:









new century schoolbook





Macintosh (System 7 and higher):






New York




Macintosh System 8 and higher, add:

Apple Chancery

Hoefler Text

Hoefler Text Ornaments


Macintosh System 8.5 and higher, add:







Macintosh OS X comes with all of the above and dozens of other "classic, modern, and fun" fonts

Microsoft Internet Explorer installs some fonts on users' systems as well. You can be certain that folks surfing the Web with IE will have the fonts listed in Table 3-2.

Table 3-2. Fonts installed with Internet Explorer

Internet Explorer (3 and 4):

Internet Explorer (4.5 and 5):

Arial Black

Comic Sans (Bold)


Verdana (Bold, Italic, Bold Italic)


Andale Mono


Arial Black

Comic Sans

Courier New



Times New Roman

Trebuchet MS




3.2.4. Embedded Fonts

Both Navigator and Internet Explorer support technologies for embedding fonts in a web page, enabling your viewers to see your page exactly as you have designed it. Because the font travels with the HTML file, it is not necessary for the user to have the font installed on the client end in order for specified fonts to display. A few years ago, there was a fair amount of excitement about embedded fonts, but the interest has since waned and we are now left with two poorly supported and incompatible standards. In fact, Netscape opted to no longer support embedded fonts in its Version 6 release.

Not surprisingly, Netscape and Microsoft have lined up with competing technologies. Netscape, partnering with Bitstream (a font design company), created TrueDoc Dynamic fonts. Microsoft and Adobe worked together to develop Embedded OpenType.

Both technologies work basically the same way: a special font embedding tool is used to compress the type into a downloadable font file. This font file is referenced by the HTML document using the <link> tag. To use the font, just call it by name using Cascading Style Sheets or the <font> tag in the document. Users with browsers that support embedded font technology see your special fonts; otherwise, text is rendered in the browser's default font. TrueDoc Technology ("Dynamic Fonts")

TrueDoc technology was developed by Bitstream in 1994, and in 1996, Netscape included "Dynamic Font" support in the Navigator 4.0 browser. Dynamic fonts are saved in the Portable Font Resource (.pfr) format. To create them, it is recommended that you use WebFont Wizard from Bitstream (available for both Windows and Mac; see Bitstream's web site at http://www.truedoc.com).

Browser support for TrueDoc is slightly better than its competitor but is still problematic. Dynamic fonts can be viewed on Navigator 4.x for Windows, Mac, and Unix, and Internet Explorer 4+ for Windows only. Internet Explorer users must download an ActiveX control for the WebFont Player in order to view Dynamic Fonts. Although dynamic fonts can be viewed on IE5.5, they cannot be printed. Netscape 6 has dropped embedded font support on all platforms, so TrueDoc works only on Netscape Version 4.x.

For more information on TrueDoc technology, see Bitstream's web site.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.