Email Newsletter Design Guide: Layouts and Sizes

Mobile devices account for 41.6% of all email opens (Litmus, 2025). Roughly half of every campaign you send is read on a phone screen. Email newsletter design that ignores this reality fails before the message even gets a chance. Wrong dimensions, oversized images and a non-responsive layout turn a well-written campaign into a deleted email.

Email newsletter design is the process of building the visual structure, content hierarchy and technical format of an email campaign. It is not a single decision but a chain of connected ones: email width, image dimensions, font choice, CTA (call-to-action) button placement, mobile responsiveness, dark mode handling and accessibility. Each of these directly affects whether the recipient opens, reads and clicks.

This guide covers everything you need to design newsletters that work across every major inbox provider, with sections on:

Email dimensions and image size standards
Layout fundamentals and visual hierarchy
Mobile-first responsive design
Dark mode handling for Gmail, Outlook and Apple Mail
Accessibility standards
Pre-send checklist

Email newsletter dimensions and technical specs

Email newsletter dimensions are the width, height and file size standards a campaign needs to follow so it displays correctly across Gmail, Outlook, Apple Mail and Yahoo. When these standards are missed, emails get clipped, horizontal scroll bars appear or images break. Worse, oversized files can trigger spam filters.

The table below answers the most common dimension and size questions in one place:

Element	Recommended value	Why it matters
Email width	600 to 700 px	Anything above 720 px gets clipped on Outlook desktop. Gmail web works best at 640 px.
Hero image width	600 px	Prepare the source at 1200 px for retina displays, then render at 600 px with CSS. This keeps it sharp on standard and high-resolution screens.
Body image	200 to 560 px	Depends on the layout. Narrower images reduce total email size when full width is not needed.
Single image file size	100 KB max	Under 50 KB is ideal. Large images get caught by corporate email filters.
Total email size	500 KB max	Includes text, images and HTML code. Gmail clips emails over 102 KB and shows a "view entire message" link.
Image format	WebP or JPEG	Use PNG (Portable Network Graphics) only when transparency is required. WebP offers the best quality-to-size ratio.
CTA button height	44 px minimum	Apple's Human Interface Guidelines standard. Smaller buttons are hard to tap on mobile.
CTA button width	120 px minimum	Wide tap area, short clear text. Use action phrases like "View offer" instead of "Details".
Body font size	16 px minimum	Anything below 14 px is unreadable on mobile. Users zoom in once and then close the email.
Heading font size	22 to 28 px	Needs to be visibly larger than body text to create hierarchy.

These dimensions are not arbitrary. They come from years of testing across Gmail, Outlook, Apple Mail and Yahoo, and reflect the actual rendering rules each client uses. Skipping them is the most common cause of broken campaigns.

How to optimise images before adding them

Compress every image before adding it to your design. A 3 MB (megabyte) product photo from a photographer can usually be reduced to 80 KB (kilobyte) with no visible quality difference. Two free tools handle this well:

tinypng.com: Drag and drop PNG or JPEG files for instant compression.
squoosh.app: Google's free tool. Converts to WebP and other formats with a quality slider that lets you balance size and clarity visually.

Practical rule: keep every image under 100 KB, aim for 50 KB. Total email size (text plus images plus HTML) should stay under 500 KB.

The fundamentals of email newsletter design

Email newsletter design principles are the visual and structural rules that help recipients scan a message quickly and find the main CTA. Litmus data shows the average email reading time is 9 seconds. In those 9 seconds the recipient scans, decides whether to engage and either clicks or deletes. Your design needs to be built around that scanning behaviour.

Visual hierarchy

Recipients scan emails top to bottom in F or Z patterns. Place the most important information at the top and the most important action at eye level. A typical newsletter structure follows this order:

Logo and brand identity: Top left. The recipient should immediately recognise who sent the email. Familiarity builds trust and reduces spam perception.
Hero image or main headline: Communicates the single core message. The "what is this email about?" question should be answered at a glance.
Supporting copy: Two or three short sentences explaining the benefit. Use bullet points instead of long paragraphs.
CTA button: Clear, short, action-focused. Replace vague labels like "Details" with specific phrases like "View the offer", "Watch the demo" or "Complete your order".
Secondary content: Additional information, related products or social media links.
Footer: Unsubscribe link, company details, privacy notice. The unsubscribe link is a legal requirement in every commercial email under PECR (Privacy and Electronic Communications Regulations) and UK GDPR.

One message, one CTA

When a single email contains multiple offers and competing CTAs, attention scatters and click rates drop. The most common mistake we see in MailGraf customer campaigns is exactly this: trying to fit three different offers into one email.

Focus each campaign on one main goal. Do not promote a discount, a new product launch and a blog post in the same email. If you absolutely need a secondary CTA, separate it visually from the main one. The primary CTA should be large and in your brand colour. The secondary CTA should be smaller and in a neutral tone.

Colour and contrast rules

Use brand colours consistently across every email. The recipient should recognise your campaign in the inbox by colour palette alone before reading a single word.

The CTA button needs to stand out clearly from the background. A pale blue button on a white background fades into nothing. Darker blues, oranges or other contrasting colours work better. Aim for a minimum 4.5:1 contrast ratio between text and background, the WCAG (Web Content Accessibility Guidelines) AA standard. This ratio protects readability for colour-blind users and for anyone reading on a phone in bright sunlight.

Avoid using too many colours. Two or three brand colours plus neutral tones (white, grey, black) are enough. Colour clutter looks unprofessional and can trigger spam signals in some clients.

Font choices

Email clients do not work like web browsers. The custom font you use on your website may not be supported in email, and when the client falls back to its default font, your design breaks.

The safe approach: use web-safe fonts like Arial, Helvetica, Georgia or Verdana as your primary font. These render consistently across every email client. If you want to use a custom font, define a fallback font in your CSS (Cascading Style Sheets). Use decorative fonts only as embedded images, never as live text.

Font size rule: body text minimum 16 px, headings 22 to 28 px. Anything below 14 px is unreadable on mobile, and users will close the email rather than zoom in.

Mobile-first email newsletter design

Responsive email newsletter design means the email automatically adapts to the screen width of the device it is opened on. Responsive emails switch to a single column on mobile, scale images to screen width, and resize buttons to be tappable.

Single-column layouts perform 21% better on mobile compared to multi-column designs (Brevo, 2025). Responsive emails deliver 15% higher click-through rates than non-responsive ones (Litmus, 2025). The data is clear: mobile responsiveness is no longer optional.

Desktop vs mobile design differences

Criterion	Desktop	Mobile
Layout	2 to 3 columns possible	Single column required
Body font size	14 to 16 px	16 px minimum
CTA button	36+ px height acceptable	44x44 px minimum (finger tap area)
Subject line visible	About 60 characters	35 to 45 characters
Preview text	About 90 characters	About 40 characters
Image behaviour	Fixed size	Scales to screen width

Mobile design checkpoints

Design single-column from the start. Two columns may look good on desktop, but they stack awkwardly on mobile and the order can break. Single column works consistently on both.
Keep links and buttons apart. A finger touch covers more area than a mouse cursor. Leave at least 10 px of space between tap targets.
Plan your preview text. This is the 40 to 90 character snippet that appears after the subject line in the inbox. Leaving the default "View this email in your browser" wastes a valuable real estate. Use it to extend or complete your main message.
Avoid long emails. Scroll fatigue kicks in faster on mobile than on desktop. Show the main message and CTA above the fold (the first screen).

MailGraf's drag-and-drop email editor lets you switch between desktop, tablet and mobile previews with a single click. Always test your design on all three screen sizes before sending.

Designing for dark mode

Dark mode is the email client setting that switches the background to a dark colour to reduce eye strain. Apple Mail, Gmail, Outlook and Yahoo Mail all support dark mode, and the share of users who prefer it grows every year. Your design should never be sent without being tested in dark mode.

Common dark mode design problems and practical fixes:

Disappearing logos

The most frequent issue. A dark-coloured logo blends into a black background and becomes invisible. Solutions:

Prepare your logo as a transparent PNG and add 4 to 6 px of white or light grey padding around it. The padding is invisible in light mode and frames the logo in dark mode.
Alternatively, prepare a separate light-coloured logo for dark backgrounds and use a CSS media query to swap it automatically.

Background and text colours

Pure black (#000000) is hard on the eyes. Dark grey tones (#121212 or #1a1a1a) feel more comfortable to read. The same applies to text: instead of pure white (#FFFFFF), use a softer white like #E0E0E0 or #F0F0F0.

Brand colours can look too vivid in dark mode. Bright reds and neon greens burn the eye on dark backgrounds. Prepare pastel or lower-saturation versions of your brand colours specifically for dark mode.

Unexpected image behaviour

Transparent PNGs can produce unexpected results in dark mode. A graphic designed assuming a white background may end up floating without a frame and become unreadable. Test every image on both light and dark backgrounds.

Email clients behave differently

Dark mode handling varies by client. Gmail, Outlook and Apple Mail each have their own approach:

Apple Mail: Full support for CSS media queries. The most controllable client.
Gmail: Applies its own colour conversion algorithm. CSS overrides work partially.
Outlook (desktop): Limited dark mode support. Some elements get converted, others stay as they are.

The most common dark mode issue we see in MailGraf customer campaigns is disappearing logos. We recommend new customers prepare both light and dark versions of their logo at setup.

Test routine

Before sending, check your design in:

Gmail (web, Android, iOS)
Apple Mail (macOS, iOS)
Outlook (desktop, web)
Yahoo Mail

Tools like Litmus and Email on Acid let you test across dozens of clients in one go. The MailGraf editor includes a dark mode preview as well.

Email accessibility

Email accessibility is the set of standards that make your campaign readable for users who are visually impaired, colour blind, hearing impaired or rely on assistive technology like screen readers. Around 16% of the global population lives with a disability according to the World Health Organization. Accessible design is not just an ethical choice; ignoring it means losing 16% of your potential audience.

Alt text

Add descriptive alt text to every image. Screen readers (JAWS, NVDA, VoiceOver) cannot see images and read the alt text out loud instead. Some email clients also block images by default. With alt text, the recipient still understands what the image shows.

Bad alt text: "image1.jpg", "banner", "image" Good alt text: "MailGraf drag-and-drop email editor showing a campaign in progress", "Summer collection 20% off announcement banner"

Contrast ratio

Maintain sufficient contrast between text and background. WCAG AA requires at least 4.5:1. Low contrast (light grey text on a light background) becomes unreadable for colour-blind users and for anyone reading on a phone in sunlight.

Meaningful link text

Avoid context-free link text like "click here" or "click". Screen readers list every link on a page and present them to the user. A list of "click, click, click" is meaningless. Use phrases that provide context: "View the campaign details" or "Download the price list".

Readability without images

Your message should be understandable even when images do not load. Some clients block images by default, and some users disable them to save data. Put critical information (prices, dates, CTAs) in live text, not just inside images.

Tools for designing email newsletters

Email design tools fall into two categories: email editors that combine design and sending, and visual design tools that produce assets you import elsewhere.

MailGraf drag-and-drop editor

MailGraf's email editor lets you build professional newsletters without writing code. Start from a template library or design from scratch on a blank canvas.

One of the editor's strengths is its modular approach. Save frequently used components (logo blocks, CTA buttons, footers, product cards) to a "saved modules" library. In future campaigns you drag and drop these modules into place and only swap the content. This shortens design time and keeps brand consistency across campaigns.

Responsive previews let you check your design on desktop, tablet and mobile. A dark mode preview is also built in. For complex custom layouts, HTML editing is supported.

Canva

Canva is a popular visual design tool that covers email newsletters along with everything else. It includes ready-made email templates and lets you export your design as PNG or JPEG, which you then add to your email editor.

The advantage is fast prototyping and ease of creating visuals. The disadvantage is that the output is an image, not an HTML email. So if you design a newsletter in Canva, you still need to import it into an email editor like MailGraf to send it. Mostly free to use.

Figma

Figma is the professional UI (User Interface) and UX (User Experience) design tool of choice for many product teams. It gives pixel-level control. Figma is particularly strong for email design when you need complex layouts, multiple campaign variations or strict brand consistency.

You can export Figma designs as PNG or JPEG and import them into your email editor. You can also build design systems where your email components (button styles, colour palettes, typography) live in a central library. The free plan covers most use cases.

Adobe Express

Adobe Express is another quick visual design tool. It offers ready templates, brand kits and easy export. The user experience is similar to Canva, with the advantage of integration into the wider Adobe ecosystem. Mostly free to use.

These tools help at the design stage, but for sending, testing and reporting you need a professional ESP (Email Service Provider). After designing in any of these tools, import the result into MailGraf to handle delivery, spam testing and performance tracking.

Pre-send design checklist

Run this checklist before every campaign. A single missed item can hurt performance or create deliverability problems.

Dimensions and sizes:

Is the email width between 600 and 700 px?
Is each image under 100 KB on its own?
Is the total email size (text plus images plus HTML) under 500 KB?
Are CTA buttons at least 44x44 px?
Is the body font at least 16 px?

Mobile responsiveness:

Is the layout single column?
Is there enough space between tap targets?
Is the subject line under 45 characters?
Has the preview text been planned (not left as the default)?
Is the CTA visible above the fold?

Visual and accessibility:

Does every image have descriptive alt text?
Is the logo visible in dark mode?
Is the contrast ratio between text and background sufficient?
Is the email readable when images are blocked?
Do link texts give context (no "click here")?

Technical:

Do all links work (no broken links)?
Is the unsubscribe link present and visible in the footer?
Has the spam test been run (mail-tester.com score 7/10 or higher)?
Has the email been tested on desktop, mobile and dark mode?
Are SPF, DKIM and DMARC records configured correctly?

In MailGraf, automatic checks run before every send. Issues like missing alt text, broken links or oversized images are flagged before the campaign goes out.

For more on deliverability, see our guide on SPF, DKIM and DMARC. For email performance metrics, see our bounce rate guide. And for the broader picture of how segmentation supports better-designed campaigns, see our email segmentation guide.

Frequently asked questions

What is email newsletter design?

Email newsletter design is the process of planning the visual structure, content hierarchy and technical format of an email campaign. The goal is not just visual appeal but ensuring the message is scanned quickly and converts into clicks.

How do you design a good email newsletter?

Start by defining the goal, build a clear message hierarchy, design mobile-first, test across email clients and review performance metrics afterwards. Use a single CTA, a 600 to 700 px width, body font of at least 16 px and buttons of at least 44x44 px.

What are the ideal email newsletter dimensions?

Email width should be between 600 and 700 px. Designs above 720 px get clipped on Outlook desktop. Each image should stay under 100 KB and total email size should stay under 500 KB. CTA buttons should be at least 44x44 px and body font at least 16 px.

What size should newsletter images be?

A full-width hero image should be 600 px wide. For retina displays, prepare the source at 1200 px and render at 600 px with CSS. Keep individual image file sizes under 100 KB. Use JPEG or WebP rather than PNG, except when transparency is needed.

How do I test email newsletters in dark mode?

Test in Gmail (web, Android, iOS), Apple Mail (macOS, iOS), Outlook (desktop, web) and Yahoo Mail. Pay attention to logo visibility, background colours and text readability. Tools like Litmus and Email on Acid let you test across dozens of clients at once. The MailGraf editor includes a dark mode preview.

What is HTML email newsletter design?

HTML email newsletter design refers to rich-content emails built with HTML (Hypertext Markup Language) code. Unlike plain text emails, they include images, coloured backgrounds, buttons, tables and typography. Professional email editors generate the HTML behind the scenes while you design with a drag-and-drop interface. Direct HTML editing is also possible for custom needs, but every email client supports HTML differently and compatibility testing is essential.

Which tools are best for email newsletter design?

For design plus sending, MailGraf provides a drag-and-drop editor, mobile preview and dark mode testing. For visual design only, Canva offers fast prototyping, Figma gives pixel-level control for professional layouts and Adobe Express integrates with the wider Adobe ecosystem. Visual tools produce images that you then import into an email service provider for sending and tracking.

Originally published: Apr 10, 2026