Newsletter design is not about decoration. It is about making a message easy to scan on a small screen, quick to load, accessible to everyone and consistent enough that readers recognise it at a glance. A good design guides the eye to one main point and one main action. A poor one hides the content behind heavy images, tiny text and cluttered columns. This guide covers newsletter layout, width, header and footer, typography, colour and dark mode, images and their size, buttons, accessibility, templates and the tools for building them, with a pre-send checklist. It complements our guide on how to start a newsletter.
Start with the layout
Use a single column
Multi-column layouts look neat on a desktop and fall apart on a phone, where most newsletters are read. A single column with clear sections is simple, robust and works in every mail app. If you want a grid for product listings, use no more than two columns on desktop and make them stack on narrow screens.
Set the width
A content width of around 600 pixels is a long-standing convention. It fits most desktop preview panes and scales down for phones. Set it as a maximum width so that the layout shrinks on small screens. The technical details are in HTML email templates.
Plan the structure
- Header: the newsletter name or logo.
- Opening: a short greeting or introduction.
- Main section: the story, tip or offer that justifies the email.
- Secondary sections: one or two shorter items.
- Call to action: one clear button.
- Sign-off: a name and an invitation to reply.
- Footer: unsubscribe link, reason for receiving, contact details.
Use white space
Padding between sections and around text makes a message feel calm and readable. Crowded newsletters feel like advertisements and get skimmed less carefully.
Newsletter header
- Keep it short. A tall header pushes the content below the fold, especially on phones.
- Use your logo or the newsletter name as text, with the same look in every issue.
- Add alt text to a logo image so the name shows when images are blocked.
- Avoid a menu bar with many links; one or two is enough.
- Consider a "view in browser" link, but do not make it the first thing readers see.
Newsletter footer
The footer is functional and often required. Include an unsubscribe link that is easy to see, a short line saying why the reader is receiving the email, and your sender name and contact details. If the law where you operate requires a postal address in commercial email, include it. Keep the text readable, not tiny grey type on a grey background. Our guide to email footer examples goes through the options, and one-click unsubscribe explains the header that powers the unsubscribe button in mail apps. Watch the message size: Gmail clips long messages, which can hide the footer.
Typography
- Font choice. Use common system fonts as a fallback, such as Arial, Helvetica, Georgia or Verdana, even if you also specify a web font. Many apps do not load custom fonts.
- Size. Body text of around 16 pixels reads comfortably on phones; avoid anything below 14.
- Line height. A line height of about 1.4 to 1.6 times the text size helps reading.
- Headings. Use a clear difference between headings and body. Keep headings short.
- Alignment. Left-align body text. Centred paragraphs are hard to read.
- Line length. Single-column layouts keep lines at a comfortable length.
Colour and contrast
Choose a small palette: one brand colour for buttons and links, neutral colours for text and backgrounds. Make sure the contrast between text and background is strong enough to read, especially for light grey text and coloured buttons. Do not use colour alone to convey meaning; add a label or an underline.
Dark mode
Many apps offer dark themes and may invert or adjust colours. Test your newsletter in dark mode. Use transparent logos with a clean edge, avoid pure white image backgrounds around text and keep contrast adequate in both themes. See accessible HTML email and dark mode.
Images
- Use images with a purpose: a product, a person, a chart. Skip decoration.
- Size. Make images about twice the display width for sharp screens, but compress them. A 600 pixel wide layout often uses images up to 1200 pixels wide. Keep files small so the message loads quickly on mobile connections.
- Always add alt text that describes the image or its purpose, and set width and height.
- Expect blocking. The message must make sense without images.
- Do not put key text in images. It cannot be read by screen readers, is not searchable and may be blocked.
- Avoid one big image as the whole newsletter. It hurts accessibility and filtering.
- Host images on a reliable server with a stable address, so that old issues keep working.
- Consider animated images carefully. Support varies and large files slow loading.
Buttons and links
Use one primary button per issue, with a short, specific label such as "Read the guide" or "View your report". Build it as a styled link inside a table cell so it works across mail apps, and make it large enough to tap. Add a plain text link below it as a fallback. The code and the pitfalls are in links, buttons and mailto in HTML email.
Accessibility
- Use real headings and a logical reading order.
- Add alt text to meaningful images and empty alt text to decorative ones.
- Use descriptive link text, not "click here".
- Set the language of the message.
- Ensure sufficient contrast and avoid tiny text.
- Mark layout tables with role="presentation".
- Send a matching plain-text version.
Templates and tools
You have three broad choices:
- The template builder in your sending platform. Quick and usually tested across mail apps.
- A design tool that exports HTML. More freedom; check the exported code in real inboxes.
- Hand-coded HTML with tables and inline styles. Most control, most work. See our email templates for a way to store and reuse them.
Whichever you pick, build a master template once, then reuse it for every issue, changing only the content. Consistency makes your newsletter recognisable and saves time.
Newsletter design ideas by type
| Newsletter type | Design approach |
|---|---|
| Essay or letter | Almost plain: a small header, readable text, few images |
| Curated links | A list with a bold link title, one line of context and thin dividers |
| Product digest | A grid of products, each with an image, name and button, stacking on mobile |
| Company update | Short sections with headings, one image per section and one main call to action |
| Event announcement | A clear date and place near the top and a single registration button |
Pre-send checklist
- Does the layout work in one column on a phone?
- Is the key information readable with images off?
- Do all images have alt text, width and height?
- Is there one clear primary action?
- Do all links work, and is the unsubscribe link visible?
- Does it look right in dark mode?
- Is the message small enough not to be clipped?
- Is there a plain-text version?
- Have you sent tests to Gmail, Outlook, Yahoo and Apple Mail?
- Have you run a spam check? See the spam checker guide.
Reuse one template for every issue Store your newsletter template, merge in each issue and track delivery and clicks.
References and further reading
Frequently asked questions
What is the best layout for an email newsletter?
A single column, around 600 pixels wide at most, with a short header, a main section, one clear call to action and a readable footer. It works on every device.
What size should newsletter images be?
Make them about twice the display width for sharp screens, for example up to 1200 pixels for a 600 pixel layout, but compress them to keep files small. Always add alt text, width and height.
What should go in a newsletter footer?
A visible unsubscribe link, a line explaining why the reader gets the email, your sender name and contact details and, where required by law, a postal address.
Should I use a template?
Yes. Build one master template and reuse it, changing only the content. It keeps issues consistent and saves time.
How do I make a newsletter accessible?
Use real text and headings, alt text for images, descriptive link text, good contrast, a set language and a plain-text version.