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.1.1. Proportional font
A proportional font (called "Variable Width Font" in Netscape Navigator) is one that allots different amounts of space to each character, based on its design. For instance, in a proportional font, a capital "W" takes up more horizontal space on the line than a lowercase "i". Times, Helvetica, and Arial are proportional fonts.
Web browsers use a proportional font for the majority of text in the web page, including body text, headings, lists, blockquotes, etc. In general, proportional fonts are easier to read for large bodies of text.
Because the majority of users do not take the time to change the default font in their browser preferences, you can make a very broad assumption that most of the text on your page will be displayed in 10- or 12-point Times (Navigator default) or Helvetica (the default in Microsoft Internet Explorer). Remember, this is only a very general guideline.
3.2.1.2. Fixed-width font
Fixed-width fonts (also known as "constant-width" or "monospace" fonts) are designed to allot the same amount of horizontal space to all characters in the font. A capital "W" takes up no more or less space than a lowercase "i". Examples of fixed-width fonts are Courier and Monaco.
Web browsers use fixed-width font to render type within the following HTML tags:
|
<pre> |
Preformatted text |
|
<tt> |
Typewriter text |
|
<code> |
Code |
|
<kbd> |
Keyboard entry |
|
<samp> |
Sample text |
|
<xmp> |
Example text |
Again, because most people do not change the default font settings in their browser preferences, you can make a reasonable guess that text marked with the above HTML tags will be displayed in some variation of Courier.
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.
3.2.2.1. 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.
3.2.2.2. 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.
3.2.3.1. 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, but 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).
3.2.3.2. 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):
Unix/Xfree bitmap fonts:
|
Macintosh (System 7 and higher):
Macintosh System 8 and higher, add:
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): |
|
|
3.2.3.3. Core fonts for the Web from Microsoft
The problem with reading text on web pages is that many fonts (most notably the ubiquitous Times) are difficult to read at small sizes. The serifs that aid readability in print are actually a hindrance when rendered with a limited number of black and white pixels.
Responding to the need for fonts that are easy to read on the screen, Microsoft has created a collection of TrueType fonts (for both Windows and Mac) that have been specially designed to be optimized for on-screen viewing. They distribute them for free with the hope that they might grow to be standard and "safe" fonts to specify in web documents. The Microsoft web fonts currently include:
Andale Mono (formerly Monotype.com)
Arial
Comic Sans
Courier New
Impact
Times New Roman
Trebuchet MS
Webdings (Windows only)
These fonts have generous character spacing, large x-heights, and open, rounded features that make them better for online reading. Georgia and Verdana were designed by esteemed type designer Matthew Carter, with hinting provided by Vincent Connare (who also designed Comic Sans and Trebuchet MS).
The complete set of TrueType core fonts for the Web is available for free via download at http://www.microsoft.com/typography/fontpack/default.htm.
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.
3.2.4.1. 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.
3.2.4.2. OpenType (for Internet Explorer)
OpenType technology was developed by Microsoft and Adobe. It uses the Embedded OpenType (.eot) file format, which can be created with Microsoft's WEFT (Web Embedding Font Tool). WEFT is freely available, but it works only on Windows systems. Embedded OpenType is currently supported only on Internet Explorer Versions 4 and higher running on Windows machines. Macintosh users are out of luck both creating and viewing OpenType on the Web.
For more information on Embedded OpenType, including options for downloading WEFT, see Microsoft's "Typography on the Web" page at http://www.microsoft.com/typography/web/default.htm.
 |  |  |
| 3. Web Design Principles for Print Designers |  | 3.3. Color on the Web |
Copyright © 2002 O'Reilly & Associates. All rights reserved.