Exit tutorial


HTML Tutorial
Web Design Stage 2: Font Faces
Using Different Fonts On Your Pages

Well, if you have the desire to change the font type on your pages without using images, you can do it to some extent with the HTML font tag. You do this by adding the face=" " command to your font tag, like this:

<FONT face="Arial">Give me an Arial font!</FONT>

This would give you the Arial font:

Give me an Arial font!

However, there are some restrictions to this you will want to be aware of:

  1. The people viewing your pages won't be able to see the new font unless they have a modern browser.
  2. The viewer needs to have the font installed in their computer in order to see it. This means that you are unwisse to specify some exotic font if your viewer id unlikely to have it. Your page will simply not be seen in the way you intended it to be seen.

Viewers without all the requirements will just see the standard Times New Roman font. So, here is a short list of some common fonts that you should be able to use in the face=" " command. Try a few from your own computer and see what happens........


Arial    Arial Font
Arial Black    Arial Black Font
Courier    Courier Font
Courier New    Courier New Font
Modern    Modern Font
Terminal    Terminal Font
Symbol    Symbol Font

In reality, it is best to offer the user a choice of fonts, so that if the viewer doesn't have a particular font installed on their machine, it will try another one instead. We call these lists of fonts, 'font families'. In this case, if the viewer does not have Arial installed on their machine, then it will try Helvetica, and so on.

<font face="Arial, Helvetica, sans-serif">text</font>

Here are some other font families:

Times New Roman, Times, serif
Courier New, Courier, mono
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

Serif and Sans-Serif Typefaces

Serif typefaces are like the one in these final paragraphs (if your browser is set with default fonts). They have the little serifs on the edge of the type in order to aid in reading recognition of characters. Serif typefaces are great for longer text because they help the reader's eye to focus more easily on the words being displayed. But in headlines, serif typefaces can make the headlines appear too busy. That's why many good designs use sans-serif (meaning no serif) typefaces for headlines. Sans-serif typefaces are simple yet elegant in design. Since simplicity is really the key to overall effective and attractive designs, until you learn more about the basics of good design, it's better to follow the standard uses of serif and sans-serif typefaces by using them in the manner described above.

In addition to knowing which typeface to use in the body or headline text, there is one other standard rule of typefaces you need to be aware of. Never mix more than one serif typeface with one sans-serif typeface. You only need two typefaces to insure a standardized style that leads the reader where you want them to go. And because most typefaces have bolding and italics, you don't need any other typefaces to emphasize additional points you want to make.

[Back to the Stage 1 Index]