A preheader is the short summary text that appears after the subject line in email inboxes. Also called a "Johnson Box" or "email preview text," it provides recipients with a preview of the message content before they open it. This line often determines whether someone opens your email or archives it, particularly on mobile devices where visual hierarchy puts preheaders nearly on par with subject lines.
What is a Preheader?
The preheader descends from the "Johnson Box," a direct response copywriting technique created by Frank H. Johnson. Originally a box at the top of a sales letter summarizing key ideas, the modern email version serves the same function: telling readers what territory they are entering before they commit to reading.
Email clients like Gmail, Outlook, and Yahoo extract preheader text from the first available content in your HTML <body> tag. Display varies by client and device. If you do not specify preheader text, email service providers auto-generate it from your campaign's first text, often pulling in unwanted phrases like "View in browser," "Having trouble viewing this email?" or unsubscribe links.
Why Preheaders Matter
Preheaders provide measurable performance improvements and address modern consumption patterns.
[Preheaders deliver a seven percent higher open rate, on average] (Adotas), offering significant return for minimal effort. This impact amplifies on mobile devices, where [nearly half of all emails are opened] (Campaign Monitor) and preheader visibility rivals subject lines. The competitive pressure is acute: [the average inbox now contains more than 100 emails per day] (Campaign Monitor), making differentiation critical.
Voice technology adds another dimension. [Amazon updated its Alexa Voice Service (AVS) at the end of 2018 to allow users to check their emails via voice] (Campaign Monitor). Assistants like Alexa, Siri, and Google Home now read preheaders aloud, requiring optimization for audio delivery as well as visual display.
How Preheaders Work
Email clients extract preheader text from the first text found within the HTML <body> tag. You control this extraction through four primary methods.
Visible summary text. Place readable text at the top of your email design. Recipients see this text both in the inbox preview and in the email body. This method requires no coding but consumes design real estate.
Hidden div style. Hide preheader text from the visual design while allowing email clients to extract it. Place a ` immediately after the
tag using CSS properties such asfont-size:1px, matching text and background colors,max-height:0,opacity:0, andoverflow:hidden`.
Email software input. Most modern email CRMs and marketing automation platforms provide dedicated fields for preheader text. The software inserts the text into the correct HTML location automatically without requiring code changes.
Automated generation. Template languages can dynamically generate preheaders from content headings using attributes like repeatertitle="true" combined with <tableofcontents> tags. This creates set-and-forget solutions for template-based campaigns, ensuring fresh preview text for each send.
Character display varies by client. [Mobile email clients typically show between 30 and 55 characters] (ActiveCampaign), while desktop displays depend on subject line length. [Aim for 40-130 characters total] (ActiveCampaign), placing critical information at the beginning to accommodate truncation.
Best Practices
Always specify preheader text. Empty preheaders allow clients to auto-fill the space with repetitive subject lines, unsubscribe options, or "View online" links, wasting valuable inbox real estate.
Personalize content. Personalized preheaders demonstrably enhance open rates, extending the proven tactic of personalized subject lines into the preview text.
Ask questions. Questions engage recipients more effectively than statements. Use the preheader to pose a question that your subject line introduces, creating a curiosity gap.
Use emojis strategically. Emojis provide compact messaging power within the limited character counts of mobile preheaders, helping your email stand out in stacked inbox lines while conserving space.
Add a call to action. Treat the preheader as a micro-CTA. Keep it short, promise a benefit, and make the action sound easy, or simply ask recipients to open the email.
Build curiosity, don't summarize. [George Loewenstein's 1994 paper "The Psychology of Curiosity," cited over 1400 times] (Carnegie Mellon), identifies six curiosity triggers: asking questions, leaving stories unfinished, violating expectations, implying knowledge gaps, suggesting forgotten information, and creating urgency. Apply up to three of these methods to avoid clickbait perception.
Test for voice compatibility. Read your preheader aloud to ensure it makes sense when delivered through voice assistants. Avoid symbols that do not translate to speech.
Common Mistakes
Mistake: Leaving the preheader field blank.
Fix: Always specify text. Otherwise, you risk displaying "Having trouble viewing this email?" or unsubscribe links pulled from template headers.
Mistake: Repeating the subject line.
Fix: Use the preheader as a second subject line to add details or build curiosity. Repeating content wastes the additional 40-130 characters of available space.
Mistake: Writing preheaders that are too short.
Fix: Write at least 40 characters. Shorter text allows Gmail and other clients to pull in random body text, creating disjointed preview snippets.
Mistake: Ignoring mobile display constraints.
Fix: Front-load critical information within the first 30-55 characters, as this is all that displays on many mobile devices.
Mistake: Neglecting emerging channels.
Fix: Consider how your preheader sounds when read by voice assistants. Symbols, excessive punctuation, or context-dependent phrases may confuse audio-only consumption.
Examples
Example scenario: Curiosity gap
Subject line: "The winter survival guide"
Preheader: "Do you have the courage to face the cold?"
This applies curiosity principles by asking a question and violating expectations, compelling opens without spoiling content.
Example scenario: Hidden technical implementation
A retailer places the following hidden div immediately after the <body> tag:
<div style="font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Your 50% off code expires tonight</div>
The text appears in inbox previews but remains invisible within the actual email design.
Example scenario: Automated content
A newsletter publisher uses template tags (<tableofcontents> with repeatertitle="true") to auto-populate the preheader with article headlines from the issue, ensuring fresh preview text for each send without manual updates.
FAQ
What happens if I don't add a preheader?
Email clients extract the first text they find in your HTML, which often results in unprofessional previews like "View in browser," "Having trouble viewing this email?" or unsubscribe instructions appearing in your inbox snippet.
How long should my preheader be?
Aim for 40-130 characters. While desktop clients may display more, mobile devices typically show only 30-55 characters. Place critical information at the beginning to ensure visibility across all devices.
Can I hide preheader text from the email body?
Yes. Use a hidden div style with CSS properties including font-size:1px, matching background colors, max-height:0, and overflow:hidden placed immediately after the <body> tag. This hides text from readers while allowing email clients to extract it for preview.
Should my preheader repeat the subject line?
No. Repeating the subject line wastes valuable space. Instead, use the preheader to extend the subject line's promise, add specific details, or build curiosity through questions or knowledge gaps.
Do emojis work in preheaders?
Yes. Emojis display in most modern email clients and provide visual distinction in crowded inboxes. They also conserve character space on mobile devices, conveying concepts in single characters rather than words.
How do voice assistants handle preheaders?
Voice assistants like Alexa, Siri, and Google Home read preheader text aloud when users check email via voice commands. [Since Amazon updated Alexa Voice Service in late 2018 to support email reading] (Campaign Monitor), optimizing for audio delivery has become essential. Avoid symbols that don't translate to speech and test how your text sounds when read aloud.
