Fonts are not our friends when it comes to HTML. In fact, you could even say that HTML has gone out of its way to break all known design standards like point size. Font control currently comes in two flavors, the headline tag and the font tag.

The headline tag is a set of six tags <h1></h1> through <h6></h6>. As the number grows, the font size reduces. All text between the headline tags are bold and contain a double line break after the tag closes. The number has no relation to point size measurements and is actually based on current text size and percentages.

Here are some examples:

This is h1

This is h2

This is h3

This is h4

This is h5

This is h6

As you can see, the headline tags have a very limited use, which brings us to our second choice, the font tag.

The font tag is much more flexible than the headline tag, but it is still very limited. The font tag can take the following arguments:

• size - size is measured from 1-7
  
• color - in hexadecimal
  
• face - options of font faces to try

The size tag is a value from 1 to 7 with 1 being the smallest and 7 being the largest.

Examples

This is as big as it gets
Code: <font size="7">This is as big as it gets</font>

and this is as small as it gets
Code: <font size="1">and this is as small as it gets</font>

Size is percentage based to the relative size of the current font (3). This means that a size of 2 is smaller than the normal text (3) and a size of 4 is larger. One nice addition to the size tag is using a plus or minus symbol.

For Example:

This is 2 bigger than the current text size
Code: <font size="+2">This is 2 bigger than the current text size</font>

This is 1 smaller than the current text size
Code: <font size="-1">This is 1 smaller than the current text size</font>

This is an example of a capped first letter.
Code: <font size="+2">T</font>his is an example of a capped first letter.

The font color tag uses values just like the body tag does. You assign a hexadecimal color to make it work. For more information on hexadecimal color choices, please refer to the body tag page.

Some examples:

This is red text
Code: <font color="#ff0000">This is red text</font>

This is bigger red text
Code: <font color="#ff0000" size="6">This is bigger red text</font>

This is bold and blue
Code: <font color="#0000ff"><b>This is bold and blue</b></font>

The font face tag is highly problematic because you can NOT send actual fonts along with your HTML. This means that the end user has to have the font installed on their machine to make it work. The default fonts on a Macintosh and Windows 95 machine are listed here.

The only fonts that are on both a PC and a Mac are Times and Courier. Yuck! However, the face tag is smart and allows you to have fallbacks.

For example:

This would display Birch if found, then Arial as a second choice, and then Times as a third choice

Code: <font face="Birch, Arial, Times">This would display Birch if found, then Arial as a second choice, and then Times as a third choice</font>

This would use Dollhouse if found, Helvetica as a second choice and if neither was found, it would load whatever the default system font was

Code: <font face="Dollhouse, Helvetica">This would use Dollhouse if found, Helvetica as a second choice and if neither was found, it would load whatever the default system font was</font>

The works:

The Works
Code: <font face="Arial, Times" size="5" color="#ff00ff">The Works</font>