Medium

Started by the co-founders of twitter (Ev Williams and Biz Stone) in 2012, it’s the epitome of simplicity. There are no colored backgrounds (although you can add some yourself). Your text isn’t as wide as the entire page. Everything is easy to read and, most importantly, easy to scan.

Let’s face it — there’s an abundance of content. Some is good, some isn’t. But it’s hard to differentiate between the two (good and bad) if you haven’t read them all the way through.

I’m not a fast reader. Having tried photo-reading (a method of “taking quick mental pictures” of the content in front of you), I didn’t end up with any information. So the challenge then becomes: how can I scan a text and know what it’s about?

Enter text scanning. Thanks to the elements I will be telling you about below, you will be able to drastically increase your reading and comprehension speed. Not only that, but applying these principles in your own content (articles, blog posts, guides, ebooks, etc.), you’ll have users thanking you — first they’ll scan. Then they’ll read. And if the content is really good, they might even comment.

Elements of Readability

A. Hierarchy of elements

This simply refers to the way the elements of text work together. Are you using Headlines (H1, H2, H3 etc.) to guide your users? Are titles emphasized in a way that they provide info on the following paragraph?

Image courtesy of DWUser. Read more about hierarchy of elements here and here.

B. Contrast of colors

Is there really a difference between yellow and eggshell? Even if you can’t name the colors, you can definitely tell the difference. Contrast is both about ease of use and restraint — black on white seems to work best.

Image courtesy of Antonia Grace Hall / SoulScribbler. Read more about contrast here.

C. Letter spacing

If you’ve ever used Photoshop, you know what a huge difference letter spacing can make. Is your text one chunk of text squished together? Or do the letters have space “to breathe”?

Image courtesy of StackOverflow. Read more about letter spacing here and here.

D. Line length

You have the power to format your text and content any way you want. So why not make it easier for people to go through it? Shorten your line length for your reader to be able to quickly jump from one to the next.

Image courtesy of Fonts. Read more about line length here, here and here.

E. White space

Not just an element of design for design’s sake. It improves readability on a blog by calming the readers’ eyes. This shouldn’t be interpreted as: always use a white background. Rather — give your content space to unfurl.
Besides the technical guidelines above, here’s how to put it all into practice.

Image courtesy of Smashing Magazine / Introducing The Novel. Read more about white space here and here.

5 Practical Tips to Improve Your Blog’s Readability

1.Break your text up into smaller pieces.

That way each paragraph will have its own idea and the whole text will be easier to scan. Try to aim for under 6 sentences per paragraph.

What helps me get this done from the beginning is quickly writing the article outline (usually 5–10 main points). So I basically start with small pieces that will work together in the end.

2.Use bullet points.

Microsoft Word has taught me a lot about structuring information. Use simple bullet points to show the relation between similar elements:
Old MacDonald had a farm. An on that farm he had:
• Some pigs
• A cow
• Two dogs
Oh, an bullet points don’t actually have to be the round things you see above. You can use checkmarks for checklists, emojis for fun recipes or squares to fit with your site design.

3.Numbers help the reader keep track of important stats and figures.

Remember how above I told you there were 5 practical tips? This will work as an anchor for you to, hopefully, ask:
Those are 1, 2 and 3. What were 4 and 5? Oh yeah, I know!

4.Emphasize important segments of your text.

As you’ve previously seen, you can do this with quotes, bold, italics, images or all of them (preferably don’t use them all at once, the eyes of the reader will get tired, he will decide the text is hard to read and will exit the page).

If you’re using a WordPress blog, there are hundreds of plugins available for highlighting text, including ones that add tooltips on hover. You can provide more information for the user that’s interested in it.

5.Avoid ALL CAPS, stick to serif font.

The human eye can to amazing things. Raed txet eevn if the ltterers are not in hte smae odrer. But it has its limits. ALL CAPS text is usually harder to read when you’re using it for the body text (feel free to use it for headlines and emphasis).

Serif fonts help the reader glance across text, slide through sentences and get a feel for a paragraph without actually reading it in its entirety.

Examples of Sites with Great Readability

Copyhackers — truly one of the great content marketing wonders

Even if the content is sometimes cornered by newsletter signup forms, ebook banners or share blocks, the blog still manages to focus on the content.

Medium — the platform that almost forces you to organize and scan text

I wasn’t sure at first if it was just the editor, but I’m pretty sure the whole concept and community force me to be better organized with my text.

Quicksprout — couldn’t have a post about content without Neil Patel

With just 3 elements cornering the actual content, the text is easy to scan, especially since it’s so tight on the page.

Readability Test Measurement

Once you’ve implemented a few (or all) of these tips and tactics, how do you actually test whether it worked? One simple and free solution is SumoMe’s Content Analytics. Test, improve, measure, repeat.

And while you’re in SumoMe’s Store, you might want to also check out Scroll Box. It’s a popup that shows up once the visitor has consumed a certain percent of your content (scroll down the page 40% for example). It would help you know about the quality of your users and your users’ experience. Couple the technology with a great offer and having great readability pays for itself.