Font Control

In our earlier section on font styles, we looked at the effects of the <b> tag and <i> tag on text. However, these tags are crude instruments at best. Now that we've covered the basics of style sheets, it's time to tackle more sophisticated methods of font control.

CSS font control is divided into three main components:

• font-family
• font-size
• font-styling

We'll tackle each of these properties one-at-a-time.

The font-family Property

The font-family property selects the basic font face. As long as you know the name of the font you wish to use, this component is pretty straightforward:

font-family: "Times New Roman"

I've used "Times New Roman" in this example not because it's a great font to use on the web (it isn't), but because it should be familiar to anyone who uses a word processor on a regular basis. Note that we must enclose the name of the font in quotes because of the spaces in "Times New Roman". Quotes are not necessary for one-word font names, such as "Garamond".

Specifying Multiple Fonts

One of the unavoidable issues of web design is that you can't count on any particular browser rendering your page exactly the way you want it to be. Fonts are no exception. You might want your text to render in the cute "Comic Sans MS" font, but what if your reader's browser doesn't have Comic Sans MS available? There is a small set of fonts that you can count on to usually be available, such as Arial, Helvetica and Times New Roman, but the selection is rather impoverished. Furthermore, some of these "canonical" fonts are ill-suited for reading on a computer screen. As accessibility expert Joe Clark says in Building Accessible Websites:

"Don't use Helvetica. Typographic neophytes think Helvetica is "legible." Try running a few tests with confusable characters like Il1i!¡|, 0OQ, aeso, S568, or quotation marks. Related grotesk typefaces like Univers suffer similarly. (One more time: Don't use Arial. It's a bastardized variant of Helvetica, it's ugly, it bespeaks unsophistication, and it sticks you with all the same confusable characters as other grotesks.)"

Fortunately font-family allows you to specify multiple font faces. Here's an example:

font-family: Georgia, Palatino, "Trebuchet MS", serif

Here we have provided a list of fonts in descending order of importance. The reader's browser will first try to display the font Georgia. If Georgia is not available, it will try Palatino; failing that, Trebuchet MS; and if all hope is lost, serif.

Generic Fonts

There are five varieties of generic fonts. These are fonts of last resort -- to be used if none of the fonts you name in your list are available.

• sans-serif: a font without decoration or flaring at the end of each stroke. Examples include Verdana, Arial, and Geneva.

• serif: a font that has decoration or flaring at the end of some of its strokes. Examples include Times New Roman, Garamond, and Georgia.

• monospace: a font that has the same fixed-width for each character. Often used to represent computer code or terminal text. Examples include Courier, Monaco, and Andale Mono.

• cursive: a font that is designed to mimic cursive handwriting. Examples include Brush Script MT, Aristocrat LET, and Apple Chancery.

• fantasy: a font that is highly decorative (while still representing recognizable characters). Examples include Herculanum and Comic Sans MS.

The font-size Property

With the font-size property, you can specify your font size in a number of absolute and relative ways:

points ("font-size: 12pt")

Measured in "points" (units of 1/72 of an inch).

pixels ("font-size: 14px")

Measured in screen pixels.

points ("font-size: 150%")

Measured relative to the default font or the parent element's font. A font size of "75%" would shrink the font by a factor of 3/4.

em-widths ("1.2em")

Measured relative to the default font or the parent element's font. The value "1.0em" would be the same as multiplying by one.

absolute keywords ("x-large")

Specifies one of seven sizes: xx-small, x-small, small, medium, large, x-large, and xx-large. The exact interpretation of what constitutes "medium" or "x-large" varies from browser to browser.

relative keywords ("larger")

Bumps the font up one size or down one size from its default or inherited size. The options are larger and smaller.

Modern browsers handle these ways of specifying the font size reasonably well, although there are some inconsistencies (such as Internet Explorer's implementation of the size keywords versus Mozilla/Netscape's). In older browsers, consistency is spotty at best.

Additional font-styling

We can further alter the font by making it bold, italic, and so on.

font-weight (boldness)

The font-weight component specifies how thick the font's strokes should be. The most common value by far is bold. You may also specify normal, bolder, lighter, or a number from 100 to 900. (400 is supposed to correspond to normal and 700 to bold.)

There is also a normal option, which allows you to remove any boldness that has already been applied. For example, most browsers display the <strong> tag as bold text; writing strong {font-weight: normal}; in your style sheet would force all <strong> tags to not be bold.

font-style (italic)

The font-style component specifies whether or not the font is slanted (italic). The most commonly-used value is italic. As with font-weight, there is a normal that allows you to un-italicize something.

text-decoration (underlines)

Let's ignore the fact that text-decoration doesn't have a sensible, consistent name (such as "font-decoration"). Its purpose is similar to the components we've already discussed. The text-decoration component provides five options:

• none: cancels all text-decoration.

• underline: creates underlined text.

• overline: creates overlined text.

• line-through: creates line-through ("strike-through") text.

• blink: creates blinking text. Many browsers don't implement this option, and most users find it to be obnoxious.

An Example: the <em> Tag

The <em> tag indicates emphasized text. Most browsers display the <em> tag as simply italic. Now, there's no particular reason why the <em> tag should be italic -- that just happens to be the convention. So let's say that instead we want our <em> tags to be bold, red, and larger than our default font size. How would we do this?

<html>
<head>
  <title>Oh Better Far to Live and Die</title>
  <style type="text/css">
  <!--
    p {
      font-family: Courier, monospace;
      font-size: 12pt;
    }
    em {
      font-style: normal;
      font-weight: bold;
      font-size: 14pt;
      color: #ff0000;
    }
  -->
  </style>
</head>
<body>
<p>
  KING:<br>
  For... I <em>am</em> a Pirate <em>King!</em><br>
  And it is, it is a glorious thing<br>
  To be a Pirate King!<br>
  For I am a Pirate <em>King!</em>
</p>
<p>
  ALL:  <br>
  You are! <br>
  <em>Hurrah</em> for the Pirate King!
</p>
<p>
  KING:<br>
  And it is, it is a glorious thing <br>
  To be a Pirate King. 
</p>
</body>
</html>

We've defined a default style for our paragraphs, and our <em> tag style overrides it. Notice that we don't have to specify the font-style for our paragraphs: the default value is normal (non-italic), and presumably we're happy with that.

The font styling that we apply to the <p> tag cascades down to the <em> tag. Let's take a look at what's happening step-by-step.

1. font-family:
   • <p> tag: set to "Courier, monospace". If the browser can display Courier it will; otherwise it will serve up a generic monospace font.
   • <em> tag: inherits its font-family from the parent tag, <p>.
2. font-size:
   • <p> tag: set to "12pt".
   • <em> tag: set to "14pt", overriding its parent.
3. font-weight:
   • <p> tag: not set; takes on the default value of "normal".
   • <em> tag: set to "bold", overriding the default <em> value of "normal".
4. font-style:
   • <p> tag: not set; takes on the default value of "normal".
   • <em> tag: set to "normal", overriding the default <em> value of "italic".
5. color:
   • <p> tag: not set; takes on the default value of "#000000".
   • <em> tag: set to "#ff0000", overriding the default <em> value of "#000000".

Shorthand Notation

Using font-family, font-size, and so on can get cumbersome. Fortunately there is a shorthand for all of these properties, named simply, "font". You need merely place the desired values in the proper order. This shorthand only encompasses the properties that begin with "font-", so if we want to do anything else (such as underline our text) we still need to use the appropriate property (such as text-decoration).

1. font-style or font-weight or both
2. font-size
3. font-family

You may leave out any of these properties except for the font-family, as long as everything is in the proper order. Let's take a look at an example of two paragraph classes. The first class, p.standard, is 12pt Verdana. The second class, p.styled, is 10pt bold italic underlined green Verdana.

  p.standard {
    font: 12pt Verdana, sans-serif;
  }
  p.styled { 
    font: bold italic 10pt Verdana, sans-serif;
    text-decoration: underline;
    color: #008000;
  }

The font property makes things a bit more elegant. However, it's hard to remember the exact order... and to make matters worse, some browsers will display styles that not properly ordered, while others don't. Be sure to verify that that your font declaration is in the proper order before making your design public.