How to Pick a Website Font People Can Actually Read

The Most Unreadable Thing I Ever Got in the Mail Came from Graphic Designers

A long time ago (let’s just say decades, and leave it there), I worked for a corporation that paid for my AIGA membership. That’s the American Institute of Graphic Arts. The big professional organization for designers. The people whose entire job is making things look good and work.

One day their newsletter showed up.

It looked normal enough. Folded to letter size. Then I unfolded it. And unfolded it. And unfolded it again. It opened up like a road map. Nine panels of paper on my desk, and every inch was covered. Images layered on images. Text layered on images. Text running sideways. Text running upside down. To read one article, I had to physically rotate the thing like a steering wheel.

It was a miserable reading experience. I don’t remember a single word of it. I only remember thinking:

• The American Institute of Graphic Arts forgot their job.
• Design that can’t be read isn’t design. It’s wallpaper.

Why I’m Telling You This

A lot of my clients make their own website updates, which I love. And every so often, one of them emails to ask how to change their font. Changing your font is easy. Picking the right one is where people get into trouble.

There are approximately eleven billion fonts in the world. (This may be a slight exaggeration.) As a designer, I love having choices. But not every font belongs on a website.

When you’re choosing a font for website copy, readability comes before personality. Decorative fonts, super thin fonts, squished condensed fonts, and fonts with funky letterforms can look amazing in a logo or a big headline. Ask someone to read six paragraphs of it and you’ve basically mailed them a nine-panel newsletter.

This Isn’t a Small Group of People

About one in four adults in the U.S. lives with some kind of disability, according to the CDC. That includes low vision, dyslexia, and other conditions that make reading harder. And that number doesn’t even count everyone else: aging eyes, a cracked phone screen, bright sunlight at the beach, a lousy office monitor, or reading glasses left on the kitchen counter.

Put all of that together and a big chunk of your visitors are reading your website under less than perfect conditions. Good typography helps every single one of them.

If you care about accessibility because you want everyone to be able to use your website, great. If you only care because you want people to buy stuff from you, that works too. Either way, a hard-to-read website puts a speed bump between your customer and your checkout button.

And this one is an easy win.

The Font Cheat Test

Here’s a quick trick I use. Type out characters that commonly get confused and see how easily you can tell them apart.

Try these:

• Il1 — uppercase I, lowercase l, and the number 1
• O0 — uppercase O and zero
• rn m — lowercase r + n next to lowercase m
• cl d — lowercase c + l next to lowercase d
• vv w — two lowercase v’s next to a lowercase w
• 5S, 2Z, 8B, 6G — numbers next to their letter look-alikes

If you have to squint to figure out which is which, that font probably shouldn’t be carrying your important information. Imagine it’s your phone number. Or a price. Or a password reset code. Now imagine someone getting it wrong.

So What Fonts Should You Use?

You don’t have to use Arial for the rest of your life. I promise. There are plenty of attractive, readable fonts out there. Look for clear, distinct letterforms, a comfortable x-height (how tall the lowercase letters are), enough space between characters, and multiple weights so you’re not stuck with something spider-web thin.

Arial, Verdana, Tahoma, Helvetica, Georgia, Roboto, and Open Sans are all solid starting points.

And not every font on your site has to pass the cheat test. A fun decorative font on a big headline is very different from the font you’re asking someone to read for six paragraphs. The more important the information, and the more of it there is, the more readability matters.

A Few Easy Fixes

Website accessibility can get technical fast. These aren’t.

• Make it big enough. Start body copy at 16px. There’s no official ADA minimum font size (yet), but 16px is a good baseline. Depending on the font, 17 or 18px can feel even more comfortable.
• Give it room to breathe. Set line height around 1.4 to 1.6 times your font size.
• Keep lines from stretching across the whole screen. Aim for about 45 to 75 characters per line. If your readers have to move their eyes across the room to finish a sentence, your text column is too wide.
• Watch your contrast. Light gray text on a white background looks very chic in a design mockup and very invisible in real life. The official accessibility guidelines (WCAG) call for a contrast ratio of at least 4.5:1 for regular body text and 3:1 for large text, like headlines. You don’t have to do the math yourself. Free tools like WebAIM’s Contrast Checker will tell you in about two seconds whether your colors pass.
• Let people zoom. Don’t block visitors from enlarging text or zooming their browser. Some of them need that to read anything at all.

Before You Fall in Love

The AIGA newsletter was probably beautiful. Somebody probably won an award for it. I wouldn’t know. I reached for the aspirin before I finished reading it.

So before you commit to a gorgeous new font, type Il1 O0 rn m into it.

You might be surprised by what you see.

---

Not sure your website passes the cheat test?

I can take a look at your fonts, sizes, and colors and tell you what’s working and what’s making people squint. Whether you want a quick fix, a full redesign, or someone to handle the updates so you don’t have to, I’m happy to help. Get in touch and let’s make your website easier to read.