HTML and CSS Reference
In-Depth Information
Picas
Picas(
ppc
)
Another typographical term. A pica is equivalent to 12 points, which means there are 6
picas to an inch. The capital letters of text set to 1 pica should be one-sixth of an inch tall.
For example,
p {font-size: 1.5pc;}
would set text to be the same size as the example
declarations found in the definition of points. Keep in mind previous warnings.
Relative Length Units
Em-height
Em-height(
eem
)
This refers to the em-height of a given font. In CSS, the em-height is equivalent to the
height of the character box for a given font, which is to say that computed value of
font-
size
. Ems can be used to set relative sizes for fonts; for example,
1.2em
is the same as
saying
120%
.
Root element em-height
Root element em-height(
rem
rem
)
This refers to the em-height of the root element (in HTML and XHTML, the
html
ele-
ment). Otherwise it is the same as
em
.
X-height
X-height(
eex
)
This refers to the x-height of the font. However, the vast majority of fonts do not include
their x-height, so many browsers approximate it (poorly) by simply setting
1ex
to be equal
to
0.5em
. The exception is IE5/Mac, which attempts to determine the actual x-height of a
font by internally bitmapping a very large “x” and counting pixels!
ZERO width
ZERO width(
cch
)
This refers to the width of a single zero (Unicode +0300, “ZERO”) in the current font fam-
ily and size.
Pixels
Pixels(
ppx
)
A pixel is a small box on screen, but CSS defines pixels more abstractly. In CSS terms,
a pixel is defined to be about the size required to yield 96 pixels per inch. Many user
agents ignore this definition in favor of simply addressing the pixels on the monitor. Scal-
ing factors are brought into play when page zooming or printing, where an element
100px
wide can be rendered more than 100 device dots wide.
