Wiley Typographic Web Design: How to Think Like a Typographer in HTML and CSS 978-1-1199-7687-5 User Manual
Product codes
978-1-1199-7687-5
11
Text is meant to be read. If it feels diffi
cult to read,
people won’t want to read it. How easily text can
be read on the web depends on how type is used
on the screen. One factor that aff ects readability,
and a great place to start, is choosing a legible font.
be read on the web depends on how type is used
on the screen. One factor that aff ects readability,
and a great place to start, is choosing a legible font.
What Makes a Font Legible?
When we read, we don’t see individual letters; we
see (and read) the shapes of the words. These
shapes are created primarily by two elements: the
strokes of the letters and the spaces in and around
the letters. If we lose either of these elements,
legibility is compromised.
see (and read) the shapes of the words. These
shapes are created primarily by two elements: the
strokes of the letters and the spaces in and around
the letters. If we lose either of these elements,
legibility is compromised.
Did you ever try to read a poor photocopy of a
photocopy of a photocopy? Experience tells you
that type becomes harder to read with each gener-
ation of copying. Why does this happen?
Sometimes, multiple-generation photocopies
make the text lighter. Thinner strokes start to
disappear, leaving only parts of letters and
compromising the word shapes. At other times,
multiple-generation photocopies make the strokes
in the text thicker. The spaces in and around the
letters start to disappear. Either way, when strokes
photocopy of a photocopy? Experience tells you
that type becomes harder to read with each gener-
ation of copying. Why does this happen?
Sometimes, multiple-generation photocopies
make the text lighter. Thinner strokes start to
disappear, leaving only parts of letters and
compromising the word shapes. At other times,
multiple-generation photocopies make the strokes
in the text thicker. The spaces in and around the
letters start to disappear. Either way, when strokes
CHAPTER
1
Anatomy and Legibility: Is the Font Easy to Read?
or spaces get lost, the legibility of the font
changes, and reading becomes more diffi
changes, and reading becomes more diffi
cult.
Web typographers need to pay particular attention
to the strokes and spaces in a font because of
screen resolution. Macintosh screens are 72 pixels
per inch, or ppi, and Windows screens are 96 ppi.
A font set at 12px (pixels) will appear approxi-
mately
to the strokes and spaces in a font because of
screen resolution. Macintosh screens are 72 pixels
per inch, or ppi, and Windows screens are 96 ppi.
A font set at 12px (pixels) will appear approxi-
mately
1
⁄
6
inch tall on a Mac screen and less than
1
⁄
8
inch tall on a Windows screen. In either case, the
screen will have (at most) 12px by 12px to render
a letter. Thin strokes and small spaces in letter-
forms start to disappear, and as in the photocopy
example, the text will be harder to read.
screen will have (at most) 12px by 12px to render
a letter. Thin strokes and small spaces in letter-
forms start to disappear, and as in the photocopy
example, the text will be harder to read.
You’ll often hear that “simple” fonts are better for
the screen because of the resolution issues. That’s
a good rule of thumb, but it’s not quite enough.
the screen because of the resolution issues. That’s
a good rule of thumb, but it’s not quite enough.
Comparing Georgia and Helvetica
Helvetica is simpler and cleaner than Georgia, but
Georgia is easier to read (Figure 1.1). Text set in
Helvetica 12/18 (12px text with an 18px line
height) is readable onscreen. Text set in Georgia
12/18, however, is more readable, even though it
Georgia is easier to read (Figure 1.1). Text set in
Helvetica 12/18 (12px text with an 18px line
height) is readable onscreen. Text set in Georgia
12/18, however, is more readable, even though it
05_9781119976875-ch01.indd 11
05_9781119976875-ch01.indd 11
9/27/11 2:42 PM
9/27/11 2:42 PM
COPYRIGHTED MATERIAL