Inbox preview
Before anyone opens your email, all they see is a line in a list: who it’s from, the subject and a few gray words. Type yours and see how seven inbox layouts show them, and where they cut them off.
The gray words after or under the subject. Leave it empty to see what the inbox shows when a message has none.
The first visible text of the email, top to bottom, including a "view in browser" link or image descriptions. Mail clients use it when the preview text is missing or too short.
The preview is drawn by your browser as you type. Nothing you enter here is sent to us or stored.
In the inbox
Seven inbox rows redrawn in HTML at typical widths, shown as an unread message. They are close approximations: the real cut moves with the window width, the density setting, the font size and the fonts installed on the device. Character counts are measured from these drawings.
What to look at
Hidden preheader to paste
Put this block first inside <body>, before any other text. The div is invisible in the open message, yet inbox lists read it because it is the first text in the HTML. The long run of ‌ after your sentence is the padding: zero-width and blank characters that fill the rest of the preview area, so the client has no room left to append "View this email in your browser" or a menu link.
The three parts of an inbox row
An inbox is a list of rows, and every row is built from the same three pieces of the message.
- Sender name
- The display name in the
Fromheader, the part before the address:From: Harbor Books <orders@harborbooks.example>. It usually comes first or in bold, and it’s what people go by to decide whether they know you. - Subject
- The
Subjectheader. One line in every layout, cut with an ellipsis when it runs out of room. - Preview text
- This one isn’t a header at all. The mail client reads the start of the message body and shows the first words it finds. When marketers put a sentence there on purpose, they call it the preheader.
You control the first two directly. The third you only control by deciding what the first text in your HTML is.
The cut depends on width, not on a character count
You’ve probably read that subjects should stay under 50 characters. That’s a rule of thumb, because no mail client counts characters. Each one gives the subject a box of a certain width and lets the text overflow. A row of narrow letters fits more than a row of capitals. “illicit little fib” is far shorter on screen than “WWW MMM SUMMER”, and the two have about the same number of characters.
This page works the same way. Each mock-up is a real HTML layout at a typical width, with the fonts that client asks for, and the browser cuts the text the way the client would. The script then measures how many of your characters survived. Take the numbers as “about”, since your reader may have a larger font size, a narrower window, or a device without that font.
| Layout | How the row is built |
|---|---|
| Gmail and Yahoo Mail in a desktop browser | One line. A fixed column for the sender, then subject and preview share the remaining width, so a long subject pushes the preview out. |
| Outlook on a desktop, Apple Mail on a Mac | A narrow list column beside the reading pane. Sender, subject and preview each get their own line. Apple Mail gives the preview two lines. |
| Gmail and Outlook on a phone | Three stacked lines of one line each, beside a round initial. |
| Apple Mail on an iPhone | Sender, subject, then two lines of preview by default. The reader can set it from none to five. |
Setting the preview text, and padding it
To choose the preview text, make your sentence the first text in the body and hide it from the opened message. The block this page generates does that with a div that takes no space and has no visible color.
There’s a catch. If your sentence is 60 characters long and the client has room for 110, it keeps reading and adds whatever comes next: “View this email in your browser”, the alternative text of your logo, “Home | Shop | Contact”. To stop it, follow your sentence with a long run of characters that take up room in the preview but draw nothing, namely a zero-width non-joiner and a non-breaking space, repeated (‌ ). The client fills its preview area with them and stops.
Mail clients change how they build previews without telling anyone, and some collapse blank characters. Before a large mailing, send yourself a test and look at it on a phone.
What the remarks are based on
The list under the mock-ups comes from simple measurements of what you typed:
- Cut points for the subject and the sender name, taken from the drawings, with the shortest phone layout quoted back to you.
- Preview text: missing, saying the subject again (same start, or at least 80% of the same words), or shorter than the space so that body text follows it.
- Form: more than 70% capital letters, two or more exclamation marks, the number of emoji, a “Re:” or “Fwd:” on a message that isn’t a reply.
- Junk-mail vocabulary: a short English list (“free”, “act now”, “guaranteed”…), reported as information.
None of this decides where your message lands. Mailbox providers filter mostly on who’s sending, meaning whether the domain passes SPF, DKIM and DMARC and how recipients have treated its mail before. You can check that side with the email authentication check. The words matter for what comes after delivery, when a person decides whether to open the message.
Questions people ask
How long should an email subject line be?
Phones show roughly 30 to 45 characters of a subject, depending on the letters and the client. Put the words that identify the message in that space. A longer subject is fine when the rest is detail a desktop reader will see.
What is preheader text in an email?
The sentence shown after or under the subject in the inbox list. It’s the first text in the body of the message, usually hidden from the opened email with CSS so it only appears in the list.
Why does my email show "View this email in your browser" in the inbox?
Because that link is the first text in your HTML and no preview text comes before it. Add a hidden preheader as the first element of the body, and pad it so the client doesn’t carry on into the link.
How many characters of preview text does Gmail show?
There’s no fixed number. In a desktop browser Gmail puts subject and preview on one line, so the preview gets whatever the subject leaves, from nothing to over 100 characters. On a phone it gets one line to itself, about 35 to 45 characters.
What does ‌ do in a preheader?
It’s filler that draws nothing. A zero-width non-joiner followed by a non-breaking space, repeated many times after your preview sentence, uses up the rest of the preview area so no other text from the message gets added.
Do emoji or words like "free" send an email to spam?
Rarely by themselves. Filters weigh the sender’s authentication and reputation far more than vocabulary. A subject that piles up capitals, exclamation marks and sales words does look like junk to the person reading it, though, and that’s reason enough to tone it down.