Fonts | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

In addition to better support for layout, Web page designers have long desired to be able to specify fonts in their documents. Initially, HTML supported only two fonts, a proportional font and a fixed-width font. Under browsers such as Netscape and Internet Explorer, the proportional font was usually Times or Times New Roman, whereas the fixed-width font was Courier. To set text into Courier, page authors would use the <tt> tag. Otherwise, all text on the page generally was in the proportional font unless it was preformatted within a <pre> tag. There also was little control over the size of the font, even in relative terms. The font size of the browser generally was 12 point for the variable-width font and 10 point for the fixed-width font, but end users were free to change font size as they pleased.

There wasn't much control over typography in early browsers. In fact, the only way to use a new font or control the precise layout of text was to make it a graphic. To this day, many page designers still embed a great deal of text as graphics in order to precisely control spacing and to use fonts that the user might not have. Because of download and accessibility issues, this should not be the de facto approach to dealing with fonts.

Netscape introduced the  tag in the 1.1 version, extended it in the 2.0 version, and Microsoft further extended it in Internet Explorer 3.0. The HTML 3.2 standard then incorporated the  tag and it continues to be used by many designers as it is part of the transitional variants of HTML and XHTML. However, like many layout facilities, the use of this HTML element should be phased out in the future in favor of style sheets.

The basic syntax of < font > beyond core attributes like id , class , style and title is

  <font color="color value" size="size value from 1-7" face="list of font faces">   styled text here   </font>

Given this syntax using , you can set the color attribute equal to a valid color name such as "red" or an equivalent hex value such as #FF0000 to color text. Don't be intimidated by the hexadecimal color form; it will be discussed a little later in this chapter and is also presented in Appendix E. So the code

  <p><font color="red">  This is red.  </font>  This is not.  </p>

sets the text "This is red" in red.

It also is possible to set the relative size of type by setting the size attribute of the font element. In a Web page, there are seven relative sizes for text numbered from 1 to 7 , where 1 is the smallest text in a document and 7 is the largest. To set some text into the largest size, use

  <p><font size="7">  This is big.  </font>  This is not.  </p>

By default, the typical size of text is 3; this can be overridden with the basefont element discussed later in this chapter. If the font size is not known but the text should be made just one size bigger, the author can use an alternative sizing value such as  instead of specifying the size directly. The + and - syntax makes it possible to bring the font size up or down a specified number of settings. The values for this form of the size attribute should range from +1 to +6 and -1 to -6 . It is not possible to specify  because there are only seven sizes. If the increase or decrease goes beyond acceptable sizes, the font generally defaults at the largest or smallest size, respectively.

Lastly, the face attribute can be set to the name of the font to render the text. So, to render a particular phrase in Verdana, use the following markup:

  <p><font face="Verdana">  This is in Verdana.  </font>  This is not.  </p>

The browser then reads this HTML fragment and renders the text in the different font ” but only for users who have the font installed on their systems. This raises an interesting problem: What happens if a user doesn't have the font specified? Using the face attribute, it is possible to specify a comma-delimited list of fonts to attempt one by one before defaulting to the normal proportional or fixed-width font. The fragment shown here would first try Arial, then Helvetica, and finally Sans-Serif before giving up and using whatever the current browser font is:

 <p><font face=  "Arial, Helvetica, Sans-serif"  >This should be in a different font  </font>  than this.  </p>

Although it is nearly impossible to know what fonts users might have on their systems, the previous example shows how a little guesswork can be applied to take advantage of the face attribute. Most Macintosh, Windows, and Unix users have a standard set of fonts. If equivalent fonts are specified, it might be possible to provide similar page renderings across platforms. Table 6-1 shows some of the fonts that can be found on Macintosh, Windows, and Unix systems.

Note	Modern browsers generally support default fonts of serif, sans-serif, and monospace as they are included in all CSS-aware browsers. Generally, one of these generic names is given at the end of any font listing.

Table 6-1: Sample System Fonts by Platform Type
Windows	Macintosh	Unix ^[*]
Arial	Chicago	Charter
Comic Sans MS	Courier	Clean
Courier New	Geneva	Courier
Impact	Helvetica	Fixed
Times New Roman	Monaco	Helvetica
Symbol	New York	Lucida
Verdana	Palatino	Sans Serif
Wingdings	Symbol	Serif
	Times	Symbol
		Times
		Utopia
^[*] Unix fonts vary; this is just meant to show most of the common fonts under a standard X-Windows environment.

Given the similarity of these fonts, it generally is safe to use the combinations of font faces shown in this code fragment and achieve approximately the same results across platforms.

  <p>   <font face="Arial,Helvetica,sans-serif">  A sans-serif font  </font>   <br />   <font face="Verdana, Arial, Helvetica, sans-serif">  A sans-serif font 2  </font>   <br />   <font face="'Times New Roman', Times, serif">  A serif font  </font>   <br />   <font face="Georgia, Times New Roman, Times, serif">  A serif font 2  </font>   <br />   <font face="'Courier New',Courier, monospace">  A monospaced font  </font>   </p>

A rendering of these fonts on a Windows system and a Macintosh system is shown here as a comparison.

A complete example demonstrating all the font element attributes and their use is presented in the following example. A rendering is shown in Figure 6-3.

Figure 6-3: demonstration

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Font Element Demo  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <h2 align="center">Font Sizing</h2>   <font size="1">Font size 1</font><br />   <font size="2">Font size 2</font><br />   <font size="3">Font size 3</font><br />   <font size="4">Font size 4</font><br />   <font size="5">Font size 5</font><br />   <font size="6">Font size 6</font><br />   <font size="7">Font size 7</font><br />  This is  <font size="+2">  +2 from the base size.  </font>  Now it is  <font size="-1">  -1 from base size.</font>  <h2 align="center">  Font Color  </h2>   <font color="red">  Red Text  </font><br />   <font color="#ffcc66">Hex #ffcc66 color</font>   <h2 align="center">  Font Face  </h2>   <font face="Arial">  Set font to common fonts like Arial  </font><br />   <font face="'Viner Hand ITC'">  Take a chance on an unusual                               font  </font><br />  Even set text to dingbat characters  <font face="Webdings">f3khilqm </font><br />   <h2 align="center">  Common Font Face Combinations  </h2>   <font face="Arial,Helvetica,sans-serif">  Arial,Helvetica,sans-serif  </font><br />   <font face="Verdana, Arial, Helvetica, sans-serif">  Verdana, Arial, Helvetica, sans-serif  </font><br />   <font face="'Times New Roman',Times,serif">  Times New Roman,Times,serif  </font><br />   <font face="Georgia, 'Times New Roman', Times, serif">  Georgia, Times New Roman, Times, serif  </font><br />   <font face="'Courier New', Courier, monospace">  Courier New, Courier, monospace  </font><br />   <h2 align="center">Combination</h2>  You can  <font size="+2" color="red" face="Arial">  set all font attributes at once  </font>!   </body>   </html>

Note	The <font> tag is deprecated under strict HTML 4 and XHTML in favor of style sheets. However, its use is common and probably will continue for some time.

Document-Wide Font Settings

In some cases, it might be appropriate to change the font size, color, or face document-wide. To do this, use the basefont element in the head of the document. The <basefont> tag should occur only once in the document and includes major attributes such as color , face , and size . Like the  tag, the color attribute should be set to an RGB hexadecimal equivalent value or color name. The face attribute should be set to a font name or comma-delimited list of fonts. Finally, the size attribute should be set to a size value between 1 and 7 . To set the font of the document in red Arial or Helvetica with a relative size of 6, use <basefont color="red" face="Arial, Helvetica" size="6" /> within the head element of the document. See Appendix A for more information on <basefont> .

Note	Like <font> , the <basefont> tag is deprecated under strict versions of HTML and XHTML. CSS should always be used for document-level font control if possible.

Web Fonts

While the common font faces specified in the previous section are safe to use, the typical end user may have many other fonts. For example, users of Microsoft Office also probably have access to fonts such as Algerian, Book Antiqua, Bookman Old Style, Britannic Bold, Desdemona, Garamond, Century Gothic, Haettenschweiller, and many others. Browser applications may even install fonts. For example, since Internet Explorer 4.0, Microsoft has included a font called WebDings, which provides many common icons for use on the page. Some of these icons would be useful for navigation, like arrows, whereas others look like audio or video symbols that could provide an indication of link contents before selection. Just using font sizing, colors, and simple layout, it is possible to make interesting but very browser-specific layouts with WebDings, as shown in Figure 6-4.

Figure 6-4: Example page using Microsoft s WebDings font

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Simple WebDing Demo  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body bgcolor="blue">   <h1 align="center">  WebDing City!  </h1>   <font face="WebDings" style="font-size: 64pt;" color="yellow">&#061;</font><br />   <font face="WebDings" style="font-size: 48pt;"  color="white">&nbsp;&nbsp;&nbsp;&nbsp;&#217;&nbsp;&nbsp;&#217;&nbsp;</font>   <font face="WebDings" style="font-size: 32pt;" color="Gray">&nbsp;&nbsp;&nbsp;   &#106;</font>   <br /><br />   <font face="WebDings" style="font-size: 64pt;">   &#067;&#067;&#067;&#067;&#067;&#067;&#077;</font>   </body>   </html>

A common set of icons for the Web actually is not a new idea. The W3C at one point had a working draft covering a predefined set of icon-like symbols, although this does not appear to be gaining any support in the industry. The Microsoft font actually includes many of these symbols, but does not use the same naming convention. It might eventually be possible to include &audio; to add an audio icon to a Web page, but for now setting the WebDings value or inserting an image is the best choice.

Downloadable Fonts

Although the Microsoft solution to promote a common set of font faces including dingbats like WebDings helps address the issue of fonts on the Web, it isn't a very flexible approach outside the Windows world. Although many Windows, Macintosh, and Unix systems have similar fonts, consider the situation in which the page author wants to use a customized font. In this case, the page author is typically forced to create a static image of a word or phrase in the desired font. While a common practice, this is not really an appropriate approach. Image-based text takes longer to download, is difficult to edit, does not work with search engines unless an alt attribute is properly used, doesn't typically scale well with screen resolution, and can't even be copied and pasted by the user.

The best solution for fonts on the Web would be to come up with some cross-platform form of font that could be downloaded to the browser on the fly. Although this sounds easy enough, the problem with downloadable fonts is that they must be highly compact. Page viewers must not be able to steal the font from the page and install it on their own machines. Both of the major browser vendors have supported downloadable fonts at one time or another. Netscape's solution initially used a download font system in Netscape 4. x called Dynamic Fonts, based on BitStream's TrueDoc (www.truedoc.com). However, this technology has not been continued in Netscape 6. x /7. x and while still around is not favored in the developer community even though it has been implemented as an ActiveX control for Internet Explorer. Internet Explorer supports a native browser solution for Web type called OpenType (www.microsoft.com/typography). However, given that the W3C is working on a dynamic font specification, eventually a third approach may arise as well.

TrueDoc Dynamic Fonts

To use TrueDoc dynamic fonts under older Netscape browsers or, more commonly, to add support for Internet Explorer, the page author simply uses the face attribute of a  tag, or a style sheet attribute as discussed in Chapter 10, to set the font face. If the user does not have the font installed on his or her system, a downloadable font linked to the page can be fetched and used to render the page. To include a link to a TrueDoc font definition file in Portable Font Resource (PFR) format, use a <link> tag and set the rel attribute to fontdef and the src attribute equal to the URL where the font definition file resides. The <link> tag must be found within the head of the document. An example of how this element would be used is shown here:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml"  lang="en">   <head>   <title>  TrueDoc Font Demo  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <script type= "text/javascript"   src="http://www.truedoc.com/activex/tdserver.js"></script>   <link rel="FONTDEF" src="http://www.truedoc.com/pfrs/Calligraph421.pfr" />  <!-- purposeful validation error because of non-standard link tag usage -->  </head>   <body>   <font face="Calligraph421 BT" size="7">  TrueDoc font demo  </font>   </body>   </html>

In this demo, we point at remote fonts online and require the use of JavaScript for Internet Explorer browsers to download a font player. The demo will work in Netscape 4. x and Internet Explorer browsers that download the WebFont player. Other users will see a default font. As you can see, the main obstacle to using dynamic fonts with TrueDoc technology is making the .pfr for the file and making sure the browser can view such a file. Because of the difficulty of making fonts, I resort to using one of a variety of PFR files, which are made available online by BitStream. I also add the freely available script from truedoc.com to address browser issues. However, regardless of this workaround, the technology is simply not well supported beyond the free online fonts and should probably be avoided in favor of the Internet Explorer technology described next .

Note	Another drawback to the TrueDoc approach to dynamic fonts is that it might cause screen flashing in versions of Netscape 4.x. This can be disorienting for the user.

Microsoft's Dynamic Fonts

Microsoft Internet Explorer has provided a way to embed fonts since the 4. x generation version of the browser. To include a font, you must first build the page using the  tag, or style sheet rules that set fonts, as discussed in Chapter 10. When creating your page, don't worry about whether or not the end user has the font installed; it will be downloaded. Next, use Microsoft's Web Embedding Fonts Tool available at www.microsoft.com/typography to analyze the font usage on the page. The program should create an .eot file that contains the embedded fonts. The font use information then will be added to the page in the form of CSS (Cascading Style Sheets) style rules, as shown here:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   <html>   <head>   <title>Microsoft Font Test</title>   <style type="text/css">  <!--   @font-face {     font-family: Ransom;     font-style:  normal;     font-weight: normal;     src: url(http://www.htmlref.com/fonts/ransom.eot);   } -->  </style>   </head>   <body>   <font face="ransom" size="6">  Example Ransom Note Font  </font>   </body>   </html>

A possible rendering of font embedding is shown in Figure 6-5.

Figure 6-5: Embedded fonts increase design choices.

Tip	Be careful ”downloadable fonts can be easily disabled in Internet Explorer depending on the security setting of the browser.

Like the TrueDoc approach, you first must create a font file and reference it from the file that uses the font. Again, as the example shows, it might be useful to define a fonts directory within your Web site to store font files, similar to storing image files for site use.

The use of the @font-face acts as a pseudo-element that allows you to bring any number of fonts into a page. The form of the font embedding supported by Microsoft conforms to the emerging W3C specification for font embedding. Again, for more information on embedded fonts under Internet Explorer, and links to font file creation tools such as WEFT, see the Microsoft Typography site (www.microsoft.com/typography).

It would seem that in order to make fonts cross-platform, it should be possible to provide links to both Microsoft and TrueDoc font technology within the same page. This really adds only one line or a few style rules as the rest of the document would continue to use the same  statements. TrueDoc technology also supports an ActiveX control to allow Internet Explorer users to view their style of embedded fonts. Given the extra download involved, the double font statement approach is preferred. Unfortunately, cross-platform downloadable fonts aren't that easy. Many Macintosh browsers have issues with downloadable font technology and Unix browsers are nearly completely left out. Some server-oriented approaches such as GlyphGate (www.glyphgate.com) have attempted to rectify this issue, but so far, the use of cross-platform fonts on the Web is minimal.

< Day Day Up >