# Newsletter branding: headers, social cards and a recognisable issue

[Canonical HTML page](https://gradiently.design/guide/newsletter-branding)

An inbox is a list of names and subject lines until someone opens you. Then you have one header's worth of attention to prove this is the newsletter they signed up for.

## The short version

- Newsletter branding is a consistent name, masthead, palette and type across the email itself, the web archive and the cards you share to promote each issue.
- An email header is usually designed at 1200×600 pixels and shown about 600 pixels wide, so its words must be large and few.
- A Substack post header is 1456×816 pixels and also becomes the preview image when an issue is shared.
- The most reliable masthead system keeps the name and layout fixed and changes one thing per issue, such as the issue number, a headline or a seasonal colour.
- Every issue deserves two or three promo cards in social sizes, built from the same layout so they can be made in minutes.

**Newsletter branding** is what makes a reader recognise your issue before they read it: the same masthead at the top of every email, a palette and typeface that carry into your web archive, and promo cards on social that look like they came from the same publication. Design the email header at 1200×600 pixels, the Substack post header at 1456×816, and keep one fixed layout where only the issue details change. Readers return to publications that feel stable, and a stable look also makes each issue faster to produce.

## Newsletter image sizes

| Asset | Size | Notes |
| --- | --- | --- |
| Email header | 1200×600 px | Shown around 600 px wide in most inboxes |
| Substack post header | 1456×816 px | Also the share preview for the issue |
| Link preview (Open Graph) | 1200×630 px | For a self hosted archive or landing page |
| Medium story image | 1400×788 px | If you cross post |
| X post | 1600×900 px | Promo card for each issue |
| Instagram and LinkedIn portrait | 1080×1350 px | Promo card and quote cards |
| Email signature | 600×200 px | A small banner linking to sign up |

Design the header at double its display width so it stays sharp on high density screens.

- Email header 1200×600: 1200 × 600
- Substack header 1456×816: 1456 × 816
- Promo card 1080×1350: 1080 × 1350
- X card 1600×900: 1600 × 900

Four shapes, one publication. The email header is the widest and shortest, so it carries the least text.

Sizes for each platform in more depth are in [Substack header size](https://gradiently.design/guide/substack-header-size) and [email header design](https://gradiently.design/guide/email-header-design). If you publish on LinkedIn too, its newsletter cover follows its own rules, covered in [LinkedIn newsletter cover](https://gradiently.design/guide/linkedin-newsletter-cover).

## Design a masthead that holds every issue

A masthead is the fixed top of your newsletter: the name, perhaps a short line on what it is, and the issue details. Print magazines have used the idea for well over a century because it works. Readers find the name in the same place every time and the content below it can change freely.

A wide email newsletter header reading The Slow Kitchen, Issue 48, Sunday, with a short description

An email header: the name large, issue and day small above, a one line promise below.

1. **Fix the name and its position** Same font, same size, same place on every issue. This is the part readers learn.
2. **Choose what changes** Pick one variable: the issue number, the date, a headline or a seasonal colour. One is enough.
3. **Keep text out of the edges** Some email apps trim or scale headers. Keep words in the middle 80 per cent.
4. **Write real alt text** Some readers have images off by default. Alt text such as "The Slow Kitchen, issue 48" keeps the masthead working without the picture.

If you change one thing per issue, make it something with meaning. A weekly cooking letter might shift colour with the seasons; a monthly finance letter might set the month's single most important number in the header.

- Spring issues: `linear-gradient(120deg, #fef3c7 0%, #a7f3d0 100%)`
- Summer issues: `linear-gradient(120deg, #fde68a 0%, #fb923c 100%)`
- Autumn issues: `linear-gradient(120deg, #fed7aa 0%, #9a3412 100%)`
- Winter issues: `linear-gradient(120deg, #e0e7ff 0%, #475569 100%)`

Four seasonal backgrounds behind one fixed masthead. Readers feel the year move while the publication stays the same.

## A palette and type that read in the inbox

Most of a newsletter is text, so the type matters more than the header. Use one readable body font, a distinct heading font for the name, and one accent colour for links and buttons. Keep body text dark on light: many readers use dark mode, and email apps invert colours in ways you cannot fully control.

- Paper: #fbf7f0
- Ink: #1f1a17
- Rust heading: #7c2d12
- Amber link: #d97706
- Divider: #e7dccb

A warm editorial palette. Paper and Ink do the reading; rust is for the name, amber only for links.

### Breaks in inboxes

- Important words baked into an image with no alt text
- Thin light grey body text
- A header that is all text and no breathing room
- Background images behind body copy

### Survives inboxes

- Live text for everything that matters
- Body text with strong contrast in light and dark mode
- A header with a clear name and space around it
- Gradients only in the header image

Email clients are strict about CSS, so gradients belong in the header image rather than in code. [Gradients in email](https://gradiently.design/guide/gradients-in-email) explains which approaches survive which apps.

## Promo cards for every issue

Most newsletters grow from shares and social posts, and a plain link with a generic preview gets skipped. Make two or three cards per issue from a fixed template: one with the issue's headline, one with a line pulled from inside it, and a sign up card you reuse.

A portrait promo card reading Why your bread tastes flat, The Slow Kitchen number 48

The issue card for Instagram and LinkedIn: headline, issue number and where to read.

A landscape quote card reading Salt is a timing problem, from this week's issue

A pulled line for X and Bluesky. Short, specific and slightly surprising works best.

- **Issue card:** the headline and number, posted on the day it goes out.
- **Quote card:** one line from inside, posted a day or two later. See [quote card design](https://gradiently.design/guide/quote-card-design).
- **Sign up card:** what readers get and how often, pinned to your profile.
- **Milestone card:** issue 50, 100 or a year of sending.

If you write weekly, this is the part worth automating. On Gradiently Pro you can keep a list of issues in a spreadsheet and bulk create a card for each row, or design one card and resize it to every format in one step. Auto ink chooses light or dark type per line from the background's own colours, so a headline stays readable whatever the season's colour is. [Writing copy for visuals](https://gradiently.design/guide/writing-copy-for-visuals) helps with the words themselves.

## Make the look yours alone

Newsletter platforms give everyone the same handful of themes, so a distinctive header is one of the few places you can stand apart. A Gradiently Mark is a living background that nobody else can export with once you have claimed it, which suits a publication that wants its masthead to stay unmistakable as it grows.

## FAQ

### What size should an email newsletter header be?

Design it at 1200×600 pixels. Most inboxes display it around 600 pixels wide, and the larger file keeps it sharp on high density screens.

### What size is a Substack header image?

A Substack post header is 1456×816 pixels. It also becomes the preview image when the post is shared.

### How do I make my newsletter look professional?

Keep one masthead with your name in the same place every issue, use one heading font and one readable body font, and limit colour to a single accent for links.

### Should I change my newsletter header every issue?

Keep the name and layout fixed and change one element only, such as the issue number, headline or a seasonal colour. Readers recognise the fixed part.

### Do gradients work in email newsletters?

Put gradients in the header image rather than in CSS, because many email apps ignore CSS gradients. Keep body text as live text with strong contrast.