Subheads take the cake

They’re ‘the most important thing you can do’ online

Think of subheads as the icing on the cake.

Subheads help skimmers skim

Piece of cake Readers go for the frosting — aka the subheads — in online stories. That makes it easier for them to find what they’re looking for. Image by Annie Spratt

Skimmers look at subheads to learn what content you’re offering on a webpage, blog post or news release. This creates the layer cake eye-gazing pattern — on an eyetracking heat map, it shows up as a series of horizontal lines.

That helps visitors find what they want quickly.

Without subheads to guide the way, web visitors either skim the first line (or less) of each paragraph in the F-shaped eye-gazing pattern or hunt around for individual words in the spotted pattern. Both of those are inefficient ways for skimmers to find what they want.

Let them skim icing

Let them skim icing On an eyetracking heat map, the layer cake eye-gazing pattern shows up as a series of horizontal lines. Image by Ann Wylie

“By far, the single most important thing you can do to help users consume content is to use meaningful [subheads], and make [them] visually pop as compared to body text,” write Kara Pernice, Kathryn Whitenton and Jakob Nielsen, the authors of How People Read on the Web.

“The reader who sees the big parts is more likely to remember the whole story.”
— Roy Peter Clark, The Poynter Institute

Why subheads?

And no wonder. In addition to changing visitors’ eye-gazing patterns, good subheads can help you:

  1. Draw readers in. A compelling subhead can turn skimmers into readers.
  2. Help people find what they want quickly. Web visitors skim webpages, looking at subheads first to find sections of copy they’re looking for, before reading the paragraphs below.
  3. Break copy up. Good subheads break copy up into accessible, bite-sized chunks. And when your message looks easier to read, more people will read it.
  4. Keep readers reading. “Subheads increased reading for skimmers and for those whose attention was beginning to wane,” according to The Poynter Institute’s Eyetrack III study.
  5. Communicate to nonreaders. Well-written subheads can convey your key ideas to flippers, skimmers and others who won’t read your paragraphs, no matter what.
  6. Keep readers on your page. If they can’t find what they’re looking for on your page, they’re likely to go back to Google to find a page that gives them what they want.
  7. Help visitors read and understand. Subheads “make it vastly easier for users to read and understand web pages,” Pernice, et al., say.
  8. Make your message more memorable. “A writer who knows the big parts can name them for the reader” with subheads, writes Roy Peter Clark, senior scholar at The Poynter Institute. “The reader who sees the big parts is more likely to remember the whole story.”

Five more reasons for subheads

Indeed, any story of any significant length should have subheads, says Roy Peter Clark. Clark, The Poynter Institute’s editorial guru, says those subheads can:

  1. Create an index for the story
  2. Offer a distinctive point of entry into the piece
  3. Ventilate the gray page with white space
  4. Let the writer test the coherence of the piece
  5. Give the reader the global structure of the piece at a glance

This is a job for the writer, not the designer, Clark says. The writer should produce or at least suggest the subheads.

How to write subheads

To make the most of these essential elements on every webpage, Pernice, et al., suggest that you:

1. Divide and conquer. Organize your online message as a series of sections and subsections. Label the sections with subheads (“How to write subheads” in this story, for instance), the subsections with bullets or bold-faced lead-ins (“Divide and conquer” here).

Note that you’ll have a subhead for each topic in the body of your story, plus one subhead to separate the body from the conclusion (for this story: Don’t drop the subheads.) So if you have three topics, you’ll have four subheads.

2. Choose meaningful words. Concisely describe the content within each section in a subhead. Use simple, understandable words. Test: Could your grandma understand it?

3. Make subheads stand out. “Subheads only get looked at if they actually look like subheads,” write Pernice, et al. “If the sections and their subheads are not different enough, then people will not be able to use them as the lighthouses they are meant to be.”

Think larger text, bold-faced type, color, more white space. Make sure there’s plenty of contrast between the text and background, and avoid putting an image behind the text.

4. But don’t make them distracting. It’s the Goldilocks rule: Use just enough to set them apart from plain text. Use too much formatting, and they’ll distract skimmers from the rest of the page. Use too little formatting, and skimmers won’t look at them.

Don’t drop the subheads.

Whatever you do, don’t drop online subheads.

“If you are not calling out sections of your web pages or prose on those pages with subheads, you are making a big mistake!” write Pernice et al. “If you take nothing else [away], please take this: Use subheads and subsubheads.”

  • Lift Ideas Off the Screen

    Reach nonreaders with display copy

    People spend 96% of their time on websites looking, not reading, according to a Xerox PARC critical incident study.

    Lift Ideas Off the Screen in Chicago

    “People read paper," says TJ Larkin, Larkin Communications Consulting. "They use the web.”

    Because even highly educated web visitors read, on average, just 20% of words on the page.

    Indeed, web visitors read, on average, 20% of words on the page, according to an analysis of 50,000 page views of European computer scientists, psychologists, sociologists, engineers.

    So how do you reach nonreaders on the small screen?

    At Writing for the Web and Mobile — our two-day hands-on web-writing master class on June 12-13 in Chicago — you’ll learn how to:

    • Pass The Palm Test. Improve reading time, comprehension and satisfaction with one quick trick.
    • Take five simple steps to write links that get scanned and clicked.
    • Use a six-step process to transform your bulleted lists into freestanding information packages that lift key messages off the screen for nonreaders.
    • Bust the myth of page view time: Measurably boost understanding, memory, satisfaction — while taking readers 50% less time.
    • Pass The Skim Test: Make sure even flippers and skimmers can get the gist of your message — without reading the paragraphs.

    Learn More.


Source: Kara Pernice, Kathryn Whitenton and Jakob Nielsen; How People Read on the Web: The Eyetracking Evidence; Nielsen Norman Group; Sept. 10, 2013

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

Free writing tips
  • Get tips, tricks & trends for Catching Your Readers
  • Learn to write better, easier & faster
  • Discover proven-in-the-lab writing techniques