The Font Tag

Technically a font is a shape like a serif or stroke that is used to construct a typeface like Courier or Times New Roman. But today when we refer to a font, we usually mean the typeface. Up until HTML version 3 the font was set using the tag. Today, most webpage text design is accomplished through the use of style definitions rather than html tags.

Starting with HTML version 4, the font tag was "deprecated". Deprecated means that at some point in the future it may no longer be supported by some browsers. However, I believe because the Web contains millions of old webpages that use the font tag, and because thousands of new webpages are being created each day using the font tag, it will be supported long into the future.

I want to get you started in web design with the proper psychology and good design habits, so you need to understand that everything on a webpage is a box. Earlier when we just typed some text in a file and it displayed in the browser, it didn't appear to be in a visible container. Actually, it was in an invisible container referred to as an "anonymous box".

Text on a webpage should always be placed inside a container. The container may be a table cell or a span or div element, but the most commonly used container for text is a paragraph, which is designated by the and tags. You don't want to just type text without a container because the browser will put it in an anonymous box, and it will follow the browser's rules rather than your design. So to start you out with good design habits, all these font tag examples will place the text within a paragraph element.

Font Face

Most html tags have "attributes". An attribute is a named property that you can set to a specific value. Shown below we set the font tag's face attribute to "Arial".

<p><font face="Arial">This is your text.</font></p>

To test the examples given in this eBook, open your favorite basic ASCII text editor, type in the example code, save the file with any name with the .htm file extension as explained earlier. Then double-click on the file name and it will display in your default web browser. The example code will just provide the html for the body of the webpage, but you should provide the tags for the entire webpage structure as shown below.

<html>
<head>
<title>Your Title</title>
</head>
<body>

<p><font face="Arial">This is your text.</font></p>

</body>
</html>

In choosing a font face, keep in mind that it will be displayed only if the user has that particular font installed on their computer. If the particular font that you specified is not installed on the user's computer, the browser will make a substitute, and you don't know what you're going to get. Nowadays users have a tremendous number of fonts installed on their computers, but only a handful are known to be common to both Windows PCs and Macs. Those fonts are referred to as the "browser safe fonts". Below is a list of some browser safe fonts.

Browser Safe Fonts

Arial
Comic Sans MS
Courier New
Georgia
Verdana

If you want a font that is not on the safe list, you can set the face attribute to a list of fonts as shown below. If the browser can't find the first font on the users computer, it will use the second font in the list, and so on.

<p><font face="Andalus, Helvetica, Arial">This is your text.</font></p>

Font Size

To set a font's size you would use the font tags size attribute. You can set a fonts size between 1 and 7. The code shown below set the font size to 4.

<p><font size="4">This is your text.</font></p>

You can set the font face and the font size both within the font tag, as shown below.

<p><font face="Verdana" size="4">This is your text.</font></p>

In these examples, your text is contained within a paragraph element. You can use font tags to change the font face or size anywhere within the paragraph, as shown below.

<p><font face="Verdana" size="4">This is your text.
<font face="Comic Sans MS">This is your text.</font>
This is your text.</font></p>

Notice how I nested the font tags.

You can use the same font tag nesting procedure to set a smaller font within a paragraph, as shown below.

<p><font face="Verdana" size="5">This is your text.
<font face="Verdana" size="3">This is your text.</font>
This is your text.</font></p>

Html also provides the tag, which can be used to set the font one size smaller, as shown below.

<p><font face="Verdana" size="5">This is your text.
<small>This is your text.</small>
This is your text.</font></p>

Nesting two tags causes the font size to be set two sizes smaller, as shown below.

<p><font face="Verdana" size="5">This is your text.
<small><small>This is your text.</small></small>
This is your text.</font></p>

Html also provides the <big> tag, which can be used to set the font one size bigger.

Font Color

To set a font's color you would use the font tags color attribute. The example shown below sets the font color to Crimson.

<p><font color="Crimson">This is your text.</font></p>

You can set the font's color to any one of 147 color names defined in the HTML specification. Shown below is a list of some of the color names defined in the specification.

Beige
Black
Blue
Brown
Crimson
DarkBlue
DarkGreen
Gold
Green
LightGray
Pink
Purple
Red
Violet
White
Yellow

To set a more precise color, you can set the font tags color attribute using "hexadecimal color notation", as shown below.

<p><font color="#6495ed">This is your text.</font></p>

Whereas the decimal numbering system uses the characters 0 through 9 to get 10 values, the hexadecimal numbering system uses the characters 0 through f to get 16 values. (After 9 the characters a, b, c, d, e and f are used). With hexadecimal color notation you set the amounts of red, green, and blue, on a scale from 0 to ff.

You can use font tags to change the font color anywhere within the paragraph, as shown below.

<p><font face="verdana" size="4" color="red">This is your text.
<font color="green">This is your text.</font>
<font color="blue">This is your text.</font></font></p>

Notice how I nested the font tags. Notice the face and size attributes within the first font tag. The order of the attributes within the tag doesn't matter. The resulting display with the code shown below is the same in either case.

<p><font face="verdana" size="4" color="red">This is your text.</font></p>

<p><font size="4" color="red" face="verdana">This is your text.</font></p>

I hope you've tried all or most of the examples in this article and have learned how to control the apearance of text on your webpage.

Learn more at amazon.com

More HTML Code:
• HTML title Tag
• When to Use the nofollow Attribute value
• Aligning an Image on Your Web Page
• HTML DIV Basics
• Providing Alternate and Title Text for an Image
• Web Page Template
• How to Make a Table Scroll
• Image Map Basics
• Use Meta Tags for Search Engine Optimization
• Line Breaks in HTML