Notes from Butterick's Practical Typography

I’ve just refreshed Butterick’s Practical Typography. The first time I read it was a couple of years ago and I’ve surely forgotten a bunch since. Here are a few thoughts I had during this read-through.

Typography is like theater

Butterick cites three principles from The Elements of Typographic Style:

What is good typography?

• Good typography is measured by how well it reinforces the meaning of the text, not by some abstract scale of merit. Typographic choices that work for one text won’t necessarily work for another. Corollary: good typographers don’t rely on rote solutions. One size never fits all.
• For a given text, many typographic solutions would work equally well. Typography is not an algebra problem with one correct answer.
• Your ability to produce good typography depends on how well you understand the goals of your text, not on taste or visual training. Corollary: if you misunderstand the goals of your text, good typography becomes purely a matter of luck.

The three principles read exactly like theater to me. A play is just a way of presenting the script—so is the printed page. Different language, same goals, and the same three principles apply. To paraphrase:

• Good acting is measured by how well it reinforces the meaning of the text. A distant, stone-hearted Romeo would just confuse the audience.
• For a given play, many acting choices would work equally well. A Romeo who’s impulsive comes across very differently from Romeo who’s both seductive and desperate. Both choices work.
• Your ability to make good choices as an actor depends on how well you understand what the playwright meant. Anthony Hopkins famously reads his lines 250 times to understand and internalize every single word.

Things that stood out to me

Show, don’t tell. The entire book shows visual examples of good and bad typesetting side by side. When HTML falls short, it uses SVG with fonts rendered as <path> elements to give every reader the same reading experience regardless of their device or installed fonts. That’s a really good use of SVG.

• Mac shortcuts for curly quotes: „” pair is produced with option + [ and option + shift + [. ‚’ pair is produced with option + ] and option + shift + ].
• (bonus) • is produced with option + 8.

Optional hyphens are a thing. In HTML, that’s ­. The browser only breaks the word there if it needs to.

Letterspacing vs. kerning. Letterspacing adjusts the space between every pair of letters—useful for all caps and small caps, available via CSS letter-spacing. Kerning adjusts only specific pairs built into the font, available via CSS text-rendering: optimizeLegibility.

Butterick choice of capitalizing the links was highly illegible to me. I was briefly confused every time I saw a link in the middle of a sentence. Also, I couldn’t visually scan the page for links the way I normally do. I’d rather use color or underline—which Butterick advises against!

• Your selection of borders can either support your tables or absolutely destroy their legibility. A thick border steals attention from the content. A minimal border supports comprehension by separating cells without obstructing the view.
• Butterick on 960 grid-based designs: „if you take ugly shit and align it to a grid—it’s still ugly shit.” This is not how I would phrase it, but I won’t disagree.

A closing word

This is a good impulse to refresh this blog. I’ve meant to do it for a while, but never gotten to it. In any case, go read Practical Typography! Here are a few related books I’ve read and valued:

• The Elements of Typographic Style by Robert Bringhurst
• Elements of Style by Strunk & White
• Type Rules! by Ilene Strizver
• About Face by David Jury