The <font> Tag

Contact Us or call 1-877-932-8228
The <font> Tag

The <font> Tag

The <font> tag is used for controlling the size, color, and family (face) of text. The table below shows the main attributes of the <font> tag.

Attribute Values
size number, +number, -number
color hexadecimal value or color value
face font name or list of font names

Here is a simple example:

<font size="2" color="red" face="Impact">Warning!</font>

size

Font sizes range from 1 to 7. The default font size in most browsers is 3.

<font size="2">Hello, world!</font>
<font size="+1">How are you, world!</font>
<font size="-2">Goodbye, world!</font>

See HTMLFormatting/Demos/FontSize.html for more examples.

color

In HTML pages, color can be defined using color names or hexadecimal codes. Different browsers support different sets of color names.

Hexadecimal codes specify the amount of red, green and blue used to make up the color. The values range from 00 (none) to ff (all). The hexadecimal code format is #rrggbb. For example, #ff00ff translates to all of red, none of green, and all of blue, resulting in purple.

<font color="red">Warning!</font>
<font color="#ff0000">Warning!</font>

See HTMLFormatting/Demos/FontColor.html for a list of color names matched with their hexadecimal equivalents.

face

Unlike most attributes, the face attribute can take a list of values. These values are the names of the fonts that should be used to display the content contained by the <font> tag. If the first font listed in the value list is available on the user's machine, then that font is used; otherwise, if the next font listed is available, that one is used; and so on.

Syntax

<font face="value1,value2,value3">text</font>
<font face="Arial, Helvetica, sans-serif">Hello!</font>
<font face="Times New Roman, Times, serif">Hi!</font>
<font face="Courier New, Courier, mono">Hey there!</font>

See HTMLFormatting/Demos/FontFace.html to see how some fonts are displayed in a Web page.

Applying Colors to the Page

Users can set default colors using browser preferences. The following table shows the colors that are initially set for Internet Explorer 6 and Mozilla (e.g., Netscape 6+ and Firefox).

Color Internet Explorer Mozilla
Background System Color white
Text System Color black
Link blue blue
Visited Link purple purple
Active Link unchanged red

These properties can be overridden with attributes in the <body> tag. The table below shows the attributes that correspond to the properties above.

The Background system color is usually white and the Text system color is usually black.

Property Attribute
Background bgcolor
Text text
Link link
Visited Link vlink
Active Link alink
<body bgcolor="black" text="white" link="red"
		vlink="green" alink="orange">

See HTMLFormatting/Demos/BodyAttributes.html to see these attributes at work.

Next