Hey, you made it! You’ve arrived at this article. So how did you end up here?
Maybe you were browsing Twitter, or reading your RSS feeds. Maybe it was a Google search. Or maybe you regularly come back to Tuts+ to see what’s new. But these don’t answer my question.
What led you to landing here, on this single article page? The answer is most likely: the headline. That’s what initially caught your attention and made you decide to click and read this article. Am I right?
That’s what an effective headline does. It catches your attention, connects with you in some way, and compels you to either click into the page, or keep reading further.
A poor headline does the opposite: either you’ll click the back button on your browser, or, in the case of Twitter or an RSS feed, a poor headline fails to catpure your interest so you’ll skip right past it.
In other words, it really doesn’t matter how insightful your post is, or how perfect your product landing page is, or how hilarious that video you’ve created is. If your headline fails to do its job, your audience will never get far enough to appreciate all of the work you’ve put into your content.
This article will cover a few tips and techniques for devising a killer headline. These ideas will help you keep more visitors glued to the screen as they read through your landing pages and hopefully end up engaging with your products or services. We’ll also look at a few ways we can design our headlines to stand out and command attention.
First, let’s debunk a few myths about writing headlines.
Let's run through a few misconceptions people have about writing headline content.
“A headline should summarize the page”
Don’t try and re-tell the story of your page in one sentence and call that the headline. First of all, that’s simply not possible. Second, if you take this approach, your headline will either be very bland and boring, or it won’t make sense.
Rather than trying to encapsulate the entire body of work in one sentence, try picking out the single most interesting or surprising idea and use that as the basis for your headline. Here's an example of a (boring) headline trying to tell the whole story:
Copywriting and typography design techniques for headline writing, and more
This would be better:
Everything You Thought About Headline Writing is Wrong
“As long as it’s attention-grabbing, say whatever you want!”
Also a bad idea. Sure, you might draw lots of eyeballs and clicks if you use a headline like:
Watch This Kitten do a Backflip as Jealous Dog Watches in Awe
But if your page has absolutely nothing to do dogs and cats, then that traffic won’t stick around for long. They certainly won’t make it far enough through your page to buy from you or subscribe (or whatever your end-goal is). Click-bait headlines like these simply don’t produce the results that you’re going for.
The headline must be relevant to the content on the page. It should be intriguing, or surprising, or even shocking in some way, but that should be a lead-in to get the full scoop further down the page.
“Size doesn’t matter. Headlines can be as long or short as we want!”
When it comes to writing that top headline, size actually does matter, to an extent. The only rule of thumb I’d give you here is don’t make the headline too long.
If the top headline on your landing page spans three or more lines, the length will soften the impact of a great headline. A great headline hits you like a ton of bricks and grabs your attention. Three or four lines of really big text takes a few moments for a reader to sift through, which in this fast-paced world of the web, can be an eternity.
Another reason not to go too long would be if your headline might end up in a Tweet or an email subject line (as they often do). Tweets obviously need to be shorter than 140 characters, but you’ll also want to leave room for “@usernames” “RT…” etc. Email subject lines tend to get truncated when they’ve gone past seven words or so. Your headline won’t have the same effect if the audience can’t read most of it.
That being said, I wouldn’t go so far as to say “the shorter, the better.” Your primary goal is to make your headline compelling and attention grabbing, not to endlessly trim down the word count.
Why Everybody And Their Grandmother Should Upgrade Their Browser And Stop Using Internet Explorer 6 So They Can Finally Experience The Web The Way it Should Be!
Have You Upgraded Past IE6 Yet? You Could Be Missing Out.
Address Pain or Benefit
When you’re writing the headline for your product’s landing page, you want to get right to the heart of your customer’s pain and/or the benefit they receive.
This requires you to gain a deep understanding of who your customer is and why they find value in your product. You can do that through extensive customer interviews, surveys, user testing, and more. But that’s a topic for another day.
Once you pinpoint the number one pain or problem (from your customer’s perspective) that your product solves, draw that out in your headline. This is very powerful because it will immediately resonate with your target customer the moment they land on your website.
By using your headline to identify the pain, you’re connecting with the customer, telling them you know how they feel. That implies that you also have a solution (and they can find out if they keep reading).
The BrowserStack homepage headline and subheadline does a great job of identifying their target customer’s pain point. You and I know how time consuming it is to setup a virtual machine or fire up multiple mobile devices just to cross-browser test your designs. BrowserStack knows it too, and drive right at that pain point here in their headlines.
Tease Your Readers
Knowing your customer and your audience member on a deep, almost personal level, can go a long way to helping you write highly effective headlines. Think about how you interact with your best friend, or your brother or sister. You know them so well that you know exactly how to push their buttons, or tease them.
That’s essentially what you’re aiming to do with your headline — tease your readers, without going overboard.
You want to catch their attention with something surprising or almost shocking. You also want to identify with their specific pain point so that they care about what you have to say. The trick is to not give away what they want until after they’ve moved past your headline and read the article.
Don’t give away the solution or the answer they seek inside your headline. Simply imply that you have the solution by stating the problem. This gives your reader an incentive to read the sub-headline, and then the first paragraph, and so on.
Here are few headlines that provoke our curiosity:
On the Buffer blog:
How to Stop Procrastinating by Using “The 2-Minute Rule”
On the CopyHackers blog:
Is Your Headline Suffering From “TMI”?
The top headline on the homepage for HTML5 Boilerplate:
The web’s most popular front-end template
The Boilerplate headline accomplishes two things.
- It immediately tells you what this site and tool is, which lets a visitor decide if it’s relevant to them or not. If you’re a front-end dev, you immediately “get it”.
- It uses social proof (“most popular”), which makes us pay attention and leaves us wanting to learn more.
Design Tips for Headlines
Generally speaking, I don’t like to talk about “rules” when it comes to how to design certain elements, like a headline. There are many different ways to be effective, and the solutions may vary from project to project. As Jeremy Keith often says It Depends.
That said, here are a few tips that I find tend to work well when it comes to designing headlines on a landing page.
Your first headline should use a dramatally larger font size than the text that follows it. I usually aim for 1.5x the size or even larger. This makes the headline command attention and demand your reader’s eye digests it first, before anything else on the page.
I also go for a high contrast color for the headline type. If the page has dark-colored background, then a light or white-colored headline will have high contrast and draw our eye towards it.
You’ll also want to make the surrounding text, particularly the sub-headline or paragraph text more subdued, which serves to bolster the top headline even more. Use a smaller font size, and lower-contrast color for your sub-headline text.
Finally, add space around your headline to convey importance and priority. When there are too many elements bunched together, they compete for our attention, which diminishes the impact of all those elements. When an element like a top-headline is separated from the pack, and given plenty of space to breathe and dominate a healthy portion of the page real estate, it conveys importance and priority.
Mailchimp’s homepage headline lives in its own space, taking up most of the top area of the page. Our attention is immediately drawn towards as soon we land on the page, which strengthen’s its impact.
To recap, here are a few key tips when it comes to writing a killer headline:
- Use your headline to grab a reader’s attention, not to tell the whole story.
- Don’t make your headline too long.
- Tease your reader (just a little)
- Speak to the benefit or pain point.
- Use size, space, and contrast to draw attention toward your headline.
I hope this helps you write and design better headlines that help you achieve higher conversions and better performing pages. Have questions or other tips when it comes to headline-writing? Let’s hear them in the comments!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly