HTML and CSS Reference
In-Depth Information
SIZING TEXT USING REMS
CSS3 introduces a few new size units (see
www.w3.org/TR/css3-values);
one in par-
ticular that seems stable and is getting good browser support is the rem, or root em.
This makes text styling a lot easier because all sizes defined in rems are relative to
the text size of the root element—
<html>
. Rems get rid of the complications caused
by ems and percentages: They work relative to the sizing of their parent elements.
So, for nested elements, you'll often have to do all kinds of weird calculations to
work out what values to use to get the font size you want. Consider the following
example (see rem_example.html in the chapter1 code download folder):
<h1>Example <em>rem</em> exploration</h1>
<p>This example is written to show why the new CSS3 rem unit
p
is useful. It allows you to much more easily size text and
p
boxes, as rem sizing is always relative to the size of the
p
<code><html></code> element.</p>
Here you can start off by sizing your text like so:
html {
: ;
}
h1 {
: ;
}
p {
: ;
}
This is simple CSS. You start with the tried and tested 62.5% font setting to
take the base font size for the whole document down to 10px (62.5% of 16px, the
standard default body text font size in all browsers). Then you set the
<h1>
size
