Readability Advice: Lorem Ipsum Yourself! Design Content!

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.

One day I asked a blogger to improve his post readability. Why? Otherwise my strained eyes would prevent me from reading it

He was quite surprised and without really understanding asked me “what is the meaning of text decoration“? That was a big surprise.


Internet Professionals Fail at Readability

Can it be that even Web-savvy people 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. The web designer told us – after I inquired how they want to design the content – that content design is 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 when it comes to dummy text 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.


Are You Styling Your Content Yourself?

The clients end up “styling” the content themselves. They are writing huge paragraphs, using bold type all over the place or not using text formatting 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.


Common Readability Mistakes to Fix

OK, you get it now. Now you will probably ask: what are the most common readability issues I encounter on the Web? These are the ones you need to fix!


Too long chunks of text

The rule of thumb is that a paragraph on the Web should have no more than 3 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. Keep it short instead!

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 a subset of text-formatting based on 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. How do I stress something then?

I use a background instead adding the background-color property in 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 for many 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.

In case you use 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.

You can’t see the whole word or sentence with one look. You have to move your eyes over the text to read the whole headline.


The wrong fonts, or too many fonts lumped together

Web designers tend to use font replacement with web fonts 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 appearance. 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 use 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 at. Complimentary colors like red and green can be used as an design element.

High contrast combinations 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. Do not try to reinvent the wheel when not necessary.


Key Takeaways on Content Design

Content design is much more important than you have thought, isn’t it? You are still not sure how to implement your newfound knowledge on your actual site though. Here are the actionable techniques.

  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 (consider mobile display!)
  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 redundant elements, 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:

* (CC BY 2.0) Creative Commons image by Markus Spiske, raumrot.com