Font Control

In our earlier section about font styles, we looked at the effects of the em and strong elements on text. While these elements enable you to apply some simple font changes (italic, bold), it would be nice to have more options.

Now that we’ve covered the basics of style sheets, it’s time to examine more sophisticated methods of font control. CSS font control is divided into three main components:

• font-family: What is the name of the font?

• font-size: How big is the font?

• font-weight: Is the font bold?

• font-style: Is the font italic?

• text-decoration: Is the font underlined, struck through, …?

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

The font-family Property

The font-family property selects the name of the font you wish to use. This component is pretty straightforward:

body { font-family: times new roman }

This CSS rule specifies that all text in the body should be in Times New Roman. Times New Roman isn’t necessarily a great font to use on the web, but it should be familiar to anyone who uses a word processor.

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 use some fancy font, but what if your reader’s browser doesn’t have that font available?

To resolve this issue, font-family enables you to specify multiple fonts. Here’s an example:

body { font-family: georgia, palatino, times new roman, serif }

The list of fonts proceeds in descending order of importance. The browser first tries to display the font Georgia. If Georgia is not available, it will try Palatino; failing that, Times New Roman; and if all hope is lost, a generic serif font.

There are some fonts that are usually available on on most people’s browsers. These include Times New Roman, Georgia, Palatino, Lucida, Impact, Trebuchet MS, Verdana, Comic Sans MS, Arial, Courier New, and Courier. However, even this impoverished selection is not always available. Worse, some of these “canonical” fonts are ill-suited for reading on a computer screen. Many websites declare their fonts to be “Arial, Helvetica, sans-serif”. But as accessibility expert Joe Clark says in his book 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.)”

Generic Fonts

If you specify the keyword “sans-serif” at the end of a list of fonts, this directs the browser to use some form of sans-serif. Specifying a generic font keyword is always a last resort, to be used if none of the fonts you name in your list are available.

There are five varieties of generic fonts, but only the first three are all that important.

• sans-serif: lacks decoration or flaring at the end of each stroke.

  Examples include Verdana, Arial, and Geneva.

• serif: has decoration or flaring at the end of some of its strokes.

  Examples include Times New Roman, Garamond, and Georgia. Printed materials often use serif fonts, because the serifs make the characters easier to distinguish and thus, easier to read. However, on the web, the reverse can be true. On paper, the little complicated serifs are sharp and easy to distinguish, but on a fuzzy computer screen, it’s often easier on the eyes to use sans-serif.

• monospace: uses the same width for each character, often used to represent computer code or terminal text.

  Examples include Courier, Courier New, Monaco, and Andale Mono. The most well-supported monospace fonts are Courier and Courier New.

• cursive: designed to mimic handwriting.

  Examples include Brush Script MT, Aristocrat LET, and Comic Sans MS. The most well-supported cursive font is Comic Sans MS, a cartoony font designed to resemble a child’s writing. Most other cursive fonts are not well-supported.

• fantasy: highly decorative.

  Examples include Impact and Copperplate. Most fantasy fonts are not well-supported.

The font-size Property

The font-size property enables you to 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.

• percentages (”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“): (Not to be confused with the em element.) Measured relative to the default font or the parent element’s font. The value “1.0em” is 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. But in the older browsers, font size handling is spotty at best. For example:

• Old versions of Internet Explorer used a default font size of small instead of medium.

• For the size keywords, Netscape 4 used a huge scaling factor between the different size keywords. Using xx-small or x-small often made the text unreadable, x-large and xx-large were a sight to behold.

• The only way to get consistent font sizes across all the old browsers was to use pixels (px). However, due to a bug in old versions of Internet Explorer, using pixels disabled Internet Explorer’s ability to resize the text! That’s why you’ll see some websites with “text resize buttons”, even though these buttons shouldn’t be necessary.

Although these issues are generally improving over time, it can be quite a struggle to get your font sizes looking consistent and resizing properly even in the newer browsers.

Additional font-styling

Beyond specifying the font name and its size, you can further alter the font’s appearance. We’ve already covered how to change the text color in “Colors”. Further alterations include making the text bold (darker), italic (slanted), and much more.

font-weight (boldness)

The font-weight component specifies how thick the font’s strokes should be. The important values to know are normal and bold.

You may also specify, bolder, lighter, or a number from 100 to 900. (400 corresponds to normal and 700 to bold.) However, these variations don’t do much even in the newer browsers. In general, everything 500 and above is just bold. There isn’t any such thing as really bold, at least not yet.

The normal option removes any boldness that has already been applied. For example, most browsers display strong as bold text. If you wanted to take this effect away, you could write strong {font-weight: normal}; in your style sheet.

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 also a value of normal that enable you to un-italicize something that would ordinarily be italicized. For a demonstration, refer to “An Example: Styling the em Element”.

text-decoration (underlines and more)

Sadly, text-decoration doesn’t have a sensible, consistent name (such as “font-decoration”). But its purpose is similar to the components we’ve already discussed. text-decoration 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.

An Example: Styling the em Element

While most browsers display em as simply italic, there’s no intrinsic reason why this should be so — it just happens to be the convention. Let’s say that instead we want our em elements 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 the em element 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 element cascades down to the em element. Let’s take a look at what’s happening step-by-step.

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

Font Shorthand Notation

Typing font-family, font-size, and font-style over and over again can get cumbersome. Fortunately, there is a shorthand for all of these properties with a simple name, font. You need merely place the desired values in the proper order. This shorthand only encompasses the properties that begin with “font-”, so if you want to do something else such as underlining text, you still need to use the appropriate property, text-decoration.

Here is the order of the properties:

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 some paragraph classes.

					p {
						font: verdana, sans-serif;
					}
					p.styled {
						font: 12pt verdana, sans-serif;
					}
					p.reallystyled {
						font: bold italic 9pt verdana, sans-serif;
						text-decoration: underline;
						color: #008000;
					}
				

The default paragraph is just Verdana, in whatever font size the page default is currently in. The standard class, styled, is 12pt Verdana. The second class, reallystyled, is 9pt bold italic underlined green Verdana.

The font property makes things a bit more elegant, but keep in mind that some browsers will display styles that are not properly ordered, while others are more strict about following the rules. To be safe, always verify that that your font declarations are in the proper order before proceeding.