Enterprise Software

Learn some HTML text tips

Here are some handy HTML text tips, including information about text, colors, codes, and graphics.

By Donald St. John

Set font sizes

Setting a type size is simple: just use the SIZE attribute of the <FONT> tag to state the desired dimension as a value from 1 to 7. These values don't translate to pixels or points or any of the usual text measures, but the type size you're used to seeing on most Web pages is the browser default of 3. To bump the text size to 5 (two notches bigger than usual), just designate it with the SIZE attribute:

<FONT SIZE="5">This text has a font size of 5.</FONT>

You'll get this:

This text has a font size of 5.

But if you don't know your viewers' default sizes, you won't know for certain whether 5 is larger or smaller than normal. If your goal is to make a certain chunk of text larger or smaller than what you have on the rest of the page, set the font size to a plus or minus value, like so:

<FONT SIZE="-1">This text is one size smaller than the browser's default.</FONT>

Voilà:

This text is one size smaller than the browser's default.

Regardless of the viewers' browser defaults, the text between the <FONT> tags will now be one size smaller.

If you want to control the basic font for the whole document, you can use the <BASEFONT> tag with its SIZE attribute. For instance, to make the whole document's text size 4, place the following right after the document's <BODY> tag:

<BASEFONT SIZE="4">

All the text in this document will have a size of 4, unless otherwise specified by a <FONT> tag.

Fix the small-font bug

A quirk of HTML is that whenever you make text smaller than the default (whether by assigning a negative value to the <FONT> tag's SIZE attribute or by using a tag such as <TT>, which makes text monospaced and also shrinks it slightly), the browser tends to leave a gap above the last line of text.

For instance, check out this code:

<FONT SIZE="-1"><TT>A quirk of HTML is that whenever you make text smaller than the default, the browser tends to leave an annoying gap above the last line of text—like in this example.</TT></FONT>

The results look like this:

A quirk of HTML is that whenever you make text smaller than the default, the browser tends to leave an annoying gap above the last line of text—like in this example.

You can fix this bug by adding a <BR> tag immediately after the closing tag:

<FONT SIZE="-1"><TT>A quirk of HTML is that whenever you make text smaller than the default, the browser tends to leave a gap above the last line of text. But when you add a line break, look—no gap!</TT></FONT><BR>

The gap disappears, like so:

A quirk of HTML is that whenever you make text smaller than the default, the browser tends to leave a gap above the last line of text. But when you add a line break, look—no gap!

Create a custom color scheme

The <BODY> tag lets you create background color for a page. Specifying text color follows similar rules: use the <BODY> tag's TEXT attribute along with a hexadecimal code.

Hex codes represent colors in the red/green/blue (RGB) method; the codes take the form of #RRGGBB, where RR equals two values for a red color, GG designates two for green, and BB allots two for blue. Each section has a value that's represented as a number from 0 to 9 or as a letter from A to F; together, the six values create browser-readable colors ranging from white to black. For instance, the hex code for blue is #0000FF, so to set the basic text color to blue for an entire document, you'd add the TEXT attribute and hex code to the <BODY> tag, like this:

<BODY TEXT="#0000FF"> We can't stress this strongly enough: when riding a motorcycle, you must always wear a helmet. </BODY>

You can also set colors for the document's text links by using the <BODY> tag. The LINK, VLINK, and ALINK attributes let you specify colors for unvisited links, already visited links, and active links, respectively. (A link is active while the viewer is clicking it.) The following tag, for example, yields lavender unvisited links, dark green visited links, and magenta active links:

<BODY LINK="#9900FF" VLINK="006600" ALINK="FF00FF"> Click the <a href="linkpage.html">link</a> to see it change color. </BODY>

If you do the math, combining 16 values with six hex places creates 166 theoretical choices—almost 16.8 million colors. Don't bother trying to find them all, though, since browsers will dither most of them—that is, approximate the true color by interspersing pixels of different colors, which can result in a spotty look. See Lynda Weinman's Non-Dithering Colors by Hue chart for color codes that work with most browser palettes (use the numbers across the top of the color blocks).

Designate color-specific text

Like the <BODY> tag, the <FONT> tag lets you change text colors. This tag overrides instructions in the <BODY> tag, so if you want to make a few words stand out by coloring them lime green (for example), insert <FONT> tags around the appropriate words and use the COLOR attribute with the appropriate hexadecimal code, like so:

<BODY TEXT="#0000FF"> We can't stress this strongly enough: <FONT COLOR="#00FF00">when riding a motorcycle, you must always wear a helmet.</FONT> </BODY>

The statement will look like this:

We can't stress this strongly enough: when riding a motorcycle, you must always wear a helmet.

Name your colors

If you'd like to name your text colors in plain English instead of hexadecimal codes, you can replace the hex code with one of the one-word color names recognized by Navigator and Internet Explorer versions 3.0 and above.

<BODY TEXT="blue"> We can't stress this strongly enough: <FONT COLOR="lime">when riding a motorcycle, you must always wear a helmet.</FONT> </BODY>

You'll get this result:

We can't stress this strongly enough: when riding a motorcycle, you must always wear a helmet.

If you're gearing your site toward the broadest possible audience, however, stick with the more universally recognized hex codes.

Tweak the typeface

This is the one you really want to know about, right? Here's how it works: you can specify a typeface or a series of typefaces with the FACE attribute of the <FONT> tag. If your viewers' systems have the specified fonts, their browsers will load them in the order you've designated. (If viewers don't have those fonts, their browsers will use their defaults.) For instance, you might choose something like this:

<FONT FACE="Courier, Helvetica">

This coding forces Courier and Helvetica to load first. Of course, using standard fonts that are likely to be on any computer increases your chances of determining how the page will actually look.

Note: the FACE, attribute of the <FONT> tag is not yet an official part of the HTML 3.2 specification. While it is currently supported by version 3.0 and beyond browsers, this could change down the road.

Grab control with graphics

If you want total control over the look of your text, make it an art element. Nobody can change a GIF that you've designed. The obvious drawback is that viewers have to wait for the image to load, just as they do for any other graphical element. And if users turn off image loading on their browsers, they won't see your handiwork at all. (Be sure to include alternative text so those viewers at least know what you're saying, even if they don't get the benefit of your beautifully designed text.) But if your text absolutely, positively has to look a certain way, you don't have any choice. Just try to keep text graphics small—for example, don't put an entire paragraph into an image.

Use codes for more characters

Have you hunted in vain for the ® (registered trademark) character on your keyboard? Ever wondered how to use a less-than sign (<) without the browser trying to read it as the start of an HTML tag? Character codes are the answer.

Check out this ISO 8859-1 (Latin-1) Characters List for a list of available characters and the codes needed to create them on an HTML page. There are two sets of codes you can use: numeric and name codes. Both sets are recognized by all browsers, so use whichever you're more comfortable with. For instance, both &#174; and &reg; yield the registered trademark symbol (®), and both &#60; and &lt; yield the less-than sign (<). The list of available characters is quite extensive—you can create everything from a fraction symbol (¾) to the Icelandic thorn (þ).

Perhaps the most useful code character is the nonbreaking space (&#160; or &nbsp;). You can use nonbreaking spaces to insert a few blank character spaces on a form without preformatting a whole chunk of text or to indent text, images, or other elements a few spaces. You can also use them as a placeholder inside small table cells.

By Donald St. John, with additional material and advice from Cormac Foster, Mark Kaufman, Charity Kahn, and Matt Rotter.

Editor's Picks

Free Newsletters, In your Inbox