What is an email preheader? Do you need to know code to add a preheader? Are they different on mobile and desktop? What should you even put in your email preheader in the first place?
When you start diving into email development and the HTML/CSS side of email preheaders, things can get sticky quickly. But they don’t have to – there are easier ways to add email preheaders (and know what to put in them).

What is an email preheader?

Email preheader text is a small line of text that appears after the subject line in an email inbox. Email preheaders give a short summary of the contents of an email, and may appear differently on mobile and web email clients.
You can add preheaders (also called “email preview text”) to your emails by using HTML and CSS. Or by choosing email software that lets you customize your email preheader text without code.
Here’s an example of what an email preheaders look like in Gmail.

email preheader examples

Email preheaders for promotional emails in my inbox. Notice that the text displays differently depending on the length of your subject line.

Email preheader appears differently in different email clients. Gmail, Outlook, Yahoo, and the various mobile clients all have different ways of showing previews. Here’s an example of what preview text can look like on mobile.
example of email elements in gmail

The from name, subject line, and preheader text can all show up differently in different clients. On mobile, your preheader text might not get cut off by having a longer subject line (Source, Litmus).

Email preheaders are a modern version of the old-school “Johnson Box,” a technique used in direct response copywriting to preview the subject of a sales letter.
A Johnson Box, created by Frank H. Johnson, is a box at the top of a letter that summarizes key ideas – the goal is to get more people to read your letter.
In an article for AWAI, George Duncan of Duncan Direct Direct associates explained the purpose of a Johnson Box:

“You have a fair amount of your message above the salutation before the person even gets into the letter, so they understand what territory they’re in. And then if they go on to read the letter, you’ve got them kind of saying ‘yes’ to you already.”

In the same way, an email preheader is a short summary of your email – and the goal is to get people opening your email.

How to add preheader text to an email campaign

You can add preheader text to an email by adding it through your email software or manually adding a hidden div style to your HTML code. If you don’t add preheader text to an email campaign, email clients may pull in the text for you based on the contents of your email.
Sometimes, auto-generated preheaders are enough. But often, you’ll want to use your email preheader text as a “second subject line” to build curiosity and get more email opens.
Here’s an example of preheader text gone wrong.
email preheader mistake

“Having trouble” is the first text in the actual email, so it’s what gets pulled into the preheader. Nothing against Poetry Foundation, but a more descriptive preheader might increase their open rates. (It could also be worse – sometimes an unsubscribe link shows up here).

How to add email preheaders with code

If you add email preheader text using code, you’re essentially telling email clients which text you want pulled into the email.
Email development has a lot of quirks (compared to your everyday HTML and CSS), and coded preheaders reflect that. Coded preheaders are tricky, so you might prefer to avoid them (if your email software allows). To add a preheader with code:

  • Add text as the first text within the body tag of your email
  • Put the text in a div style
  • Use the div style to hide the text from the actual email

To email clients, your preheader text will show up as the first text in the email. When someone opens your email, that text will be hidden (because of the hidden div style).
This way, the email client will pull in the preheader text, but people on your email list won’t actually see it in your email design (so it doesn’t take up valuable design real estate).
Here’s an example of a hidden div style, from a real email we sent at ActiveCampaign.
hidden div tag preheader

The div style contains the first text in the body tag. Notice that its font size is 1, its color is white, its line height is one, max height/width 0, opacity 0, overflow:hidden – basically, there’s no way a person is ever going to see this text.

How to add email preheaders without code

Email development is tricky, and you might just want to use the email templates that are available in your email marketing software.
Not all email or marketing automation software lets you customize your preheader text without using code. In ActiveCampaign, you can change your preheader text in the same place you edit your subject line.
add a preheader in ActiveCampaign

Changing your email preheader is just as easy as changing your subject line. You can try it for yourself here.

How long should an email preheader be?

Your email preheader text should be between 40-130 characters long. This range makes sure that your preview text appears in both desktop and mobile email clients.
Because preheader length varies based on email client, there isn’t really an ideal length for email preheader. 100 characters or more is a perfectly reasonable number of characters to put in your preview text – just make sure that the beginning of your email preheader has the most important points.
Here are 3 things to keep in mind when you decide on the length of your preheader text:

  1. On many desktop clients, the length of your email subject line determines how much of your preview text is displayed
  2. Mobile email clients typically show less of your preheader text. Most mobile preheader text is between 30 and 55 characters long.
  3. If your preview text is too short, email clients may pull in text from the beginning of your email

Even if you don’t need all of it, it can be a good idea to write a long email preheader (with the important points at the beginning) so that you don’t accidentally display a line of text from the rest of your email campaign.
short email preheader

The preheader for this email was “Friendly Reminder.” But it’s too short – so Gmail pulls in the first line of text from the email. The result is a little clunky, and could have been avoided with a longer email preheader.

4 email preheader best practices

You can add a preheader to your email campaigns, but what should you put in it?
A great preheader can work as a second email subject line – it’s an opportunity for your to grab attention and convince more people to open your emails.
Here are 4 email preheader best practices:

  1. Add a call to action
  2. Don’t repeat the subject line
  3. Make your subject line and preheader text work together
  4. Use the preheader to build curiosity (don’t just summarize)

1. Add a call to action

Sometimes all you need to do is ask.
Just like your email has a call to action, adding a call to action to your email preheader could get more people to open.
Here’s an example from copywriter Joel Klettke.
preheader call to action

Pretty direct. Pretty effective.

A preheader call to action follows all the same rules as a normal call to action:

  • Keep it short (you don’t have much room anyway)
  • Make it sound easy
  • Promise a benefit

Or, when all else fails, just ask people to open your email.

2. Don’t repeat the subject line

Why say the same thing twice?
duplicated preheader and subject line

New tutorials…free tutorials…basically the same thing. “Survive the winter” doesn’t add anything to make me click.

Your subject line and preheader text shouldn’t say the same thing. The preheader is a chance to build on your subject line by…

  • Adding details
  • Building curiosity

Your subject line is probably only 30-75 characters long – adding preheader text gives you another 100 characters to play with!
Plus – even though email preheaders aren’t always prominent on desktop, mobile preheaders can be almost as prominent as the subject line.
preheader as second subject line

Open Books uses the preheader text as a second subject line. On mobile, the preheader actually gets more space!

Treat your email preheader as a second chance at a first impression. Put more work into it than just repeating the subject line.

3. Make your subject line and preheader text work together

Like Open Books, you can use your email subject line and preheader together to make your message hit stronger.
Your email preheader shouldn’t just repeat your subject line. But it shouldn’t be totally different either. You can use the preheader to build on a great subject line – and get more people opening your email.
Check out this example from Brendan Hufford.
preheader curiosity gap

The subject line opens a curiosity gap. And the preheader builds on it.

When your subject line and preheader work together, you can build curiosity.
Speaking of which…

4. Use the preheader to build curiosity (don’t just summarize)

In 1994, behavioral economist and Carnegie Mellon professor George Loewenstein published a paper titled The Psychology of Curiosity.
The paper is a huge analysis of the psychology research on curiosity – it’s 24 pages long and has been cited 1400+ times.
To spare you a bunch of technical reading (although it is great), the marketing gold is on page 17.
psychology of curiosity

In other words, how can you make someone else curious?

Loewenstein names 5 ways that you can make someone else curious. I’m using 3 of them right now (will you be able to figure out which ones, after I show them to you?).
Here are the 5 ways to make people curious: