# Newsletter header image: size, layout and the 3 second test [Canonical HTML page](https://gradiently.design/guide/newsletter-header-image) The picture at the top of an issue has one job: say whose letter this is, and what this one is about, before the reader moves on. ## 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. 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](https://gradiently.design/guide/email-header-design). Substack crops and settings are in [Substack header image size](https://gradiently.design/guide/substack-header-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](https://gradiently.design/guide/substack-header-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 The two large frames are the issue header. The thin strip is Substack's publication banner, for a wordmark. The link preview is a wider crop of the same picture, not a new layout. | Image | Size to design | Where it shows | What must survive | | --- | --- | --- | --- | | Email header | 1200×600, shown at 600 | Top of the email | Name and subject | | Substack post header | 1456×816 | Post, email, archive card | Name and subject, centred | | Shared link | Often near 1200×630 | Wider crop of the post | The centre only | | LinkedIn edition cover | 1920×1080 | Top of that edition | Same stack, new file | | Substack email banner | 1100×220, can be taller | Strip on publication emails | Wordmark only | LinkedIn recommends 1920 by 1080 for an edition cover ([best practices](https://www.linkedin.com/help/lms/answer/a517940)). Same stack, separate file: [LinkedIn newsletter cover](https://gradiently.design/guide/linkedin-newsletter-cover). ## 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. > **When the picture does not load** Some inboxes block images until the reader allows them. Write alt text as the issue, not *blue banner*, set the cell behind the image to a colour from the ground, and repeat the subject as the first live sentence. Dark mode and fallbacks are in [email header design](https://gradiently.design/guide/email-header-design). ## 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. A 1200 by 600 email header for Harbour Dispatch, issue 48, subject Salt and late light, on a deep gradient The email header at 1200 by 600. Name and issue above a subject that still reads when this is shown at 600 wide. A 1456 by 816 Substack header with Harbour Dispatch and Salt and late light centred on the same gradient 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](https://gradiently.design/guide/text-on-gradient) and [auto ink](https://gradiently.design/guide/auto-ink-legibility). The wider system is [newsletter branding](https://gradiently.design/guide/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. ```html
Harbour Dispatch, issue 48: salt and late light
Issue 48. Salt and late light: what to cook as the evenings close in.
``` The file is 1200 by 600. The HTML shows it at 600 by 300. Cell colour and alt text carry the issue if the image is blocked. The gradient stays in the image: [gradients in email](https://gradiently.design/guide/gradients-in-email). 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](https://gradiently.design/guide/animated-email-header). ## FAQ ### 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](https://gradiently.design/guide/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](https://gradiently.design/guide/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.