malcolm coles

There are several ways to make your copy readable on the web. Yet I see sites ignoring these simple tips, all the time - especially newspapers.

At the botom, you'll find this article repeated, breaking all these rules ...

Choose a large font size

Fonts that are too small are hard to read. Obviously. However, people often think designs look nicer with smaller fonts.

These people have obviously never given any thought to actually reading lots on content in the nice-looking design.

NMA home page font is too small and pale grey

Browsers default to 16px (equivalent to about 12 point, if you're familiar with font sizes). The first thing most website style sheets do is change that to 12px, or even smaller.

New Media Age, for instance, relaunched its website today, using an 11px grey font on its home page.

If you've got a content-rich site, use a big font. We all know people scan rather than read on the web. They'll read even less if you use a small font.

Use the right font

There are a few font choices that sites mostly stick to - Arial, Verdana, Georgia etc - as they're pretty much guaranteed to be displayed by most browers.

Arial vs Verdana

Remember, though, that although these two fonts look very similar and are the same height at a given pixel size, Verdana is wider than Arial.

This means that at small sizes (eg below 15px) Verdana is easier to read. Above that it looks too spaced out and Arial is easier to read.

So if you have to use a small font, use Verdana. The combination of small font and Arial is really hard to read.

Break up the copy with sub headings

Break up your copy with sub-headings. It makes the page easier to scan, it gives the eye a rest from all that copy. It's good from an SEO point of view.

And sub sub headings

It's win, win, win.

Use small paragraphs

Make paragraphs one or two sentences only online.

Forget all that stuff you learned at school - that was for print. People scan the start of paragraphs and then move on.

So cram too much in, and they won't even notice the later sentences.

So ignore any advice about paragraphs being 3 to 5 sentences. The BBC has one sentence per paragraph. Do likewise.

Get the contrast right

Contrast can be a personal preference. But one thing we can all agree on is that copy on a busy background is hard to read. So don't do it.

Web readability - more reading

• HTML E-Mail: Text Font Readability Study - Research showing that people prefer Arial at bigger sizes, Verdana with smaller sizes.
• Relative readability - "After years of wondering why browsers defaulted to 16pt text sizes I'm starting to be convinced that long text really is significantly more readable on screen at precisely that size."
• The 100%-Easy-to-read standard - "... after a day, you won't want to see anything smaller than 100% font-size for the main text. It looks big at first, but once you use it you quickly realize why all browser makers chose this as the default text size." Read this - then change your font size back to 100% / 16 pixels / 12 points.
• How to size text using ems - Internet Explorer will not allow readers to resize text that has been sized in pixels. So don't do it.
• Font Sizing: em, pixel, point, percent and keywords - How 100%, 1em, 16px, 12pt are all the same. Plus other great tips and links on working with font sizes.
• Web design is 95% typography - "95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography."

The article again, ignoring my own advice

Fonts that are too small are hard to read. Obviously. However, people often think designs look nicer with smaller fonts. These people have obviously never given any thought to actually reading lots on content in the nice-looking design.

Browsers default to 16px (equivalent to about 12 point, if you're familiar with font sizes). The first thing most website style sheets do is change that to 12px, or even smaller. New Media Age, for instance, relaunched its website today, using an 11px grey font on its home page. If you've got a content-rich site, use a big font. We all know people scan rather than read on the web. They'll read even less if you use a small font.

There are a few font choices that sites mostly stick to - Arial, Verdana, Georgia etc - as they're pretty much guaranteed to be displayed by most browers. Remember, though, that although these two fonts look very similar and are the same height at a given pixel size, Verdana is wider than Arial. This means that at small sizes (eg below 15px) Verdana is easier to read. Above that it looks too spaced out and Arial is easier to read. So if you have to use a small font, use Verdana. The combination of small font and Arial is really hard to read.

Break up your copy with sub-headings. It makes the page easier to scan, it gives the eye a rest from all that copy. It's good from an SEO point of view. It's win, win, win.

Make paragraphs one or two sentences only online. Forget all that stuff you learned at school - that was for print. People scan the start of paragraphs and then move on. So cram too much in, and they won't even notice the later sentences.

So ignore any advice about paragraphs being 3 to 5 sentences. The BBC has one sentence per paragraph. Do likewise.

Contrast can be a personal preference. But one thing we can all agree on is that copy on a busy background is hard to read. So don't do it.

You might also like

1. Newspaper sites: PLEASE improve your readability
2. On the usability of taps and the lessons for web design
3. Five changes I'd make to the new Web User beta design
4. 29 easy ways to fine tune your blog
5. ITV shows why websites for mobiles are RUBBISH