Readability is a huge consideration for your website. If potential clients are straining their eyes or can’t follow along with your copy, you risk losing their interest. You wrote all that high-converting copy, don’t you think it’s important that your users can actually read it?

Just because YOU can read something easily doesn’t mean your users can. They might be sight impaired, color blind, or reading on a lower resolution screen. It’s important to consider these users as you create your design.

On the web, users tend to scan rather than read every single word. With a few tricks, though, you can make it more likely that users will actually read the content you worked so hard to create!

Here are some tips to audit the readability of your site and to improve it. I’m going to show you how to use the CSS Peeper Chrome Extension. This is one of my absolute favorite Chrome extensions because it tells you so much good information—font size, style, color, button size, etc—without having to comb through code.

First, pull up your website and pick a page that has a lot of copy on it. Click on the CSS Peeper plugin. Now you can click any element on the page in order to view its styles. Click on a block of the body (paragraph) text.

Next, we’re going to check a few specific things.

1. Contrast ratio: I’m starting with this one because it’s the number one readability mistake I see business owners making (sadly, including a ton of web designers!). Looking at your CSS peeper, you’ll see a box that says “fill” and has a six-digit code. This is the hex code, which tells the computer which color to display. If the page background isn’t white, click to view that hex code as well. Now, visit contrast-ratio.com. Copy your text and background colors into the boxes. This website will tell you if your text passes the standards set by the main international standards organization for the Internet. This is important for your users who may be colorblind or have poor eyesight. If your text fails the test, try either lightening your background color or darkening your text color.
2. Font size: A good rule of thumb for web copy is a minimum of 14 px. Is your text smaller than 14 px? Go ahead and bump it up!
3. Font style: This one’s a little more open to interpretation but it’s good to check. It doesn’t really matter if you use a serif or sans serif for your web copy; both are pretty standard and readable. But check that you’re not using a non-standard font like handwriting, script or something decorative. Those types of fonts can be great in small doses in nice big headings. But they don’t belong in your body text, so if you spot them, they’ve got to go!
4. Line spacing: It’s hard to read text that too close to the line below it. This is shown in the CSS Peeper as “line height.” Your line height should be 150% of your font size in order to be readable for all users. For example, if your font size is 14 px, you should multiply that by 1.5 to get an ideal line height of 21 px. Do the math and figure out if you have enough spacing between your lines. On the flip side, you don’t want to have too much space either. Stick around that 150% sweet spot. It’s also great to break your text into shorter paragraphs to give the eyes some breathing room!
5. Line length: Another important consideration for legibility is line length. If the line is too short, our eyes have to do a lot of jumping around which is tiresome, but if the line is too long, we’re prone to lose our spot and have to re-read it. The correct width for your text block is going to depend on your font size because an ideal line length is about 60-100 characters (meaning, individual letters and spaces). To test this, download the word counter plus chrome plugin. Highlight a line of text and right-click to select the word counter. Look at the character view. If it’s over 100 characters, consider decreasing the width of your text block. If it’s under 60, consider widening it.

Once you make these small tweaks, your site will be much more readable and accessible for your users. Any time a user interacts with your site, it’s part of their client experience. Give your clients an outstanding experience where they never have to strain their eyes or squint to read a blog post. Then, they’ll be able to focus on your content and your message.

Did you complete the 5-step audit? Did you discover any changes you’re going to make to your site?