4 Examples of Effective Headline Design.

headline design for web contentHeadline design? What does that mean?

It means writing and formatting your headline in a way that makes it jump out from the page, or email, or a smartphone.

It used to be that headlines had to do a single job, on the web page where the balance of the content followed. Read the headline, and then keep reading the body text immediately below.

Today, headlines still have to work well, immediately above the body content, but they also have to grab attention and hook readers when they stand alone.

Here are a few situations where your headline has to stand alone, or almost alone: When used as a tweet on Twitter. In an RRS feed. On a smartphone. In Reddit or Digg.

In these circumstances, your headline has to jump out from dozens of others, and get the reader to click through to the full page or post.

There are a number of things you can do to get readers focused on your headline over and above any others. And part of the job involved headline design.

In other words, you need your headline to jump out from the list, simply through the power of its visual appearance.

Here are 4 ways to differentiate your headlines visually.

#1 – Flag multimedia content with CAPS

For example:

The simplest way to descale your coffee maker [VIDEO]

Whether on their computers or their smartphones, people like multimedia. And when you flag it in the way I have done here, their eyes scan and recognise the word “video” instantly.

The use of caps inside square brackets is a design element that will make your headline stand out from any list of ordinary headlines. It draws the eye, and invites a click.

#2 – Begin your headline with a number

For example:

7 Ways to reduce your heating bill, without spending any money.

People love to learn about ways to do things. Offering readers a number of different ways to achieve something they care about is always a strong headline approach.

The design element here is the use of a numeral at the beginning of the line. It catches the eye, and also immediately signals to the reader the kind of content they can expect to find.

#3 – Mess with the spelling


Meteorologists explain why this fall is soooo cold!

Is there a design element here? Sure there is. Your eye is naturally drawn to the odd looking word.

It isn’t a very striking difference, but it’s enough to make the headline jump out from a list of regular headlines.

#4 – Write a short headline


Why cycling is so dangerous.

Again, the design element isn’t apparent until you include this headline within a group of longer headlines. Then it stands out because most of the other headlines are two or three times longer.

Short headlines will also help you when people look at your content on their smartphones. A 12-word headline on a smartphone either wraps and wraps, or is displayed in a very small fond size.

To summarize…

There are a lot of factors you have to consider when writing an online headline. You have to think about the power of the line itself, you have to think about SEO…and you have to think about headline design.

Headline design is not a major factor on your content page itself, but can make a big difference when your headline appears off-site, particularly when buried with a list of competing headlines.

Note: Check out my new course on how to write better headlines for web content…

Course on headline writing


2 thoughts on “4 Examples of Effective Headline Design.”

  1. Nick, I agree with everyone of your examples except the number headline. You may be right, but, personally, I am sick of 10 ways to do this and 5.4 ways to do that. I rarely use that formulation anymore. I would rather catch the reader’s eye in ANY WAY except that way!

  2. Hello Nick:

    I some what agree with Katherine. (being sick of number headlines) but I recently did a blog post using numbers and it received 2X as many comments. The same holds true with testimonials. I hated using them in copy, they are corny, an old school but they work. So I am leaving my personal preference aside and using what works.


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.