This chapter is from the book
This chapter is from the book
This chapter is from the book
Setting the Font
The font you use to display your text can make a powerful difference in how readers perceive your message. Some fonts are easier to read on the screen; others look better when printed. The font property allows you to determine the visual effect of your message by choosing the font for displaying your text.
In this example (Code 3.1 and Figure 3.4 ), the level 1 header has been assigned the Times font.
Example 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.
<html>
<head>
<style type="text/css"><!--
h1 {
font-family: Georgia, 'Times New
Roman', Times, serif;
}
h3 {
font-family: 'Courier New', Courier,
Monaco, monospace;
}
.copy {
font-family: Arial, Helvetica,
Geneva, sans-serif;
}
--></style>
</head>
<body>
<hr>
<h1>ALICE'S ADVENTURES IN WONDERLAND</h1>
<h3>Lewis Carroll</h3>
<hr>
<h3>CHAPTER I<br>
Down the Rabbit-Hole</h3>
<p class="copy">Alice was beginning to
get very tired of sitting by her sister on
the bank...</p>
</body>
</html>
)
Figure 3.4 The font for the title, subtitle, and text of the page have all been set, thus overriding the default font set in the browser.
To define the font in a rule:
- font-family: Type the property name font-family, followed by a colon (:).
- Georgia Type the name of the font you want to use.
- , 'Times New Roman', palatino If you want, you can type a list of fonts separated by commas.
-
, serif;
After the last comma, type the name of the generic font family for the particular style of font you're using. Table 3.1 lists generic values for font families. Although including this value is optional, doing so is a good idea.
Table 3.1. font-family Values
Value
Compatibility
<family-name>
IE3, N4, S1, O3.5, CSS1
<generic-family>
IE3, N4, S1, O3.5, CSS1
serif
IE3, N4, S1, O3.5, CSS1
sans-serif
IE3 [*] , N4, S1, O3.5, CSS1
cursive
IE4, N4, S1, O3.5, CSS1
fantasy
IE4, N4, S1, O3.5, CSS1
monospace
IE4, N4, S1, O3.5, CSS1
Using CSS vs. the Font Tag
The most common way to set a typeface is by using the <font> tag, as follows:
<font face="arial,helvetica">Blah,
But the <font> tag is on the way out. The most recent version 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 attributes 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 document.
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 wrong—these 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.
I have compiled lists of browser-safe fonts that should be available on each of the different platforms.
-
Apple Macintosh (Table 3.2)
Table 3.2. Mac System Fonts
Font Name
Styles
American Typewriter [*]
bold
Apple Chancery
Apple Symbols [1]
Arial
bold, italic, bold italic
Arial Black
Arial Narrow [1]
bold, italic, bold italic
Arial Rounded MT Bold [1]
Baskerville [1]
bold, italic, bold italic
Big Caslon [1]
Brush Script MT [1]
Capitals [**]
Charcoal [2]
Chicago [2]
Cochin [1]
bold, italic, bold italic
Comic Sans MS
bold
Copperplate [1]
bold
Courier
bold, oblique, bold oblique
Courier New
bold, italic, bold italic
Didot [1]
bold, italic
Futura [1]
Gadget [2]
Geneva
Georgia
bold, italic, bold italic
Gill Sans [1]
bold, italic, bold italic
Helvetica
bold, oblique, bold oblique
Helvetica Neue [1]
bold, italic, bold italic
Herculanum [1]
Hoefler Text
bold, italic, bold italic
Impact
Lucida Grande [1]
bold
Marker Felt [1]
Monaco
New York [2]
Optima [1]
bold, italic, bold italic
Palatino [2]
bold, italic, bold italic
Papyrus [1]
Sand [2]
Skia
Symbol
Techno [2]
Textile [2]
Times
bold, italic, bold italic
Times New Roman
bold, italic, bold italic
Trebuchet MS
bold, italic, bold italic
Verdana [1]
bold, italic, bold italic
VT100 [1]
bold
Webdings
Zapf Dingbats [1]
Zapfino [1]
-
Microsoft Windows (Table 3.3)
Table 3.3. Windows System Fonts
Font Name
Styles
Arial
bold, italic, bold italic
Arial Black
Comic Sans MS
bold
Courier New
bold, bold italic, italic
Franklin Gothic Medium [*]
italic
Georgia
bold, bold italic, italic
Impact
Lucida Console
Lucida Sans Unicode
Marlett
Microsoft Sans Serif [3]
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
-
Microsoft Core Fonts (Table 3.4) are installed with Internet Explorer for both Windows and Mac.
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
Adobe Minion Web
NOTE: Internet Explorer installs these fonts, so they may not be available to Netscape users. Still, because most computers come with IE installed, it's a safe bet that these fonts will be on your visitor's machine.
As you can see, there are certainly more than two choices. Appendix D also lists these fonts, with examples of what they should look like and replacement fonts that are similar looking.