# Preheader text: what it is, how long, and how to control it
> Preheader text is the preview line next to your subject. Learn what it is, a sensible length, how to set it in HTML, and how to hide the filler that sneaks in.
- Published: 2026-10-16
- Author: Koltrix Team
- Category: Email API
- Source: https://koltrix.com/blog/preheader-text-what-it-is-how-long-and-how-to-control-it
Open any inbox and look at a message row. You see a sender, a subject, and a grey line of text after it. That grey line is the preheader, sometimes called preview text. If you do not set it yourself, the mail app picks something for you, and the result is often "View this email in your browser" or a string of link text.
For transactional email, such as receipts, password resets and sign-in codes, the preheader is a small but useful place to say the one thing the reader needs. This guide covers what it is, how long to make it, how to set it, and how to stop unwanted text from leaking in.
## What the preheader is
The preheader is not a special field. It is simply the first piece of visible text in the body of your email. Mail apps read that text and show some of it next to the subject.
That has two consequences:
- **You control it by controlling the first text in your HTML.** There is no separate header to fill in.
- **If your email starts with a logo and no text, the app looks further down.** It takes whatever text comes first, which may be a navigation link or a legal line.
Plain-text emails work the same way: the first line of the text is the preview.
## How long should it be
Different apps show different amounts. Some show around 40 characters on a phone, others over 100 on a wide desktop window. A practical approach:
- **Put the important part in the first 40 to 50 characters.** Anything after that may be cut.
- **Keep the whole preheader under about 90 to 100 characters.** Longer text is cut or ignored.
- **Do not repeat the subject.** Use the preheader to add something: a detail, a time limit, or what happens next.
Examples for transactional messages:
| Subject | Weak preheader | Better preheader |
| --- | --- | --- |
| Your receipt from Acme | Your receipt from Acme | Paid $24.00 on 12 March. Invoice PDF attached. |
| Reset your password | Reset your password | The link works for 30 minutes. Ignore this if it wasn't you. |
| Your sign-in code | Your sign-in code | Enter this 6-digit code in the app. It expires in 10 minutes. |
A good preheader often answers "do I need to act, and by when?" before the person even opens the message.
## How to set it in HTML
Put a short block at the very top of the body, before your logo and layout, and hide it visually so it does not clutter the message:
```html
The link works for 30 minutes. Ignore this if it wasn't you.
```
Notes on this snippet:
- `display:none` hides the text on screen. Most mail apps still read it for the preview.
- `max-height:0`, `overflow:hidden` and `opacity:0` are extra insurance for clients that ignore one of the others.
- `mso-hide:all` helps some Outlook versions.
Some teams show the preheader openly as a small line above the content. That is also fine, and it is more honest for accessibility: a hidden block is skipped by many screen readers, but a visible line is read like any other text. If you hide it, make sure the same information is also in the message body. Our [accessibility checklist for plain and HTML email](/blog/accessibility-checklist-for-plain-and-html-email) covers this.
## Stop the filler from leaking in
You wrote a tidy preheader, and yet the preview shows your preheader followed by the first line of the body. That happens because the app fills the remaining space with whatever text comes next.
To control that, pad the hidden block with invisible characters so the app has nothing else to show:
```html
The link works for 30 minutes.
͏ ͏ ͏ ͏
```
Repeat the invisible characters until the block is a little over 100 characters in total. This is a common trick, and it is harmless when done in moderation. Test it, because clients treat these characters differently.
## Setting it when you send by API
When your application sends HTML through an email API, you do not need a special parameter. You build the HTML yourself, so the preheader belongs in your template:
1. Add a preheader variable to your template, such as `{{preheader}}`.
2. Render it into the hidden block at the top of the body.
3. Give each message type a default preheader written by a person, not generated from the first line of the body.
4. Send a plain-text part as well, and start it with the same one-line summary. See [transactional email attachments](/blog/transactional-attachments) for how the HTML and text parts fit together.
If you build your own preview or test-send feature, show the preheader next to the subject so reviewers see what the recipient sees; [building an email preview and test-send feature](/blog/building-an-email-preview-and-test-send-feature) has a pattern for that.
## Things to avoid
- **Stuffing keywords.** The preheader is for the reader.
- **Putting secrets in it.** A sign-in code or reset link shown in the preview can be read by anyone glancing at the lock screen. Decide whether that risk is acceptable; for sensitive codes, a generic preheader is safer.
- **Leaving it to chance.** An accidental "Having trouble viewing this email?" looks careless on a receipt.
- **Making the message depend on it.** Some apps do not show previews at all.
## A quick test
Before you ship a template:
1. Send it to an address in two or three different mail apps, on a phone and a desktop.
2. Check that the preview shows your text, not the logo's alt text or a footer line.
3. Check that nothing extra follows it.
4. Check that the message still makes sense without the preheader.
## What to remember
The preheader is just the first text in your email, so set it on purpose. Keep the key words in the first 40 to 50 characters, add information instead of repeating the subject, hide it with a small block of HTML, and pad it so filler does not leak in. A few minutes per template makes every receipt and reset email feel more careful.