The Font Tag
By Stephen Bucaro
Technically a font is a shape like a serif or stroke that is used to construct a
typeface like Courier or Times New Roman. But today when we refer to a font, we
usually mean the typeface. Up until HTML version 3 the font was set using the <font>
tag. Today, most webpage text design is accomplished through the use of style
definitions rather than html tags.
Starting with HTML version 4, the font tag was "deprecated". Deprecated means
that at some point in the future it may no longer be supported by some browsers.
However, I believe because the Web contains millions of old webpages that use the
font tag, and because thousands of new webpages are being created each day using
the font tag, it will be supported long into the future.
I want to get you started in web design with the proper psychology and good
design habits, so you need to understand that everything on a webpage is a box.
Earlier when we just typed some text in a file and it displayed in the browser,
it didn't appear to be in a visible container. Actually, it was in an invisible
container referred to as an "anonymous box".
Text on a webpage should always be placed inside a container. The container may
be a table cell or a span or div element, but the most commonly used container for
text is a paragraph, which is designated by the <p> and </p> tags.
You don't want to just type text without a container because the browser will put
it in an anonymous box, and it will follow the browser's rules rather than your
design. So to start you out with good design habits, all these font tag examples
will place the text within a paragraph element.
Font Face
Most html tags have "attributes". An attribute is a named property that you can
set to a specific value. Shown below we set the font tag's <i>face</i>
attribute to "Arial".
<p><font face="Arial">This is your text.</font></p>
To test the examples given in this eBook, open your favorite basic ASCII text
editor, type in the example code, save the file with any name with the .htm file
extension as explained earlier. Then double-click on the file name and it will
display in your default web browser. The example code will just provide the html
for the body of the webpage, but you should provide the tags for the entire
webpage structure as shown below.
<html>
<head>
<title>Your Title</title>
</head>
<body>
<p><font face="Arial">This is your text.</font></p>
</body>
</html>
In choosing a font face, keep in mind that it will be displayed only if the user
has that particular font installed on their computer. If the particular font that
you specified is not installed on the user's computer, the browser will make a
substitute, and you don't know what you're going to get. Nowadays users have a
tremendous number of fonts installed on their computers, but only a handful are
known to be common to both Windows PCs and Macs. Those fonts are referred to as the
"browser safe fonts". Below is a list of some browser safe fonts.
Browser Safe Fonts
Arial
Comic Sans MS
Courier New
Georgia
Verdana
If you want a font that is not on the safe list, you can set the <i>face</i>
attribute to a list of fonts as shown below. If the browser can't find the first
font on the users computer, it will use the second font in the list, and so on.
<p><font face="Andalus, Helvetica, Arial">This is your text.</font></p>
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
Follow @Stephen Bucaro
General Web Design
