CSS Measurements

CSS rules can be declared to control text height, text spacing, border widths, spacing between
any element and its neighbor—pretty much any necessary measurement you need.
One of the strengths of a CSS-based design is its ability to remain flexible. As a designer,
you want your finely crafted masterpieces to look the same for every end user, and the desire to
pin elements down with exact measurements can be very tempting. On the flip side, most web
designers are aware of the inherent flexibility of the Web as a viewing platform, and are keen to
explore methods of customization and ensure their creations are viewed in the best context for
the end user.
Two options of measurement are available—absolute and relative. The former seeks to
freeze a design, ensuring widths, heights, and so on are not adjusted no matter how the site is
viewed. The latter enables web pages to be manipulated by the user or viewing device. So long
as web designers apply a measure of control in their style sheets, relative measurements can
actually do a much better job of tightening the design while also making it bulletproof in
display terms.

Absolute Measurements

 
Absolute values have a fixed, specific measurement. They let you be exact in your measurements
and control the display of your web pages. Absolute values are inches (in), centimeters
(cm), millimeters (mm), points (pt), and picas (pc) as Table 2-1 describes.

Unit      Description
in         Absolute measurement in inches.
cm       Absolute measurement in centimeters.
mm     Absolute measurement in millimeters.
pt        Absolute measurement in points. A point is 11/72 of an inch.
pc       Absolute measurement in picas. A pica is equivalent to 12 points, or 6 of an inch.

Absolute measurements will only give the desired results if the browser knows how many
pixels are on the screen and how big the screen is. Often, this is not the case. Not all computers

know how big the screen is, as not all screens tell the computer how big they are. In these cases,
the browser must make a guess.
It is my pleasure to inform you that for almost all day-to-day CSS design, no absolute
measurements are needed, and to keep things on course, we can skip straight to the much
more interesting relative measurements.

Relative Measurements

Relative measurements have no fixed, specific value. Instead, they are calculated in comparison
to an inherited value. Relative values are percentage (%), x-height (ex), ems (em), and pixels
(px), as Table 2-2 describes.

Unit       Description
%          Measurement as a percentage relative to another value
ex          Measurement relative to a font’s x-height, determined by the height of the font’s lowercase letter x
em         Relative measurement for the height of a font in em spaces
px          Relative measurement in screen pixels

Why Use Only Relative Measurements?

Your web sites will be viewed primarily on computer screens, but at what screen resolution and
on which browser? Some end users will view your site on PDAs, cell phones, projectors, or even
televisions.
Each end device has its own quirks and unique methods of display. Consider also that many
users manually configure their devices to suit their own preferences (think screen resolutions), so
it’s imperative that your design is not compromised in such situations.
A very important issue in web design is accessibility—ensuring all visitors can access all of
your content. Relative measurements are proven to provide the best solution for text resizing
and the knock-on effect this has on other page elements, and can therefore be considered best
practice.
While relative values give the designer less absolute control, they do create a better experience
for the end user. Let’s look at the primary relative measurements one by one, and consider
how they apply to text size.

Pixels

Pixel measurements give designers the most control over their layouts. By far the most consistent
unit of measurement, pixels are most commonly used for declaring the margin, padding,
borders, height, and width of custom elements such as containers, columns, and buttons, and can
be successfully combined with other relative measurements for all kinds of layout requirements.

Pixels are not, however, the best option for sizing text—text sized with pixels will ignore
user preferences, so if a low-vision user has set his or her browser to always show text at 20 pixels,
this will often be overridden by your pixel-based declarations.
Pixel-sized text offers consistency across most end devices. However your pages are viewed,
and at whatever resolution, 11px text should always scale appropriately with text set at other
pixel sizes. Thus in an ideal world, we could all use pixels without worry, safe in the knowledge
that our designs will retain their integrity on any platform and in any situation. Sadly, it isn’t an
ideal world, as there is a rather popular browser called Internet Explorer to consider.

Consider IE/Win Users
It is very important to consider the fact that an IE/Win user cannot use the browser’s text resizing
tools to resize pixel-sized text. An option is to use a style switcher, which gives users an on-page
option of adjusting viewing preferences. It is preferable to do this with PHP or similar languages.
JavaScript-based style switcher scripts are available and make switching seem seamless, but it
is always important to consider users who have JavaScript switched off. A brilliant example can
be found in Chris Clark’s “Build a PHP Switcher” article at the super-useful A List Apart web site
(www.alistapart.com/articles/phpswitch). Another important factor with style switchers is
that many users might miss the option, or fail to understand the point of it.
To ensure all end users can enforce their own viewing preferences upon your design, it is
strongly suggested that you declare font size using the em measurement (examples of which
follow throughout the “Ems” section).

Percentage

Providing incredible flexibility and often the solution to adventurous layouts is the percentage
measurement. Percentage values are always relative to another value, such as a width or height
declared in the parent element. In other words, a percentage can only be declared in relation
to a defined size earlier in that rule, within a parent element, or based on the width of the
browser window.
Percentage is particularly powerful for layout, and is an integral ingredient of liquid designs
where pages and their elements stretch to fit the browser window. You can learn more about
that aspect of percentage in Part 2 of this book.
Caution must be applied with percentage values, where inheritance can cause chaos.
While pixels and ems retain a modicum of control, the results of percentage values can end up
somewhat different than what you might expect when calculated by the browser, and as a
result layouts can be chewed and elements misplaced or shunted underneath each other.

Example
Here the percentage value is given for line-height, used to control the distance between the
lines of text, and relates directly to the font-size value within the rule.
/* Define default paragraph values */
p {
font-size:10px;
line-height:120%;
}

In this case, line-height will be applied to the text as a pixel value that is 120% of 10px, which
gives a line height of 12px.

Ems

It is a great shame that the humble em is the most misunderstood unit of relative measurement
in CSS, as it is by far the most flexible, and is ideally suited to a design principle where the end
user’s viewing device and text preferences are unpredictable.
The origin of the word itself is useful, for it stems from the idea of an em roughly equaling
the size of an uppercase letter M, hence it is pronounced “emm.” However, in reality an em is
actually larger than that. The em is a traditional typographic measurement, though because some
fonts don’t even have an M in them, the term has come to mean the height of the given font.
The thing about ems is that they make your style sheets scalable. Unlike the traditional,
typographic em, the CSS measurement can be employed to define the lengths (and by “length”
I mean both horizontal and vertical) of almost any CSS property. This makes it especially powerful
when applied to fonts and their containing elements. Resize the text with the browser tools,
and the containing element (be it a column, header, or more immediate container) can scale
with it. Reduce that text, and the scaling works the other way too. Remember that IE/Win will
not allow users to resize text that has been sized in pixels.

So How Do Ems Scale?
Well, an em is a measurement equal to the size of the type. Therefore, if within a given element
the font-size is set to 11 pixels, one em is equal to 11 pixels. If the font-size in another element
is 30 pixels, one em in that element is equal to 30 pixels, and so on. Thus 1em can have many
different values within one style sheet. The key to successful em usage is an understanding of a
given em’s relative status.
Richard Rutter (www.clagnut.com) explains this methodology with a similar example to the
following. Two rules for basic containers are identical except for the font-size, which is 11px
and 30px,respectively. Both rules have a width and height of 1em. A black border is added to
illustrate the extent of each container.
/* First container for the em example */
#firstbox {
margin:10px;
font-size:11px;
width:1em;
height:1em;
border:1px solid black;
}
/* Second container for the em example */
#secondbox {
margin:10px;
font-size:30px;
width:1em;
height:1em;
border:1px solid black;
}

Although both boxes have a height and width of 1em, the two different font sizes make one
box larger than the other. The first box is 11px × 11px, and 1em × 1em. The second box is 30px × 30px
but is still 1em × 1em.
Thus each resulting em measurement is relative to whatever contains it. Further rules
within #firstbox would be free to define measurements based on the em, knowing that it is
equal to 11px. For example, paragraphs that are children of #firstbox could be defined with a
value of 0.8em, making the paragraph text t the size of that container’s default text.
Work outside of #firstbox and em is reset to its default, unless you are working within
#secondbox, where em has been defined as 30px.

**■Tip 1em displays at the default size for a font character as it appears within an (X)HTML element where
the user agent assigns the default display. Therefore, text styled with a font-size of 1em will display as if
no size declarations were assigned.

Ems and the Body

For most designers, the default font size is often way too big. The usual font-size defined by
the browser style sheet is 16px (which means 1em is of course equal to 16px). That’s a very accessible
size indeed, but most designers (and users) seem to prefer 11px.
You now know from the containers example in the previous section that the em measurement
is relative to the containing element. Earlier in the chapter, we looked at how all page
elements can inherit from the <body> element, as it contains all visual page elements. Therefore
<body> is the ideal place to make your em declaration in order for all child elements in the tree
to inherit that value.
Defining a font-size smaller than 1em for body text is a good starting point for em-based
design. Let’s say that you want your default text to be 11px. The following rule would ensure
your text generally renders at that size:

/* Define all main values for the web site */
body {
font-family:Helvetica,Arial,sans-serif;
font-size:0.7em;
color:#000;
}
So if no other measurements are added to the style sheet, all default text will be 0.7em or
approximately 11px. However, this also means that in Mozilla-based browsers all headings
(<h1> through <h6>), paragraphs, lists, and so on will also be t their default size (other browsers
will stay with the defaults). Also, IE/Win will show form and table text at t the default size.
Therefore, these elements need their font size to be declared in the corresponding rules.
/* Define all main values for the web site */
body {
font-family:Helvetica,Arial,sans-serif;
font-size:0.8em;
color:#000;
}
/* Define paragraph text size */
p {
font-size:1.1em;
}
/* Define headings font sizes */
h1 {
font-size:2em;
}
h2 {
font-size:1.8em;
}
h3 {
font-size:1.7em;
}
...
/* Define form and table font-size */
input, select, th, td {
font-size:1.1em;
}
Thus all appropriate page elements have font-size defined based upon the font-size
declaration in body. All page text is now scalable on any browser and will scale proportionately
at any setting.

BASING EM SIZES ON AN INITIAL PERCENTAGE DECLARATION

Richard Rutter suggests another method for resizing based on an initial font-size using percentage in his
article “How to Size Text Using Ems” (www.clagnut.com/blog/348/), whereby all em values can be easily
related to a specific pixel size.
Richard first declares font-size: 62.5% in the body selector (possible because although no previous
measurements are defined in the style sheet, the default value of the browser style sheet is cascading into it),
which effectively takes the default font-size down from 16px to 10px. It is then simple to think in terms of
pixels, but declare sizes in ems. Based on this setting, Richard suggests some correlating values between em
and pixel sizes:
• {font-size:2em} /* Displayed at 24px */
• {font-size:1.5em} /* Displayed at 18px */
• {font-size:1.25em} /* Displayed at 15px */
• {font-size:1em} /* Displayed at 12px */
This example is another great starting point for designers wishing to make better use of ems. It features
some excellent methods for calculating sizes and further explores the relationships between parent and child
selectors with regard to ems. Essential reading.