Email preheader: what it is and how to write one
An email preheader is the short preview text shown next to or below the subject line in the inbox. If you do not set one, the email client shows the first text it finds in your message, often "View in browser". A good preheader adds a reason to open that the subject line did not give.
Look at any inbox and you will see each email as three things: who sent it, the subject line, and a line of lighter grey text. That third line is the preheader, also called preview text. It is the most underused space in a newsletter, and often the most wasted.
Where the preheader comes from
The email client builds the preview from the first text it finds in your message. If you write a dedicated preheader, it uses that. If you do not, it takes whatever comes first: "View this email in your browser", your logo's alt text, or the first line of a sponsor block. None of those convince anyone to open.
Most newsletter platforms have a field for preview text, and filling it in is enough. If you code your own templates, you add it yourself.
How to add a hidden preheader in HTML
The standard technique is a block of text at the very top of the email, hidden from view but still read by the inbox:
<div style="display:none;max-height:0;overflow:hidden;opacity:0;">
Moving one day changed more than I expected. Here is what the numbers did.
</div>The client shows that text in the preview, and readers never see it inside the opened email. Every template in our library includes one, already filled with sample text you can replace.
Some clients keep pulling text after the preheader to fill the available space, which can drag in your header or first line. If that bothers you, some designers add a run of invisible spacing characters after the preheader to pad it out. It is optional, and worth testing in your own clients.
How long should it be?
There is no fixed length, because the space varies by client, device and the length of the subject line. Desktop clients can show a long line; phones show much less. Practical guidance:
- Put the meaning in the first few words.
- Make sure it still makes sense if it is cut halfway.
- A sentence of around eight to fifteen words fits most cases comfortably.
How to write one that works
Think of the subject line and preheader as one message in two parts. The subject says what the issue is about. The preheader answers "why should I open this now?"
Good preheaders tend to do one of these:
- Add the payoff. Subject: "What rent caps did in three cities". Preheader: "Five years of data, and it surprised both sides."
- Add a detail. Subject: "Open studio day". Preheader: "Saturday 21 November, 10 to 4. Free, no booking."
- Speak directly. Subject: "Welcome. One quick question before we start". Preheader: "You're in. Here's what to expect."
Avoid repeating the subject in different words, and avoid generic lines like "Read our latest newsletter". Readers already know it is your newsletter. More on the other half of the pair in newsletter subject lines that get opened.
Does the preheader affect deliverability?
Not directly. Filters do not reward or punish a preheader as such. It affects deliverability the same way the subject line does: a misleading one leads to deletes and complaints, and an honest, useful one leads to opens, which over time help your placement.
Frequently asked questions
Is the preheader the same as the preview text?
Yes. Preheader is the term email designers use for the text placed in the email, and preview text is what the inbox shows. When you write a preheader, you are setting the preview text.
What happens if I leave the preheader empty?
The inbox shows the first text it finds in your email, which is often a "view in browser" link, an image's alt text or the start of your header. It is space you lose for free.
Should the preheader appear inside the email too?
It is usually hidden, so it only appears in the inbox. Some newsletters show it as a visible first line instead, which works if it reads naturally as an opening.
Sources
- Constant Contact, The email preheader
- Mailcharts, Email preheader text