Web Design

101

CHAPTER

Formatting Your Pages 4

Ems and Exes

An em is a unit of measurement defined as the width of a capital letter M in
the current font. In practice, browsers treat an em as an equivalent to the
font size, so if your text is 16 pixels, 1 em would equal 16 pixels. If your text
is 14 pixels, 1 em equals 14 pixels. Exes are defined as the width of a
lowercase x, but most browsers treat it simply as 1/2 em. em = 16 pixels

16 pixels

M

ex = 1/2 em

x

Ex

Percents

You can also measure elements using percentages. CSS rules inherit from other rules,
so a property with a percentage value will be that percent of whatever the element in
question’s parent element is, or failing that, the size defined in the body. For example,
if you set the size of the body at 90%, and then a paragraph at 80%, the paragraph’s
size would be 80% of 90% of the default size. 50%
0%

75%

ParentParent100%

HeaderHeader

BodyBody

IE and Font Scaling

Browsers are supposed to allow users to resize the text on their screen. However,
IE does not quite follow this rule; instead, it allows the user to resize text only if
the designer set that text using a relative unit of measure. Therefore, this text
scaling works in IE only if you set your font size in ems, exes, or percents. Note
that this applies only to font size; other properties are not affected.

TT

Specifying Units

CSS does not define a default unit of measure, so you must always provide it. Most
units have associated abbreviations, so if you want to use pixels, you can write px.
The only time this does not apply is when the value is 0, because a unit is obviously
not needed.

CSS units of measure abbreviations

Absolute measurement

Relative measurement

points pt

picas pc

centimeters cm

inches in

millimeters mm

pixels px

em space em

x space ex