Notes from 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:

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.

What is good typography?

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

This blog needs a typographical refresh.

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 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 ­ (s for soft, hy for hyphen). 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!

This science paper looks less legible to me after Butterick’s proposed changes—except for the double spaces. I really wish people would stop using double spaces after sentences.

This quote sent me back on a nostalgic path to 2000s, when tables and floating were the two tools we’ve had for positioning elements on websites: For layouts where text needs to be positioned side-by-side or floating at specific locations on the page. If making these is frustrating with the usual layout tools, try using a table.

Your selection of borders can either support your tables or absolutely destroy their legibility. I’ve seen a similar visual in many places and I still love it. A thick border steals attention from the content. A minimal border supports comprehension by separating cells without obstructing the view.

This point is nicely supported with creative typesetting.

Typewriter habits we should let go of in the age of computers.

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. Luckily this time, I’m equipped with the WordPress site importer I’m building. I’ll clone this site locally, update it with Claude, and then bring back those changes to the live site. We’ll see how that goes!

In any case, go read Practical Typography! Here’s 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