I found Typography for Lawyers by Matthew Butterick in law school, probably while avoiding an assignment. I read the whole thing, and it changed how I looked at space around the words. The font choices, the line lengths, the margins. Suddenly I could see why some briefs felt authoritative on first glance and others felt thrown together. It was all typography. I’d been staring at it my entire life and never once thought about it.

Recently, my friend Matt told me Butterick had written a second book: Practical Typography, free to read at practicaltypography.com. I went through the whole thing.

And here’s what kept nagging me on every page: the WordPress community (a community I love) hasn’t taken typography seriously enough.

We learn themes, blocks, performance and plugins. But the reading experience (the typography that carries every word we publish) just never made it into the conversation.

I think we can change that. And it’s not even hard. This is the playbook, everything I pulled from Butterick, translated for WordPress.

Why I pay attention to it

One idea from Butterick reframes everything:

Your reader’s attention is a gift. It’s finite. And they’re constantly looking for a reason to stop giving it to you.

We don’t experience our own sites the way readers do. We see the work we put in. They see a wall of text and decide in seconds whether it’s worth their focus. And when they can’t easily judge the quality of the content (which is always, because they haven’t read it yet) they judge the typography instead.

A well-typeset site says someone cares about this. A poorly typeset site says this probably isn’t worth my time.

That’s not a design opinion. That’s how attention works. And it means every WordPress site we build is doing persuasion work through its type before a single word gets read. We’re already sending a message, the question is whether we’re sending the one we intend.

Five Settings That Fix 80% of Everything

Butterick says five rules can make a big difference. We can apply all of them in a WordPress theme.

1. Start with body text

It’s the majority of every page. If the body text looks good, the whole site feels good. Before we touch header animations or hero sections, get the paragraphs right.

2. Set the right size

For screens, Butterick recommends 15–25 pixels because typefaces look different at the same size. I find 17–20px works well for body text on many WordPress sites. Some themes start at 14px or 15px, which feels too small. Test it on a phone too.

3. Nail the line spacing

120–145% of the font size. In CSS, that’s line-height: 1.35 (unitless, always unitless). WordPress theme defaults vary wildly here, and the block editor sometimes renders differently than the frontend. Worth checking both.

4. Control the line length

45–90 characters per line. This is the one that catches most of us off guard. Full-width containers on a large screen can push lines past 120 characters, which is exhausting to read. The fix: set max-width: 680px to 750px on the content column. This single change does more for readability than almost anything else.

5. Choose a real typeface

The system font stack is fine for UI chrome but invisible for content. It says nothing about who we are or what we’re building. A professional typeface is the most visible upgrade any of us can make, and it doesn’t have to cost anything. IBM Plex, Source Serif, and Inter are free, beautifully crafted, and built for the web.

The Small Details That Add Up

These take seconds to fix. Each one is minor on its own. Together, they’re the difference between a site that feels considered and one where something’s just… off. The good news is WordPress already has our back on several of them.

Curly quotes. WordPress handles this automatically via wptexturize(), it converts straight quotes to proper curly ones. If you’ve ever disabled texturize for performance or compatibility, it’s worth turning back on. It’s one of WordPress’s best built-in typography features and a lot of developers don’t realize what they’re losing when they remove it.

Real dashes. An em dash ( ) is not two hyphens. WordPress’s texturize converts --- to an em dash and -- to an en dash (though the dash conversions depend on surrounding whitespace, the rules are contextual). Most content teams don’t know the shorthand exists. Worth adding to a style guide.

One space after periods. A lot of us learned to double-space after periods. It creates distracting rivers of whitespace in proportional fonts. A simple find-and-replace in the content workflow fixes it everywhere.

Proper ellipses. Three periods (…) and an ellipsis (…) are not the same character. The good news: wptexturize() handles this one too, it converts ... to a real ellipsis automatically. One more reason to keep it enabled.

The Less-Is-More Principle

This advice feels relevant because WordPress gives us so many options that restraint becomes a real discipline.

Never underline. Underlining was a typewriter workaround for machines that couldn’t produce bold or italic. On the web, the only acceptable underline is a hyperlink.

Choose bold or italic. Never combine them. And use either sparingly. When everything is emphasized, nothing is. We’ve all been guilty of this one.

All caps need letterspacing. Uppercase text forms uniform rectangular blocks that are harder to read than mixed case. If a theme uses all-caps headings, adding letter-spacing: 0.05em to 0.12em makes a dramatic difference. Without it, the letters feel cramped. With it, they breathe.

Two heading levels is usually enough. If posts routinely use H2 through H5, the structure might be too complex. Headings reveal an argument’s skeleton; they don’t need to label every paragraph.

One typeface is usually enough. Two if they each have a distinct role. Three is almost always a mess. A lot of WordPress themes bundle five or six Google Fonts, which is well-intentioned but usually creates more problems than it solves.

Wider margins than we think. On the web, this means padding around the content container. Most themes could use more. Generous horizontal padding keeps line length in check and gives text room to breathe. A constrained column with space around it always looks more professional than text stretching edge to edge.

Embrace whitespace. The impulse to fill every pixel is the enemy of good typography. Whitespace isn’t empty, it’s where hierarchy lives. It’s one of the hardest habits to build and one of the most rewarding.

Tables: strip them down. If WordPress tables are packed with borders and gridlines, try starting over. Remove everything, then add back only what’s needed for readability. Cell padding matters more than cell lines.

We Have Better Tools Than We Realize

Here’s what makes this moment exciting for WordPress typography: we already have most of the tools we need. We just haven’t picked them up yet.

The old excuse (that the web couldn’t do good typography) hasn’t been true for years. We now have variable fonts, OpenType features, responsive clamp() sizing, CSS custom properties, and decent (if imperfect) hyphenation support.

And WordPress specifically has caught up in a big way. The block editor’s typography panel (introduced in WordPress 6.1) gives us control over font family, size, line height, letter spacing, and text transform right in the editor. theme.json and its Global Styles interface let us enforce consistent type across every block, template, and page on a site. Fluid typography with clamp() is built in, just set fluid: true in theme.json.

The tools are there. Now it’s on us to use them.

A lot of our typography habits are inherited from the typewriter era, monospaced fonts, double-spacing, straight quotes, underlining, 12-point-everything. Those were workarounds for real mechanical limitations. The limitations are gone. The workarounds somehow stuck around. But we’re the community that can shake them off, because we control the platform that powers a huge chunk of the web.

The Checklist

Pin this somewhere. Drop it in your theme docs. Share it with your content team. Let’s make it a standard.

Body text: font-size: 17–20px | line-height: 1.4 | max-width: 720px | a real typeface

Punctuation: Keep wptexturize() active. One space after periods. Real dashes, real ellipses.

Formatting: No underlines. Bold or italic. All-caps with letterspacing. Max two heading levels. One or two fonts with distinct roles.

Layout: Generous container padding. Whitespace between sections via margin, not <br>. Minimal table borders. Consistent spacing via theme.json.

Advanced: font-feature-settings for ligatures and kerning. hyphens: auto for justified text (note: Chrome support is still limited, test carefully). clamp() for responsive sizing, or enable fluid: true in theme.json to let WordPress generate it for you. Test on mobile, tablet, and ultrawide.

Try it on your site

WordPress powers a massive share of the web. That’s an incredible responsibility and an incredible opportunity. Every theme we build, every site we launch, every blog post we publish is a chance to show that good typography isn’t some elite design concern, it’s something any of us can do, starting today.

Butterick’s Practical Typography is free at practicaltypography.com. It’s worth reading and paying for. His first book, Typography for Lawyers, changed how I looked at documents in law school. This one has changed how I work on websites.

Start with the body text and make a few changes. You don’t need to redo the whole site to make a post easier to read.