The short version
- A newsletter header image should let a reader name the publication and the subject of the issue in about three seconds.
- For email, design the header at 1200 by 600 pixels and display it at 600 pixels wide so it stays sharp on high-density screens.
- A Substack post header is a separate frame, 1456 by 816 pixels, and it also stands for the issue in the archive and in shared links.
- Keep the publication name, the type and the ground fixed, and change a short subject line from issue to issue.
- Repeat that subject as live text, because some inboxes block images and shared links crop the edges of the picture.
On this page
A newsletter header image works when, in about three seconds, a reader can name the letter and this issue's subject. Design email at 1200 by 600 pixels, shown at 600 wide, and a Substack post at 1456 by 816. Use one centred stack: the name, a short subject in the largest type, and the ground out to the edges.
Inbox fallbacks and dark mode are in email header design. Substack crops and settings are in Substack header image size.
The three second test
Run it at the size a reader gets. Open the email header at about 600 pixels wide, and the Substack header as a small archive card. Look away, then look for about three seconds. You should be able to say the name and the subject. A colour or a mood means it failed.
The picture does two jobs. In the inbox it sits above live text, and some readers never load images. On a share or in an archive it is the whole interface. Put the name and the subject in both places. Cut before you design: "What I cooked when the light went, and why salt matters more in October" becomes Salt and late light, under Harbour Dispatch and a small issue number.
Avoid
- A picture with no name and no subject
- The full headline, in type too small for a phone
- Words in the corners, where crops cut them off
- A new background every issue
- The subject existing only inside the image
Do
- The name in the same place every issue, readable on a phone
- One short subject, the largest type in the picture
- The stack in the centre, ground out to the edges
- The same ground each week, and a new subject
- The subject repeated in the subject line and the first sentence
Email and Substack header sizes
Most newsletter emails sit in a column about 600 pixels wide. Export the header at twice that, 1200 by 600, and set the display width to 600 so it stays sharp. The 2:1 shape holds a name and a subject without pushing the first sentence off a phone screen.
A Substack post header is 1456 by 816, close to 16:9. It opens the post, travels in the email and becomes the archive card. Do not stretch the email file: the proportions differ, and stretched type fails the test. Shared links crop a strip off the top and bottom. Substack header image size covers that crop and a separate social image.
Substack's other images are easy to confuse with the post header. The publication email banner is recommended at 1100 by 220 pixels, and it can be taller: a wordmark strip, not the issue. A cover is at least 600 by 600. A social preview should be at least 1200 by 630. Images taller than they are wide are cropped toward a square, so keep the post header landscape.
Email header 1200×600
1200 × 600
Substack post 1456×816
1456 × 816
Link preview 1200×630
1200 × 630
Email banner 1100×220
1100 × 220
Size to design
Where it shows
What must survive
Size to design
Where it shows
What must survive
Size to design
Where it shows
What must survive
Size to design
Where it shows
What must survive
Size to design
Where it shows
What must survive
What the header is allowed to say
Three lines, then stop. Harbour Dispatch, issue 48, is the example: a name people can learn, a number that changes, and a subject you can still read when the image is the width of a phone.
- Name. Harbour Dispatch, same place every issue, and also as live text so it survives when images are off.
- Issue. A number or a date, smaller than the subject, so regulars can see this is a new letter.
- Subject. Salt and late light, the largest type. The longer headline stays in the email subject line and the first sentence.
- Nothing else. No URL and no paragraph. A picture of a link is not a link.
Keep the words in the centre
Shares and thumbnails trim the edges, and not always the same edge. Keep one cluster in the middle, with ground around it. Stop at two or three short lines. The Substack frame is taller: use that height for the ground, not a fourth line.
The email header at 1200 by 600. Name and issue above a subject that still reads when this is shown at 600 wide.
The same issue at 1456 by 816. The stack stays centred, so a share crop can take a strip off the top and bottom and still leave the subject.
One ground for every issue
Readers recognise the letter by colour before they read the name. Keep one ground, one type and the same positions. Change the subject. A new photo every week is a new face, and at thumbnail size detail turns to mud. A gradient still reads when it is small.
In Gradiently that ground is a Mark. Auto ink sets each line light or dark from the Mark's colours, and the calmest part of the ground moves behind the words, as strongly as you choose. No box behind the type. See text on a gradient and auto ink. The wider system is newsletter branding.
How to build this week's header
- 1
Cut the subject to a few words
Cut until one glance is enough. Salt and late light goes on the picture. The longer line can be the email subject.
- 2
Design the email frame first
In Gradiently, build the stack at 1200 by 600 on the Mark you use for the letter, then the same stack at 1456 by 816. Do not stretch.
- 3
Centre the words
Name and issue number above the subject. The subject is the largest type. Leave ground on every side.
- 4
Run one ground to the edges
One gradient to all four edges. No white box, and no new background for a single issue.
- 5
Run the three second test
At 600 pixels wide, then narrower, you should get the name and the subject. Check the Substack file as a small card too.
- 6
Repeat the words in the email
Save at 1200 by 600, display at 600 by 300, state the issue in the alt text, and repeat the subject in the first sentence.
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" bgcolor="#1c3144">
<img src="https://example.com/harbour-dispatch-48.jpg"
width="600" height="300"
alt="Harbour Dispatch, issue 48: salt and late light"
style="display:block; width:100%; max-width:600px; height:auto; border:0;
color:#f4efe6; font-family:Georgia, serif; font-size:20px;">
</td>
</tr>
<tr>
<td style="padding:24px 20px; font-family:Georgia, serif; font-size:18px; line-height:1.5; color:#1c3144;">
Issue 48. Salt and late light: what to cook as the evenings close in.
</td>
</tr>
</table>Test with images off and in dark mode before you send. A moving header still has to pass on the first frame, because many inboxes show a still: animated email headers.
Questions people ask
What size should a newsletter header image be?
For a typical email, 1200 by 600 pixels, displayed at 600 wide. For a Substack post, 1456 by 816. Use the same layout in two files, and do not stretch one into the other.
Should the headline sit inside the newsletter header image?
A short subject, yes. A full sentence, no. The image holds the name, an issue number or date, and a few words. The argument of the issue belongs in live text, which still shows when images are blocked.
Can one newsletter header image work for email and Substack?
Use the same name, ground and layout, exported twice: 1200 by 600 for email and 1456 by 816 for Substack, with the words centred. A LinkedIn edition is another frame, 1920 by 1080: LinkedIn newsletter cover.
What if an inbox blocks the header image?
The reader sees alt text on the cell's background colour, then the live text. Write the alt text as the issue, and repeat the subject in the first sentence. Dark mode is covered in email header design.
Is the Substack email banner the same as the post header?
No. Substack recommends the publication banner at 1100 by 220 pixels, and it can be taller. That strip is a wordmark. The post header is the issue picture, designed at 1456 by 816.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile