Readability Advice: Lorem Ipsum Yourself! I’m Not a Dummy

*

One of the most important things on the Web is readability. Despite that to this day many webmasters, bloggers and even web designers neglect it.

Recently an SEO blogger I asked to improve his post readability so that my strained eyes don’t prevent me from reading it asked me “what is the meaning of text decoration“? That was a big surprise.

Can it be that even Web-savvy people like SEO practicioners do not get the basics of designing readable content?

Yes. A few weeks earlier I was at a meeting dealing with the relaunch of a client site. Prior to this the web designer told us after I inquired how they want to design the content that it’s up to us. They design the site and put dummy text aka lorem ipsum all over it and we “can” style the content ourselves. The right reply to such a remark and also the perfect readability advice in such situations should be:

Lorem ipsum yourself! I’m not a dummy

Of course skipping content design is the wrong approach. How can a designer ignore the content? Many of them do though. The clients end up “styling” the content themselves, writing huge paragraphs, using bold type all over the place or not using text decoration at all. The outcome is always the same:

  • poor readability
  • high bounce rate
  • slow sales

By now everybody should know it: people do not read on the Web – they scan.

It means visitors look for highlighted items. Once they see one of them they may read on but first they look whether the words or sentences that are visible do resonate with them.

So what are the most common readability issues I encounter on the Web?

 

Too long chunks of text

The rule of thumb is that a paragraph on the Web should have no more than 5 lines. Then either a new one starts or another element follows. Longer paragraphs are even very difficult to look at. You rather skip them altogether.

Subheadings separating paragraphs are very good method to make longer text readable as well.

These subheadings have to be intriguing though, not solely one word descriptions. Otherwise people will see them and move on instead of reading the paragraph.

Lists and citations are very good to overcome this issue as well. In case you have to use more than one comma you can display the same list as a bulleted or numbered list as well.

Citations are excellent to highlight important insights from a text. I use them very often to make sure scanning readers get the most attractive parts of my article served first.

 

No text decoration, wrong one or too much of it

Text decoration is not not to mix up with the CSS term of the same name: text-decoration. Commonly used text decoration applies to any way of changing the appearance of text. Text decoration is usually bold, italics, underline.

On the Web we do NOT use underline for not linked text as most people still expect underlined words to be links like on the early Web. Unfortunately italics is also difficult to use on the Web. Most fonts become unreadable when put in italics. That’s why I don’t use italics on my own blogs. I use a background instead adding the background-color property ion the CSS. It’s very similar to a text marker effect.

Luckily you can use bold text on the Web but use it wisely.

Some blogs like the Social Media Examiner use bold text all over the place so that whole sentences are bolded. They even advise others to do so. That’s too much though. Bold is for one or two word terms not more. Use bold for the most important keyword in your text or paragraph. Do not bold more than one term per paragraph ideally.

 

Too small or too large font size

Many sites, especially older ones use too small font sizes. It’s like the proverbial “fine print” nobody is meant to read. Especially during the Flash era many fonts were tiny. Even though most sites use CSS today the font sizes are too small fonts.

With newer fonts and computers that use so called anti-aliasing by default small font sizes that were readable once are not anymore.

Anti-aliasing is simply put font-smoothing. It looks better for the web designer but it’s difficult to read unlike the clumsy but crisp Web-safe fonts of earlier days. So in case you use such a smooth font you have to use even bigger font sizes. 12 – 14px was common sense for normal text until webfonts went mainstream. Now 14 – 20px is perfectly average for body text. Below 14px most webfonts are unreadable.

Some people use huge headlines as a design element. Again it looks good but too big type is also difficult to read as you can’t see the whole word or sentence with one look. You have to move your every over the text to read the whole headline.

 

The wrong fonts, or too many fonts lumped together

Web designers tend to use font replacement for headlines and larger text these days to make websites look prettier. I like those techniques as well but sometimes they overdo it. Also many fonts are simply not meant for longer text so they turn unreadable too.

Also mixing serif and sans-serif fonts is used frequently as a styling technique. This is very distracting.

To improve user experience you have to limit yourself to two or at most three fonts at the same time. Also all three should be either serif or sans-serif but not used together unless you want to stress the difference by using both at the same time.

Studies have shown that generally sans-serif fonts are better to distinguish and thus readable than serif fonts on the Web. In print you might argue it’s the other way around but we are dealing with readability on the Web. On the Web we only have a few fonts available on all systems, Helvetica and Arial still being the best of those. Other than that you have to rely on above mentioned webfonts. Selecting readable ones is quite tricky though.

 

Lack of white space

Good design uses lots of so called white space. White space is the empty room on your page that allows your eyes to rest. It doesn’t have to be white but white is better than black for example. In the early days of the Web everybody wanted to build “portals”.

To this day many misguided webmasters claim their site is a portal to sound better.

Today we know better, the less clutter and items to choose from the better the user experience and the more conversions. White space is a crucial aspect when designing websites. Ideally you remove all unnecessary design elements and replace them with white space. Modern sites display almost solely the content. Design is not about decoration. It’s about content.

 

Too much or not enough contrast

Sites using black or otherwise dark backgrounds and white type are very straining for the eyes. I don’t read those at all in many cases. Other people will try but their eyes will get tired even faster than on other sites. There is simply too much contrast.

There are sites out there that uses different shades of grey for the background color and the written content.

That’s also not recommendable. There is not enough contrast.

Additionally some color combinations are also too bright to look. Complimentary colors like red a green can be used as an design element but green backgrounds and red type will probably ostracize your readers. Luckily most sites that combined these are long gone. In case you are not sure how readable your text is use simply black type on white backgrounds. We do not have many black books with white content for a reason.

 

Key takeaways

  1. Do not use lorem ipsum dummy text, use real content and get it designed from the start
  2. Use short paragraphs up to 5 lines, lists and citations
  3. Bold the most important keywords and use “text marker” effects on others
  4. Use font sizes that are both small and big enough to read
  5. Do not mix several fonts, use standard sans-serif fonts like Helvetica or Arial
  6. Remove clutter and decoration, add white space instead
  7. Be aware of the contrast onpage and use black type on white background when in doubt

 

This article does of course not deal with all readability issues or best practices. These are just a few of the most common ones. There are other resources I’d recommend to read more on that subject:

 

* Creative Commons Image by Paco CT