CSS: The Definitive Guide, 3rd Edition (16 page)

As you might expect,
lighter
works in just the same way, except it causes the user agent to
move down the weight scale instead of up. With a quick modification of the previous
example, you can see this very clearly:

/*   assume only two faces for this example: 'Regular' and 'Bold'   */
p {font-weight: 900;}   /* as bold as possible, which will look 'bold' */
p span {font-weight: 700;}   /* this will also be bold */
strong {font-weight: lighter;}   /* lighter than its parent */
b {font-weight: lighter;}   /* lighter still */

900  700  400  300  200
.



bold  bold  regular  regular
 regular .

Ignoring the fact that this would be entirely counterintuitive, what you see in
Figure 5-8
is that the main paragraph
text has a weight of
900
. When the
strong
text is set to be
lighter
, it evaluates to the next-lighter face, which is the regular
face, or
400
(the same as
normal
) on the numeric scale. The next step down is to
300
, which is the same as
normal
since no lighter faces exist. From there, the user agent can
reduce the weight only one numeric step at a time until it reaches
100
(which it doesn't do in the example). The second
paragraph shows which text will be bold and which will be regular.

Figure 5-8. Making text lighter

font-size

Figure 5-9. Font characters and em squares

Having established all of that, we turn now to the
absolute-size keywords. There are seven absolute-size values for
font-size
:
xx-small
,
x-small
,
small
,
medium
,
large
,
x-large
, and
xx-large
. These are not defined precisely, but are
relative to each other, as
Figure 5-10
demonstrates:

p.one {font-size: xx-small;}
p.two {font-size: x-small;}
p.three {font-size: small;}
p.four {font-size: medium;}
p.five {font-size: large;}
p.six {font-size: x-large;}
p.seven {font-size: xx-large;}

Figure 5-10. Absolute font sizes

According to the CSS1 specification, the difference (or
scaling
factor
)
between one absolute size and the next should be about
1.5 going up the ladder, or 0.66 going down. Thus, if
medium
is the same as
10px
, then
large
should be the same as
15px
. On the other hand, the scaling factor does not
have to be 1.5; not only might it be different for different user agents, but it was
changed to a factor somewhere between 1.0 and 1.2 in CSS2.

Working from the assumption that
medium
equals
16px
, for different scaling factors, we get the
absolute sizes shown in
Table 5-3
. (The
following values are approximations, of course.)

Further complicating the situation is the fact that different user agents have
assigned the "default" font size to different absolute keywords. Take the Version 4
browsers as an example: Navigator 4 makes
medium
the same size as unstyled text, whereas Internet Explorer 4 assumes that
small
text is equivalent in size to unstyled text.
Despite the fact that the default value for
font-style
is supposed to be
medium
,
IE4's behavior may be wrong, but not quite so wrong as it might first
appear.
^[
*
]
Fortunately, IE6 fixed the problem, at least when the browser is in
standards mode, and treats
medium
as the
default.

Comparatively speaking, the keywords
larger
and
smaller
are simple: they cause the size of an element to be shifted up or down the
absolute-size scale, relative to their parent element, using the same scaling factor
employed to calculate absolute sizes. In other words, if the browser used a scaling
factor of 1.2 for absolute sizes, then it should use the same factor when applying
relative-size keywords:

p {font-size: medium;}
strong, em {font-size: larger;}
This paragraph element contains a strong-emphasis element
which itself contains an emphasis element that also contains
a strong element.

 medium large  x-large
xx-large

Unlike the relative values for weight, the relative-size values are not
necessarily constrained to the limits of the absolute-size range. Thus, a font's size
can be pushed beyond the sizes for
xx-small
and
xx-large
. For example:

h1 {font-size: xx-large;}
em {font-size: larger;}
A Heading with Emphasis added
This paragraph has some emphasis as well.

As you can see in
Figure 5-11
, the
emphasized text in the
h1
element is slightly
larger than
xx-large
. The amount of scaling is
left up to the user agent, with the scaling factor of 1.2 being preferred. The
em
text in the paragraph, of course, is shifted
one slot up the absolute-size scale (
large
).

Figure 5-11. Relative font sizing at the edges of the absolute sizes

In a way, percentage values are very similar to the
relative-size keywords. A percentage value is always computed in terms of whatever
size is inherited from an element's parent. Percentages, unlike the relative-size
keywords, permit much finer control over the computed font size. Consider the
following example, illustrated in
Figure
5-12
:

body {font-size: 15px;}
p {font-size: 12px;}
em {font-size: 120%;}
strong {font-size: 135%;}
small, .fnote {font-size: 70%;}

This paragraph contains both emphasis and strong
emphasis, both of which are larger than their parent element.
The small text, on the other hand, is smaller by a quarter.

This is a 'footnote' and is smaller than regular text.

 12px  14.4px  12px  16.2px   12px
 9px  12px 

 10.5px 

Figure 5-12. Throwing percentages into the mix

In this example, the exact pixel size values are shown. In practice, a web browser
would very likely round the values off to the nearest whole-number pixel, such as
14px
, although advanced user agents may
approximate fractional pixels through anti-aliasing or when printing the document.
For other
font-size
values, the browser may (or
may not) preserve fractions.

Incidentally, CSS defines the length value
em
to be equivalent to percentage values, in the sense that
1em
is the same as
100%
when sizing
fonts. Thus, the following would yield identical results (assuming both paragraphs
have the same parent element):

p.one {font-size: 166%;}
p.two {font-size: 1.6em;}

When using
em
measurements, the same principles
apply as with percentages, such as the inheritance of computed sizes, and so
forth.