Varying the size of text on a web page is a great way to create visual interest and direct your visitors' attention to important areas of a page. Headlines in large type sizes capture your attention, while copyright notices displayed in small type subtly recede from prominence.
The font-size property sets text size. It's always followed by a unit of measurement, like so:
font-size: 1em;
The value and unit you specify for the font size (in this example, 1em) determine the size of the text. CSS offers a dizzying selection of sizing units: keywords, ems, exs, pixels, percentages, picas, points, even inches, centimeters, and millimeters.
Units of measurement commonly used with printed materials—picas, points, inches, and so on—don't work well on web pages because you can't predict how they'll look from one monitor to the next. But you may have occasion to use points when creating style sheets for printer-friendly pages, as described on Creating Print Style Sheets. Only a few of the measurement units—pixels, keywords, ems, and percentages—make sense when you're sizing text for a computer monitor. The rest of this section explains how they work.
Varying pixel values are the easiest to understand, since they're completely independent from any browser settings. When you specify, for example, a 36-pixel font size for an <h1> tag, the web browser displays text that's 36 pixels tall, period. Web designers cherish pixel values because they provide consistent text sizes across different types of computers and browsers. (Well, not all web designers. See the box below for one limitation of pixel sizing.)
To set a pixel value for the font-size property, type a number followed by the abbreviation px:
font-size: 36px;
Three ways of sizing text with CSS—keywords, percentages, and ems—work by either adding to or subtracting from the text size already on the viewer's browser screen. In other words, if you don't specify a text size using CSS, a web browser falls back on its pre-programmed settings. In most browsers, text inside a non-header tag is displayed 16 pixels tall—that's called the base text size.
Web surfers can adjust their browsers by pumping up or dropping down that base size. In Internet Explorer, for example, you can choose View → Text Size and select an option such as Larger or Smaller to adjust the text size on the screen; in Firefox 2, it's View → Text Size → Increase (or Decrease); in Firefox 3, it's View → Zoom; and in Safari the menu options are View → Make Text Smaller and View → Make Text Bigger.
When you resize text with CSS, the browser takes the base text size (whether it's the original 16 pixels or some other size the viewer ordered) and adjusts it up or down according to your keyword, em, or percentage value.
CSS provides seven keywords which let you assign a size that's relative to the base text size: xx-small, x-small, small, medium, large, x-large, and xx-large. The CSS looks like this:
font-size: large;
The medium option is the same as the browser's base font size. Each of the other options decreases or increases the size by a different factor. In other words, while each size change is supposed to be a consistent increase or decrease from the previous size, it isn't. Basically xx-small is the equivalent of 9 pixels (assuming you haven't adjusted the base font size in your browser); x-small is 10 pixels, small is 13 pixels, large is 18 pixels; x-large is 24 pixels, and xx-large is 32 pixels.
Keywords are pretty limited: You have only seven choices. When you want more control over the size of your text, turn to one of the other font-sizing options discussed next.
Like keywords, percentage values adjust text in relationship to the font size defined by the browser, but they give you much finer control than just large, x-large, and so on. Every browser has a pre-programmed base text size, which in most browsers is 16 pixels. You can adjust this base size in your browser's preferences. Whatever setting has been chosen, the base text size for a particular browser is equivalent to 100 percent. In other words, for most browsers, setting the CSS percentage to 100 percent is the same as setting it to 16 pixels.
Say you want to make a particular headline appear two times the size of average text on a page. You simply set the font size to 200 percent, like so:
font-size: 200%;
Or, when you want the text to be slightly smaller than the default size, use a value like 90 percent to shrink the font size down a bit.
The above examples are pretty straightforward, but here's where it gets a little tricky: Font size is an inherited property (see Chapter 4), meaning that any tags inside of a tag that has a font size specified inherit that font size. So the exact size of 100 percent can change if a tag inherits a font-size value.
For example, at the lower left of Figure 6-5, there's a <div> tag that has its font size set to 200 percent. That's two times the browser's base text size, or 32 pixels. All tags inside that <div> inherit that text size and use it as the basis for calculating their text sizes. In other words, for tags inside that <div>, 100 percent is 32 pixels. So the <h1> tag inside the <div> that has a font size of 100 percent displays at two times the base-text size for the page, or 32 pixels.
Figure 6-5. The three most common units for sizing text: pixels, ems, and percentages. Watch out for inherited text sizes when using ems or percentages, as explained on the opposite page. If you notice that some text on a page looks unusually large or small, then check to see if the offending text isn't inside a tag that inherits a font size from another tag.
Once you understand percentages, you know everything you need to understand ems. The two work exactly the same way, but many web designers use ems because of its roots in typography.
The word em comes from the world of printed (as in paper) typography, where it refers to the size of a capital letter M for a particular font. As it's worked its way into the Web world, an em in CSS no longer means the same thing as in typography. Think of it as referring to the base text size. That is, a value of 1em means the same thing as a value of 100 percent, as described in the previous section. You can even say it the opposite way: A percentage value is just an em multiplied by 100: 5em is 50 percent, .75em is 75 percent, 3em is 300 percent, and so on.
For example, this CSS does the exact same thing as font-size: 200%;.
font-size: 2em;
Note
As with pixel values, there's no space between the number and the word em. Also, even if you specify more than one em, you never add an s to the end: 2.5em, never 2.5ems.
When it comes to inheritance, ems also work just like percentage values. See the upper right of Figure 6-5 for an example. The bottom paragraph is set to .75em, which, since the <p> tag inherits the 2em (32 pixel) setting from the <div> tag, works out to .75 x 32, or 24 pixels. Inside the <p> tag are two other tags that also have a font-size setting of .75em. The innermost tag, a <strong> tag, is set to .75em or, in essence, 75 percent of its inherited size. There's a lot of math to this one: 32 pixels (inherited from the <div> tag) x .75 (inherited from the <p> tag) x .75 (inherited from the <em> tag) x .75 (the <strong> tag's own font size). The result of this brainteaser is a text size of roughly 14 pixels.
Note
Internet Explorer 6 and earlier sometimes has problems displaying text when only em units are used. You have two ways around this: Either stick with percentage values or set the font size for the body of the page to a percentage and then use em units to size other text. For some mysterious reason, this trick seems to fix the bugs in IE 6.
Tip
You can make type stand out on a page in many different ways. Making certain words larger than others or making some text darker, lighter, or brighter visually sets them apart from the surrounding text. Contrast is one of the most important principles of good graphic design; it can help highlight important messages, guide a reader's eye around a page, and generally make understanding a page easier. For a quick overview of typographic contrast, check out this page: www.creativepro.com/story/feature/19877.html.