Section 6.2. Changing Font Size | Dreamweaver CS3: The Missing Manual

6.2. Changing Font Size

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 materialspicas, points, inches, and so ondon'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 in Chapter 13 (Section 13.1). Only a few of the measurement unitspixels, keywords, ems, and percentagesmake sense when you're sizing text for a computer monitor. The rest of this section explains how they work.

6.2.1. Using Pixels

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 in Section 6.2.2 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;

Note: Don't include a space between the number and the unit type. For example, 36px is correct, but 36 px isn't.

FREQUENTLY ASKED QUESTION
The Problem with Pixels

It sounds like pixel values give me complete control over text size. Why bother using any other kind of text- sizing value ?

Unfortunately, in Internet Explorer 6 (and earlier) for Windows, there's one serious limitation to pixel text sizes: The viewer gets no control over text size. Some peopleespecially those with limited eyesightuse IE's View Text Size command to pump up text to a size thats easier to read. However, IE won't resize any text that's sized with a pixel value. IE adheres to what the designer wants, with no concern for the person behind the wheel of the browser.

Whether or not to use pixel values is something of a holy war in Web design circles. Many Web developers believe pixelsized text creates an accessibility issue . That is, it potentially limits access to your site for people with disabilities .

Internet Explorer 7, like most other Web browsers currently available, does let you resize pixel-sized text. As IE 7 becomes more popular, you'll be able to use pixel values without worrying about the limitations of IE 6.

Meanwhile, the best you can do is consider your audience. If you're creating a site that's aimed at older folks or destined for use in schools , then use one of the resizable text options like keywords, ems, or percentages. Anywhere you're likely to find a combination of older computers and people with special needs, make accessibility more of a priority.

6.2.2. Using Keywords, Percentages, and Ems

Three ways of sizing text with CSSkeywords, percentages, and emswork 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 size for text using CSS, a Web browser falls back on its pre-programmed settings. In most browsers, text inside a non-header tag's displayed 16 pixels tallthat'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, its View Text Size Increase (or Decrease); 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.

6.2.2.1. Keywords

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's the same as the browser's base font size. Each of the other options decreases or increases the size by a factor of 1.2. For example, say the base text size is 16 pixels. Setting the font size to large makes the text 19 pixels, while a setting of small sets it to 13 pixels. If your visitor adjusts the text size, large simply multiplies that size by 1.2, whatever it may be. Some eagle-eyed nerdlington could choose View Text Size Smaller to really cram a lot of fine print on the screen. Your large setting boosts his 13-point text to a healthy 16not exactly large, but still bigger than any base-sized text on the same page.

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.

Note: Due to a bug in Internet Explorer 5 for Windows, using these keywords results in text that displays one size smaller than in other browsers. For example, small comes out as x-small in IE 5. (To defeat this bug, check out the section called "Setting the font size" on this Web page: http://simon.incutio.com/archive/2003/05/20/defeatingIE5.)

6.2.2.2. Percentages

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 through the browser's Options (or Preferences) or via the View menu (see Section 6.2.2). Whatever setting's been chosen , the base text size for a particular browser's 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 2 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% 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-3, 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-3. 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.

6.2.2.3. Ems

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% ; (opposite page).

 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-3 for an example. The bottom paragraph's 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.

WORKAROUND WORKSHOP
Untangling the Nest

Inherited font-size values can cause problems for nested lists. (See the bottom-right square of Figure 6-3.) If you create a style like ul { font-size: 75% } , then a nested list, which is a <ul> tag inside of another <ul> tag, is set to 75 percent of 75 percentmaking the text in the nested list smaller than the rest of the list.

To get around this conundrum , create an additional descendent selector style (Section 3.1) like this: ul ul {fontsize: 100%} . This style sets any ul tag inside of a ul to 100 percent; in other words, 100 percent of the surrounding ul tag's font size. In this example, it keeps any nested lists to 75 percent.

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 to 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.