Why Most WordPress Sites Have Terrible Typography (And How I Usually Fix It)

Look, even after spending like 15+ years messing around with WordPress sites, I still see the same typography mistakes over and over again. And honestly? It drives me a bit crazy.

I mean, you’d think after all this time people would figure out that 12px font isn’t readable on a phone. But nope. Here we are. I’ll open up a site someone wants me to look at and immediately I’m squinting at this tiny gray text on a white background thinking “who approved this?” Actually, that’s not quite right – usually nobody approved it. It’s just what the theme came with and they never bothered changing it, you know?

The thing is…

Typography isn’t sexy. Nobody gets excited about line height adjustments. But I’ve watched bounce rates drop from like 78% to 42% just by fixing font sizes and spacing. No joke. Same content, same site, just made it actually readable and people stuck around. Which makes sense when you think about it – if someone has to work hard to read your content, they’re just going to leave and find the same info somewhere else that doesn’t give them a headache.

The Readability Problem Most People Don’t Even Notice

Here’s my hot take: most business owners have no idea their site has readability problems because they’re looking at it on their 27-inch desktop monitor in perfect lighting. Try reading that same site on your phone in bright sunlight or on a cheap laptop with a terrible screen. Different story, right?

I see this all the time with local businesses. They’ll have this beautiful site that they’re super proud of, and yeah it looks nice, but the body text is sitting at 14px with 1.3 line height and I’m like… guys. Your visitors are leaving before they finish reading your first paragraph. The analytics don’t lie – high bounce rates, low time on page, nobody’s converting. And a huge part of that is just basic readability stuff that got overlooked.

Common problems I run into constantly:

Font sizes that made sense in 2010 but are ridiculous now. Seriously, 16px minimum for body text, and honestly I usually go with 18px these days because phones are everywhere and people are getting older (including me, unfortunately). Line spacing that’s so tight the text looks like it’s choking. You want at least 1.5 or 1.6 for line height on body text – gives it room to breathe, you know? And don’t even get me started on color contrast…

Actually, let me get started on color contrast because this one really bugs me. I cannot tell you how many sites I’ve seen with light gray text on white backgrounds. Like #777777 on #FFFFFF or something equally terrible. “But it looks modern and minimal!” Sure, and it’s also basically unreadable for anyone over 40 or anyone with less than perfect vision or anyone trying to read it on a screen with glare. The WCAG guidelines recommend a contrast ratio of at least 4.5:1 for body text, and there are free tools like WebAIM’s contrast checker that tell you exactly what your ratio is. Use them.

What I Actually Do When Someone Asks Me to Fix Their Typography

Okay so when a client comes to me with typography issues – which they usually don’t realize are typography issues, they just know “something feels off” – I have a pretty standard process. Though honestly it varies depending on what theme they’re using and how badly things are broken.

First thing I do is just… look at it. Like actually read some content on different devices. Phone, tablet, desktop. Dark mode, light mode. I’ll literally go outside and try to read it in sunlight because that’s a real use case. If I’m struggling, their visitors are definitely struggling.

Then I pull up the browser dev tools and start checking the actual CSS values. And this is where it gets interesting because sometimes the theme is setting font-size: 14px at the base level and then using relative units on top of that, so you end up with like 0.875rem which calculates to… I don’t even know, something tiny. Other times they’ve got good base sizes but the line-height is set to 1.2 and everything feels cramped. Or they’re using a font stack that falls back to Times New Roman on Windows and looks completely different than what the designer intended.

My go-to fixes usually include bumping body text to 18px (or 1.125rem if the theme uses rem units). Setting line-height to 1.6 or 1.65. Making sure headings actually look like headings – I see too many H2s that are barely bigger than the body text and it’s like, what’s the point? Use the size difference to create visual hierarchy. I’ll typically do H1 at like 2.5em or 3em, H2 at 2em, H3 at 1.5em, something like that. Though it depends on the design…

Font choice is another thing.

I mean, I get it, everyone wants to use some cool Google Font they found. And that’s fine! Google Fonts are great. But you’ve got to think about load times too. I’ve seen sites loading 6 different font weights from Google Fonts and wondering why their PageSpeed score is terrible. Pick 2-3 weights max. Usually you just need regular and bold anyway. Maybe italic if you’re fancy.

And honestly? System fonts are underrated. Using something like -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif as your font stack means the text renders in whatever the user’s OS default is, which loads instantly and looks native to their device. It’s not as “designed” looking but it’s fast and readable and sometimes that matters more than having the perfect custom typeface.

The Plugins and Tools I Actually Use (And Which Ones I Avoid)

So there are a bunch of WordPress plugins that claim to help with typography. Some are good. Most are bloated garbage that add a bunch of unnecessary JavaScript and slow your site down.

I’ll be real with you – most of the time I just write custom CSS. Either in the theme’s custom CSS area or in a child theme if we’re doing more extensive customization. It’s cleaner, it’s faster, and it gives me exact control over what’s happening. But I know not everyone is comfortable writing CSS, which is fair.

If you’re going to use a plugin, I’ve had decent luck with Easy Google Fonts. It’s not perfect but it does what it says – lets you apply Google Fonts to different elements without touching code. The interface is a bit clunky but it works. Gutenberg (the block editor) also has built-in typography controls now that are actually pretty solid if you’re using a block theme. You can set font size, line height, letter spacing, all that stuff right in the editor.

What I avoid: any plugin that promises “1000+ fonts!” or claims to revolutionize your typography with AI or whatever. You don’t need 1000 fonts. You need like 2 fonts maximum – one for headings, one for body. Maybe a monospace font if you’re showing code snippets. That’s it. More fonts = more things to load = slower site = worse user experience. Keep it simple.

Oh and there’s this thing some themes do where they load Font Awesome or some other icon font library even if you’re only using like 3 icons. That’s nuts. If you need a few icons, use inline SVGs. Don’t load an entire font library. But anyway, I’m getting off track…

The Consistency Thing Everyone Forgets About

Here’s something that drives me crazy: inconsistent typography across a site. Like, the homepage has 18px body text but the about page is at 16px and the blog posts are at 17px because someone manually set it at some point and nobody noticed. Or headings are styled differently on different pages. Or the contact form uses a different font than the rest of the site because it’s from a plugin that has its own styles.

Consistency matters more than you think. It’s not just about looking professional (though that’s part of it). It’s about creating expectations. When someone lands on your site, they quickly get a sense of “this is what headings look like, this is what body text looks like, this is how links are styled.” Then when they navigate to another page and everything’s different, it’s subconsciously jarring even if they can’t articulate why.

What I usually do is create a simple style guide. Nothing fancy – just a document (or even just a stylesheet with comments) that defines the typographic system. Body text is X size with Y line height using Z font. H1 is this size, H2 is that size. Links are underlined (yes, underline your links, please, stop making people hunt for what’s clickable). Form inputs use this styling. Whatever.

Having that reference point makes it way easier to maintain consistency, especially if you’re updating the site over time or if multiple people are adding content. Otherwise you end up with drift where things slowly get more and more inconsistent and nobody notices until it’s a mess.

Actually, you know what, let me backtrack a bit – not everyone needs a full style guide. If you’re running a simple 5-page business site that you update once a year, you’re probably fine without one. But if you’re publishing blog content regularly or you’ve got a team managing the site, it helps. A lot.

Mobile Makes Everything Harder (But Also Easier?)

Mobile is where typography gets really interesting. Because you’ve got less space but you also can’t just make everything smaller or it becomes unreadable. I see sites all the time where the desktop version looks great but on mobile it’s this tiny text with no breathing room and you have to pinch to zoom to read anything.

The solution is responsive typography, which sounds complicated but basically just means using CSS media queries to adjust font sizes based on screen size. Most modern WordPress themes do this automatically to some degree, but often not well. They might scale the font down to 14px on mobile and call it responsive, which… no. That’s worse.

What I typically do is keep body text at roughly the same size across devices (maybe 16-18px on desktop, 16-17px on mobile) but adjust the line height and margins instead. Mobile screens are narrower so you get fewer characters per line, which actually means you can use a slightly tighter line height. It’s counterintuitive but it works.

Viewport units (like vw) can be useful for headings. Something like font-size: calc(24px + 1.5vw) scales the heading based on viewport width, so it’s bigger on desktop and smaller on mobile but always proportional. Though you need to be careful with this because it can get wonky on really wide or really narrow screens. Better to combine it with min() and max() functions to set boundaries.

Honestly, the best approach is just to test on real devices. Chrome DevTools is great but it’s not the same as actually pulling up the site on your phone. I keep a cheap Android phone around specifically for testing because iOS Safari and Android Chrome render fonts slightly differently and you want to make sure it works on both.

Why I’m Telling You All This

Look, I’ve been doing WordPress design and development for years now, working with everyone from tiny local businesses to… well, still mostly small businesses honestly, but the point is I’ve seen every typography mistake there is. And the thing is, it’s usually not hard to fix. It just requires someone who knows what to look for and cares enough to actually make the adjustments.

A lot of the sites I work on don’t need a full redesign. They just need someone to go through and fix the typography, adjust the spacing, make sure everything’s actually readable. Maybe set up some proper heading styles. Clean up the CSS a bit. Suddenly the site goes from feeling amateur to looking professional, and more importantly, people can actually read it without getting frustrated.

So yeah. Typography matters.

If you’re running a WordPress site and you’re getting decent traffic but people aren’t sticking around or converting, there’s a good chance readability is part of the problem. And if you don’t have the time or the inclination to dig into the CSS yourself – which, fair enough, not everyone wants to spend their afternoon tweaking line-height values – that’s literally what I do. I can take a look at your site, identify what’s making it hard to read, and fix it without breaking anything else. Usually takes a few hours depending on how complex the site is.

I also handle the other usual WordPress stuff – SEO optimization, site speed improvements, general maintenance, PPC campaign management if you’re into that. But honestly, fixing typography is one of my favorite projects because the impact is so immediate and obvious. You change a few font sizes and suddenly the whole site feels better. It’s satisfying, you know?

Anyway, if you want to chat about your site’s readability or typography or whatever else, just reach out. I’m always happy to take a quick look and give you my honest assessment of what needs work. Sometimes it’s a quick fix, sometimes it’s more involved, but either way I’ll tell you straight up what I think is going on and how to address it.