// Notes on Typography
Good type is invisible. A few things I've learned about choosing and setting type on the web.
Typography is one of those subjects where the more you learn, the more you notice how bad most type decisions are — including your own past ones. At some point the noticing becomes useful rather than just annoying. Here are a few things that have stuck with me.
The most common mistake is choosing a typeface before thinking about what the text needs to do. A typeface is not decoration; it’s the voice the words are spoken in. Long-form reading needs different qualities than UI labels, which need different qualities than display headings. Picking something you like the look of and applying it everywhere is how you end up with beautiful headings and unreadable body copy.
Line length matters more than most developers give it credit for. The traditional measure — 45 to 75 characters per line — exists because that’s the range where the eye can comfortably travel across and return without losing its place. Text that runs edge to edge on a wide monitor is genuinely harder to read, not just aesthetically uncomfortable. The fix is usually just setting a max-width on the content container.
On the web, system fonts have gotten good enough that reaching for a custom typeface often isn’t worth it. The performance cost is real, the FOUT is annoying, and system-ui or Georgia or even a well-set monospace can carry a site further than you’d expect. I’ve stopped loading custom fonts unless they’re doing something the system stack genuinely can’t.
Line height is underrated. Body text usually wants somewhere between 1.5 and 1.75 — tighter than that feels cramped, looser starts to feel like someone double-spaced a document to hit a page count. Headings want tighter leading because they’re not being read in a flow; they’re being scanned. Setting heading line-height to 1 or 1.1 and adjusting from there is a good starting point.
4 Comments
The line length point is something I fight about with clients constantly. Make it bigger usually means make it unreadable.
Switched to system fonts on my last two projects and nobody noticed. Saved a meaningful chunk of load time.
Would love a follow-up on pairing typefaces. That's where I still feel uncertain.
The heading line-height tip is something I'm going to apply today. My headings have always felt slightly off and I couldn't figure out why.
Leave a comment