CHAPTER 1 DESIGN PATTERNS: MAKING CSS EASY!Flexible Units of Measure
Unit Description
em em is the font-size assigned to an element. In the case of the font-size property, it is the font-size^
assigned to the element’s parent. For example, 5em is five times the font-size. Ems are a useful
measure when you want to size an element relative to the size of its text. This allows the layout of your
documents to flex with the size of the text.
You can use ems to roughly size the width of an element to fit a certain number of characters. You can
do this by multiplying the number of characters by 0.625 to create the em measurement. For example,
if you want an element to be 10 characters wide, you can set it to 6.25em.
In Internet Explorer 7 and earlier versions, a user can use the View ➤ Text Size menu to enlarge or
shrink the overall size of the text. When you assign font-size:medium to
font-size properties, Internet Explorer sizes text relative to the text size chosen by the user. This
makes your document more usable to users who want to see text larger or smaller than normal. If you
assign a fixed measurement to font-size, Internet Explorer uses the fixed size and ignores the text
size chosen by the user.
ex ex is the height of the letter “x” of an element’s current font. This measurement is related to the em, but
is rarely used.
(^)
(^)
Fixed Units of Measure
Unit Description
in in stands for logical inches.
in is a “logical” inch because the actual physical size depends on the monitor and settings chosen by
the operating system and/or user. The dot pitch of a monitor determines the physical size of its pixels,
and thus the physical size of the logical inch. Various operating systems have different settings for dpi.
Common values are 72 dpi (Macintosh), 75 dpi (Unix), 96 dpi (Windows Normal), 100dpi (Unix Large),
and 120 dpi (Windows Large). Since the dots on a monitor do not change size, the logical inch is
physically larger at 120 dpi than at 72 dpi because the logical inch contains more dots. Thus, setting
the width of an element to 96px is the same as setting it to 1in on Windows and 1.33in on a Mac
running at 72 dpi.
The problem with logical inches and all other fixed units of measure is that they do not scale well on
systems with different dot-per-inch settings. What may seem just right on Windows at 96 dpi may be
too large or too small on other systems. Thus, percentages or ems work best when cross-platform
compatibility is desired.
px px stands for pixels. Pixels are useful when you want to precisely align elements to images because
images are measured in pixels.
pt pt stands for point. A point is 1/72 of a logical inch.
pc pc stands for picas. A pica is 12 points or 1/6 of a logical inch.
cm cm stands for logical centimeters. There are 2.54 centimeters per logical inch.
mm mm stands for millimeters. There are 25.4 millimeters per logical inch.