Notes from from Butterick's Practical Typography

Fans swoon over font guru — but roast those shouty links

TLDR: Butterick’s typography wisdom is winning hearts again, but readers are grumbling about the site’s design—especially those shouty small‑caps links. Fans praise his makeover of Racket’s docs while sparring over grids, double spaces, and old‑school table layouts, proving good readability still stirs big feelings

Butterick’s beloved typography guide is back in everyone’s bookmarks—and the comments are on fire. The crowd’s big mood: respect the craft, fix the site. One fan called it “a wonderful resource,” then immediately dragged the design for being a “UI/UX pain” (that’s user interface/user experience), especially those SMALLCAPS LINKS that make readers stumble mid‑sentence. Cue the meme: “My eyes are kerning for help.”

Meanwhile, another commenter brought receipts, dropping a before/after of the Racket programming language docs, freshly Butterick‑ified, to prove the man brings the glow‑up. That set off a feud: purists cheered the sleek, readable makeover; skeptics grumbled about fussy tweaks like page‑turn zones and link styling. The OP’s shout‑outs to curly quotes, soft hyphens, and better spacing got nods, but the real brawl broke out over two classics: double spaces after periods (ban them!) and the nuclear take that “lining up ugly stuff to a grid doesn’t make it pretty.” Designers winced, pragmatists clapped.

The surprise nostalgia bomb? The suggestion to use tables when layouts get tricky. Older devs got flashbacks to the 2000s; some laughed, others screamed into their CSS. Verdict from the peanut gallery: Butterick’s rules still make words sing—but those shouty links? They’re hitting the wrong note

Key Points

  • The article highlights three typography principles: reinforce meaning, multiple valid solutions exist, and success depends on understanding text goals.
  • Butterick’s book demonstrates typography via side-by-side visual examples and uses SVG with font paths when HTML is insufficient.
  • Practical tips include Mac shortcuts for curly quotes and bullets, and using HTML’s soft hyphen (­) for conditional line breaks.
  • Letterspacing (via CSS letter-spacing) differs from kerning (enabled with text-rendering: optimizeLegibility), serving different typographic purposes.
  • The author critiques capitalized links and thick table borders, favors minimal borders, recalls tables/floats for layout, and notes that grid alignment doesn’t fix poor design.

Hottest takes

"a wonderful resource despite the site itself being a little bit of a UI/UX pain" — levocardia
"SMALLCAPS LINKS" — levocardia
"Matthew Butterick gave the Racket documentation a nice makeover" — neilv
Made with <3 by @siedrix and @shesho from CDMX. Powered by Forge&Hive.