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é.
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.
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.
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.
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 6.4.
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
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:
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.
Table 6.1 lists some of the special characters you
might need to use on your Web page.
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.")
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.
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.)