HTML and CSS Reference
In-Depth Information
As an example, consider the following markup fragment. It will have the result shown
in
Figure 5
.
<p> This paragraph has the same font size as the root element thanks to inheritance.</p>
<div style="font-size: 30px; background: silver;">
<p style="font-size: 1em;">This paragraph has the same font size as its parent
element.</p>
<p style="font-size: 1rem;">This paragraph has the same font size as the root
element.</p>
</div>
Figure 5. ems versus rems
Basically,
rem
acts as a reset for font size: no matter what relative font sizing has hap-
pened to the ancestors of an element, giving it
font-size: 1rem;
will put it right back
where the root element is set. This will usually be the user's default font size, unless of
course you (or the user) have set the root element to a specific font size.
For example, given this declaration,
1rem
will always be equivalent to
13px
:
html {font-size: 13px;}
However, given
this
declaration,
1rem
will always be equivalent to three-quarters the
user's default font size:
html {font-size: 75%;}
In this case, if the user's default is 16 pixels, then
1rem
will equal
12px
. If the user has
actually set their default to 12 pixels—a few people do this—then
1rem
will equal
9px
;
if the default setting is 20 pixels, then
1rem
equals
15px
. And so on.
Of course, you are not restricted to the value
1rem
. Any real number can be used, just
as with the
em
unit, so you can do fun things like set all of your headings to be multiples
of the root element's font size:
h1 {font-size: 2rem;}
h2 {font-size: 1.75rem;}
h3 {font-size: 1.4rem;}
h4 {font-size: 1.1rem;}
h5 {font-size: 1rem;}
h6 {font-size: 0.8rem;}
As of mid-2012, support for
rem
was fairly widespread, missing only in
older versions of browsers that could still be hanging around.