Tweaking the Font


The <big>, <small>, and <tt> tags give you some rudimentary control over the size and appearance of the text on your pages. However, there may be times when you'd just like a bit more control over the size and appearance of your text. Before I get into the appropriate way to tinker with the font in XHTML code, let's briefly take a look at how things were done prior to CSS.

Before style sheets entered the picture, the now phased-out <font> tag was used to control the fonts in web page text. For example, the following HTML will change the size and color of some text on a page:

 <font size="5" color="purple">this text will be big and purple.</font> 


As you can see, the size and color attributes of the <font> tag made it possible to alter the font of the text without too much effort. Although this approach worked fine, it was replaced with a far superior approach to font formatting thanks to CSS style rules. Following are a few of the main style rules used to control fonts:

  • font-family Sets the family (typeface) of the font.

  • font-size Sets the size of the font.

  • color Sets the color of the font.

By the Way

You'll learn more about controlling the color of the text on your pages in Hour 9, "Custom Backgrounds and Colors." That lesson also shows you how to create your own custom colors and control the color of text links.


The font-family style rule allows you to set the typeface used to display text. You can and usually should specify more than one value for this style (separated by commas) so that if the first font isn't available on a user's system, the browser can try an alternative. This is important because every user potentially has a different set of fonts installed, at least beyond a core set of common basic fonts (Arial, Times, and so forth). By providing a list of alternative fonts, you have a better chance of your pages gracefully falling back on a known font if your ideal font isn't found. Following is an example of the font-family style used to set the typeface for a paragraph of text:

 <p style="font-family:arial, sans-serif, 'times roman'"> 


There are several interesting things about this example. First off, arial is specified as the primary font. Case doesn't matter when specifying the font family, so arial is no different from Arial or ARIAL. Another interesting thing about this code is how single quotes are used around the times roman font name because it has a space in it.

The font-size and color style rules are also commonly used to control the size and color of fonts. The font-size style can be set to a predefined size such as small, medium, or large, or you can set it to a specific point size such as 12pt or 14pt. The color style can be set to a predefined color such as white, black, blue, red, or green, or you can set it to a specific hexadecimal color such as #FFB499. Following is the previous paragraph example with the font size and color specified:

 <p style="font-family:arial, sans-serif, 'times roman'; font-size:14pt; color:green"> 


By the Way

You'll find out what in the world a hexadecimal color is in Hour 9. For now, just understand that it allows you to specify exact colors beyond just saying green, blue, orange, and so forth.


The web page given in Listing 5.6 and shown in Figure 5.6 uses these font style rules to improve on one of the earlier hockey-player examples and provide some text formatting. The name and jersey number of the player are displayed in a more exacting font that actually still resembles the original <h1> tag. More important, the remaining player information is displayed in navy blue with the description of each piece of information in bold.

Listing 5.6. The Hockey Player Sample Page Is Improved with Font Style Rules
 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   <head>     <title>Music City Mafia - Terry Lancaster</title>   </head>   <body>     <p style="font-family:verdana, arial; font-size:18pt; font-weight:bold">16      - Terry Lancaster</p>     <p style="font-family:verdana, arial; font-size:12pt; color:navy">       <img src="/books/4/158/1/html/2/tlancaster.jpg" alt="Terry &quot;Big T&quot; Lancaster" /><br />       <span style="font-weight:bold">Nickname:</span> Big T<br />       <span style="font-weight:bold">Position:</span> RW<br />       <span style="font-weight:bold">Height:</span> 6'3"<br />       <span style="font-weight:bold">Weight:</span> 195<br />       <span style="font-weight:bold">Shoots:</span> Left<br />       <span style="font-weight:bold">Age:</span> 40<br />       <span style="font-weight:bold">Birthplace:</span> Nashville, TN     </p>     <hr />     <p style="font-family:verdana, arial; font-size:12pt; color:navy">       <span style="font-weight:bold">Favorite NHL Player:</span> Brett       Hull<br />       <span style="font-weight:bold">Favorite NHL Team:</span> Nashville       Predators<br />       <span style="font-weight:bold">Favorite Southern Fixin:</span> Skillet       Fried Potatoes<br />       <span style="font-weight:bold">Favorite Meat and Three:</span>        Swett's<br />       <span style="font-weight:bold">Favorite Country Star:</span>        Patsy Cline<br />       <span style="font-weight:bold">Favorite Mafia Moment:</span> "Chet       finishing a game with his eyelid completely       slashed through."     </p>   </body> </html> 

Figure 5.6. If you have the Verdana font installed on your computer, it will be used to display the page listed in Listing 5.6.


By the Way

You may be wondering about the <span> tag that is used repeatedly throughout this sample code. This tag allows you to apply a set of styles to an inline piece of content, which means that you can isolate individual words or sentences within a paragraph, as opposed to styling a whole block of text using a <div> or <p> tag. You'll learn more about the <span> tag in Hour 12. For now, just understand that it allows you to isolate a chunk of text and apply a font to it.


Following is the code to set the typeface used for the player's name and jersey number text in Listing 5.6:

 <p style="font-family: verdana, arial; font-size:18pt; font-weight:bold"> 


If your web browser can find a font named Verdana on a user's system, that font is used. Otherwise, the browser will look for Arial. Figure 5.7 shows how the page would look on a computer that didn't have Verdana installed but did have the Arial font. If neither of those fonts can be found, the browser will display the text using the default font (usually Times New Roman).

Figure 5.7. If you don't have the Verdana font installed, the text from Listing 5.6 appears in Arial or Times New Roman.


Because only fonts that each user has on his system show up, you have no real control over which fonts appear on your pages. Furthermore, the exact spelling of the font names is important, and many common fonts go by several slightly different names. This means that the only absolutely reliable choices beyond Times New Roman are Arial (on Windows machines) and Helvetica (on Macintosh machines). Don't be afraid to specify other fonts, but make sure that your pages look acceptable in Times New Roman as well.

By the Way

To see a list of the most common fonts used on the Web, and to find out which of them are installed on your computer, visit Sams Publishing at http://www.samspublishing.com/.





SAMS Teach Yourself HTML and CSS in 24 Hours
Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)
ISBN: 0672328410
EAN: 2147483647
Year: 2005
Pages: 345

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net