The <FONT> </FONT> container tag can be used to specify the size, color,
and face for the enclosed text. This tag has been deprecated by the W3C (but
is still supported), since style sheets are recommended for controlling presentation.
However, the <FONT> tag is out there (a lot), so you certainly need to
be aware of how it works. Style sheets will be discussed in future lessons.
You will need 3 index cards (6 sides) for this lesson.
INDEX CARD #32:
THE <FONT> TAG (32a)
Here's the general structure of the <FONT> tag:
text to be re-formatted goes inside the font container
Here's an example:
<FONT FACE="sans-serif" COLOR="green" SIZE="+1">
This text will be presented without serifs, in the color green,
and 1 size larger than the default size of the text. </FONT>
Here's the result of the sample text:
This text will be presented
without serifs, in the color green, and 1 size larger than the default
size of the text.
FACE ATTRIBUTE FOR THE FONT TAG (32b)
How is the FACE attribute used? You may specify a comma-separated
list of face recommendations. The browser will use the first one available
in the list. If none are available, a default will be used. For
example, you might write:
<FONT FACE="Verdana, Arial, sans-serif"> First preference: Verdana.
Second preference: Arial. Third preference: a sans-serif face available on the
NOTE: Specifying a particular font in no way guarantees that your user will see the
page as you intend: browsers are limited to fonts that are installed on the
user's local hard drive (unless you use embedded font technology, which is
discussed in a future lesson). If you specify a font the user doesn't have, the
default font kicks in.
When you use the FACE attribute in the FONT tag,
view it as a RECOMMENDATION rather than an actual specification.
FONT versus TYPEFACE (32c)
What is a "FONT"? A "FONT" is a complete design for a set of
characters, including specifications for size, spacing,
typeface, italic (or not), bold (or not), etc. The term "font" is often used incorrectly as a synonym for
What is "TYPEFACE"? TYPEFACE (face, typestyle) is a design for a
set of characters. Roughly, it refers to the shape of the characters.
A couple common faces are:
SIZE and SPACING OF FONTS (32d)
What is the "SIZE" of a font? The size of a font refers to
the height of the characters. Height is usually measured in "POINTS," where one point
is approximately 1/72 inch.
What is the "SPACING" of a font? Characters can each take up the
same width, or they can have different widths. In a fixed width font, "PITCH"
refers to the number of characters that can fit in one inch. Common pitch
values are 10 and 12.
SIZE ATTRIBUTE FOR THE FONT TAG (32e)
How does the SIZE attribute for the font tag work?
Browsers measure type size on a scale from 1 (smallest) to 7 (biggest). Size 3 is the default,
but "size 3" to one user might be different from "size 3" for a different user.
Each user sets their preferences to decide how big "size 3" is. Then, size 4 is 20% larger
than size 3. Size 5 is 20% larger than size 4. Size 2 is 20% smaller
than size 3. (Get the idea?)
Here's what the sizes might look like to some users:
ABSOLUTE versus RELATIVE SIZES (32f)
Are there different ways to specify SIZE? Yes! You can use
absolute or relative measurements:
ABSOLUTE: If you say "I want the text to be size 5," and code
then you're using an absolute measurement. (Think: I absolutely
want size 5!)
RELATIVE: If you say "I want the text to be two sizes bigger than
the default size," and code this as:
then you're using a relative measurement. Notice the plus sign (+) in front
of the number: this is the clue that you're using a relative measurement.
To go down 2 sizes, just say <FONT SIZE="-2">.
EXAMPLE: default size 5; you say
<FONT SIZE="-2">; you get size 5 - 2 = 3.
Type will never be displayed larger than 7 or smaller than 1. So, if
the default size is 3 and you say <FONT SIZE="-4"> you
won't get size 3 - 4 = -1 (???) You will get the smallest available
size, which is size 1.