10 ways to improve your body… text

Posted by Heath Sadlier in content, design, visual design on March 25, 2013 | 2 comments

Most of the reading we do now is on a screen. Facebook and Twitter are usually bite-sized chunks of text, but we also read much longer pages of text – from news articles, blog posts, product descriptions, and of course all those terms and conditions. Those of us that are pouring text onto the Internet need to do so in a way that allows users to consume it easily.

Here are 10 tips to help you improve the way text is presented and written on your site. To start with let’s look at the three common user behaviours when reading a page of text online.

  1. Users read the copy from the beginning to the end until their attention runs out.
  2. Users scan across and read the parts that interest them.
  3. Users scan the text until they find the answer to a single question.

If you’re unsure of those three, just think of the last time you read a news article (1), read a Wikipedia article (2), and looked for an answer on a page after googling a question (3).

1. Choose a comfortable font size

Are you leaning forward as you read this? If you are, then it’s likely this font size is too small. This site currently has a font size of 13 pixels (13px). For comfortable reading online 16px should be considered minimum.

NZHerald.co.nz reader was so frustrated with a 14px font size after they redesigned last year, he quickly created a Google Chrome extension to bump it up to 16px.

Font size examples

Full page examples: 14px sample, 16px sample18px sample, 20px sample.

Which font size do you prefer?

There are many factors that affect readability on screen including font choice, font weight, line height, and the x-height of the font. The Golden Ratio of Web Typography will provide you with balanced settings for size and line height.

2. Use a short to medium line length

People can read longer line lengths of 100 characters per line faster, but people prefer shorter line lengths of 45–72 characters per line. There’s a lot that has been written about this e.g saccades and fixations, but I recommend using shorter line lengths not just because people prefer it, but because it also allows people to scan the text easier. If users are scanning, they are looking for keywords and are able to scan down a single column of text a lot easier than wider text.

Line lengths example

Full page examples: 50 characters per line100 characters per lineResponsive/fluid line length

Which line length do you prefer? Somewhere between 50–100?

Now in the world of responsive websites line lengths vary on each device. Your main content area should be responsive, but not to expand out to the full width of a browser on a large screen. I find Wikipedia almost impossible to read on larger screens.

3. Big margins make for cozy copy

Longer line lengths can cause problems when a user finishes one line and had to find the next line.  One way to reduce the effort required is to add larger margins.

They also improve the look and feel, and make the text sit on the page in a way that’s more comfortable. It removes visual tension between text and its surrounding.

Example margins

Full page examples: Uncomfortable marginscomfortable margins

Do you like bigger margins?

4. Use high contrast text

The contrast between your text and your background colour should be high. Follow the Web Content Accessibility Guidelines for text contrast. There’s even a handy contrast calculator. You should ensure your body text contrast is AAA compliant.

Text contrast: The good the bad and ugly

Full page examples: AAA compliantAA compliantNope… don’t do it!

Some recommend pure black on white. But one thing to consider is if you want people to read more than 1,000 words, perhaps read multiple pages, consider not having a white background. When a screen is displaying white it is outputting as much light as possible, it’s essentially a lamp. Consider having an off white background colour, as it will reduce eyestrain.

5. Let users find your body text easily

Your site’s visual hierarchy should be designed around your user’s needs. If you have a landing page where the primary content is text, design your page around it. There should be a clear content area that feels separate from navigation, related content, and advertising. Large margins help to separate body text from any surrounding clutter.

If you don’t have the space to add larger margins or use a bigger font size, check your right column if you have one. How much attention is it getting? If it’s not much consider moving it below the fold and make your content, the stuff users are paying attention to, sing.

6. Let your text flow

A single straight column of text can be boring. Consider changing the flow, without breaking it. Allowing your text to flow around images and block/pull quotes can keep your layout interesting. Try to avoid having your text stop…

Grumpy Cat

…and start again after some unconnected stock photography. That’s not to say you can’t have content between paragraphs, but it should be closely connected to what has just been said, or about to be said.

Oh and… you should never need to add ‘Article continues below’ anywhere on your site.

7. These things

Headings are essential to break up your content and to aid users that are scanning the page. If a user just reads the headings then they should have a rough idea of what was covered. The above heading fails, but if you scan across the others you get a pretty good sense of the points I’m making.

“Do as I say, not as I do” – Me

My previous post about Eftpos terminals desperately needs some headings. Try scanning down it, could you quickly figure out what was covered?

8. Plain English

“You should consider putting most of your messages at the subject-predicate position, use the art of subordination to smooth out annoying choppiness, remove those frightful compound prepositions, and use phrases to smooth out the choppy noun-noun modifier.”

That is actual advice about how to write in plain English. We all know how impenetrable the English language can be – that’s why we don’t read terms and conditions. If your product is text, e.g. a blog, then writing in plain English should be your first priority to a better user experience.

I’m now suddenly overly conscious quite aware focused concerned about the way I’m writing.

Simply put:

  • Avoid jargon.
  • Use short sentences.
  • Ask yourself: Who are my users? What words would they use? What concepts would they need me to explain?
  • Be precise and concise.

I used to work at Te Ara – the Encyclopedia of New Zealand (winner of the 2008 Writemark Plain English award – Optimal won it too in 2011) and while there, I heard stories of the battles challenges the editors had convincing some of the experts to write in plain English.

“In the early days, voices were sometimes raised and teeth gnashed as writers feared the ‘dumbing down’ of their high concepts or blunting of their finely honed prose. But that’s not what plain language is about, and the editors persuasively argued that the most abstruse concepts can usually be presented in a clear and plain way, avoiding jargon and complex vocabulary.” – Ross Somerville, Te Ara’s Production Manager (or Boss Editor).

Many contributors from scientists to historians, and perhaps even one economist, came round to seeing the value of plain English.

9. Remove marketing speak

Marketing speak can be the opposite of plain English. Rather than being precise and concise, marketing speak creates an impression that something specific has been said, but when you look more closely, it’s instead vague, lacking in substance, and full of weasel words. At its worst it can create a feeling that you’re trying to hide something.

As well as jargon, marketing speak is full of unnecessary adjectives – such as amazing! exciting! revolutionary! Good writing should have a minimum of adjectives.

“[Whoever writes in English] is struggling against vagueness, against obscurity, against the lure of the decorative adjective.”
– George Orwell

Another marketing no-no is to allow search-engine-optimisation keywords to cloud plain English. For more information read Jakob Nielsen’s Alertbox, August 13, 2012:  SEO and Usability.

10. Plan, consider, and design your copy

Last year Martin wrote about the marriage of content strategy and information architecture. In that post he talks about content being treated as an after thought. If your content is poor, no amount of work on interaction design, development, visual design or on your information architecture will create a successful website.

If your content is your product e.g. a blog, or your content is trying to sell your product, it is important to focus on it. Plan it, design it, be creative, hire experts, and get feedback from users. You should put as much care and thought into your content as any other process.

Consider…

  • Creating a short style guide that defines tone, and writing style.
  • Keeping your content as short as possible, this pressure will help you be concise.
  • Contracting in a specialist writer and editor to refresh your content and establish a style guide.
  • Planning out what content should be on different pages, and how the content relates.
  • Investigating how best to let users find related content, e.g. links within your text.

We’re here to help

If you want more information, or any guidance, just get in touch in the comments below or email me at heath@optimalusability.com.

 

March 25, 2013. Posted by in content, design, visual design.

  • John Walker

    Undeniably useful! Great job!
    However, there are quite a few points i have doubts about. You are saying that avoiding marketing language is essential, though you are advising plain English, which is mostly consisting of cliches and phrazes people read on daily basis. How interesting would that be to read?

    • Heathsplosion

      Thanks John!

      Plain English doesn’t *mostly* consist of cliches and common phrases, it’s simply the absence of unnecessary complexity. You can make language interesting without masking information a customer needs.

Sign up to our email newsletter

Sign up to receive regular updates on our latest projects, research, and other news in the world of usability.

Twitter updates


Optimal Workshop

Optimal Workshop builds tools for UX professionals.