Study Guide: Web Design - Font Appearance

The font tag allows more control over the appearance of text on your web page. The color attribute allows you to specify a color for your text. The size attribute lets you specify a size, from 1 to 7, 1 being smallest and 7 being largest. The face attributes allows you to specify a font name, like Times. A word of caution - If the computer viewing your page does not have the font you specified, the browser will pick another font. Therefore, it is good practice to choose common fonts like Times and Helvetica. Another way to deal with this issue is to choose a font family and list several names, for example:

Face="Arial, Helvetica"

This attribute will cause the web browser to use the Arial font if it is available (as it is on most PCs). If Arial is not available, the browser will use Helvetica, a very similar font available on most Macintosh computers. This list of fonts can be as long as you like. If none of the fonts in the list can be found, the default font for the viewing browser will be used, so the page may end up looking nothing like you intended!

Here are some examples of usage of the font tag:

<FONT face="Arial, Helvetica" size="2" color="red"> The little red wagon </FONT>

<FONT face="Times, Times New Roman, serif" size="4" color="yellow"> We all live in a yellow submarine. </FONT>

<FONT color="lime" size="5"> The big bright green pleasure machine. </FONT>

Exercise: Add the <FONT> tag with attributes to your page. Choose a font face, size and color and change some of your text. If you choose text with other tags in it, be sure to nest your tags properly. Other tags can be between the <FONT> and </FONT> tags, as long as both the begin and end tags are between the <FONT> and </FONT> tags. Or, the <FONT> and </FONT> tags can be inside another tag.

Save your page, then look at the results in the browser. If possible, look at your results in two different browser windows -- for example, Netscape and Internet Explorer. Do the two pages look different? How? Also, if possible, look at the pages on a Mac and on a PC. You may find some variation there as well.