Email Design Principles That Work
Email is the most fragmented medium a designer works in. The same message renders differently across Gmail, Outlook, Apple Mail, and dozens of mobile clients, many of which strip or ignore modern CSS. Solid email design principles embrace that constraint rather than fighting it: a robust single-column layout, conservative width, and resilient typography ensure the email looks intentional everywhere. The payoff is a message that loads fast, reads in seconds, and drives readers to a single clear action.
The key principles of email design
These seven principles keep marketing and transactional emails legible, on-brand, and click-worthy across the widest range of clients and devices.
| Principle | Why it matters |
|---|---|
| Single-column layout | Renders reliably across clients and reflows on mobile |
| ~600px content width | Fits desktop preview panes without horizontal scroll |
| Clear scannable hierarchy | Lets readers grasp the point in a quick skim |
| One primary CTA | Focuses the reader on a single desired action |
| Mobile-first design | Most opens happen on phones with small screens |
| Web-safe fonts with fallbacks | Prevents broken type when custom fonts are blocked |
| Accessible contrast and alt text | Keeps content readable in dark mode and with images off |
1. Single-column, responsive layout
A single content column is the backbone of reliable email. Multi-column grids break unpredictably in Outlook and crowd narrow phone screens, while a single column reflows cleanly from desktop to mobile. Stack your sections vertically, give touch targets room to breathe, and let the layout scale down gracefully rather than relying on clever wrapping that some clients ignore. Most email is still built on nested tables for this reason, since tables render more consistently than floats or flexbox across the patchwork of email engines. Keep the structure shallow and predictable, and your email will hold its shape whether it opens in a modern app or a decade-old desktop client.
2. Keep the content width near 600px
Roughly 600px has been the email standard for years because it fits comfortably inside desktop preview panes without triggering horizontal scrolling. Build your main container at that width and let it shrink to full width on mobile. Anything wider risks getting clipped in narrow reading panes, and the email may appear cut off before the reader even opens it fully.
3. Build a clear, scannable hierarchy
Readers skim email before they commit to reading. A strong headline, short paragraphs, generous spacing, and a bold subhead structure let someone grasp the offer in a glance. Apply the same visual hierarchy you would in any layout: size and weight signal importance, and white space groups related content so nothing feels like a wall of text.
4. One primary call to action above the fold
Every email should drive one main action. Make that call to action a large, high-contrast button with clear text, and place it where it is visible before the reader scrolls. Secondary links can appear lower down, but competing buttons of equal weight dilute the click. When the reader knows exactly what to do next, conversion rises. Use bulletproof buttons built with padding and background color rather than a single button image, so the call to action still appears even when images are blocked. Write button copy that names the outcome, such as “Start my free trial,” instead of a vague “Click here,” and give the button enough surrounding space that it reads as the obvious next step.
5. Design mobile-first
The majority of email opens happen on phones, so design for the small screen and scale up. Use a single column, large tappable buttons at least around 44px tall, font sizes of roughly 14 to 16px for body copy, and short subject lines that do not truncate. If it works on a phone, it almost always works on desktop too.
6. Use web-safe fonts with fallbacks
Many email clients block custom web fonts, so your design must degrade gracefully. Specify a font stack that lists your preferred typeface and then dependable fallbacks like Arial, Helvetica, or Georgia. Keep generous line height and avoid setting body copy in light weights that vanish at small sizes. Our typography terms glossary explains the terms behind a resilient font stack.
7. Accessible contrast, dark mode, and alt text
Images are frequently disabled by default, so meaningful alt text keeps your message intact when graphics do not load. Maintain strong text-to-background contrast for readability and screen readers, and test in dark mode, where light backgrounds may invert and transparent logos can disappear. Provide a logo and key graphics that hold up against both light and dark backgrounds.
Common email design mistakes to avoid
- Relying on a single large image for the whole email, which breaks when images are blocked.
- Cramming multiple competing calls to action so readers do not know where to click.
- Using tiny fonts or low-contrast gray text that disappears on phones and in dark mode.
- Skipping mobile testing and shipping layouts that overflow or require pinch-zoom.
Frequently Asked Questions
What are the most important email design principles?
The essentials are a single-column responsive layout, a content width near 600px, a clear scannable hierarchy, and one primary call to action above the fold. Designing mobile-first with web-safe font fallbacks and accessible contrast ensures the email renders well across every inbox, device, and dark-mode setting.
What width should an email be?
Keep the main content area around 600px wide for desktop, then let it scale to full width on mobile. This long-standing standard fits desktop preview panes without horizontal scrolling. Going wider risks clipping in narrow reading panes, so 600px remains the safe, widely supported choice.
Should emails be designed for mobile or desktop first?
Design mobile-first, because most opens now happen on phones. Build a single column, use large tappable buttons, set body text around 14 to 16px, and keep subject lines short. A layout that works on a small screen almost always scales up cleanly to desktop without extra effort.
Why do my emails look broken in Outlook or dark mode?
Outlook uses an older rendering engine that ignores much modern CSS, and dark mode can invert backgrounds or hide transparent logos. Use simple table-based single-column structure, inline styles, web-safe fonts, and graphics that read on both light and dark backgrounds to avoid these breakages.
How is email design different from designing a newsletter?
They share many rules, but a newsletter typically organizes several stories into scannable sections with a masthead, while a marketing email usually pushes one offer and one call to action. See our guide to newsletter design principles for the multi-section approach.
