1. technology and computing
2. software
3. shareware and freeware

Lesson 4 - Text and Fonts
HTML Tags Introduced
•
<font>
Using the font Tag
Using the Font Tag
The font tag has for the most part been replaced by Cascading Style Sheets which you will learn about later in the
course. Cascading Style sheets allow you to do everything that the font tag can do and much more. This lesson on fonts is
included because even though style sheets replaced the font tag, it is still used and as a designer you should know how it
is used, what it is capable of, and what its limitations are because you will most likely come across it.
The use of fonts and graphics can help make web pages more attractive and interesting. Changing the style of fonts is
accomplished using the <font> tag. The <font> tag is used to modify font styles, however, by itself it does not do
anything. The font tag must be used in conjunction with its attributes. There are three available attributes associated with
the font tag. The face attribute allows you to modify the typeface. The size attribute allows you to modify the display
size of the text. The color attribute allows you to change the display color of the text.
The Face Attribute
The default font face style for most browsers is "Times New Roman," however, you are not limited to this font style. Most
computers have a number of built in font types that you can use. There are five basic font classifications: Serif, Sans Serif,
Script, Fancy, and Monospace. The Serif font is a more formal font style. A Serif refers to the little angle lines coming off
the ends of the letters which give them a more formal appearance. Serif actually means curves. Sans Serif means
"without serif, or curves" and refers to a block letter style. A Script font style has an appearance of handwriting. A fancy
font is one which appears graphical or decorative. Finally a monospace font is one which all the letters have the same
width. The monospace font often resembles that of a typewriter.
Sample font Code
Output
<font face="Times New Roman">This font is Serif</font>
This font is Serif
<font face="Arial">This font is Sans Serif</font>
This font is Sans Serif
<font face="Script">This font is Script</font>
This font is Script
<font face="monospace">This font is monospace</font>
This font is Monospace
<font face="Algerian">This font is fancy</font>
This font is fancy
The Fancy font is not listed above because there is no default font face for that category, therefore, if you specify a Fancy
font face that is installed on your computer, the visitors to your site who may not have it installed on their computer will
only see the default font style, which is Times New Roman. It is a good idea to avoid using fancy font styles when
designing web pages. Many browsers are moving away from recognizing the font categories to specific font types. This
move was accelerated with the introduction of Cascading Style Sheets, which will allow you to specify alternate font types
if the primary is not available.
The table below displays some of the more common fonts faces that you can for the most part count on being available on
most computers. If any of the font styles shown below are not installed on your computer, you will see Arial, which is the
default font style set for this page.
Common font faces
Times New Roman
Comic Sans MS
Impact
Courier New
Tahoma
Century Gothic
Haettenschweiler
Terminal
Wide Latin
Lucida Handwriting
Playbill
Algerian
Arial
Britannic Bold
Abadi MT Condensed Light
Verdana
Arial Black
Colonna MT
Notice in the code below the quotes around "wide latin." Any time a value to an attribute consists of more than one word,
the entire value should be enclosed within quotes, otherwise the browser will just read up to the white space after wide
and stop. Try removing the quotes from "wide latin" and see the result.
Try It in IE Editor!
<font face="Playbill">This is Playbill</font>
<br />
<font face="Verdana">This is Verdana</font>
<br />
<font face="wide latin">This is Wide Latin</font>
The Size Attribute
The font tag may also be used to change the font size of text by adding the size attribute. There are only 7 font sizes
available with 1 being the smallest, and 7 being the largest. If a size larger than 7 is specified, the size will max out at a
size 7. The section on Style Sheets explains how to set specific font sizes. The table below demonstrates the various font
sizes.
HTML Code
Sample Output
<font size="1">size 1</font>
size 1
<font size="2">size 2</font>
size 2
<font size="3">size 3</font>
size 3
<font size="4">size 4</font>
size 4
<font size="5">size 5</font>
size 5
<font size="6">size 6</font>
size 6
<font size="7">size 7</font>
size 7
Font styles with intricate details such as script style fonts should not be displayed any smaller than
3. Fonts displayed at a size 1 or 2 should only be a Sans Serif style font, otherwise it may not be
able to be read.
The Color Attribute
To color attribute is added to the font tag to change the color of a block of text. To assign colors, you may use the color
name of a basic color, or the RGB color code. The sample code below specifies that a block of text should be red.
<font color="red">This text is red</font>
This text is red
The sample code shown below illustrates how multiple font tags can be applied to a line of text. It also demonstrates how
a single font tag with multiple attributes can be applied to a line of text.
Try It in IE Editor!
<font color="red">
<font size="6">
<font face="Verdana">This is red Verdana</font>
<br />
<font face="playbill">This is red Playbill</font>
</font>
</font>
<br /><br />
<font color="blue" size="6" face="verdana">This is blue Verdana</font>