Font Tags

Wondering how to change your font typeface or color or size in your HTML documents?

This page will discusses the use of FONT FACE, FONT SIZE, and FONT COLOR. These three variations of the FONT tag are supported by Internet Explorer and Netscape 3.0 and higher.

The <FONT SIZE> Tag

There are six sizes that can be used with the FONT SIZE tag. Font Size 7 is the largest, and Font Size 1 is the smallest. The default size for type to display on a web page is Size 3. This is the exact opposite of the Head tags <H1> through <H6> tags. Here's how the size tags appear:

<FONT SIZE=1>
<FONT SIZE=2>
<FONT SIZE=3>
<FONT SIZE=4>
<FONT SIZE=5>
<FONT SIZE=6>
<FONT SIZE=7>

Compare with the Header tags:

This is <H1>

This is <H2>

This is <H3>

This is <H4>

This is <H5>
This is <H6>

The <FONT FACE> Tag

The good news is that you can now specify a specific typeface for use within an HTML document. The bad news is that the typeface you specify must be installed on the computer of the person viewing the web page. Take a look at your friend's and coworker's computers, and you'll find very few of the same fonts installed on any computer.

Microsoft is trying to change this, by giving away a set of fonts for free. They're available for both the Mac and PC, and you can download them at http://www.microsoft.com/truetype. These fonts will also be bundled in with the next version(s) of Internet Explorer. Since they are giving these fonts away, these are the fonts you should use. Otherwise your pages won't look the same when you access them from another computer. The fonts Microsoft is giving away are:

    Arial , including:
  • Arial Bold
  • Arial Italic
  • Arial Bold Italic
  • Arial Black
If you have this font installed the above line will match the gif below:
    Comic Sans MS , including:
  • Comic Sans MS
  • Comic Sans MS Bold
If you have this font installed the above line will match the gif below:
    Courier New, including:
  • Courier New Bold,
  • Courier New Italic,
  • Courier New Bold Italic,
If you have this font installed the above line will match the gif below:
    Impact, which is a single font.
If you have this font installed the above line will match the gif below:
    Times New Roman, including:
  • Times New Roman Bold,
  • Times New Roman Italic,
  • Times New Roman Bold Italic
If you have this font installed the above line will match the gif below:
    Verdana, including:
  • Verdana Bold,
  • Verdana Italic,
  • Verdana Bold Italic
If you have this font installed the above line will match the gif below:

Here are some longer samples of these fonts. You'll need to be using Netscape 3.0 or higher, or Internet Explorer, and have the fonts installed to see these fonts:

Arial
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz.
This is a sample sentance using Arial.

Comic Sans MS
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz.
This is a sample sentance using Comic Sans MS.

Courier New
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz.
This is a sample sentance using Courier New.

Impact
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz.
This is a sample sentance using Impact.

Times New Roman
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz.
This is a sample sentance using Times New Roman.

Verdana
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz.
This is a sample sentance using Verdana.

Using the FONT FACE Tag

Now that you know the shortcomings of the FONT FACE tag, here's how to use it. You can specify a first, second and third choice font like this:


<FONT FACE="Comic Sans MS, Arial, Impact">Specifying
Comic Sans MS, along with two other choices.</FONT>

Don't forget to use the quotations around the font names. You can use the FONT FACE tag along with the FONT SIZE and FONT COLOR tag:




<FONT SIZE=4 FACE="Arial" COLOR="#FF0000">Using the 
FONT FACE Tag</FONT>

The <FONT COLOR> Tag

The font color tag is supported by Netscape 2.0 and higher, Internet Explorer, and America Online's Windows 3.0 browser.

The FONT COLOR tag is a nice way to add some variation to a web page, as long as you don't get too carried away with it. Making all the headers or sub-headers on a web site the same color can be a good way to organize and unify the web site.

Click here to check out the colors of the web!

Back home!