• Font Size and Color
• Choosing a Typeface
  • Figure 6.1.
  • Figure 6.2.
  • Figure 6.3.
  • Figure 6.4.
• Special Characters
  • Figure 6.5.
  • Figure 6.6.
• The Future of Web Fonts
• Summary
• Q&A
• Quiz
  • Questions
  • Answers
• Activities

Chapter 6

Font Control 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 copyright mark and European language characters such as the é in Café.

Font Size and Color

To set the size and color of any text on a Web page, use the <FONT> tag:

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.

---

Choosing a Typeface

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:

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:

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:

http://www.microsoft.com/truetype/

Microsoft has also included these fonts (and variations on them) in Windows and other popular software packages, as indicated in Figure 6.4.

---

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> tag.

---

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.

Special Characters

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
* bullet.

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 Reference.")

For example, the word Café would look like this:

Café

Each symbol also has a mnemonic name that might be easier to remember than the number. Another way to write Café, for instance, is:

Café

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 copyright ((c)) or registered trademark (®) symbols? The codes you need are &copy; and &reg; respectively. To create an unregistered trademark (&tm;) symbol, use <SUPER>TM</SUPER> or <SMALL><SUPER>TM</SUPER></SMALL> for a smaller version.

---

Table 6.1 lists some of the special characters you might need to use on your Web page.

Table 6.1. Important special characters.

---

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.

---

The Future 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 standard.

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.

Summary

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.

Q&A

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 Accessories folder.

To find the name of PostScript fonts in Windows if you use Adobe Type Manager, run the ATM Control Panel.

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 &#214; 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.

Quiz Questions

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 "(c) 1996, Webwonks Inc." on a Web page?

Answers

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. &copy; 1996, Webwonks Inc.

The following would also produce the same result:

&#169; 1996, Webwonks Inc.