Newspaper websites need to improve their readability

Most newspaper websites are doing a bad design job in making their stories readable. Too many are using:

• small fonts,
• long off-putting paragraphs,
• no subheadings,
• no in-content boxes or pictures, and
• no in-content links.

To explain more, I’ve written a companion post on online readability (design, not writing – and this post was first published here). And here’s an example each of their news stories so you can see the issue: Daily Mail, Express, FT, Guardian, Independent, Mirror, Sun, Telegraph, Times.

Main readability design mistakes

This table summarises the main ways they are going wrong.

Tiny fonts

They are all using font sizes that are too small for comfortable reading on copy-heavy pages. Only the Guardian, Independent, Mirror and Telegraph offer obvious controls for resizing text.

But most of the sites use 12 or 13px fonts for body copy. I think this is too small to be the default – 16px is a much more readable size. Only the Guardian comes anywhere near this.

No sub-headings

Astonishingly, not a single major newspaper site uses sub headings in its news stories, (apart from the Sun occasionally) despite this having been a generally accepted web readability recommendation since 1997 when it comes to helping people read webpages.

Long paragraphs

Nearly half use long paragraphs, serving up great slabs of unappealing copy. This makes the pages hard to scan and read – again, despite using shorter paragraphs online being a standard online guideline.

Bad readability

These three are vying for last place when it comes to readability. I can’t believe anyone could comfortably read these pages for long:

• Express – A small font, expressed in absolute pixels, so Internet Explorer users can’t even make it bigger. And the Express full-justifies its copy, making it harder to read as the gaps between words are different on each line. A complete pig’s ear.
• Independent – A small font combined with multi-sentence paragraphs. A readability nightmare, even if there is a text-resize control.
• Daily Mail – The Mail does a good job of breaking up its pages with pictures. But its font size is too small, and there are no subheadings in the copy to help the user understand what the story is about or give the eye a rest.

Fairly poor readability

• Mirror – There’s a font size control (although this is a poor second to having a big enough font in the first place). And although it’s only 12px, the Mirror is at least using Verdana which is easier to read than Arial at small sizes. This, plus its use of short paragraphs, rescued it from the ‘bad’ list.
• Telegraph – Default font size is too small (smaller than that of the Times and FT), although there is a control to make it bigger. It uses short paragraphs, but for me it’s all still too hard to read.
• Times – A slightly bigger font than the Telegraph, but no text size control, and paragraphs are too long. Someone introduce the CMS people to the return key …
• FT – The font is starting to get big enough. But while it’s paragraphs tend to be only one or two sentences, the sentences themselves tend to be long. You’d still have to really want to read a story to plough to the end of it.
• Guardian – Its font size is almost big enough for my liking, and I nearly put it in the ‘getting there’ list. But its paragraphs are too long, and there are no in-content devices (boxes etc) to break up the copy.

Getting there

• Sun – A nice big font, short paragraphs, copy broken up with images, and occasional sub-headings. Probably the best of them – some more sub-headings would really help though, and I’m not convinced by the Georgia font or the occasional use of italics.

Newspaper website readability: table notes

Verdana and Arial are the same height at a given size, but Verdana is wider. At small font sizes, Verdana will be easier to read as it will look bigger. At bigger font sizes, it appears to stretched.

The Sun is using Georgia, so its font sizes can’t be directly compared to the others – at a given size, Georgia looks smaller than Arial and Verdana.

The Sun is also using SIFR to replace standard web fonts with a custom one in its headlines.

The Guardian is the only site to use in-copy links. These are a good idea to help people read a page, as they draw the eye and encourage people to keep reading. However, the Guardian has an annoying habit of linking keywords to its own pages when you might think they are external links.

The Independent treats its own stories (standfirst, long paragraphs) differently to agency-sourced ones (no standfirst, short paragraphs). The table shows information for its own stories.

Headings explained

These findings are all for the news pages. Other sections may be treated differently.

• Headline size -Default font size (in pixels) for the main headline.
• Font size -Default font size in pixels for the body copy. The Express is set to an absolute size of 12px. The rest are in EMs, and I’ve assumed a 16px starting font.
• Body font -The first font listed in the CSS.
• Standfirst – Is there any summary or introduction to the news stories (EG a bold first paragraphs, or a more traditional standfirst)?
• Sub headings – Whether the copy is broken up with sub-headings.
• Short paragraphs -Are paragraphs kept short – 1 or 2 sentences, maximum. Or are there huge sections of copy that have probably been lifted verbatim from print?
• In-content boxes -Is there any attempt to break up the web copy with boxes (Eg ones with ‘More …’ stories).
• In-copy links – Are links routinely used in the copy?
• Obvious text size control – Is there an obvious way to control the text size (I know you can use the browser to do this, and you probably know it too – but my mum doesn’t. And I bet most people don’t).

Thanks to the excellent Firebug with deciphering the style sheets.