Readability. As a content creator, it’s an easy quality to overlook. After all, you’re staring at your site all day every day. What could you be missing out on? Well, excellent Readability will get more visitors who are scanning your content to actually slow down and read it. That means more readers will convert into subscribers and eventually become customers. And there’s one more benefit… If your site is difficult to read, it’s going to be taxing on your visitor’s eyes and they’re not going to stay on your site very long. A comfortable reading experience will keep visitors consuming post after post without tiring. The results are clear: Better readability means more engaged readers. Excited to improve your site’s readability now? Here are a few steps you can take to transform your site’s readability today.

Start with a readable theme

Regardless of how you edit your content, your Theme is going to create a baseline for your contentâ€s readability. There are three ways in which your theme can help make your posts easier to read.

Text size

Small text. Itâ€s the quickest way to wreck the readability of your site. You don’t want your visitors squinting and holding their tablets close to their face to be able to read your content. To ensure a comfortable reading experience, make sure your text is at least 16px large. This is the de facto standard for the web, but things are beginning to change. If you want to create an even more seamless reading experience and get on the cutting edge of readability, try a font size of 18-21px instead. Medium.com has perhaps the most carefully and thoughtfully designed blog posts on the web and they use 21px for post text. Popular web design blog Smashing Magazine takes things even further using a large 21.6px font size for their text.

Medium has beautifully designed easy-to-read posts Every theme uses different code, but if you want to try changing your theme’s font size on your own, one of these two CSS statements should do the trick:

.entry-content,

.post-content  {

  font-size: 21px;

}

body {

  font-size: 21px;

}

Contrast

Itâ€s important that your text color has a high contrast against the background color of your site. Making the text easier to distinguish from the background will make your site easier for everyone to read. While some of your visitors will have perfect 20:20 vision, most of them wonâ€t. If you don’t have any problems with your eyesight, it can be easy to forget that there are all manners of visual impairments such as color blindness which affects 1/12 men that can make text harder to read for others. The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1 for all text on a website (besides large titles). To check if the text in your theme is dark enough, you can use a tool like this one to compare your text color against the background.

The awesome contrast ratio tool by Lea Verou For reference, #757575 is the lightest text can be (46/100 brightness) to still pass the contrast recommendation against a white background. This is what text that color looks like. You can use one of these CSS statements to make the text on your site black for maximum contrast:

.entry-content,

.post-content {

  color: #000;

}

body {

  color: #000;

}

Limit characters per line

Not all web designers agree on the ideal characters per line, but most agree that 50-75 characters per line is excellent for readability. It’s very uncommon that a theme has less than 50 characters per line, so you’ll want to make sure your theme isn’t stretching each paragraph too far and going over the 75 CPL upper range. Otherwise, it becomes difficult for readers to transition their eyes to the next line without skipping a line or re-reading the same one. If you increased your font size using one of the code snippets above, that will also reduce the number of characters per line displayed on your site.

Sans vs sans-serif?

There’s been a lot of debate in the past about whether sans-serif fonts are easier to read than serif fonts. At this point, screens are so crisp that either variation can be easy to read and there’s very little impact between switching from one to the other (in terms of modifying readability). 

Your site will do just fine with any popular web font, but if you want to take a deep dive into the debate, check out this blog post.

Mobile optimization

More and more people are reading on their mobile devices instead of laptops these days. In fact, for passive activities like reading, tablets and phones are much more popular choices than laptops and desktop computers. Load your site on your phone and make sure all of the text fits comfortably on the screen and doesn’t butt up against the sides of the screen or even worse, overflow off the sides. It’s important that your theme performs well on mobile and looks good too. An unresponsive WordPress theme will make your site look like its zoomed out and the text will be way too small to read whereas a responsive WordPress theme will have an easy-to-read presentation, like this:

An example post from the Startup Blog theme Customizing a theme to be responsive is too complex of a change for a WP user with limited CSS skills to tackle. If your theme doesn’t adapt well to small screens, consider one of these mobile-friendly blog themes. That’s the last of the ways you can set yourself up for readability success with your theme. Next, let’s look at how you can edit your content via the WP post editor to be even easier to digest.

Edit your content for readability

Have you noticed? Content on the web is nothing like the persuasive essays you wrote in school. If your blog posts look anything like an essay or a page from of a book, you won’t stand a chance. People have a more limited attention span than ever before, and no one wants to tackle a massive wall of text. You have to break it down into small, digestible pieces if you want visitors to read it. Make it look fun and approachable. Here’s how you can do that.

Keep paragraphs short

The simplest way to edit your posts to be more readable is to keep the paragraphs short. There doesn’t seem to be a study on the ideal paragraph length, but many bloggers agree that paragraphs should be about 2-4 lines long on your blog. A tip I picked up from Jon Morrow over at Smart Blogger is to use lots of short one line paragraphs. Why? Because they get people’s attention 😉 These super-short paragraphs are especially effective when used at the beginning of a blog post. You really need to slow down visitors if you want them to switch from scanning to reading.

Use headings

Unless you’re writing a very short status update (100 words or less), every post you publish should have headings. Headings act like speed bumps in your copy. Visitors scanning and scrolling down the page get slowed down by each heading until one captures their curiosity and gets them to stop and actually read the post. Your theme most likely places the post title in an h1 element, so you can use h2 elements for your headings. For longer, more in-depth posts, you’ll likely want to use a few h3 headings too. You can use this post as an example. The h2 headings split the post into theme optimizations VS editing optimizations, and each section within is defined with h3 heading tags.

Another benefit

Here’s a bonus tip: Outline your posts with headings before you start writing. Having an outline in place will ensure you stay perfectly on topic at all times and write a comprehensive post.

Add plenty of images

Visitors love images and nothing breaks up the monotony of text like a colorful image. It’s a good idea to include an image roughly every 300-400 words in your posts. The images themselves don’t have to be perfect, they just need to match the content. You can find tons of free-to-use images on Unsplash and Pexels.

Here’s a breathtaking photo recently uploaded to Unsplash When inserting images, “floating” them to the left or right so text wraps around them looks okay, but centered images that fill the post content area almost always look better. Plus, they make this next tip even more effective…

Add image captions

Everyone loves image captions. I don’t know why, but they always get read. Be honest, have you been reading all of the image captions so far? Each caption you add is another chance to slow someone down whose currently skimming your post. If you add your images so they fill the entire post content area, you’ll have plenty of space to include a caption, unlike a small thumbnail off to the side of the text.

Break up the text

With the tips above, you could create a well-designed post with text and images alone. However, you have a lot of other design elements at your disposal. It’s a good idea to include other visually interesting elements like:

• Bullet points
• Blockquotes
• Bold text

Use bullet points

Every time you find yourself listing three or more items in a sentence, ask yourself if it would read better in a bullet list. For instance, I could have listed the elements above in a sentence rather than a bullet point list. If the order of the list items is important, you can use a numbered list instead.

Add blockquotes

Not every post provides an opportunity to quote someone, but it makes for a great opportunity to add a new visual element without needing to include an image. Blockquotes usually have some sort of colored border and change the text alignment. They also make your site seem more credible since you’re citing external sources.

Bold text

You can use bold text to emphasize your strongest points. You can also use it to highlight interesting fragments from a sentence. This will make people curious and get them to go back and read the text before it if they were skimming. When using bold styling to make text stand out, aim for 3-5 words inside a paragraph of text, or bold an entire single line paragraph, like this: Bolding a single line paragraph looks good too.

Write copy that flows

If you want your writing to be easy to read then keep leading readers from one sentence to the next. Here’s what I mean. Leave cliffhangers and transition sentences at the end of your paragraphs to get people effortlessly to the next line. Some example transition sentences you can add to the end of your paragraphs are:

• Let me explain
• Here’s what I mean
• Here’s an example

You can also keep people reading by using simple sentences.

Keep your writing simple

Using short, simple sentences will keep your posts easy to read. You don’t have to sacrifice style and personality. In fact, it’s okay to write more complex sentences on occassion to switch things up. However, you don’t want your posts to be a non-stop flow of complex-compound sentences. If you think you might be struggling with this aspect of your writing, try out the Hemingway app. 

Hemingway is a free app that will highlight your most challenging sentences. I’ve found that if I eliminate all of my yellow sentences, I often lose a bit of personality in my writing, so I make some exceptions. Give the app a shot and I’m sure it will help you improve your writing and find your voice.

Limit complex words

In general, it’s better to use simpler variations of words when available. For instance, you can say “use” instead of “utilize” or “practical” instead of “pragmatic.” Again, you can skip cases where this cuts personality out of your writing, but it will mostly improve the readability. The one other exception is for complex industry terms like discussing “search engine optimization” on a marketing blog.

Conclusion

As you’ve just learned, there are many ways to make your posts more readable. To start with, make sure your WordPress theme is setting you up for success. A readable WordPress theme will have:

• Large text
• Strong contrast ratios
• 50-75 characters per line
• Mobile-friendly design

All of the accessibility-ready themes on wordpress.org have passed these guidelines if you want some examples. After you install a theme and setup your blog, make sure you’re doing everything you can to make your posts fun and easy to read. To optimize your posts for readability:

• Limit paragraphs to roughly four lines
• Use headings
• Add plenty of images
• Give images captions
• Use bullet points
• Add blockquotes
• Bold text occasionally
• Write copy that flows
• Keep your writing simple
• Use simple words

Phew! That’s a lot to keep track of, but it will become second nature in time. You can copy down this list to a note or bookmark this page for later if you think you’ll need a reminder. If you have any questions about improving your site’s readability, or if you have a tip of your own to contribute, leave a comment below!

Ben Sibley is the founder of Compete Themes, a WordPress theme shop that makes free themes for bloggers and content creators. Get a competitive edge with one of their readability optimized themes.

The post Start With A Readable WordPress Theme appeared first on PremiumCoding.