Brief books for people who make websites No

11

SA
M
PL
E
CH
AP
TE
R
Jason Santa Maria

ON WEB
TYPOGRAPHY
Foreword by Ellen Lupton
2 HOW TYPE
WORKS
There are no rules in typography.
This is the hardest fact for people to grapple with when they
try to familiarize themselves with the rules, because there aren’t
any. We have principles, best practices, and methods that work
most of the time, but nothing that works all of the time. We can
do our best to ensure that something is durable: good-sized type
for reading, plenty of whitespace, pleasing typefaces, and visual
appeal, but we can’t account for all environments and devices,
which are often in flux. Learning typography is about figuring
out what choices work best for each situation.
Whether we’re the designers or the readers, we’re all part of
the audience for those choices. From the moment we wake up
to the time we go to bed, we’re bombarded by type: newspapers
and magazines, signs on subways and freeways, emails and web-
sites, the myriad interfaces and labels adorning everything we
touch. We’re exposed to more type each day than at any other
point in history. Type is pervasive—and thus so is typography—
yet bad typography remains. Why?

H ow Type Wo r k s 1
 Put plainly, good typography is hard. And the sheer number
of options we have can feel overwhelming.
For one, more typefaces exist than any one person could use
in a lifetime. Typeface families themselves are enormously in-
tricate, some containing thousands of glyphs, and each of them
containing many small details. Filtering through the options
is a Sisyphean task. You also have to consider the elements of
composition. Things like size, spacing, color, and tone all affect
the reading experience.
The bulk of typography, if done well, isn’t supposed to be
noticed. Unlike a painting, song, or other creative output, type
is a means, not an end. It’s often said that good typography is
invisible. Readers may only snap to the realization of the pres-
ence of type when they struggle with understanding what it’s
trying to convey. Namely: when typography fails.
When it comes to designing for the screen, we have even
more considerations, from new devices with new screen reso-
lutions every month, to techniques like responsive web design
(http://bkaprt.com/owt/3/), let alone the constant temptation for
visitors to click away from your site. With all these elements on
the table, it’s no wonder that many people find the prospect of
using type a bit daunting.
But by creating websites, we assume the role of communica-
tors. Whether you are a designer, writer, developer, or anyone
contributing to a site, your work is connected to communica-
tion. Luckily, we have history on our side—many approaches
to typography from centuries’ worth of print design hold up
on the web. We can stand on the shoulders of those who came
before us. But first, let’s dig deeper into typography’s purpose.

WHY TYPOGRAPHY MATTERS

Whether online, in print, or on the side of a spaceship, typogra-
phy is the primary vehicle we use as designers to communicate
our message. When we get it right, it’s powerful. And to do it
well, we need to strike the balance between beauty and util-
ity—and then disappear into the night.
Typography is one of your greatest design assets. It’s not
visual decoration or something that gets added at the end to

2 ON W E B T Y P O G R A P H Y
spice up a design. Good typography gives spirit to words and is
a potent mechanism to inform and delight.
It doesn’t matter how well-considered your layout is, how
wonderful your website’s interactions, code, colors, imagery,
or writing are. If your type is bad, the design fails.

Typography is communication
Most of the communicative heavy-lifting in our designs hinges
on text. And because we’re inundated with things asking for our
attention, our typography needs to put its best foot forward.
That means setting our type to avoid getting in our readers’
way, and nudging them to give us a moment of their busy day.
Through our typography, we’re often politely asking: “Will you
look at this?” With the glut of information out there, that ques-
tion becomes a tricky proposition. Most people are short on
time. By not caring, by not attending to your typography, you
might as well close the browser window for them.
Through type, we’re able to communicate our message and
play with the tone and tenor of the delivery. Just as different
musicians perform the same song differently, we can take a
variety of approaches to the way we deliver a message.
With that in mind, you want to equip yourself with the best
tools you can find, so you have the best shot at someone say-
ing, “Yes! I want to read this!” Well, they likely won’t say it out
loud, but if you get them to stick around for a little while, that’s
just as good. You want to grab people and pique their interest.

AN EMBARRASSMENT OF RICHES
Given type’s critical nature, it’s no wonder we have so many
typefaces to choose from. If you open the font menu in any ap-
plication on your computer, you’ll see quite a long list of fonts.
Companies like Apple and Microsoft bundle fonts with their
operating systems so you have a selection of basic options when
you want to make something.
What’s staggering to most people is how many fonts are out
there. No one has an exact figure, but according to Karen Cheng,
author of Designing Type, we have well over fifty thousand

H ow Type Wo r k s 3
 commercial typeface families out in the world, and even more
free fonts and typefaces that never made the leap from the analog
world of wood and metal type.
With that many fonts, you may ask why anyone would want
to design new ones. Like the clothes we wear or the cars we
drive, typefaces are a response to time, place, and culture. As
our world and technologies change, so too must our means to
communicate. New typefaces are welcome additions to our
growing palette.
That said, we shouldn’t leave behind some tried and true
classics. While new typefaces have the ability to respond to tech-
nological advancements, old typefaces have design equity. Like a
family legend that gets passed down through generations, they
amass gravity and history. At times, these traditional typefaces
capture a moment or feeling just by their presence. They’re also
a foundation for many new faces.
Until recently, the majority of typefaces were created for
traditional printing processes. Type designers took factors into
account like the thickness and texture of paper, how ink gets
absorbed and dries, and the speed and physics with which
printing happens. As an example, Matthew Carter designed
Bell Centennial—a replacement for Chauncey H. Griffith’s Bell
Gothic—for AT&T with the printing of telephone books in
mind.
Bell Centennial included a key design feature called ink traps,
small notches cut into the tightest corners of letters to give ink a
place to spread as it dries (FIG 2.1). At the time, telephone books
were printed on newsprint, which tends to absorb and spread
ink. The ink traps allowed the letters to expand to their intended
shapes during the printing process. Without them, the letters
would have been an over-inked blobby mess.
Carter’s design was a response to the conditions the typogra-
phy needed to withstand: high-speed printing with low-quality
paper. These letters may look odd when you see them in their
pre-printed form, but that’s because they aren’t finished until
after printing. We don’t need to accommodate ink traps on a
digital screen, but we have plenty of other things to worry about.

4 ON W E B T Y P O G R A P H Y
FIG 2.1: Bell Centennial has notches that fill with ink during printing to complete its
letterforms. Without these ink traps, the tighter intersections would overfill as messy blobs.

FIG 2.2: Georgia (pictured) and Verdana were designed as bitmaps first, outlines afterward.
Image courtesy of Matthew Carter.

H ow Type Wo r k s 5
 In the mid-1990s, Microsoft approached Carter to design
typefaces for screen use. Verdana and Georgia are the most no-
table and lasting results of Carter’s work. He started with bitmap
fonts to match screen-rendering environments at the time. He
then translated those forms into the smooth vectors that we
know today as Verdana and Georgia (FIG 2.2). As he had with
Bell Centennial, Carter optimized these typefaces for the current
state of the medium, considering the attributes of the screen
that affected their display. Both typefaces have a large lowercase
height and ample spacing between letters to aid legibility. And
while many designers may be a little tired of their pervasive
presence, Verdana and Georgia remain among the most sturdy
and realized workhorses for onscreen type ever made.
As display resolutions sharpen and rendering engines evolve,
we need new typefaces that keep the conditions for screen-based
media in mind. Visual communication on the web is growing
up fast. Let’s look at how far we’ve come.

TYPE ON THE WEB

We are just on the other side of a transitional state in typography.
Until recently, if you wanted to get type onto a web page, you
were limited to a few options.

System fonts
You could take the easiest route and tell a browser to use fonts
installed on nearly every computer. Popular examples include
Times, Verdana, Arial, and Georgia.

Images
You could load your typeface as an image, which freed you to
use any typeface you had on your computer. The downside? The
text was locked inside the image, which meant it was forever
fixed at specific dimensions and resolution. And unless you took
additional steps for accessibility, the text wouldn’t be selectable,
searchable, or translatable.

6 ON W E B T Y P O G R A P H Y
Text replacement
You could also programmatically hide text on a page with combi-
nations of images, CSS, Flash, or JavaScript. Any hidden text was
then replaced with an image or a pseudo-font file (e.g., a Flash
file that contained the font’s outlines). While these methods
were more extensible than text images in some ways, they could
feel foreign to readers, have mixed results with accessibility,
and be difficult to maintain. In some cases, they even required
additional technology (e.g., a Flash plugin).
Thankfully, all major browsers now support the CSS
@font-face rule, which allows websites to link to font files like
any other asset. Type foundries like Typotheque and Hoefler &
Co. (formerly Hoefler & Frere-Jones) offer web licenses and host-
ing for their typefaces. Other companies like Typekit, Webtype,
and Fontdeck offer subscription services with typefaces from
various foundries. Specifying font files for your web pages is as
easy as dropping a few lines of code into your CSS. For more
on that, check out Paul Irish’s article “Bulletproof @font-face
Syntax” (http://bkaprt.com/owt/4/).
Loading fonts for use on a website isn’t without its flaws.
Like other assets, font files need to be loaded from a server,
and they can be rather large. People aren’t accustomed to wait-
ing for every page asset to load just to serve up some text. But
@font-face is easier, more accessible, and more future-proof
than the old methods, and it’s only getting better as font files get
smaller and we develop better ways to handle the user experi-
ence while assets load.
Web typography has made huge strides in a short amount
of time. We can now reliably use fonts outside of the handful
of typefaces that are pre-installed on our readers’ devices. CSS
gives us more fine-tuned control over typography than ever
before. We’ve broken away from less desirable, and sometimes
inaccessible, methods like using images of actual font files. All
of these changes mean we have better options for communicat-
ing in our designs. But as web practitioners, we not only need
to be conversant in the technical side of designing for the web,
but we also need to understand the visual nature of typefaces.

H ow Type Wo r k s 7
 THE LANGUAGE OF TYPE
Half of the battle in understanding typography for the web or
any other context is becoming familiar enough to talk about it.
To know how to point out a serif or lowercase numeral. To be
able to talk about the counters in letters or the kerning between
them. As with other highly specialized skills, if you aren’t the
one who is ultimately responsible for bringing a design to frui-
tion, you need to know enough to discuss it with the people who
are. I may not know how to configure a server from scratch, but
I know enough to have a conversation with an engineer about it.
Being fluent in typography makes you part of the design process,
and that’s exactly where you want to be.
To develop your gut instinct for typography, start by learn-
ing the language of type. It will take your typography from
mere words on a page to something that resonates. Learn what
a descender and an ear are; recognize the differences between
pixels, percentages, and ems when sizing type; know when to
use small caps, an em dash, and more. Get the basic principles,
or the stuff that works most of the time, under your belt and
then take the leap on your own.

Read more when you buy the book!

8 ON W E B T Y P O G R A P H Y