The HTML Font Tag

Guest Author - Diane Cipollo

In the second part of this tutorial we will talk about how to control the look of the text on your webpage using the HTML font tag.

REVIEW:
In the previous tutorials in the HTML Basics Series, you learned that HTML tags are used to communicate with the web browsers in order to control how your webpage will look. And in the first part of this tutorial you learned about the typeface or font and how to choose a typeface or font for your webpage.

Now we will talk about the HTML font tag and how to use the font tag to control the typeface(font name), size, and color of the text on your webpage. Let's take a look at an example of the font tag.

Example 1

Note--The arrow

indicates that the code is wrapped to a second line and should really be all on one line.

<font face="" size="" color=""></font>
<	left angle bracket
font	element
face	This attribute controls the typeface or font name for the text.
size	This attribute controls the size of the text on the webpage.
color	This attribute controls the color of the text.
>	right angle bracket

As with most HMTL tags, the font tag has an opening and closing tag. Any text between the opening () and closing () font tags will be controlled by that font tag. You can make a section of text on your webpage appear one way and give another section of text a completely different look by giving different values to the attributes of the font tag.

The first attribute for the font tag is the face attribute. This is the attribute you will use to specify your choice of typeface or the font name. In the example, I have chosen Comic Sans MS, which is a common font on the web. Therefore I set the value of the face attribute to Comic Sans MS on the right side of the equal sign. You can specify more than one font name by listing the names in order of preference and separating them with a comma.

The size attribute is used to control; you guessed it, the size of the text on the webpage. You can use the numbers from 7 (largest) to 1 (smallest). This is called absolute font sizing. We will talk about relative font sizing later. You can control the size of the text by changing the value of the size attribute on the right side of the equal sign.

Font Size 1
Font Size 2
Font Size 3
Font Size 4
Font Size 5
Font Size 6
Font Size 7

Next →

|