The address for this web page is: http://fishcaro.crosswinds.net/day_32_font_tag.htm
On to the next lesson! Back to the COURSE SYLLABUS

32. THE TAG

The   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  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 TAG (32a)

Here's the general structure of the  tag:

<FONT FACE="one_or_more_comma_separated_typefaces"
      COLOR="desired_color_using_hexadecimal_code_or_color_name"
      SIZE="absolute_or_relative_size_specification" >
text to be re-formatted goes inside the font container
</FONT>

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:

 First preference: Verdana. Second preference: Arial. Third preference: a sans-serif face available on the user's machine.

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 typeface.
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 this as:  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 .

EXAMPLE: default size 5; you say ; 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  you won't get size 3 - 4 = -1 (???) You will get the smallest available size, which is size 1.

Printable version of Index Card 32a

Printable version of Index Card 32b

Printable version of Index Card 32c

Printable version of Index Card 32d

Printable version of Index Card 32e

Printable version of Index Card 32f

WORKSHEET #32:

(W32.1) Please begin Chapter 4 (Visual Effects), through the section on "New ISO Latin-1 Entities". Some of this is review. Chapter 4 will be completed in the next lesson. http://www.cwru.edu/help/wilbur/ (link is no longer valid)
(W32.2) Please study "BREAK THE HABIT" at: http://www.idocs.com/tags/character_famsupp_92.html (link is no longer valid) This is a nice discussion of the deficiencies of the  tag, and is also an introduction to STYLE SHEETS. We'll be working through their tutorial on style sheets in future lessons.

ASSIGNMENT #32:

(A32.1) Please read pages 116–118 (from "The Tag" up to "Lists") in the Weasel book.
(A32.2) Also read pages 43–46 (from "Why Specifying Type is Problematic" to the end of the chapter) in the Weasel book.

32. THE <FONT> TAG

THE <FONT> TAG (32a)

FACE ATTRIBUTE FOR THE FONT TAG (32b)

FONT versus TYPEFACE (32c)

SIZE and SPACING OF FONTS (32d)

SIZE ATTRIBUTE FOR THE FONT TAG (32e)

ABSOLUTE versus RELATIVE SIZES (32f)