Expanding Your Vocabulary - Head First HTML and CSS - page 330

There's one more way to specify font sizes: keywords. You
can specify a font size as xx-small , x-small , small ,
medium , large , x-large , or xx-large and the browser
will translate these keywords into pixel values using defaults
that are defined in the browser.

xx-small
x-small

small

medium

large

body {

font-size: small;

x-large

}

xx-large

So, how should I specify my font sizes?
You've got quite a few choices for specifying font sizes: px , em , percentages, and
keywords. So, which do you use? Here's a recipe for specifying font sizes that
will give you consistent results for most browsers.

Choose a keyword (we recommend small or medium) and specify it as the
font size in your body rule. This acts as the default size for your page.

1

Specify the font sizes of your other elements relative to your body font size
using either em or percentages (the choice between em and percentages
is yours, as they are essentially two ways to do the same thing).

2

Nice recipe, but what's good about it? By defining your fonts relative to the
body font size, it's really easy to change the font sizes in your web page simply
by changing the body font size. Want to redesign the page to make the fonts
larger? If your body font size value is small , simply change it to medium , and
voilà — every other element will automatically get larger in proportion because
you specified their font sizes relative to the body's font size. Better yet, say your
users want to resize the fonts on the page. Again, no problem; using this recipe,
all the fonts on the page will automatically readjust.