HTML and CSS Reference
In-Depth Information
Table 4-3.
Absolute-size Keywords for the font-size Property
Keyword
xx-small
x-small
small
medium
large
x-large
xx-large
Scaling factor
3/5
3/4
8/9
1
6/5
3/2
2/1
3/1
Equivalent
heading
h6
h5
h4
h3
h2
h1
HTML font size
1
2
3
4
5
6
7
The default value of
font-size
is
medium
, which browsers use for all text other than headings. Although
these keywords are rarely used, the scaling factor and equivalent HTML heading sizes provide a useful guideline
for setting your own sizes using lengths or percentages. For example, the suggested scaling factor for a level 1
heading is double the size of ordinary text, but the suggested smallest size is three-fifths, not half.
The HTML font sizes in Table
4-3
refer to the
size
attribute in the deprecated
<font>
tag. They're included
here as a guide in case you need to convert an old site that uses outdated markup.
There are just two relative-size keywords:
larger
smaller
Using one of these keywords increases or decreases the size of the font relative to the font size of the parent
element. For example, if the parent element has a font size of
medium
, using
larger
changes the current element's
font to
large
.
Using Length to Set Font Sizes
Tables 3-1 and 3-2 in the previous chapter list the units of measurement you can use to specify length. When
designing web pages for viewing onscreen,
em
and
px
are the most important. The
rem
unit will gain importance
when Internet Explorer (IE) 8 and earlier no longer have a significant market share.
Apart from minor variations between browsers, CSS pixels are a fixed size. As a result, using
px
is much
simpler than
em
, which is a relative measurement. The default size browsers use for the text in paragraphs is
16px
.
To make the text slightly smaller, you can set the font size in pixels like this:
p {
font-size: 14px;
}
To do the same with
em
, you need to calculate the ratio of
14px
to the default
16px
—in other words,
0.875
. So
the equivalent style rule becomes this:
p {
font-size: 0.875em;
}
■
Tip
