This chapter is from the book

This chapter is from the book

We think that typography is black and white. It is the space between the blacks that really makes it. In a sense, it’s like music—it’s not the notes, it’s the space you put between the notes that makes the music.

—Massimo VignelliHelvetica

Spacing and alignment control how the text is comprehended through space and time. Learn to control the tempo of your message and guide the reader from beginning to end.

The carpenter’s adage goes, “Measure twice, cut once.” Giving careful consideration to the measurements and scale you are
designing for is what separates good Web typography from great Web typography. Size and space add texture and flow to your
text, improving the readability and clarity of what you are trying to say.

Pixel

The smallest element of information in an image rendered on a screen arranged in a two-dimensional grid as a series of dots
or rectangles. Pixels are combined in red, green, and blue at various intensities to create thousands or millions of different
colors.

When typographers talk about “motion” in type, they are describing the way that a well-composed text will compel the reader’s
eye, moving it along from the beginning to the end with as little disruption as possible.

Web Measurements

Many designers want to define with exact precision the placement and size of elements in a Web design, similar to the way
they might design for print or video. Those media are static—even video, which might move and be projected onto larger screens,
but the aspect ratio does not change, so everything is scaled relatively. However, on the Web, you are dealing with a variable
canvas, with its final size dependent on the whims of the reader.

Understand relative and absolute unit types

In Web design, sizes can be expressed in either absolute or relative terms. I’ll explain later in this section which to use
for a particular situation, but first review the different measurement types and the units at your disposal.

Keep in mind that although some units are traditionally associated with typography (such as points
and picas) and others with measurements of distance (such as inches or centimeters), all units are available to set any size
or dimension in a Web design. For example, you can set your font size in millimeters or the padding on a column in picas.

Absolute value units (Table 4.1) are used to precisely control sizes, so that they do not vary, regardless of the viewer’s particular screen size, browser,
or operating system. That said, even absolute units can vary between computers, generally because of operating system inconsistencies.
This is the case with point sizes on the Mac versus on Windows.

Table 4.1 Absolute Value Units

unit

name

description

example

pt

point

72pt = 1 inch

12pt

pc

pica

1pc = 12pt

1pc

mm

millimeter

1 mm = .24pc

4.17 mm

cm

centimeter

1 cm = 10 mm

.42 cm

in

inch

1 in = 2.54 cm

.17 in

Relative value units (Table 4.2) have no fixed size, but instead are calculated relative to another value, such as the parent element’s size, or to the screen
itself. Although less precise, relative values can be quickly scaled and changed without your having to recalculate all of
their dependent values. For example, if you are using relative values to set the font size and line height, simply changing
the font size will also change the line height proportionally.

Table 4.2 Relative Value Units

unit

name

description

example

%

percent

relative to size of parent element

150%

em

em

1em = 100%

1.5em

ex

x-height

relative to height of lowercase “x” in the font

4.17 mm

px

pixels

relative to monitor’s resolution

12px

Use points for print but never for screen

Although they’re standard for print design, I’d discourage you from using point sizes when defining font sizes for the screen.
The problem is the inconsistency between Mac and Windows monitor resolution settings.

By definition, a point is 1/72 of an inch, or 72 points per inch (ppi). On a Mac, the computer assumes a monitor resolution
of 72 dots per inch (dpi), which also coincides with the number of points per inch. On the other hand, Windows computers assume
your monitor displays 96 dpi. If the system is set for large fonts, then Windows compounds the problem, assuming 120 dpi.
Unix systems can vary between 75 and 100 dpi. These operating system assumptions result in the Mac OS rendering 18pt text at 18px text onscreen, the Windows OS rendering 18pt
text at 24px onscreen, and Unix systems typically rendering 18pt text between 19px and 25px onscreen.

The upshot is that most Windows users see text that is 33% larger than text the same text viewed on a Macintosh if it was
set using point sizes, rendering points all but useless for Web design onscreen. While most Mac browsers will try to adjust
for this problem by increasing the base Mac font size to 16, some variance persists.

If you are designing a Web page for print (i.e., media="print"), however, then using point sizes is not only perfectly acceptable, but it is the preferred method for defining precise
font sizes.

Use pixels for precision control, but know that you are taking control from the user

Pixel Mosaic

All images on the screen (fonts included) are composed of a mosaic of tiny dots called pixels.

Although it is possible to precisely control the positions of elements with any of the absolute units, pixels are the most
natural way to define measurements for screen-based media. Despite having a “relative” size, pixels behave absolutely in relation
to the screen resolution. Many modern Web designs are specified in pixels because it is the most universal measurement regardless
of screen size, OS, or browser. Like atoms in matter, pixels are irreducible as the smallest unit of meaningful distance on the screen—you can’t move something half a pixel.

While pixels give the designer precise control over where elements appear, they are not without their issues and inconsistencies.
Most Web browsers allow users to enlarge text and zoom the page size, which is imperative for anyone with poor vision. Locking
the font size with pixels or absolute values prevents Microsoft Internet Explorer from changing their size. Internet Explorer
7 goes some way in rectifying this limitation by allowing the entire page to be zoomed, but there is still some debate over
pixels when accessibility is an issue.

For the sake of simplicity and clarity in the following examples, when expressing font sizes using
ems, the assumption is that 1em = 16px unless otherwise stated.

Use ems and percentages for fluid design

In order to provide readers with the highest level of control over the content they are viewing, it is increasingly considered
a best practice to define sizes (both font sizes and other length measurements) using relative units, especially ems.

The em (pronounced “m”) is the fundamental unit of measurement in typography. It is defined as the size of the type as computed
relative to the current size of the type of the parent element. For example, if you set the font size of your Web page to
12px, then .5em=6px; 1em=12px; 1.5em=18px; 2em=24px. If you change the font size to 14px, then .5 em=7px; 1em=14px; 1.5em=21px;
2em=28px. So, really, ems work like percentage values for sizing fonts. However, percentage and ems work differently for margins
and padding, with percentages being based on the parent’s width or height and ems still being based on the parent font size.

One reason ems are not a popular solution is that, since their computed size is relative to their parent’s size, you have
to keep track of the current parent size to know how large or small the font will.

Using ems and percentages, along with maximum and minimum heights and widths, is the only way to guarantee
fluid designs and the easiest way to compose to scale, as explained later in Chapter 6.

Despite their complexity, the advantage of using ems is that you can quickly change the scale of your design by simply changing
a single font-size value. Since they are relative to the parent’s font size, changing the parent’s value changes the values
for all of its children. Additionally, since some older browsers, most notably IE 6, will not resize text set in points, using
ems guarantees that all of your readers get the same experience.

Em Calculator

riddle.pl/emcalc/

There are a variety of tools that can help you calculate em sizes relative to a parent’s pixel size. The best of these is
Em Calculator, which color codes the different levels, making them easier to tell apart.

In this example, em sizes for different pixel equivalents are calculated to three levels.

The bottom line is that whether you use pixels or ems is up to you. I recommend keeping them consistent within a document
to avoid confusion.