The Font Tag

Font Tag Deprecated

<font></font>

Pre-HTML 4.0 versions and most WYSIWYG editors used the code shown below to set font attributes.

The method Has Been Deprecated.

Even in the year 2010 many popular website building tools still use this antiquated method of font definition.

That includes over priced tools like Dreamweaver and Microsoft's monsters.

If yours does, GET RID OF IT!!

To move your website into the current era of web development, use Style Sheets for setting font attributes in your pages.

Not only will it make your pages smaller, but it will also make them easier to edit and revise.

See the page on Style Sheets.

Deprecated Code

The OUTDATED code for the font tag:

<p><font face="Arial" size="4" color="red">This is Arial Text.</font></p>

which displays as:
This is Arial Text.

Using today's HTML and CSS:

HTML
<p class="red">This is Arial Text.</p>

CSS
p.red {
font-family: arial;
font-size: 16px;
color: #ff0000
}

The code displays as:

This is Arial Text.

The OUTDATED attributes for the font tag were:

 

 

How the Style Sheet Works

The beauty of Style sheets in the example above is that the actual code on your web page would look like this:
<p>This is Arial Text.</p>

The settings for the paragraph tag would be placed in your style sheet one time.

Each time a browser came across the paragraph tag on your web page the style sheet would define how it was to be displayed.

The settings (Example above) would look like this in your style sheet:

 p {
    font-family: arial;
    font-size: 16px;
    color: #ff0000;
    text-align: left
   }

CSS and Fonts

CSS replaces the attributes with:

Font attributes are specified using embedded, linked or inline style sheets.

Choosing Fonts

Many novices get carried away when they begin choosing font faces or families for their pages. The fonts that appear on your web page when viewed by a surfer are actually determined by the visiting browser. If the surfer's system doesn't have the requested font, the browser substitutes one that is on the system.

Always declare a generic font family as the last choice, when building Style Sheets. (See Embedded Style Sheets)

It is best to stick to the basic fonts that are included with most Operating Systems.
The following is a list of fairly safe choices:

Though the choices might seem bland, in most cases pages will be viewed by visitors as the page builder intends.

Sizing Fonts

Though sizing fonts in points is an accepted method, the W3C recommends using ems, pixels or percentages.

If you want web pages that will validate use one of the 3 systems.

Actually all 3 systems are based on the em or on a base font size of 16 pixels.

The following examples show the relationship between ems, percentages and pixels:

h1 { font-size: 1.75em; font-size: 175%; font-size: 28px }
h2 { font-size: 1.50em; font-size: 150%; font-size: 24px }
h2 { font-size: 1.25em; font-size: 125%; font-size: 20px }
p { font-size: 1.125em; font-size: 112.5%; font-size: 18px }
p  { font-size: 1em; font-size: 100%; font-size: 16px }
p  { font-size: .875em; font-size: 87.5%  ; font-size: 14px }
#sidebar p { font-size: .75em; font-size: 75%  ; font-size: 12px  }

You pick the system that's easiest to understand.

Ems are decimal values of the 16 pixel base font and percentages are the equivalent percentages of those decimal values.

1em = 16px = 100%

You can experiment with the sizing.

Test your web pages at different monitor resolutions.

Since graduating to a 1920 res monitor, I recommend using nothing smaller than 16 pixels.

Note: Don't let anyone fool you into believing that if you use ems, your text will resize with the width of a browser window. That's bullshiz. What we call elastic text can only be created using javascript. You don't want to use it because at higher resolutions your text becomes so small it's impossible to read.

My HTML editor of choice is HTMLPad 2011. It allows you to edit library code snippets and create your own.
Download Free Trial of HTMLPad 2011.