How To Design Headlines and Subheadings

Posted: 04 Aug 2011 05:30 AM PDT

Headlines draw people into your copy and they help strengthen information scent. Subheadings create a hierarchy and allow you to communicate messages to those who scan. How should we visually design these very important parts our pages?

When thinking about typographic hierarchy we have 3 levels of text to consider.

Primary level — This is your headline. The goal here is to draw the reader in and lead him or her toward secondary type.
Secondary level — This is your subheads and also includes pull quotes, captions, and anything else that stands apart and supports the main text. The goal here is to aid scanability and lead the reader toward more detailed information.
Tertiary level — This is your main content. The goal here is to stay out of the reader's way. The reader should be able to decide if they want this level based on primary and secondary type levels.

The Purpose of a Headline

The obvious purpose of your main headline is to get people interested enough to read further. It takes effort to read large blocks of text and you need to convince people to make that effort.

On average 8 out of 10 people will read your headline while only 2 out of 10 people will read the rest of your copy so a headline that can communicate a lot of information is quite valuable.

You only want to tell part of the story in your headline, but you want to make it the most intriguing part of the story to communicate the most important information and entice people to read the rest.

Brian Clark considers your headline so important he advises writing it first. Since your headline makes a promise to readers you need to keep that promise in mind to ensure you fulfill it in your copy.

Headlines have another purpose. They let the reader know he or she is in the right place. Your reader came from somewhere with a goal in mind. Your reader is following a scent.

Your headline can quickly let people know they’re in the right place and that they can complete their goal on the page.

A well written headline draws people in, orients them, lets them know what the main body of text is about, and leads them into that text. It’s often the first impression of the page and it has a lot of work to do.

How to Design Headlines

In order to complete the above goals headlines need to stand out visually. Your headline should be the most important text visually on the page, usually marked up with an h1 tag.

Consider the image above from Trent Walton’s site. There’s no mistaking the headline. It’s the most visually dominant text and the most visually dominant element on the page (the red head) leads your eye directly to it.

How can we help our headline grab attention?

Contrast — your headline should contrast with other text on the page to clearly show it’s different
Display typeface — unlike text type, display type is created to attract attention. You can give up some legibility in order to make people notice it.
Size — headlines should generally be larger than surrounding text to show their importance and set them apart. Make them the largest text on the page.
Weight — similarly headlines should be bold further increasing their visual weight and their showing importance
Space — by providing ample space around your headlines you help increase it’s visual weight on the page
Asymmetry — moving headlines out of alignment with your typographic grid can help draw attention to them
Flow — have other visual elements lead the eye to your headline

Look back up at the headline Trent designed and notice how the headline grabs attention through each of the 7 items listed above.

Your headline has a big job to do and you need to help it do that job. Ultimately you’re looking to make your headline the most dominant visual element on the page. A visitor should notice it instantly after arriving.

The Purpose of Subheadings

Subheadings have a similar function to headlines though to a lesser degree. They too exist to get visitors to read further and reinforce the scent trail. Subheadings help to keep the attention your headline creates.

The image above is from a blog post on Luke Wroblewski’s site. While not as dominant as we’d expect a headline to be, the subheadings clearly stand out from the main text.

The story you started telling in your headline should be further told in your subheadings. Along with other secondary text your subheadings should keep interest and lead people to further information.

Subheadings have additional functions as well. Taken together they structure your content and give hierarchy to the page. They make large bodies of text scannable letting people know what the content is about at a glance.

Ideally someone could read your headline and your subheadings and nothing else and still understand the main points of your content. Done well you can communicate your message through headlines and subheadings alone.

Through their hierarchy your subheadings show people where they can enter and exit your content and help them choose which part of the content they want to consume.

How to Design Subheadings

You can design your subheadings in a similar way to how you design our main headlines, though not to the same extreme.

Subheadings are a level lower in the hierarchy than headlines and they should visually look less important. On the other hand they are a level up in the hierarchy over body text and so should reflect that visually as well.

To call attention to subheadings we should apply a consistent set of visual cues. While we want them to contrast with other text they should be similar to each other reinforcing they’re at the same level in the hierarchy.

Spatially we can:

Indent or outdent headings
Use line spacing to create more whitespace above, below or both
Place them in margins
Place them inline with the first line of copy in the section and emphasize them graphically

Graphically we can:

Increase their size
Use a display typeface
Give them a different style
Create more typographic color through bolding

We can use multiple visual cues for headings though probably not more than 3 as a guideline.

Some redundancy can help communicate the message and emphasize the similarity. Too much can send more messages than we intend.

Ultimately your subheadings will use similar methods for calling attention though not to the same extent as the main headline on the page.

Summary

Headlines and subheadings are very important text on your page. They’re the primary and secondary levels of communication for your text.

They need to grab the attention of your reader and lead them further into the copy.

Together they help create hierarchy on the page as well as within the text itself. Ideally someone could scan your headline and headings and walk away having received your primary message and perhaps a secondary message as well.

It makes sense to visually design headlines to be the most dominant element on the page and then design headings to be lesser focal points on the page pulling your reader through your copy.