The preheader is the most underutilized element in email marketing. It's free real estate in the inbox preview that can make or break your open rates—yet many marketers leave it to chance.
What is Preheader Text?
Preheader text (also called preview text or snippet text) is the short summary that appears after the subject line in most email clients. It gives recipients a preview of your email's content before they open it.
Example inbox view:
Subject: Your order has shipped! 📦
Preheader: Track your package and see the delivery date...
Why Preheaders Matter
- 24% average increase in open rates with optimized preheaders
- More context helps recipients decide to open
- Prevents "View in browser" text from showing
- Mobile optimization - preheaders are prominent on mobile
Preheader Character Limits
| Email Client | Approx. Characters |
|---|---|
| Gmail (Desktop) | 100-120 |
| Gmail (Mobile) | 40-90 |
| Apple Mail | 140-150 |
| iOS Mail | 75-100 |
| Outlook.com | 35-50 |
| Outlook Desktop | Variable |
| Yahoo | 100-110 |
Best practice: Keep your main message in the first 40-50 characters, with supporting text up to 100 characters.
How to Add Preheader Text
The Hidden Preheader Technique
Add this immediately after your opening <body> tag:
<!-- Hidden Preheader -->
<div style="display: none; max-height: 0; overflow: hidden; mso-hide: all;">
Your preheader text goes here. Make it compelling!
</div>
<!-- Preheader Spacer (prevents body content from showing) -->
<div style="display: none; max-height: 0; overflow: hidden; mso-hide: all;">
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>The Spacer Explained
The spacer uses ‌ (zero-width non-joiner) and (non-breaking space) characters to fill the remaining preheader space. Without it, email clients will pull text from your email body to fill the preview.
Alternative: Inline Preheader
If you want the preheader to be visible in the email:
<p style="margin: 0; padding: 10px; font-size: 12px; color: #666666;">
Your preheader text here - visible in both inbox preview and email body
</p>Writing Effective Preheaders
Do's ✅
- Complement your subject line - Don't repeat it, expand on it
- Include a call-to-action - "Shop now", "Read more"
- Create urgency - "Ends tonight", "Limited stock"
- Be specific - Numbers and details perform well
- Use personalization - Include the recipient's name when possible
Don'ts ❌
- Don't repeat the subject - Wasted opportunity
- Don't start with "View in browser" - That's what happens by default
- Don't use all caps - Looks spammy
- Don't leave it empty - Email clients will fill it with body content
Preheader Examples by Industry
E-commerce
Subject: Your order is on its way! 📦
Preheader: Arriving Thursday. Track your package and see what's inside →SaaS
Subject: You've unlocked a new feature
Preheader: Advanced analytics is now available in your dashboard. Here's how to use it...Newsletter
Subject: This week in tech 🔥
Preheader: Apple's surprise announcement, new AI tools, and why developers are excited...Promotional
Subject: 50% off everything
Preheader: 24 hours only. Use code FLASH50 at checkout. Free shipping over $50 →A/B Testing Preheaders
Test different preheader strategies:
- Length: Short (40 chars) vs. long (100+ chars)
- Urgency: With deadline vs. without
- Personalization: With name vs. generic
- Emojis: With vs. without
- Question vs. statement: "Ready for savings?" vs. "Save 50% today"
Testing Your Preheader
Mailglass Lite checks for preheader text and warns if:
- No preheader is detected
- "View in browser" might show instead
- Body content could leak into preview
The Complete Preheader Code Template
<body style="margin: 0; padding: 0;">
<!-- Preheader -->
<div style="display: none; max-height: 0; overflow: hidden; mso-hide: all; font-size: 1px; line-height: 1px; color: #ffffff;">
Your compelling preheader text goes here - expand on your subject line!
<!-- Spacer to prevent body content from appearing -->
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<!-- Email content starts here -->
<table role="presentation" ...>Key Takeaways
- Always include a hidden preheader div
- Front-load your message in the first 40-50 characters
- Complement (don't repeat) your subject line
- Use spacers to prevent body text leakage
- Test different approaches with A/B testing
Ready to improve your email preheaders? Try Mailglass Lite to validate your preheader implementation.