HTML From the Ground Up

by L. Downs

A Closer Look at Text

So far we've looked at a few of the ways that we can modify how text displays (with the , , , <BLOCKQUOTE> and   tags, for example). Now we'll look at ways to control your text more closely, including such aspects as size, style, font and color.

NOTE: It is being increasingly recommended that you control the appearance of your page with style sheets, and use HTML tags to describe the structure and content of your text. However, many browsers still in common use do not properly support style sheets, and in many cases you must still include HTML commands in your code as an alternative. This may be expected to change within the next year or two.

There are four primary aspects of text which are easily controlled with HTML commands. They are:

Size
Style (not to be confused with style sheets)
Font (Typeface)
Color

Let's look at each of these in turn.

Size

HTML provides two different ways to control the size of text. The first is relatively coarse, but will often serve if you're only interested in making sure that a given bit of text is bigger or smaller than the default text size. Text between <BIG> and </BIG> tags will display one size (whatever that means!) larger than the default size. Text between  and  tags will display one size smaller than the default size.

WARNING: The default size of text (i.e., the size of text without any special sizing commands) is set by the user via the preference settings in their browser. Although you can override this, you shouldn't ever do it; the user may have very good reasons (such as video resolution, monitor size, or even visual disability) for choosing the setting they've established.

If you want more precise control, you can use the  and  tags. One of the attributes of the  tag is SIZE. You specify SIZE as a positive or minus whole number. For example,  means to display text two sizes larger than the default, and  means display text three sizes smaller than the default. Note that the actual difference between these various sizes is still not under your control and is determined by the individual browser.

You can actually use the SIZE attribute to specify the exact size in points, just as you do in a word processor, but you should never do this, for the same reason as not changing the default text size. 14 point text might look large to you, but it might be unreadably small to someone running at very high resolution or with a visual disability. (In fact, it might well be smaller than that user's default text size.) Many users will immediately click away from a page that is obviously overriding their own preferences for the default text size.

NOTE: Although you can use the heading tags (<H1>, etc.) to set relative text sizes, this is not a good idea unless the text you're enclosing is actually a heading in the sense of representing one of the topics of the page. See the earlier lesson on Structure vs. Appearance for a more detailed explanation of this.

Style

By "style" we mean changing the "look" of text rather than the size. The most common examples are bolded and italicized text, which you've already learned to do. You can also underline text using the  and  tags, but quite frankly underlined text is considered pretty passé these days. Besides, it may confuse users who assume that underlined text is a link.

If what you really want is emphasized text, you should consider using the  and  tags or  and  tags instead. Most commonly EMphasized text is rendered in italics and STRONG text in bold. However, this isn't required by the HTML standard, which means a browser could display these tags differently, so if what you really want is definitely bold or italics then use the  and  tags.

Font (Typeface)

One of the many preferences set by the user (the person at the other end with the browser) is the font, or typeface. In most cases the user leaves this at whatever the browser suggests, which is Times or Times New Roman for regular text and a fixed-pitch font such as Courier for displaying computer code, etc. However, you're not limited to these. With the FACE attribute of the  tag you can specify any typeface you want, such as Algerian, like this:


There's just one catch: If the typeface you specify isn't on the user's machine, their browser will substitute another font instead. (Brrrrrrrrr. Now there's a scary thought.) In other words, if you have Algerian installed on your machine, the following code:
Hi! I am displaying in Algerian

will actually display in Algerian:
Hi! I am displaying in Algerian

but if it isn't you may get this:
Hi! I am displaying in Algerian

Ouch. There is a way to at least minimize the possibility of disaster, however. You can list several fonts in a row in the FACE attribute, and the user's browser will display the selected text in the first of those fonts that it finds. For example, if we change our example to this:

<FONT FACE="Algerian, Times New Roman, Times, serif" SIZE="+2">Hi! I might 

be displaying in Algerian if you're lucky</FONT>

the user's browser will default to Times New Roman (Windows) or Times (Macintosh) if it can't find Algerian, and if neither of those is present it will at least display in a serif font (instead of possibly a symbol font, as happened above).

There is one other way to make sure text in an unusual font displays correctly, and that's to create a graphic which contains a picture of the text, like this:
<IMG SRC="algerian.gif">

which might display like this:

This can become pretty cumbersome, however, and usually looks wretched in printouts. When in doubt, leave the choice of typefaces to the user.

Color

Displaying text in color is easy, and is again accomplished with the  tag. This time the attribute to use is COLOR (duh). You specify color in the same way you specify a background color, using either a recognized keyword or a hexadecimal code. And the same warnings apply: don't use non-standard keywords, and if possible stick to Web-safe colors.

For example, here is the code for displaying some text in color:
Purple and Turquoise text.

which displays like this:
Purple and Turquoise text.

There's an additional complication which you need to be aware of, and that's color-blindness. Just because red text jumps out at you doesn't mean it will to every viewer of your page. To some people red and green look alike, and to a smaller percentage of the population all colors may appear in shades of gray. There are other forms of color-blindness as well. If you're going to use color as a way of drawing attention to something important on your page, you must take this into account. (Not to mention that if you use a green background and red text, for example, your text may disappear entirely for some users!)

Coming next: more about graphics.

Terms to know from this lesson

<BIG> and </BIG> tags: Enclose text to be displayed "one size" larger than default text. (How much larger constitutes "one size" depends on the browser).

 and  tags: Enclose text to be displayed "one size" smaller than default text. (Again, how much smaller constitutes "one size" depends on the browser).

 and  tags: Enclose text to be underlined.

 and  tags: Enclose text to be emphasized. Typically text enclosed by these tags displays in italics, but not always.

 and  tags: Enclose text whose displayed characteristics will be varied in some way.

SIZE attribute: In the  tag, used to set the size of displayed text, either in relative or absolute terms.

FACE attribute: In the  tag, used to set the actual font (typeface) displayed. A series of fonts can be specified, and the browser will use the first available one.

COLOR attribute: In the  tag, used to set the color in which the enclosed text displays, using either a recognized color keyword or a hexadecimal value.

Portions of this tutorial originally appeared in Technotes, a publication of the UNLV Libraries, and are copyright by the University of Nevada, Las Vegas; used by permission. All remaining material © 2003 Lamont Downs.