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.

About these ads

14 thoughts on “Newspaper websites need to improve their readability

  1. Al

    ‘But most of the sites use 12 or 13px fonts for body copy. I think this is too small to be the default’

    Oh yeah? What size is this article?

    Reply
  2. malcolm coles

    @Cho – I may suck. But I’m not the first person to suggest 16px. Try reading these:

    “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.”
    http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

    and
    “Most websites are crammed with small text that’s a pain to read. Why? There is no reason for squeezing so much information onto the screen. It’s just a stupid collective mistake that dates back to a time when screens were really, really small.”
    http://informationarchitects.jp/100e2r/

    and even (remembering that 12pt=16px, and 10pt=13.33px)
    “# Make your default font size reasonably big (at least 10 point) so that very few users have to resort to manual overrides.
    # If your site targets senior citizens, use bigger default font sizes (at least 12 point). ”
    http://www.useit.com/alertbox/20020819.html

    Reply
  3. Pingback: Design a better newspaper website « Virtualjournalist

  4. Pingback: links for 2009-04-21 | James Mitchell

  5. Pingback: Kataweb.it - Blog - SNODI di Federico Badaloni » Blog Archive » Confronto sulla leggibilità dei giornali (inglesi) online

  6. Pingback: Internet Marketing, Strategy & Technology Links - Apr 22, 2009 « Sazbean

  7. Pingback: Newspaper websites need to improve their readability « MEDIA + AD + NEWS

  8. Pingback: The Revival Network: The New Hometown Newspaper!

  9. Pingback: Newspaper websites criticised « Qwerty2009’s Blog

  10. Christian

    The Times and the FT are terrible websites, with cluttered screens, picture and subject links and menus repeated all over the place – what we want is a site that feels like a newspaper. we want to know where we are in terms of having read todays newspaper – today you have no idea what’s old , what’s new and how much of the paper you have actually read. The best would be just to put the paper online with those graphics that look like pages turning. At least, you need a simple menu index down the side, with each section then subsection, then article listed. Highlight each where you’ve read it. Remove all the other jump to graphics and links as it confuses and clutters the screen. Currently they are a shambles.

    Reply
  11. William DuBay

    The article does not mention text readability, that is, reading ease as determined by the level of reading skill needed. National literacy surveys show us that we all do not have the same level of reading skill. In fact the average adult reader in the U.S. reads at the 9th-grade level. For more on the readability of newspapers, see my article, “What’s With the Newspapers:”
    http://www.impact-information.com/impactinfo/newsletter/plwork15.htm

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s