One of the nice things about using computer technology to create written messages is that we can use certain fonts to create text that has particular styles. The messages can be printed in those fonts if the fonts are supported by the printers being used. Since we usually print the messages on the same system used to create the messages, we are assured that the messages will be in the desired fonts.

Desired Fonts May Not Exist

In the case of web pages, however, we have a different situation. Web pages are displayed on different systems than they were developed on, and we have no assurance that desired fonts will be installed on the other computers. Thus, when web pages are displayed, the pages may look different than we intended, because the desired fonts may not be present. To make matters worse, the fonts installed on Windows machines may be different than those installed on Macintosh and Unix computers.

It would be nice if fonts could be downloaded with the pages, but current technology does not allow that to happen..

Specify Several Fonts

If a web page contains fonts that are not present on a computer system, the browser uses the default font designated in the browser preferences. However, when you create a web page, you can specify more than one font for particular text, increasing the likelihood that your font will be used.

Give browsers an ordered list (font-list) of fonts. Put Windows fonts, Macintosh fonts, Unix fonts, and the system default fonts in the list. This list can include any fonts you want used, but it is safer to just include the "standard" fonts that are usually on most systems.

XHTML Font Tags

Some WYSIWYG editor programs allow you to specify more than one font. If your editor doesn't allow that, you can go to the XHTML level of editing and create your font-list. Place the font element immediately before the point where you want the font to change, as shown in the following example in which four fonts are specified in a face attribute.

<font face="verdana,arial,helvetica,geneva" />

The word face refers to the names of the fonts. Notice that the font-list is separated by commas and is in double quotes. The list is an ordered list, because the browser starts at the beginning of the list and searches the system for the font. It uses the first font that it finds on the system. The fonts specified in the font tag are in effect until a </font> element is encountered. If the browser doesn't find any of the fonts given in the list, it uses its default font.

For further study about XHTML tags, go to Learning XHTML.

Cross Platform Compatibility

"Standard" fonts for the three major platforms are given in the following table. If you specify the corresponding ones for each platform, the text in your pages will look close to the same on all three systems. Because Macintosh and Unix computers have the same names for the fonts, you don't have to repeat the names in your <font face> tag.

Windows	Macintosh	Unix
Verdana	Geneva	--
Arial	Helvetica	Helvetica
Times New Roman	Times	Times
Courier New	Courier	Courier

Verdana, Geneva, Arial, Helvetica, Times New Roman, and Times are proportional fonts having variable widths for the characters. Courier fonts are fixed-width. Verdana and Geneva were created specifically for display on web pages. They are sans serif and do not have the fine lines or serifs that adorn the ends of the letters in the Times New Roman and Times fonts. Arial and Helvetica are also sans serif. They were created for print media but look fine on web pages.

[ Site Map ] [ Distance Learning ][ Home ] [ Up ] [ Color Compatibility ] [ Font Compatibility ] [ Graphics Compatibility ] [ XHTML Validation ] [ Screen Resolution ]