- © 2026 Mailsoftly Inc. The name "Mailsoftly" and the Mailsoftly logo are registered trademarks of Mailsoftly Inc.
by Esma Calis · Last updated: 2026-04-14Your subscribers decide within two seconds whether your email deserves attention. That decision is driven almost entirely by design. The subject line gets the open, but layout, typography, and visual hierarchy determine whether anyone reads past the first fold.
These 15 email design best practices represent what actually works in 2026 — tested across billions of sends, validated by rendering engines from Apple Mail to Outlook, and proven to lift click-through rates when applied consistently. Each rule includes the specific threshold or measurement that separates good design from guesswork.
Whether you are building your first email newsletter design or optimizing campaigns that already perform well, these rules provide a framework you can apply immediately without redesigning your entire template system.
Key Takeaways
Email design is not purely aesthetic. Gmail, Yahoo, and Microsoft use engagement signals — including scroll depth, click rate, and time-to-delete — as inputs for spam filtering algorithms. An email that renders poorly on mobile gets deleted faster, which signals low quality to the inbox provider. Over time, poor design degrades your sender reputation.
According to Litmus’s State of Email report, emails that follow responsive design principles see 15% higher click-to-open rates compared to fixed-width designs. The rendering environment is fragmented — over 90 email client and device combinations exist — so every design decision must account for the lowest common denominator while still looking sharp on modern clients.
The rules below are organized into five categories: layout, typography, images, CTAs, and advanced techniques. Each one addresses a specific rendering or engagement challenge.
Multi-column layouts break on mobile clients that do not support media queries — which still includes several Android email apps and older Outlook versions. A single-column structure guarantees your content stacks correctly regardless of screen width. This is the single most impactful email design tip for mobile readability.
If your content requires side-by-side elements (like product comparisons), use a stacking approach: two columns on desktop that collapse into a single column at 480px. Never rely on horizontal scrolling.
The 600px standard exists because Outlook’s rendering engine (Word-based) handles wider emails unpredictably, and most desktop preview panes display emails at approximately this width. Setting your container table to 600px maximum ensures consistent rendering without horizontal scroll bars in any client.
Whitespace is not empty space — it is a design element that guides the eye. Use 24–32px padding between content sections and 16px between related elements. This creates clear visual groupings that help readers scan your email without feeling overwhelmed.
Spam filters flag emails that are predominantly images with little text. The 60% text / 40% image ratio keeps you clear of image-heavy spam triggers while still allowing strong visual communication. This ratio also ensures your message communicates even when images are blocked — which happens by default in many corporate email clients.
Custom web fonts load inconsistently across email clients. Outlook ignores them entirely. Gmail on mobile sometimes loads them, sometimes does not. The only reliable approach is a font stack that starts with your preferred font and falls back to system fonts:
These stacks cover macOS, Windows, iOS, and Android without any rendering surprises. If your brand uses a custom typeface, apply it via @font-face in a <style> block within <head> — clients that support it will render it, and others will gracefully fall back.
On mobile screens, anything below 16px requires pinch-to-zoom. Apple’s Human Interface Guidelines recommend 17px as the minimum readable body size. Setting your email body text to 16px gives you readability without the excessive line lengths that come with larger sizes at desktop widths.
Line height should be 1.5–1.6 for body copy. This spacing prevents lines from appearing cramped on small screens and improves reading speed across all devices.
Use one H1 for your email’s primary message (typically the hero headline), H2s for section breaks, and H3s for sub-points. This hierarchy is not just visual — screen readers use heading levels to help visually impaired users navigate email content. Skipping levels (jumping from H1 to H3) breaks this navigation.
| H1 | 28–36px | One per email |
| H2 | 22–26px | Section headers |
| H3 | 18–20px | Sub-sections |
| Body | 16px min | Line-height 1.5–1.6 |
ALT text serves three audiences: screen reader users who cannot see the image, subscribers whose clients block images by default, and email clients that display ALT text as a placeholder while images load. Every image in your email needs descriptive, concise ALT text that communicates the image’s purpose — not just “image” or “banner.”
For decorative images that add no informational value, use an empty ALT attribute (alt="") so screen readers skip them rather than announcing “image” with no context.
Total email weight affects load time, especially on mobile networks. Each image should be under 200KB, and your total email size (HTML + images) should stay under 800KB. Gmail clips emails over 102KB of HTML, so keeping images hosted externally and optimized directly impacts whether subscribers see your full message.
Use modern formats where supported: WebP delivers 25–35% smaller files than JPEG at equivalent quality. For clients that do not support WebP, provide JPEG or PNG fallbacks. Tools like Mailsoftly’s email editor handle image optimization automatically during upload.
An email that consists entirely of images with no real text content triggers spam filters aggressively. Beyond deliverability, image-only emails are completely inaccessible when images are blocked and provide zero value to screen reader users. Always include your key message and CTA as live text, using images to support — not replace — your content.
Decision fatigue kills click-through rates. When you present multiple competing CTAs, subscribers choose none. Every email should have one clear primary action — the single thing you want the reader to do. Secondary links can exist in navigation or footer areas, but the visual weight of the email should drive toward one button.
If your email genuinely requires multiple actions (like a product digest), establish clear visual hierarchy so one CTA dominates while others remain subordinate through smaller size, lighter color, or text-link styling.
Apple and Google both specify 44px as the minimum comfortable touch target for mobile interfaces. Your CTA buttons must meet this minimum in both height and width. On mobile, a button that looks fine on desktop becomes frustratingly small. Padding the button to at least 44px height with 24px horizontal padding ensures reliable tapping without accidental mis-touches.
The WCAG 2.1 AA standard requires a minimum 4.5:1 contrast ratio between text and background colors. This applies to your CTA button text against the button background, and to the button background against the email background. Low contrast means your CTA disappears for subscribers with visual impairments — and looks washed out on screens with low brightness settings.
Over 80% of iPhone users and a growing share of Android and desktop users have dark mode enabled. Email clients handle dark mode differently — Apple Mail inverts colors aggressively, while Gmail on Android applies a lighter touch. Your email design must account for both scenarios.
Key dark mode email design tips:
@media (prefers-color-scheme: dark) meta tags for clients that support them.Accessibility in email goes beyond ALT text. Every piece of information conveyed visually must have a text equivalent. This includes: color-coded status indicators (add labels), infographics (provide a text summary), icons used as navigation (add aria-labels or text), and charts (include the key data points as text).
Approximately 2.2 billion people worldwide have some form of vision impairment. Accessible email design is not a nice-to-have — it expands your effective audience and often improves the experience for everyone, including subscribers reading emails on low-bandwidth connections or in bright sunlight.
These rules work as a system. Single-column layout (Rule 1) makes your typography hierarchy (Rule 7) more effective because readers scan linearly. Compressed images (Rule 9) load faster, giving your CTA (Rule 11) more time to be seen before the subscriber moves on. Dark mode compatibility (Rule 14) ensures your carefully chosen contrast ratios (Rule 13) still work at night.
The fastest way to apply these rules is to start with a template that already follows them. Mailsoftly’s drag-and-drop email editor enforces mobile-responsive layouts, proper image compression, accessible font sizes, and touch-friendly button sizing by default — so you focus on content while the platform handles the email HTML best practices automatically.
600 pixels is the standard maximum width for email design. This width renders correctly in Outlook’s Word-based rendering engine, fits comfortably in Gmail’s preview pane, and provides enough horizontal space for readable single-column content on desktop. On mobile, the email scales down to fit the viewport width automatically when you use percentage-based widths inside a max-width container.
Use a cross-client testing tool like Litmus or Email on Acid to preview your email in 90+ client and device combinations before sending. At minimum, test manually in Gmail (web and mobile), Apple Mail, Outlook (desktop), and one Android client. Pay special attention to dark mode rendering, image blocking behavior, and CTA button sizing. Send test emails to real accounts rather than relying solely on preview tools — rendering differences between preview and actual delivery do occur.
Keep individual images under 200KB and total email weight under 800KB. For full-width hero images in a 600px email, create images at 1200px wide (2x for retina displays) and display them at 600px using HTML width attributes. Use JPEG for photographs (quality 70–80%), PNG for graphics with transparency, and GIF for simple animations under 1MB. Avoid using images wider than 1200px — there is no visual benefit and it increases load time significantly.
Yes. Beyond the ethical imperative of making content accessible to the 2.2 billion people with vision impairments worldwide, accessible emails perform better for everyone. Proper heading structure helps all users scan content. Sufficient contrast improves readability in bright environments. ALT text provides context when images are slow to load. Many accessibility practices — like using real text instead of images of text — also improve deliverability by keeping your text-to-image ratio healthy.
Part of: Email Marketing
Ready to boost your email marketing?
Start sending beautiful, targeted emails that convert — free to get started.
Try Mailsoftly FreeNo credit card required