WesternWashington.Com Gateway to the Pacific Northwest
Send Email To WesternWashington.com
menu 1
menu 2
menu 3
menu 4
Home > Developer Tips


This week in Web Developer Tips.
Typeface and the <FONT> Tag Attributes

Setting up the typeface

As this is soon to be deprecated I would only learn the font information purely as reference.

This is one you should really know about. It works this way, select and specify a typeface or a series of typefaces you want to use with the FACE attribute of the <FONT> tag. If the person viewing your page has the selected and specified typeface on their computer system, their browsers will load them in the order you have selected. If the person viewing your site doesn't have the typeface you have selected, then the viewers browser will use a default typeface. Example, you may choose something like this:

<FONT FACE="arial">

Or like this:

<FONT FACE="geneva,helvetica,arial">

This will force the Arial typeface or Geneva, Helvetica and Arial typefaces to load first. Always try and use a common typeface that appears on most computer systems, by doing so you will know what your page will look like to the majority of your viewers.

Attention: The FACE attribute of the <FONT> tag has not yet been declared an official part of the HTML 3.2 Specifications. Even though it is supported by browsers 3.0 and higher, this could change in the future.

<Font> Tag Attributes

I prefer the <FONT>  </FONT> tags to the heading <H1> </H1> tags, by using the <FONT>  </FONT> tags, you will have more control over the text in your HTML documents. One major advantage to using the <FONT>  </FONT> tags, is you can change the font size of your text without the text being forced to a new line.

You can use <font> tag a number of ways in an HTML document, but some codes produce the same results. Such as:

<font SIZE="+2"> Test </font> = Test
<font SIZE="5"> Test </font> = Test

The default font size is 3, which means if you do not enter a specified size in your code the size of font will be this size, as I have not specified a font size here.
Font sizes for the <FONT SIZE="?">  </FONT> tags range from 1 to 7, with the ability to use the + or - signs in front of the number (size) you choose.

Changing font sizes in the same line:

<font SIZE=""7"">T</font>
<font SIZE=""6"">R</font>
<font SIZE=""5"">Y</font>
<font SIZE=""4"">T</font>
H (remember this is the default size 3)
<font SIZE=""2"">I</font>
<font SIZE=""1"">S</font>
<font SIZE=""1"">I</font>
<font SIZE=""2"">T</font>
' (remember this is the default size 3)
<font SIZE=""4"">S</font>
<font SIZE=""5"">F</font>
<font SIZE=""6"">U</font>
<font SIZE=""7"">N</font>


Changing colors using RGB in hexadecimal. The hexadecimal values represent the color your text will be.

<font COLOR="#FF0000">RED </font>
<font COLOR="#008000">GREEN</font>
<font COLOR="#0000FF">BLUE</font>
<font COLOR="#000000">BLACK</font>

Colored text and back grounds are now easier because in most newer web browsers you can specify a color name in place of the hexadecimal values. I believe Netscape supports the most with 140 colors.

The 16 standard color names supported by most of the new browsers are:

<font COLOR="aqua">aqua</font>
<font COLOR="black">black</font>
<font COLOR="blue">blue</font>
<font COLOR="fuchsi">fuchsi</font>
<font COLOR="gray">gray</font>
<font COLOR="green">green</font>
<font COLOR="lime">lime</font>
<font COLOR="maroon">maroon</font>
<font COLOR="navy">navy</font>
<font COLOR="olive">olive</font>
<font COLOR="purple">purple</font>
<font COLOR="red">red</font>
<font COLOR="silver">silver</font>
<font COLOR="teal">teal</font>
<font COLOR="white">white</font> (best viewed on a dark back ground)
<font COLOR="yellow">yellow</font>

In this section we will use all of the font attributes we have covered including the face attribute from the top of this page:


<font FACE="arial" COLOR="lime" SIZE="7">J</font>
<font FACE="arial" COLOR="red" SIZE="7">U</font>
<font FACE="arial" COLOR="yellow" SIZE="7">M</font>
<font FACE="arial" COLOR="blue" SIZE="7">B</font>
<font FACE="arial" COLOR="teal" SIZE="7">O</font>
<font FACE="arial" COLOR="#000000" SIZE="2">S</font>
<font FACE="arial" COLOR="#FF0000" SIZE="2">H</font>
<font FACE="arial" COLOR="#FF00FF" SIZE="2">R</font>
<font FACE="arial" COLOR="#000FFF" SIZE="2">I</font>
<font FACE="arial" COLOR="#FFFF00" SIZE="2">M</font>
<font FACE="arial" COLOR="#8000FF" SIZE="2">P</font>

Click Here
to Refer WesternWashington.Com To Your Friends
Back to Top
Search WesternWashington.Com:

Direct Questions and Comments to: Webmaster
1998 - 2002 WesternWashington.com. All rights reserved. Terms of Use Administrator