HTML and CSS Reference
In-Depth Information
Points and picas are traditional typographic measures. here are 12 points
to a pica and 6 picas to an inch. herefore, a font size of 18 points is equivalent
to 1.5 picas, or .25 inches. Ems and exes are also typographic measures. Like
a percentage value, they specify sizes relative to the element's computed size
rather than an absolute number of units. When type was set using individual
letters cast in lead alloy, font sets included spacer characters of diferent sizes.
An em-quad was a square space just large enough to contain an uppercase M.
Exes are squares the size of a lowercase x. Obviously, a larger font will have
larger ems and exes in absolute terms. However, in CSS, one em is equivalent
to 100 percent of the current font size. To illustrate, consider the following
three CSS statements:
#main
{ font-size: medium; }
#main p.first
{ font-size: 1em; }
#main p.second
{ font-size: 100%; }
In a division element with
id="main"
, the two nested paragraphs with classes
irst and second will have the same font size, measured in pixels, if they are in
the same font family. If the two paragraphs are of diferent font families, they
may appear to have diferent font sizes. An em measure is only a guideline
for font designers, who are free to make their letters larger or smaller as they
please. Here are some examples:
blockquote
{ font-size: 18pt; }
p.event
{ font-size: 16px; }
#intro
{ font-size: 7mm; }
address
{ font-size: 1.75em; }
Font sizes given in pixels are relative to the browser's viewport and therefore
are dependent on the resolution of the reader's display device and the viewer's
distance from the display. Pixels are not simple screen dots anymore. However,
as a rough guide, a 17-inch monitor (measured diagonally) set to a resolution
of 1024 by 768 pixels is very close to 72 pixels per inch. Because this is now
considered the low end of display screen technology, most PC users are look-
ing at a screen with approximately 96 pixels per inch. Mobile and tablet users
may have resolutions and relative pixel sizes more or less than that.
Specifying a font size in pixels can provide the exact control a web author
needs to align text elements with images or other text elements. No matter
what font family a reader's browser may substitute, the text will still occupy
