Working With Fonts

A font is a design for a set of characters. This design includes the shapes of each of the characters, the size (height and width), and a multitude of other characteristics that controls how the font is to appear and how it can be resized.

In HTML you have several ways to display characters in different fonts. The simplest is use the built in tags which change the characters to a standard font set.

For example, you can use the <TT> and </TT> tag (TT stands for teletype) to make a monospaced line (this where all of the characters are the same distance apart).

<tt>This line is an example</TT> This line is an example

This line is an example
This line is an example

As you can see, the characters of the first line are exactly the same distance apart. The distance between the characters in the second line varies. The <TT> tag is useful for showing text that has been printed or displayed on a screen. I like to use it for examples in some of my documentation.

Another useful tag is the <CODE> tag. This is useful for showing programming code. For example, this would be helpful if you want to show examples of JavaScript on your HTML page.

<code>Here is an example</code> Here is an example

Here is an example
Here is an example

<CODE> and <TT> actually do pretty much the same thing. However, it is wise to use the appropriate tag so your HTML code is a little more understandable.

You can more precisely change the way your characters appear using the tag.

Let's begin with the size of the characters. Fonts come in 7 sizes, as shown below.

puny, small,regular,bigger,large,huge,gigantic

Which correspond to 7 numbers:

1, 2,3,4,5,6,7

You specify the size by including the SIZE attribute on the tag.

Cody's animation station has hundreds of free animations split into easy categories.

This displays as shown below.

Cody's animation station has hundreds of free animations split into easy categories.

What this tag did was set the current font to size 2.

You can also change the color of the font using the COLOR attribute. Colors get a little complicated and are covered in more detail in a future tutorial. Let's keep it simple here and just include the color blue.

Cody's animation station has hundreds of free animations split into easy categories.

Cody's animation station has hundreds of free animations split into easy categories.

See how simple that was? Also, did you notice that since we did not specify the SIZE attribute (as in the previous example) the font size did not change.

And now to the meat of this lesson: changing the font itself. Before going any further you must understand that fonts are installed on a system by system basis by the user of the computer. Thus, systems tend to have vastly different fonts installed on them. Some people, like me, have hundreds installed. Other people survive (I don't know how) with just the fonts that come with the operating system.

What this means is you must be very careful with the fonts that you use. If you go hog wild and specify dozens of strange or different fonts, very few people will be able to view your document the way that you intend (most people will not download a font just to view a web page).

Well, what happens when you specify a font which the computer does not have installed? The browser simply doesn't use it and uses the default font instead.

Okay, this being said, here is how you specify a font within the tag.

Cody's animation station has hundreds of free animations split into easy categories. Cody's animation station has hundreds of free animations split into easy categories.

Cody's animation station has hundreds of free animations split into easy categories.
Cody's animation station has hundreds of free animations split into easy categories.

See how easy that was? Now here is what happens when we include a font that does not exist:

Cody's animation station has hundreds of free animations split into easy categories. Cody's animation station has hundreds of free animations split into easy categories.

Cody's animation station has hundreds of free animations split into easy categories.
Cody's animation station has hundreds of free animations split into easy categories.

The browser cannot find "StrangeFont" so it simply uses the default document font.

How do you get around this problem? First, try and stick to fonts that people actually have on their computers. Some good bets are:

Andale Mono

Arial

Arial Black

Comic Sans MS

Courier New

Georgia

Impact

Times New Roman

Trebuchet MS

Verdana

These exist on most Windows systems.

But what if you want to use one of those fancy fonts? Well, that's okay, but be sure and specify an alternative. What this means is you can specify more than one font in the tag. Here's how that looks:

Cody's animation station has hundreds of free animations split into easy categories.

Cody's animation station has hundreds of free animations split into easy categories.

If you have "Allegro BT" installed you will see this in that font, otherwise you will see the text displayed in "Comic Sans MS".

This is actually a really cool feature. What the browser does is see if the first font exists on the users system. If so, all is fine and the font is used. If not, the browser moves to the second font and tries it, and then the third and so on.

What this allows you to do is control exactly your layout. So you can test your page in each font to be sure it looks okay rather than allowing the browser to choose something unknown for you. How do you test the fonts? Simply move each one to the front of the list and see how it looks. Keep doing that for all of the fonts in your list until you've checked them all.

You can include font tags within font tags to produce various effects. An example is included below.

Cody's animation station has hundreds of free animations split into easy categories.

Cody's animation station has hundreds of free animations split into easy categories.

Just be sure and close each with a .

In addition, you can mix other tags in your . Let's say you wanted to underline some text. You could do the following:

Cody's animation station has hundreds of free animations split into easy categories.

Cody's animation station has hundreds of free animations split into easy categories.

Well, I think that's enough for one lesson. By now you should be pretty comfortable with using fonts within your HTML documents.

Note: for further reading check out the article "Mistakes with Text". This article explains a bit more about how to correctly (and incorrectly) design text into a website. You can also check out "Tip #3: Changing Your Default Font" to learn about how fonts can be set from the browser, and "Fonts" to find out how to examine and install fonts to your system.