Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

174 CHAPTER 4 Getting started with CSS3

FIGURE 4-9 he serif, sans serif, and monospaced font familiesT

Serif and sans serif font families have characters of proportional width, meaning that char-

acters have different widths, unlike the monospaced font families.

Setting the font-family property

In your style rule, you can use the font-family property to set the typeface of the elements

that match the selector. Be careful when specifying the font family because the one you

specify must exist on the user’s computer. If the font family doesn’t exist, the browser will

use its default font. To be safe, it’s usually best to specify a common font family such as Arial,

Courier New, Georgia, Times New Roman, or Verdana. Arial and Verdana are sans serif fonts

that are easy to read and commonly used.

You can specify a list of font families in your style rule. The browser will attempt to use the

first font family specified. If the browser doesn’t have the first font family, it will attempt to

use the second font family, and so on. The following example depicts multiple font families

being specified.

h1 { font-family: arial, verdana, sans-serif; }

h1 { font-family: "times new roman", serif; }

h1 { font-family: "courier new", monospace; }

In this example, the last font family listed is actually the name of the generic group, which

instructs the browser to use a font family from that group if the browser doesn’t have the

other font families that were first specified.

What other options do you have when you are trying to specify a font family that the user

probably won’t have? In the past, developers would create a GIF image that was a picture

of the text and then use the image on the page. If you do this, you should always populate

the alt attribute with the text. Remember that Lesson 1 covers the use of @font-face, which

enables you to provide a link to the font you want to use.

Specifying the font size

To set the size of the font, you can set the font-size property. Font sizes can be specified by

using absolute units or relative units, and there are many ways to set the size. The absolute

length units are useful when the output environment is known because absolute length units

are fixed in relation to one another and anchored to some physical measurement. The follow-

ing is a list of the available measurement units.

■■em A relative measurement multiplier of the parent element’s computed font size

■■px An absolute measurement pixel unit, 96 pixels per inch