A Flexible Base. Now What?

Thus far, we've explored how to set a single font-size for the entire page. Naturally, we'll want certain design elements to reflect various sizes throughoutheadings, lists, subtitles, navigation, tableseach potentially having a different size than the default. But what is the best way to handle declaring additional sizes, whether smaller or larger than our base?

I'm recommending a method that's been successful for me, one that I believe is easy to grasp and that makes it easy to modify, add, or edit sizes throughout the life cycle of a Web site.

SET IT AND FORGET IT

The only absolute-keyword value we'll set in the entire style sheet is the base on the <body> element, as we've been discussing throughout the chapter:

note

To get things looking consistent, you may also opt to add the Box Model Hack for IE5/Win, discussed earlier.

 body {   font-size: small;   }

You'll notice that it's a close match (Figure 1.5). This will obviously vary slightly from browser to browser, and depends on how that software chose to render each keyword. But in general, using small as a base size is a bit like setting text at 12px (provided the user hasn't changed settings). Sometimes this helps designers get a handle on where to begin with keyword values.

Figure 1.5. Here's a comparison of text sized with the `small` keyword versus `12px`. The result, at default medium settings, is very similar.

USE PERCENTAGES TO STRAY FROM THE BASE

From this base of small, we'll use percentages to modify the size in either direction. Using a percentage is a simple way of visualizing what size type you'd like a certain element to be. Figure 1.6 illustrates how a percentage could increase or decrease the font size from a base keyword.

Figure 1.6. Percentages can work in either direction from a base keyword.

For instance, if we wanted all <h1> elements to be quite a bit larger than the default size of small, we'd simply declare it:

 body {   font-size: small;   } h1 {   font-size: 150%;   }

Since <h1> elements are always contained within the <body> element, we can be sure that the size will be 150% of small (Figure 1.7).

Figure 1.7. The `<h1>` element is set at 150% of the base keyword `small`.

Similarly, you may also want to make certain paragraphs of text smaller than the default, in this case, smaller than small. In Figure 1.8, I've created a note class and attached it to a short paragraph.

[View full width]
 <p class="note">This is the "note" class that I'd like to appear slightly smaller than  default text.</p>

Figure 1.8. The `note` class is set at 85% of the base keyword `small` (and gray in color).

I intend to set this paragraph slightly smaller in size to the default, so I'll add a declaration that uses a percentage below 100 to bring it down.

 .note {   font-size: 85%;   }

You can begin to see that we could assign percentages for any element we'd like throughout the page, whether it be smaller or larger than the base we've set for the <body>.

For example, a simplified style sheet where certain elements are sized with percentages might look something like this:

 body {   font-size: small;   } h1 {   font-size: 150%;   } h2 {   font-size: 130%;   } h3 {   font-size: 120%;   } ul li {   font-size: 90%;   } .note {   font-size: 85%;   }

We have declared descending values for three levels of headings, made unordered list items slightly smaller, and included a note class that we could assign to any element we'd like to be smaller than the default. This is a rudimentary example but should illustrate the two-step concept: set a base keyword, and then use a percentage to increase or decrease other elements. Change your base, and the rest will follow.

A nice advantage to using the base-plus-percentage model is that, should you decide to change the default, you need only change the single declaration on the <body> element. Everything else that's been assigned a percentage is working off that top-level element's size, so changing from small to large will, in turn, affect other elements proportionally. That can certainly come in handy, even if you decide at some point that you'd rather specify a base size using an alternate unit.

For that same reason, it makes it easier for those users who like to create their own user style sheets that override the site's defaults. A single rule that modifies your base size will in turn affect the entire page, proportionally.

SET IT AND FORGET IT

Figure 1.5. Here's a comparison of text sized with the small keyword versus 12px. The result, at default medium settings, is very similar.

USE PERCENTAGES TO STRAY FROM THE BASE

Figure 1.6. Percentages can work in either direction from a base keyword.

Figure 1.7. The <h1> element is set at 150% of the base keyword small.

Figure 1.8. The note class is set at 85% of the base keyword small (and gray in color).

Figure 1.5. Here's a comparison of text sized with the `small` keyword versus `12px`. The result, at default medium settings, is very similar.

Figure 1.7. The `<h1>` element is set at 150% of the base keyword `small`.

Figure 1.8. The `note` class is set at 85% of the base keyword `small` (and gray in color).