Setting the Font-Family


The font-family property lets you determine the visual effect of your message by choosing the font for displaying your text (Table 3.2). The font you use to display your text can make a powerful difference in how readers perceive your message (Figure 3.3). Some fonts are easier to read on the screen; others look better when printed.

Table 3.2. Font-Family Values

VALUE

COMPATIBILITY

<family-name>

IE3, FF1, S1, O3.5, CSS1

serif

IE3, FF1, S1, O3.5, CSS1

sans-serif

IE4/3, FF1, S1, O3.5, CSS1

cursive

IE4, FF1, S1, O3.5, CSS1

fantasy

IE4,FF1, S1, O3.5, CSS1

monospace

IE4,FF1, S1, O3.5, CSS1


Figure 3.3. A few common fonts (maybe a little too common!) in 18pt type.


In this example (Figure 3.4), the level 1 header has been assigned the mono font family using Courier New (for Windows) and Courier as an alternative (for Macs).

Figure 3.4. The font for the title, author, and chapter name, and text of the page have all been set, thus overriding the default font set in the body tag.


To define the font family in a rule:

1.

font-family:


Type the property name font-family, followed by a colon (Code 3.1).

Code 3.1. You can specify as many fonts in your definition as you want. Separate names with a comma, and place quotes around font names that contain more than one word.

[View full width]

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD /xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content= "text/html; charset=UTF-8" />  <title>CSS, DHTML &amp; Ajax | Setting the Font</title>  <style type="text/css" media="all">  body {       font-size: 1.2em;       font-family: Georgia, "Times New Roman", times, serif; }  h1 {       font-family: "Courier New", Courier, "Andale Mono", monospace; }  h2 {       font-family: Cracked, Impact, fantasy; }  p.copy {       font-family: Arial, Helvetica, sans-serif; }  .author {       font-family: Zapfino, "Comic Sans MS", cursive; }  </style>  </head>  <body>  <div >       <h1>Alice's Adventures in Wonderland</h1>       <p >Lewis Carroll</p>       <h2>CHAPTER I<br />       Down the Rabbit-Hole</h2>  </div>  <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of  having nothing to do...</p>  <p >So she was considering in her own mind (as well as she could, for the hot  day made her feel very sleepy and stupid)…</p>  <p>There was nothing so <i>very</i> remarkable in that; nor did Alice think it so <i>very< /i> much out of the way to hear the Rabbit say to itself, 'Oh dear! Oh dear! I shall be  late!'...</p>  </body></html>

2.

"Courier New"


Type the name of the font you want to use.

3.

, Courier, "Andale Mono"


If you want, you can type a list of alternative fonts separated by commas. These fonts will be used (in the order specified) if the previous font in the list is not available on the visitor's computer.

4.

, monospace;


After the last comma, type the name of the generic font family for the particular style of font you're using. Table 3.2 lists generic values for font families. Although including this value is optional, doing so is a good idea.

Tips

  • When you provide a list of fonts, the browser tries to use the first font listed. If that one isn't available to the browser, it works through the list until it encounters a font that is installed on the visitor's computer. If there are no matches, the browser displays the text in the visitor's default font. The advantage of specifying a generic font is that the browser tries to display the text in the same style of font, even if the specific ones you list are not available.

  • Your best strategy for listing fonts is to choose the first one from either the Mac or Windows System Fonts list (see the next section), the second one from the other list, and the final one from the generic font-family values.

  • Fonts that contain a space in their names must be enclosed in quotation marks (example: "Times New Roman").

  • Theoretically you can download a particular font to the visitor's computer and then specify the font by using the family-name property. However, in practice, this is at best impossible to pull off. See the sidebar "Downloadable Fonts" for details.


Using Browser-Safe Fonts

Look around the Web, and what do you see? Two fonts: Arial and Times. Virtually every site whose designers made an effort to control the display of text uses either Times or Arial (or its Mac equivalent, Helvetica). This situation came about for one simple reason: Virtually every computer has these two fonts or some variant of them.

I am sick of them.

Don't get me wrongthese are great fonts, easy to read at many sizes. But as I said earlier, typography adds a language to text that goes far beyond the written word.

Web-based typography is mired in using Times for serif fonts and Helvetica/Arial for sans-serif fonts. This arrangement mutes the power of typography, and all Web pages begin to look the same.

What are the alternatives to the "terrible two"? That depends on the computer the person visiting your site is using. Mac and Windows computers have certain standard fonts that should always be installed. In addition, Internet Explorer (which comes installed on most computers these days) installs several additional fonts.

Of course, there's no guarantee that these fonts will be installed, but because they came with the operating system and unless they have been removed, they are just as likely to be available as Times, Helvetica, or Arial.

Using CSS vs. the Font Tag

Other than CSS, the most common way to set a typeface is by using the <font> tag, as follows:

<font face="arial,helvetica"> Blah, 'blah, blah</font>


But the <font> tag is on the way out. The most recent versions of the HTML specification from the W3C does not include this tag, noting that fonts should be handled by CSS.

There are two basic problems with the <font> tag:

  • You have to add this tag every time you set a font, which can significantly increase file size.

  • If you need to change the font attributes, you have to change the value in every tag.

CSS solves both of these problems by allowing you to redefine how existing tags treat the text they contain, rather than adding more tags, and by allowing you to control these behaviors from a single line in the code.


I have compiled lists of browser-safe fonts that should be available on each of the different platforms:

  • Apple Macintosh (Table 3.3)

    Table 3.3. Mac System Fonts

    FONT NAME

    STYLES

    Academy Engraved LET[*]

     

    American Typewriter

    bold

    Andale Mono

     

    Apple Chancery

     

    Apple Symbols

     

    Arial

    bold, italic, bold italic

    Arial Black

     

    Arial Narrow

    bold, italic, bold italic

    Arial Rounded MT Bold

     

    Bank Gothic[*]

    bold

    Baskerville

    bold, italic, bold italic

    Big Caslon

     

    Blackmoor LET[*]

     

    BlairMdITC TT-Medium[*]

     

    Bodoni Ornaments ITC TT[*]

     

    Bodoni SvtyTwo ITC TT-Book[*]

    bold, italic

    Bodoni SvtyTwo SC ITC TT-Book[*]

    bold, italic

    Bodoni SvtyTwo OS ITC TT-Book[*]

    bold, italic

    Bordeaux Roman Bold LET[*]

     

    Bradley Hand ITC TT[*]

    bold

    Brush Script MT

     

    Chalkboard[*]

    bold

    Cochin[*]

    bold, italic, bold italic

    Comic Sans MS

    bold

    Copperplate

    bold

    Courier

    bold

    Courier New

    bold, italic, bold italic

    Didot

    bold, italic

    Futura

    bold

    Geneva

     

    Georgia

    bold, italic, bold italic

    Gill Sans

    bold, italic, bold italic

    Handwriting

    Dakota

    Helvetica

    bold

    Helvetica Neue

    bold, italic, bold italic

    Helvetica Neue Black Condensed

     

    Helvetica Neue Bold Condensed

     

    Helvetica Neue Light

    italic

    Helvetica Neue UltraLight

    italic

    Herculanum

     

    Hoefler Text

    bold, italic, bold italic

    Hoefler Text Ornaments

     

    Impact

     

    InaiMatha[*]

     

    Jazz LET[*]

     

    Lucida Grande

    bold

    Marker Felt

     

    Mona Lisa Solid ITC TT[*]

     

    Monaco

     

    Optima

    bold, italic, bold italic

    Palatino

    bold, italic, bold italic

    Papyrus

     

    Party LET[*]

     

    PortagoITC TT[*]

     

    Princetown LET[*]

     

    Santa Fe LET[*]

     

    Savoye LET[*]

     

    SchoolHouse Cursive B[*]

     

    SchoolHouse Printed A[*]

     

    Skia

     

    Snell Roundhand[*]

    bold

    Stone Sans ITC TT[*]

     

    Stone Sans Sem ITC TT[*]

    italic

    Symbol

     

    Synchro LET[*]

     

    Times

    bold, italic, bold italic

    Times New Roman

    bold, italic, bold italic

    Trebuchet MS

    bold, italic, bold italic

    Type Embellishments One LET[*]

     

    Verdana

     

    Warnock Pro[*]

    bold, italic, bold italic

    Warnock Pro Caption[*]

    bold, italic, bold italic

    Warnock Pro Display[*]

    bold, italic, bold italic

    Warnock Pro Subhead[*]

    bold, italic, bold italic

      
      
      
      
      

    Verdana

    bold, italic, bold italic

    Webdings

     

    Zapf Dingbats

     

    Zapfino

     


    [*] = as of OS 10.4

  • Microsoft Windows (Table 3.4)

    Table 3.4. Microsoft Core Fonts

    FONT NAME

    STYLES

    Andale Mono[*]

     

    Arial

    bold, italic, bold italic

    Arial Black

     

    Comic Sans MS

    bold

    Courier New

     

    Georgia

    bold, bold italic, italic

    Impact

     

    Times New Roman

    bold, italic, bold italic

    Trebuchet MS

    bold, bold italic, italic

    Verdana

    bold, bold italic, italic

    Webdings

     


    [*] Previously named Monotype.com

  • Microsoft Core Fonts (Table 3.5) are installed with Internet Explorer for both Windows and Mac

    Table 3.5. Windows System Fonts

    FONT NAME

    STYLES

    Arial

    bold, italic, bold italic

    Arial Black

     

    Calibri[*]

    bold, italic, bold italic

    Cambria[*]

    bold, italic, bold italic

    Candara[*]

    bold, italic, bold italic

    Comic Sans MS

    bold

    Consolas[*]

    bold, italic, bold italic

    Constantia[*]

    bold, italic, bold italic

    Corbel[*]

    bold, italic, bold italic

    Courier New

    bold, bold italic, italic

    Franklin Gothic Medium

    italic

    Georgia

    bold, bold italic, italic

    Impact

     

    Lucida Console

     

    Lucida Sans Unicode

     

    Palatino Linotype

    bold, bold italic, italic

    Symbol

     

    Tahoma

    bold

    Times New Roman

    bold, bold italic, italic

    Trebuchet MS

    bold, bold italic, italic

    Verdana

    bold, bold italic, italic

    Webdings

     

    Wingdings

     


    [*] = as of Windows Vista

As you can see, there are certainly more than two choices. This book's Web site (webbedenvironments.com/css_dhtml_ajax) also lists these fonts, and includes examples of what they should look like and which similar-looking fonts can be used as replacements.

Tips

  • For more details on Mac fonts, see developer.apple.com/textfonts/.

  • For more details on Windows fonts, see microsoft.com/typography/fonts/.

  • Although these fonts have been listed for Web development, they can be used for any type of document (a presentation, a word-processor document, or whatever) that is being transferred between computer platforms.





CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon

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