WEB STANDARDS CREATIVITY

164
The almighty em
An elastic layout’s secret weapon is the em. In both the
print and web worlds, an em is a square of a typeface size,
based on either the width of its widest character or the
distance from the bottom of its lowest descender (such as
the stem of a lowercase p) to the top of its highest ascender
(such as the stem of a lowercase b) or diacritical mark
(Figure 7-7). In CSS, an em is based on the font-size of
the parent element. Thus, if I specify the width of my layout
in ems, it will expand and contract as the text is
resized, maintaining the proportion between the text size
and the length of the line, thereby keeping my
66-character line intact.
Figure 7-7. A Georgia em
The elasticity of my layout will be suitable for most desktop
browser resolutions, but I still want its intended
proportions (Figure 7-8) to sit comfortably in an 800✕600
browser window, so a native page width of 740px is prudent.
In order to specify that width in ems, I’ll have to do
some math.
25% 50%
25%
Figure 7-8. Approximate layout proportions
My main content area (#main) needs to have a 66-character
width, which also needs to be about 50% of the
layout’s full width (#wrap). If I set a block of Georgia text
with a width specified in ems, count the characters
(including spaces) in a few lines, and divide the average of
those lines by the width of the text block, I’ll discover that
Georgia averages about 2.2 characters to an em. Therefore,
a 66-character measure would be 30em, which
would make #wrap 60em. If I divide 740px by 60, I get
12.3px, and voila! I have a font-size.
But there’s a problem. Internet Explorer will not resize
text with a font-size specified in pixels. Luckily, modern
browsers render font-size keywords pretty consistently,
and I know that font-size: small resolves to about
13px. With this figure and a little more math, I can
achieve proportions well within the range of my desired
results.
First, I’ll need to recalculate #wrap’s width, since it is
based on my font-size, which is now a bit larger. If I
divide 740px by 13px, #wrap’s new width (rounded up) is
57em. To maintain my 66-character line, #main’s width
will remain 30em, which is 53% (again, rounded up) of
#wrap’s width. Finally, accounting for 2% margins for each
column will yield the proportions shown in Figure 7-9.