Your newsletter design has one job: get out of the way. Nobody forwards an email because the gradient was gorgeous. They forward it because it was easy to read, easy to act on, and looked right on their phone at 7am.
Email design is its own weird world. Email clients render HTML inconsistently, many strip or ignore modern CSS, and dark mode can flip your colors without asking. Here’s how to design for that reality.
Layout: single column wins
Most emails are read on phones. A single-column layout stacks naturally on small screens and guides the eye from top to bottom with zero confusion.
- Width: a content width of around 600px (many designers work in the 600 to 640px range) displays comfortably in most desktop clients and scales down cleanly on mobile.
- Structure: header (logo or name), hook, main content, one primary call to action, footer.
- Whitespace: generous padding around blocks makes content feel lighter and easier to tap.
- Multi-column sections: fine for product grids or link roundups, but make sure they stack into one column on mobile.
Pro tip: Design mobile-first. Preview on your phone before your desktop. If it reads well on a small screen, it almost always reads well on a large one. The reverse is rarely true.
Fonts: boring is beautiful
Custom web fonts are supported by only some email clients. Others fall back to a default. So choose a font stack that looks good even when the fallback kicks in.
- Web-safe choices: Arial, Helvetica, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman.
- Always declare fallbacks. For example, a custom font followed by Helvetica, Arial, sans-serif.
- Body size: roughly 16px for body text is a comfortable standard on mobile. Going much smaller invites squinting and zooming.
- Line height: around 1.4 to 1.6 gives text room to breathe.
- Headings: clearly larger than body text, and used to break content into scannable chunks.
- Line length: keep paragraphs short. Three or four lines on mobile is plenty.
Buttons: make the click obvious
Your call to action is where design turns into money. Treat it that way.
- Use “bulletproof” buttons. Build buttons with HTML and CSS rather than as images, so they show up even when images are blocked. Most modern email builders do this for you.
- Make them thumb-sized. A common guideline is a tap target of at least around 44px tall.
- Write action copy. “Get the template” or “Read the guide” beats “Click here.”
- Use high contrast. The button should be the most noticeable element in its section.
- One primary action per email. Secondary links are fine, but one button should clearly be the star.
- Repeat in long emails. Put the button near the top and again after the main content.
Profit move: Treat your primary button like a subject line. Test two versions of its copy on your next few sends and track clicks, not opens. Small wording changes on a button can move real revenue, and click data is far more trustworthy than open data.
Images and the image-to-text balance
Images make emails feel alive, but image-heavy emails come with risks.
- Some readers block images by default, and an all-image email shows up as blank boxes.
- Spam filters look at the whole message. An email that’s one giant image with little text can look suspicious. Aim for a healthy amount of real text alongside your images.
- Keep file sizes small. Compress images so they load fast on mobile data.
- Never put key info only in an image. Dates, prices, offers and CTAs should exist as live text too.
Alt text and accessibility
Accessible emails are better emails for everyone. They’re easier to read, easier to scan and work for people using screen readers.
- Write descriptive alt text for meaningful images (“Chart showing weekly clicks rising” rather than “image1”)
- Use empty alt text for purely decorative images so screen readers skip them
- Maintain strong color contrast between text and background
- Don’t rely on color alone to convey meaning
- Use real headings and logical reading order
- Make link text descriptive, not “here” repeated five times
- Keep body text at a readable size
- Set the language of the email where your tool allows it
Dark mode without the horror show
Many readers use dark mode, and email clients handle it differently. Some leave your design alone, some partially invert colors, and some fully invert them. You can’t control all of it, but you can avoid the classic disasters.
- Use transparent PNG logos carefully. A dark logo on a transparent background can vanish on a dark background. Add a subtle light outline or a solid background behind it.
- Avoid pure black on pure white. Slightly off-white and dark gray often invert more gracefully.
- Don’t bake text into images. Text in images won’t adapt, so it may clash with the inverted background.
- Test your buttons. Make sure button text stays readable when colors flip.
- Use dark-mode media queries if your tool supports them, knowing that only some clients honor them.
- Preview in both modes in the major clients your audience uses before sending.
Watch out: Signature images with white backgrounds become glowing white rectangles in dark mode. If your logo or headshot sits on white, either give it a rounded frame so it looks intentional or use a transparent version with an outline.
The footer (don’t skip it)
Your footer is legally and practically important.
- A clear, working unsubscribe link, plus one-click unsubscribe support if you’re a bulk sender.
- Your physical mailing address, required by CAN-SPAM for commercial email.
- A reminder of why they’re receiving the email (“You joined the Profit Inbox Insiders at profitinbox.com”).
- Optional: preference center link, social links, a forward-to-a-friend nudge.
Not legal advice. Check the rules that apply where your subscribers live.
Plain text vs designed emails
Should you design at all? Many creators get great results with lightly formatted, almost plain-text emails that feel personal. Brands selling physical products often need visual layouts. A good compromise for many newsletters: a simple header, clean text, one styled button and minimal images. Test both styles on your own audience.
Pre-send design check
- Single column, roughly 600px wide, stacks cleanly on mobile
- Web-safe font stack with fallbacks, body around 16px
- One clear, bulletproof primary button
- Key info exists as live text, not only images
- Alt text on every meaningful image
- Previewed in light and dark mode
- Footer has unsubscribe link and physical address
- Copy scanned with a spam-word check
Key takeaways
- Single-column layouts around 600px wide are the safe default.
- Use web-safe fonts with fallbacks and readable sizes.
- Bulletproof, thumb-sized, high-contrast buttons with action copy drive clicks.
- Balance images with real text and always write alt text.
- Design and test for dark mode, especially logos and buttons.
Skip the blank canvas: grab a clean, mobile-ready layout from the Profit Inbox Templates library, then run your copy through the Spam Word Checker before you send.
Join the Profit Inbox Insiders
Weekly email marketing plays, free tools and templates. Plus the free 7-Day Email Profit Bootcamp.
