Wondering how to change your font typeface or color or size in your HTML documents? Here is another helpful tutorial !

This page will discusses the use of FONT FACE, FONT SIZE, and FONT COLOR, three variations of the FONT tag

Top

Coding samples

CSS :

font-family: "Comic Sans MS", Verdana, Arial, sans-serif ; font-family: Lucida Console, Courier New, monospace ;

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:

Compare with the Header tags:

The fonts can be managed relatively : minus one, normal, minus two, normal, plus two, normal.

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.

The fonts Microsoft is giving away are:

Arial, including :

• Arial Bold
• Arial Italic
• Arial Bold Italic
• Arial Black

Comic Sans MS, including :

• Comic Sans MS
• Comic Sans MS Bold

Courier New, including:

• Courier New Bold,
• Courier New Italic,
• Courier New Bold Italic,

Impact, which is a single font.

Times New Roman, including :

• Times New Roman Bold,
• Times New Roman Italic,
• Times New Roman Bold Italic

Verdana, including :

• Verdana Bold,
• Verdana Italic,
• Verdana Bold Italic

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 (Windows variant of Helvetica)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
This is a sample sentence using Arial.

Helvetica (Apple font)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
This is a sample sentence using Helvetica.

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

Impact
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
This is a sample sentence using Impact.

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

Rockwell
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
This is a sample sentence using Rockwell.

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>

If you have several fonts specified, the browser will try each font in the order listed, until it finds one on your machine.

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 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.

Here is a nice table of colors.