Web Design Tutorials

The Font Tag

The Font tag lets you specify how you want your font formatted on a web page. You can specify the size of the font, the type of font, and the colour of the font. You can specify all three in the same tag, or just use one or two.

The basic font tag is this:

<FONT> </FONT>

But that won't work, were you to surround some text with those two tags. That's because you need to specify at least one of the three font formatting attributes.

To specify the size of your font only, use this:

<FONT SIZE = 3> </FONT>

Just like the Heading tag, the Font Size comes in 7 flavours. This time, however, size 1 is the smallest, and size 7 the biggest. The default is size 3. This means that if you leave the size out, you'll get size 3 font for your text.

To specify the type of font you want, the word FACE is used:

<FONT FACE = "Arial"></Font>

You can specify more than one font face to use. The point of doing this is that the person viewing your page might not have your font on his or her computer. The other fonts you specify will then be used as alternatives, if the first choice is not available. Each font face is separated by a comma:

<FONT FACE = "Arial, Helvetica, sans serif"></Font>

In the case above, if the person hasn't got Arial, a Helvetica font will be used; if no Helvetica font is available, then any sans serif font will be used.

To specify a colour for your font, the American spelling is used: COLOR. The colour you use can be the name of a colour, or the colour code. So both of these are valid:

<FONT COLOR = RED> </FONT>

<FONT COLOR = #FF0000> </FONT>

Note the hash (#) symbol before the colour code. Miss it out, and you don't get the colour you asked for.

To specify all three in the same tag, the code is this:

<FONT SIZE = 5 FACE = "Arial, Helvetica, sans-serif" COLOR = Red>
Your Text Here
</FONT>

Let's use the HTML Editor to insert some Font formatting.

• Click the black arrow on the drop down boxes, and choose a Font Size, a Font Face and a Font Colour. If you'd rather just have one of them (or two) leave the others set to None or Default
• Delete the text from the text box, and type in your own text
• Click OK

Save your work, and view the results in your browser.

The Font tag can be used on a single letter, a single word, or blocks of text. It can be quite effective.

In the next part, we'll take a look at how to contruct a bulleted list in HTML.

<-- Back One Page Move on to HTML Bullets and Lists-->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses