Typography Matters

Despite the prevailing wisdom that “users don’t read,” discussions about online typography do get a lot of attention and space—A List Apart alone has run half a dozen articles about presenting text effectively on the web.

So if you’ve been paying attention, you probably already know the basics of online typography: legible fonts are good, CSS is essential, and relative font sizing is tricky.

There’s another aspect of online typography, however, that’s been almost entirely ignored: well-formed punctuation. Not just grammatically correct (that’s a good first step), but typographically correct punctuation.

A brief history of bad browsers#section2

A few years ago, there were good reasons for web developers to take the easy way out: an HTML spec that lacked recommendations for appropriate symbols, combined with browers that frequently ignored what standards existed, made that level of precision next to impossible.

So it made sense to use double hyphens (—) instead of em dashes and double primes (”) instead of quotation marks.  In any case, those workarounds were already familiar to anyone who’d grown up with typewriters, and readers adapted to ascii-only typography during the early days of the Internet when usenet, email, and the web all shared the same primitive markup and text display.

These days, standards-compliant browsers can handle entity names, and even
Netscape 4.x can manage numeric entity codes—but why should you care?
After all, using the technically correct punctuation marks would mean a dozen new
entities to be memorized and a lineup of well-meaning but under-informed editors
and teammates to win over—and retrofitting any significant amount of copy
is always a hassle.

Since most people don’t know or care about the difference between an em dash and an Emmy, why bother to make the switch? In some cases, switching to correct typography may honestly not make sense.  For all the rest, two arguments: usability and style.

Getting readers to read#section3

The web doesn’t provide an ideal reading situation.  Low-contrast monitors with matching slow refresh rates make it work to read on-screen, and even when a user has an optimal display, the structure of the web encourages a degree of scanning and link-hopping.

To compensate, we spend hours figuring out clever ways to make our content easier to read: we break long passages of text into shorter chunks, use subheaders to facilitate scanning, and—frequently—agonize over the byzantine tangle of cross-browser compatibility to make sure that our text displays the way we want it to.

Providing helpful cues#section4

Given all that, it would be a shame to diminish the relatively simple tool we have in punctuation marks.

Typography, at the root, is all about providing as
many helpful cues for the reader’s eye as possible. Punctuation marks, like fonts, have undergone a process of natural selection to make sure that they do just that.

Curly quotes are curly in part because they make it instantly clear if
you’re at the beginning or the end of a quotation, and partly because they
smoothly guide the eye into the passage:

Correct em dashes likewise draw the reader’s eye smoothly from clause to
clause without the visual break of a clunky double-hyphen.

Particularly in a medium that invites a thousand distractions, anything that
we as web developers can do to maintain the reader’s focus and keep her eyes moving smoothly over our text can only benefit our content.

A matter of style#section5

Cary Grant, that most stylish of British gentlemen, warned: “it takes five hundred small details to make one favorable impression.”

Ill-formed punctuation detracts from an otherwise well-designed website in subtle but accumulative ways. Single primes acting as apostrophes and double hyphens serving as em dashes belong to the era of grey backgrounds and monospaced default fonts—it’s time for online typography to grow up.

Time to grow up#section6

Ever more sophisticated specifications and browsers have enabled web
developers to create more appealing web interfaces, and web design standards have risen accordingly.

Conscientious graphics designers don’t let incorrectly
optimized or sloppily cropped versions of their images go live, nor do good
copywriters or editors publish websites with typos or grammatical errors. Nor
should web developers who aspire to professionalism leave the typographical
details of their sites incomplete and unconsidered.

A question of content#section7

Some sites are more likely candidates for a typographical upgrade than others.

News sites, or any site with a lot of syndicated content, would require more
effort to upgrade than others—though it can be managed, as demonstrated
by the lovely typography over at MSNBC.

Independent content sites, on the other hand, are particularly appropriate candidates for special attention to typography; the same reasons that apply to big, corporate sites (enhanced readability and clean, professional design) are even more important for small sites whose reputation rests on their content, not their brand name.

Whose job is it?#section8

On a production team, it’s usually someone’s job to catch (for instance) spelling errors, but the grammar of typography belongs to a number of people—designers who don’t want typographical sloppiness to detract from their designs, content experts who want to make their words more readable, and
production people who want to implement the raw material for a website in the
most flattering way.

If a complete overhaul doesn’t make sense for your
situation, you can still learn about the tools and use the parts that make sense
for your projects.

Getting help#section9

For more on the technical kung fu of typographically correct punctuation, check out Peter Sheerin’s article here at A List Apart, and then visit the following fine establishments:

Dean Allen’s Web Writing AppleScripts are helpful for those on Macs, and his Word HTML Cleaner is a time saving wonder for those who’d rather not memorize entities. (Thanks to Dean for inspiring this article.)

The Graphion Online Type Museum has brief profiles of early typographers and other bits of historical context, and counterspace is chock-full of interactive, useful information about the history and practice of typography.