Life would be real boring if we only had one font, but believe it or not, the Web started out this way - you were stuck with the default browser font, usually Times. These days we're spoilt for choice - most computers come with a wide range of fonts installed, and we can pick and choose our fonts from within HTML.

This tutorial shows you how to use the FONT tag to specify fonts; offers advice on choosing a font; demonstrates how to offer an alternative if the browser doesn't have the font you want to use; and gives several other hints and tips for better fontography!

The FONT tag

The FONT tag lets you tell the browser which font, or typeface, to display your text in, and choose the size and colour of the text as well. The basic syntax is:

<font size="size" face="typeface" color="text colour">

After this tag you put the text you want to appear in this style, then finish with a </font> tag.

The size attribute ranges from 1 to 7, with 3 being the default font size for the particular browser. Users can change their default font size, so the size you specify in this tag is relative to the font size set by the user.

The face attribute lets you specify the font name in text form - for example, "Times New Roman" or "Helvetica". You can specify alternative fonts by separating them with commas, and the browser will use the first one in the list that is installed on the computer. You can also suggest either a serifed font (e.g. Times) or a non-serifed font (e.g. Arial), in case the browser doesn't have any of your specified fonts installed. This is done using the keywords serif and nonserif.

The color attribute allows you to set the colour of the text that follows. For example, color="0000FF" will produce blue-coloured text.

Here are a few examples:

<font size="3" face="Times, Palatino, serif"
            color="#FF0000">This is Example No. 1</font>

<br>

<font size="2" face="Arial, Helvetica, nonserif"
            color="#008000">This is Example No. 2</font>

<br>

<font size="5" face="Verdana, Arial, Courier, Times"
            color="#FF8000">This is Example No. 3</font>

And this is what they look like in your browser!

This is Example No. 1
This is Example No. 2
This is Example No. 3

In Example No. 3, notice how your browser picked the first font it found on the list!

Choosing the right font

Generally speaking, in the print world, serifed fonts (e.g. Times, Bookman) are good for body text, while non-serifed fonts (e.g. Arial, Helvetica) are good for headings and titles. This is largely true in the Web world also, but be careful with serifed fonts. Because of the low resolution of the computer screen, fonts such as Times can look very jagged and become very hard to read at small sizes (less than about size 3).

We use the Verdana font throughout most of the Web Toolbox, which is a font designed specifically for Web use. It is non-serifed and scales well (looks good at different sizes), and is fairly readable. But as not all browsers have Verdana installed, specify an alternative non-serifed font such as Arial or Helvetica if you want to avoid nasty-looking serifed fonts anywhere!

Choosing the right font size

If you're building your pages on Windows, it's important to know that most Mac and Unix browsers display fonts at least one size smaller than on Windows! So avoid the smallest font sizes if at all possible...

Drop capitals

Here's a neat trick you can do with the font size attribute - a drop capital letter at the start of a paragraph:

<font size="5">W</font>elcome to our web page!

...which looks like this:

Welcome to our web page!

The <H1>..<H6> tags

You can also use the Heading tags to specify that you want a certain piece of text to stand out as a heading. You get less control over the font sizes this way, but on the other hand you ensure that the text will stand out on a wider range of browsers and browser configurations.