Conversion Optimization Guide

Email Preheader Text Optimization: The Definitive Guide

Your subject line hooks the reader; your preheader text seals the click. Learn how to write compelling preview text, hide it seamlessly from the visual body, and prevent text bleeding.

Where Do Email Inboxes Display Preheaders?

In almost every modern email app—including iOS Mail, Gmail, and Outlook—the inbox list shows three pieces of information: the Sender Name, the Subject Line, and the Preheader Preview Snippet:

Acme Store•Subject: Your exclusive 25% discount is waiting

— Use coupon code SAVE25 at checkout before midnight tonight. Free shipping on all orders over $50!

The Bulletproof Hidden Preheader Code

You want the preheader to appear in the inbox preview, but you usually do NOT want it taking up valuable visual real estate at the very top of your design. Use this bulletproof hidden container placed immediately after the opening <body> tag:

<div style="display: none; max-height: 0px; overflow: hidden; mso-hide: all; font-size: 1px; line-height: 1px; max-width: 0px; opacity: 0;">
  Your exclusive 25% coupon is waiting. Use code SAVE25 at checkout.
  <!-- Zero-Width Space Buffer to prevent body text bleed -->
  &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
</div>

3 Golden Rules of High-Converting Preheaders

1. Complete the Subject Line's Thought

Don't repeat the subject line. If your subject line is "Don't forget your cart!", use the preheader to answer why: "Take an extra 10% off items left in your basket today only."

2. Front-Load the Value in the First 40 Characters

Mobile screens truncate quickly. Ensure key numbers, discount percentages, or urgency words appear right at the beginning.

3. Use the &zwnj; Buffer Hack

Always append zero-width non-joiner padding so subsequent body elements (like legal footer copy) don't bleed into the preview line.

Preheader Frequently Asked Questions

What happens if I don’t configure a custom preheader in my email?

Email clients like Gmail and Apple Mail will automatically pull the very first readable text characters found in your email body. This often means your preview snippet displays awkward boilerplate text like "View in browser", "Unsubscribe", or image alt tags instead of a persuasive marketing message.

What is the Zero-Width Non-Joiner (&zwnj;) padding technique?

If your preheader text is short (e.g., 40 characters), modern inboxes will fill the remaining preview space with text from your body copy. By injecting a sequence of alternating zero-width non-joiners (&zwnj;) and non-breaking spaces (&nbsp;) immediately following your preheader text, you force the preview snippet to remain clean and empty after your custom message.

What is the optimal character length for preheader text?

Between 40 and 90 characters. While desktop clients may show up to 100+ characters depending on window width, mobile screens typically display between 35 and 60 characters. Place your primary hook in the first 40 characters.

Configure Preheaders in 1-Click

I WANT EMAILER includes a built-in preheader text generator that automatically embeds hidden buffers and zero-width padding.

Start Building Free