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é.
To set the size and color of any text on a Web page, use the <FONT> tag:
<FONT SIZE=5 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:
<FONT FACE="Lucida 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:
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.
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 © and ® 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.
| Character | Numeric Code | Code Name | Description |
| " | " | " | Quotation mark |
| & | & | & | Ampersand |
| < | < | < | Less than |
| > | > | > | Greater than |
| cents | ¢ | ¢ | Cent sign |
| [sterling] | £ | £ | Pound sterling |
| | | ¦ | ¦ or brkbar; | Broken vertical bar |
| SS | § | § | Section sign |
| (c) | © | © | Copyright |
| ® | ® | ® | Registered trademark |
| deg. | ° | ° | Degree sign |
| +/- | ± | ± | Plus or minus |
| 2 | ² | ² | Superscript two |
| 3 | ³ | ³ | Superscript three |
| . | · | · | Middle dot |
| 1 | ¹ | ¹ | Superscript one |
| [dieresis] | ¼ | ¼ | Fraction one-fourth |
| ' | ½ | ½ | Fraction one-half |
| p | ¾ | ¾ | Fraction three-fourths |
| Æ | Æ | Æ | Capital AE ligature |
| æ | æ | æ | Small ae ligature |
| É | É | É | Accented capital E |
| é | é | é | Accented small e |
| x | × | Multiply sign | |
| / | ÷ | Division sign |
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.
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.
In the meantime, check it out at:
http://www.mcp.com/sams/books/235-8/cafe6.htm
(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.
| Tag | Attribute | Function |
| <FONT>...</FONT> | Controls the appearance of the enclosed text. | |
| SIZE="..." | 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, +2. | |
| COLOR="..." | Changes the color of the text. | |
| FACE="..." | 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. | |
| <BASEFONT> | Sets the default size of the font for the current page. | |
| SIZE="..." | The default size of the font, from 1 to 7. |
