and Special Characters
This chapter gives you the power to decide what
size, color, and typeface should be used to display any text on your Web pages. It also
shows you how to create special symbols, such as the mark and European language
characters such as the é in Café.
Font Size and
To set the size and color of any text on a Web page,
use the <FONT> tag:
COLOR="purple">This text will be big and purple.</FONT>
The SIZE attribute can take any value from
1 (tiny) to 7 (fairly big), with 3 being the normal default size.
The COLOR attribute can take any of the
following standard color names: black, white, red, green, blue, yellow, aqua, fuchsia,
gray, lime, maroon, purple, navy, olive, silver, or teal.
Just A Minute: The <BIG> and <SMALL>
tags discussed in Chapter 5, "Text Formatting and Alignment," produce effects
that you can also achieve with <FONT SIZE>. <FONT SIZE>
gives you more precise control over the size, but <BIG> and <SMALL>
may work with some older browsers that don't support the <FONT> tag.
The actual size and exact color of the fonts will
depend on each reader's screen resolution and preference settings, but you can be assured
that SIZE=6 will be a lot bigger than SIZE=2, and that COLOR="red"
will certainly show its fire.
Just A Minute: You'll learn more about
controlling the color of the text on your pages in Chapter 13, "Backgrounds and Color
Control." That chapter also shows you how to create your own custom colors and
control the color of text links.
With the 3.0 versions of both Navigator and Internet
Explorer, Netscape and Microsoft have added another extremely powerful form of font
control: the <FONT FACE> attribute. This allows you to specify the actual
typeface that should be used to display text--and has been the source of much rejoicing
among Webmasters who are awfully sick of Times and Courier!
The page in Figures 6.1 and 6.2 uses these font
controls to present a warmly welcoming homestyle site.
The code to set the typeface used for the headings
in Figure 6.1 is:
|<FONT FACE="Copperplate Gothic
Bold" SIZE=5 COLOR="red">
If Netscape Navigator or Microsoft Internet Explorer
can find a font named Copperplate Gothic Bold on a user's system, that font is used.
Otherwise, they will use the default font (usually Times New Roman). Browsers other than
Navigator 3.0 and Internet Explorer 3.0 will ignore the FONT FACE attribute and
display the fonts they always use.
You can also specify a "second choice"
font, for people who don't have your first choice font installed on their computer. For
example, I used the following tag to choose the body text in Figure 6.1:
Handwriting, Comic Sans MS" SIZE=4 COLOR="maroon">
Figure 6.1. The <FONT> tags give you
control over the size, color, and typeface of any text.
Figure 6.2. If you have the Copperplate Gothic Bold
and Lucida Handwriting fonts installed on your computer, they will be used to display the
page in Figure 6.1.
Anyone who has Comic Sans MS (a very common font)
installed, but doesn't have Lucida Handwriting (a slightly less common font), will see the
body text as it appears in Figure 6.3.
Figure 6.3 also shows what the headings look like to
people who don't have the Copperplate Gothic Bold font.
Figure 6.3. Someone
without the two fonts specified in Figure 6.1 (but with Comic Sans MS) would see this
instead of Figure 6.2.
Currently, only fonts that each user happens to have
on his or her system will show up, and you have no control over which fonts are installed.
Furthermore, the exact spelling of the font names is important, and many common fonts go
by several slightly different names. Extensions to HTML will soon support a new, highly
compact font format that can be automatically downloaded along with your pages to solve
these problems. For now, you just have to stick to the most common fonts and make sure
your pages still look acceptable in Times New Roman.
Figure 6.4 shows the most common TrueType fonts,
many of which are also available in PostScript format. Microsoft offers a number of these
fonts available for free download from this site:
Microsoft has also included these fonts (and
variations on them) in Windows and other popular software packages, as indicated in Figure
Time Saver: To make all the text in Figure
6.4 larger, I put <BASEFONT SIZE=5> just after the <BODY>
tag. (I did the same thing in Figure 6.5, too.) <BASEFONT> is just a
time-saving tag for setting the overall size of all text in a document. The size of all
headings will also be relative to the <BASEFONT SIZE>. This tag can't take
any attributes other than SIZE, and doesn't require a closing </BASEFONT>
Figure 6.4. The most popular TrueType fonts are good
bets for inclusion in your Web pages. (Arial is especially reliable.)
If you want to use a font on your Web page that
isn't on this list, don't be afraid to do so! The user will never see an error message if
the font can't be found; the worst thing that could happen is that the user won't see your
special font, but will still see the text in the next best font that can be found. If one
of the fonts in Figure 6.4 has a similar feel to the one you want, include it as a
"second choice" as I did with Comic Sans MS in the preceding example. To Do: All
the Web pages associated with a single "site" should usually use the same fonts
and text color scheme. You don't need to be a professional typographer to make good font
choices if you follow the guidelines below.
If you are a professional typographer, you know how
to break these rules and still make a page look great. If you try to deviate from them
without much experience, however, your pages are likely to stand out as very
"unprofessional" looking, even to people who can't articulate exactly why.
- Always choose a typeface with serifs (those little
beveled points on the edges of the letters) for the main body of your text. The serif
typefaces that a significant number of people are likely to have installed are Times New
Roman, Georgia, guide Antiqua, and Calisto MT.
- For headings, choose a heavy typeface without serifs,
such as Arial Black, Impact, or Copperplate Gothic Bold. For captions and other short
passages of text, either use your body text font or a "light" version of your
heading font, such as Arial or Copperplate Gothic Light.
- Medium-weight fonts without serifs are suitable for
both headings and short passages of text. These include Arial, Trebuchet MS, Verdana,
Lucida Sans, Lucida Sans Unicode, and News Gothic MT.
- Use one color for all body text, and either the same
color or a "stronger" complementary color for all headings and captions. Unless
you are an experienced graphics designer, stay with a dark color such as black, blue,
maroon, olive, or purple for body text, and put it on a contrasting, light background. If
you want a wilder color, headings (and graphics images) are the best place for it.
- Use ornamental fonts like Comic Sans MS, Lucida
Handwriting, and OCR A Extended very sparingly and for main headings or highly stylistic
pages only. Better yet, reserve these fonts for use in graphics images where you can also
accent them with textures, shadows, or other effects.
- If your company has a standard set of TrueType or
PostScript fonts for all communications, specify those fonts as the first choice in your <FONT
FACE> tags. However, you should always include one or two "second
choice" fonts from Figure 6.4 as well.
Most fonts now include special characters for
European languages, such as the accented e in Café. There are also a few mathematical
symbols and special punctuation marks such as the circular
You can insert these special characters at any point
in an HTML document by looking up the appropriate codes in Table 6.1. (This table includes
only the most commonly used codes for English-language usage. You'll find a complete table
of all special characters for European language fonts in Appendix B, "HTML Quick
For example, the word Café would look like this:
Each symbol also has a mnemonic name that might be
easier to remember than the number. Another way to write Café, for instance, is:
Notice that there are also codes for the angle
brackets (< >), quote symbol ("), and ampersand (&) in Table 6.1. You need
to use the codes if you want these symbols to appear on your pages, because the Web
browser will otherwise interpret them as HTML commands.
In Figures 6.5 and 6.6, several more of the symbols
from Table 6.1 and Appendix B are shown in use.
Figure 6.5. Special character codes begin with &#
and end with ;.
Figure 6.6. This is how the HTML page in Figure 6.5
will look in most (not all) Web browsers.
Time Saver: Looking for the ()
or registered trademark (®) symbols? The codes you need are © and ®
respectively. To create an unregistered trademark (&tm;) symbol, use <SUPER>TM</SUPER>
or <SMALL><SUPER>TM</SUPER></SMALL> for a smaller
Table 6.1 lists some of the special characters you
might need to use on your Web page.
Table 6.1. Important special
||¦ or brkbar;
||Broken vertical bar
||Plus or minus
||Capital AE ligature
||Small ae ligature
||Accented capital E
||Accented small e
Just A Minute: Some older Web browsers will
not display many of the special characters in Table 6.1. Some fonts may also not include
all of these characters. See Table B.1 in Appendix B for a complete list of special
symbols and European language characters.
of Web Fonts
There are two major advances in the works which
promise to revolutionize Web page typography. Neither of these advances is ready for
widespread use today, but you should be aware of them and plan on learning about them when
the revolution hits.
Cascading Style Sheets (CSS) will be part of the
next HTML standard, but they work very differently from normal HTML. You will be able to
create a special document containing only information about the fonts and formatting to be
used on a Web page. This document, called a style sheet, can then be linked to any number
of Web pages so they will all have a consistent style.
Style sheets offer two huge time-saving advantages.
Because a single style sheet may control the appearance of many pages, you can change the
look and feel of your entire Web site just by changing a single style sheet. For complex
Web sites, this might save you from spending hours modifying each page individually. The
second big advantage of style sheets is that they will allow more precise control over the
appearance of your pages than any previous version of HTML. You will be able to set the
exact line spacing, font metrics, margins, and paragraph indentation for any text. You'll
also have the ability to put colored boxes behind any text, and wield more control over
multiple-column text than you can today.
When you want a document, or a part of a document,
to be a little different, you can put style information at any point in that document to
override part of its style sheet. (The idea is that styles "cascade" down from
the style sheet to the document, and then to specific parts of the document. At any point
in that cascade, new styles may "flow in." That's why they're called
"cascading style sheets.")
Just A Minute: If you'd like to start
learning about style sheets today, Microsoft Internet Explorer 3.0 supports some of the
simpler aspects of HTML style sheets. The Internet Explorer Web site at http://www.microsoft.com/ie/ offers a
quick style sheet tutorial. Upcoming versions of Microsoft Internet Explorer and Netscape
Navigator promise full support of the new CSS standard.
The other revolutionary advance in typography that's
afoot is font embedding. This will allow you to retrieve the actual typeface along with a
Web page, so even people who don't have the correct font preinstalled on their computer
will see it on the page.
There has been a standard for embedding TrueType
fonts in documents for a while, but it doesn't yet include some features that are
necessary for it to work with Web pages. The most important feature to be added is font
compression, which minimizes the file size of fonts so they can be transferred over the
Internet quickly. Transferring only the letterforms actually used in a document and
allowing font publishers to control how the font can be reused are also key features to
make font embedding a reality.
The upcoming OpenType font standard will also
combine both TrueType and PostScript (the two competing font formats) into a single
Support for font embedding should appear in Netscape
Navigator and Microsoft Internet Explorer at the same time as style sheet support. These
two technologies together will dramatically expand your ability to control the appearance
of your Web pages.
(You'll also notice that I used one of the codes
discussed under the Special Characters section to finally spell Café with the
accent-acute it deserves!)
If you go to the address above and still see most of
the text as Times New Roman, you don't have Georgia installed on your computer yet. I
highly recommend that you download it from Microsoft by going to http://www.microsoft.com/truetype/
and following the "free Web fonts" link. Georgia will be included with future
versions of Microsoft Internet Explorer, and is likely to become a popular font on the Web
due to its excellent readability and stylish appearance at low resolutions.
While you're at Microsoft, pick up
Verdana, Trebuchet, and whatever new free fonts they have, too. Then go back to the
24-Hour HTML Café for links to some sample pages that use them.
This chapter has shown you how to control the size,
color, and typeface of any section of text on a Web page. This chapter also provided an
overview of some exciting advances in font control that are just around the bend,
including HTML style sheets and font embedding.
Table 6.2 summarizes all the tags and attributes
covered in this chapter. (See Table B.1 in Appendix B for special character codes.)
Table 6.1 Summary of tags and
attributes covered in Chapter 6.
||Controls the appearance of the
||The size of the font, from 1 to 7.
Default is 3. Can also be specified as a value relative to the current size; for example,
||Changes the color of the text.
||Name of font to use if it can be found
on the user's system. Multiple font names can be separated by commas, and the first font
on the list that can be found will be used.
||Sets the default size of the font for
the current page.
||The default size of the font, from 1
- Q How do I find out the exact name for a font that
I have on my computer?
A On a Windows or Macintosh computer, open the Control Panel and click on the Fonts
folder. The TrueType fonts on your system will be listed. Use the exact spelling of font
names when specifying them in the <FONT FACE> tag. Windows 95 users can
view all the characters in any font with the Character Map utility, usually located in the
To find the name of PostScript fonts in Windows if you use Adobe Type Manager, run the ATM
Q How do I put Kanji, Arabic, Chinese, and other non-European characters on my pages?
A First of all, everyone who you want to be able to read these characters on your
pages must have the appropriate language fonts installed. They must also have selected
that language character set and font under Options | General Preferences | Fonts in
Netscape Navigator or View | Options | General | Fonts in Microsoft Internet Explorer. You
can use the Character Map accessory in Windows 95 (or a similar program in other operating
systems) to get the numerical codes for each character in any language font. If the
character you want has a code of 214, use Ö to place it on a Web page.
The best way to include a short message in an Asian language (such as We speak
Tamil--Call us!) is to include it as a graphics image. That way everyone will see it,
even if they use English as their primary language for Web browsing.
- 1. How would you say, "We're having our
annual Nixon Impeachment Day SALE today!" in normal-sized blue text, but with the
word "SALE" at the largest possible size in bright red?
2. How would you make all text on a page green and a little larger than normal, but
make all headings yellow?
3. How do you say " 1996, Webwonks Inc." on a Web page?
- 1. <FONT
COLOR="blue">We're having our annual Nixon Impeachment Day <FONT
COLOR="red" SIZE=7>SALE</FONT> today!</FONT>
2. Put the following at the beginning of the Web page:
<BODY TEXT="green"><BASEFONT SIZE=4>
Then make each heading look like this:
<H1><FONT COLOR="yellow">Heading goes here</FONT></H1>
3. © 1996, Webwonks Inc.
The following would also produce the same result:
© 1996, Webwonks Inc.