Discover key email design best practices: clear sender identity, strong hierarchy, purposeful images, accessible typography, effective CTAs, and thorough testing for all devices.
Brandset Team15 min de leituraGood email design has a simple job: make the message easier to understand.
A subscriber should be able to recognize who sent the email, understand what it's about, identify what matters, read it comfortably, and find the next useful action without fighting the design. That's where a lot of marketing email goes wrong. Oversized hero images push the useful content down. Several type styles compete for attention. Buttons look equally important. Important information exists only inside graphics. An email looks polished in the editor and becomes difficult to read on a phone or unpredictable in dark mode.
The strongest email design is often less noticeable. It creates hierarchy without demanding attention for itself. It supports the brand without turning every send into a design exercise. It works when images don't load. It remains understandable across different screen sizes and email clients. And it lets the content do its job — whether that email is a newsletter, a product announcement, a welcome sequence, or a single promotional send.
In short:
Design begins before the email opens: Sender name, subject line, and preview text are design decisions too — they establish the expectation for everything that follows.
Hierarchy matters more than any single element: Scale, weight, contrast, placement, and spacing work together to let someone scan the message and still understand its structure.
Images should add information, not just fill space: A generic stock photo rarely explains a workflow or product capability the way a real screenshot does.
The editor is not the inbox: Dark mode, mobile width, and fallback fonts all render differently than the desktop preview suggests — test the actual output, not the mockup.
These practices follow the reader's experience from the inbox to the final pre-send check.
Email design begins before anyone sees the body of the message. The sender name, subject line, and preview text already determine how the message is understood.
Before a subscriber evaluates your typography, headline, image, or CTA, they see who sent the message. Use an identity people can connect to the relationship they signed up for — "Willow Studio" for a business, "Sarah from Willow Studio" for a founder-led newsletter, "The Weekly Edit" for a publication. The exact format matters less than recognition and consistency. Changing between "Willow Studio," "Sarah," "Willow Marketing Team," and "Willow Newsletter" creates unnecessary ambiguity.
Google's sender guidelines require display names, sender information, subjects, and other message elements to accurately represent who is sending the message and what it contains, specifically warning against misleading display names or attempts to make messages appear verified, forwarded, or part of a conversation when they're not. Pick a sender identity that subscribers recognize and use it consistently.
The subject line is part of the design even though it has no visual layout — it establishes the expectation for everything that follows. "October newsletter" tells a reader nothing. "The website mistake we keep seeing in small businesses" gives them enough to judge relevance. "Exciting announcement!" versus "You can now duplicate an entire landing page." "Last chance!!!" versus "Registration closes Friday for the pricing workshop." The stronger versions earn attention without creating an expectation the email can't fulfill.
Google recommends clear subjects and explicitly prohibits deceptive subject lines and message content. There's no universal character count that guarantees a better subject line — different devices and inboxes display different amounts of text. Put meaningful information early, remove unnecessary setup, and make the subject useful even if the end gets truncated.
Preview text gives you another small piece of inbox real estate. Don't simply repeat the subject. Subject: "The homepage test we use before redesigning." Preview: "Five questions that expose positioning and conversion problems quickly." The preview extends the subject instead of echoing it — adding context, specificity, a secondary benefit, or timing. If your email platform lets you define preview text, use it intentionally rather than allowing an arbitrary first line to appear there. Sender, subject, and preview text should feel like one coordinated message.
Once the message opens, visual hierarchy becomes the main design problem. What should readers notice first? What belongs together? What's supporting information? Where's the next action?
Your newsletter doesn't need a new visual identity every time it's sent. Create a small set of reusable foundations for the communication you actually produce: an editorial template (text-forward, restrained imagery, comfortable reading), a single-announcement template (headline, concise supporting copy, clear action), a content-roundup template (repeating blocks for several stories or resources), a product template (strong imagery supported by concise descriptions), and an event template (date, time, context, key information, registration action).
The reusable template establishes maximum content width, typography, button styles, section spacing, image behavior, header, and footer. Then the content changes. The design system remains familiar.
Your email won't be read in the dimensions of the email editor. Subscribers may open it on a phone, a tablet, a laptop, a large desktop display, or different inbox applications entirely — the design needs to survive all of those changes. Test the real email at a narrow width. Can the copy be read comfortably? Do images resize correctly? Can buttons be used easily? Does the content remain in a logical order? Does anything require horizontal scrolling? Does a large image push the actual message too far down?
Simple single-column layouts are often easier to make resilient, but more sophisticated layouts can also work when properly coded and tested. The important principle isn't blindly following "mobile-first." It's making sure the communication remains usable when screen space changes.
The opening should help answer who sent this and what it's about — without requiring a giant header. A founder newsletter might use a small wordmark and move directly into the writing. A retailer may rely more heavily on product imagery. A feature announcement may begin almost immediately with the update itself. Avoid spending the most valuable area of the email on decoration or ceremonial copy.
"We're incredibly excited to share something we've been working hard on behind the scenes..." gives the reader nothing. "You can now duplicate an entire landing page without rebuilding its sections" gives them information immediately. Good design makes that information prominent.
Not every element should have equal visual importance. Hierarchy tells the reader this is the main idea, this explains it, this is secondary, this is what you can do next. You establish it through scale (headlines more prominent than body copy), weight (strategic use of font weight to emphasize important information), contrast (important elements need enough visual distinction from their surroundings), placement (priority usually affects where something appears in the reading sequence), and spacing (space communicates which elements belong together and which deserve separation). The objective is letting someone scan the message and still understand its structure. Don't force every component to compete for attention.
White space is functional — it doesn't need to be literally white, just space that gives content room to breathe. Use spacing to help readers understand where one section ends, where another begins, which text belongs to an image, and what should be read together. A newsletter where every available area contains text, decoration, borders, icons, or images becomes visually exhausting. The opposite can also happen — huge empty areas between every element can force unnecessary scrolling and disconnect related information. The goal is rhythm rather than maximum emptiness. Related elements should feel related. Separate ideas should feel separate.
Images work when they communicate. They become noise when they're included merely because the template has an image slot.
Before adding an image, ask what becomes easier to understand because this image exists. Useful email imagery might include product photography, a screenshot of a new feature, a before-and-after comparison, an original diagram, a relevant chart, a genuine founder or team photograph, or an illustration supporting the editorial idea. A generic stock photograph of people smiling at a laptop rarely explains much about a workflow, pricing strategy, or product capability. The image should support the message, not compete with it.
Don't make the reader depend on one large graphic to understand the email. If a campaign contains "Registration closes Friday at 5 PM," that information shouldn't exist only inside an image. Image-only communication creates problems when images don't load, when the layout needs to adapt to a small screen, when assistive technology can't access the visual information, or when text becomes too small as the image scales. W3C accessibility guidance requires text alternatives for non-text information and distinguishes between informative, decorative, and functional imagery. Keep essential content as actual text where practical. Use imagery to reinforce the communication, not carry it alone.
"Add alt text to every image" isn't quite the right rule — the alternative depends on the purpose of the image. W3C distinguishes several cases. For informative images, the alternative should communicate the important information the image contains — a chart shouldn't simply say "Chart," it should describe the meaningful takeaway when that information is needed to understand the email. For functional images that act as a link or control, describe the function or destination. For purely decorative images that communicate nothing essential, a null alternative (alt="") lets assistive technology skip it entirely.
"IMG_3826.jpg" is bad alt text. "Nice photo" is also bad. "Screenshot of the workflow builder showing an email action after a form submission" is better, when that's the information the reader needs. Ask what someone would miss if they couldn't perceive this image, and preserve exactly that information.
Typography needs enough personality to reinforce the brand without depending on rendering behavior you can't fully control.
Email clients don't support every web font and CSS technique in the same way, which makes fallback behavior important — your hierarchy should still work if the preferred brand font is replaced. A font stack might look conceptually like "Brand Sans → Helvetica → Arial → sans-serif," with the exact stack depending on the typeface and design. Don't let typography rely entirely on the font itself. Preserve hierarchy through size, weight, spacing, line height, and content structure instead.
For body copy, prioritize readability. Avoid extremely light type and avoid long centered paragraphs — centered text can work well for headings, short labels, and small introductory sections, but long paragraphs are usually easier to read left-aligned because each line begins from a predictable position.
The CTA is where the design intersects with a decision. The goal isn't simply to make a large button. The reader should understand what the action means.
For a focused email, identify the primary action: "Read the complete guide," "Reserve my seat," "See the collection," "Start my free trial." Compare that with "Click here," "Submit," "Learn more." Specific CTA language gives readers a better idea of where the interaction leads. Google's bulk-email guidance recommends clear calls to action and specifically says links and buttons should accurately describe their destination.
A newsletter doesn't necessarily need only one link — a roundup may contain several, a product update may include documentation, a long campaign might repeat the same CTA twice. The useful distinction is one clear primary decision, not one URL under all circumstances.
A button should be easy to identify and use. Check contrast, label readability, space around the text, separation from nearby links, and behavior on narrow screens. Avoid a button whose color barely differs from its background. Avoid forcing several equal-weight buttons to compete beside each other without a clear reason. Avoid vague labels simply because they fit inside a component.
The destination matters too. If the CTA says "Get the checklist," the next page should make obtaining that checklist obvious. The post-click experience is part of the email design problem, not a separate concern.
Design continues after the main content ends. The footer and unsubscribe experience still contribute to how trustworthy the email feels.
The footer should help answer who sent this, why you're receiving it, how to manage the relationship, and how to unsubscribe. For subscription messages, Gmail requires one-click unsubscribe implementation and says requests should be processed within 48 hours, recommending that senders separate subscription and transactional mail appropriately. Gmail's broader sender rules also require qualifying bulk marketing and subscribed messages to include a clearly visible unsubscribe link.
That doesn't mean the footer needs to dominate the design. It should simply remain readable and usable. Don't intentionally hide the unsubscribe link by making it tiny, low contrast, or difficult to locate. Someone deciding to leave should have an obvious path.
Familiarity can be useful. When subscribers repeatedly encounter the same sender identity, familiar typography, recurring colors, recognizable section patterns, consistent button treatment, and a stable tone of voice, they have less work to do identifying the message. This doesn't mean every campaign should look identical — a launch campaign can use a different composition from a founder essay, and a product email can be more visual than an educational newsletter. Think of the email brand as a design system where some elements remain stable and others adapt to the job. The goal is recognizable continuity rather than visual monotony.
For Brandset users, the Brand Center is particularly relevant here — core identity decisions such as colors, typography, voice, positioning, and brand context stay available across the marketing work instead of being reconstructed for every newsletter.
The editor is not the inbox. This becomes especially obvious with dark mode and differences between email clients.
Dark mode is not one universal rendering behavior. Email clients can leave colors unchanged, partially transform them, or apply stronger inversions, and support for CSS techniques such as prefers-color-scheme varies considerably between email clients according to compatibility testing from Can I Email. That means dark mode should be tested rather than assumed.
Before sending, work through a full check: do sender, subject, and preview work together in the actual inbox? Does the design remain readable at a narrow mobile width, and does it still have appropriate hierarchy at a wider desktop width? Are colors and images correct in light mode, and do text, logos, buttons, backgrounds, and imagery remain understandable in dark mode? Are images loading and scaling properly, and does each meaningful image have an appropriate alt text alternative? Click every single link and confirm every button destination. Make sure dynamic personalization fields have valid data and sensible fallbacks. Check every date and price for accuracy. Confirm the footer's sender information and unsubscribe behavior. And follow the primary CTA all the way through to complete the intended action yourself.
An email can render beautifully and still send readers to the wrong product, a broken page, an outdated price, a form that doesn't submit, or a landing page that contradicts the email. QA should include the entire path, not just the message itself.
The best outcome isn't memorizing every rule above before each send. It's encoding the recurring decisions into the system.
A practical email design system defines inbox identity (sender naming convention, subject-line principles, preview-text approach), brand (logo use, colors, typography, voice), layout (content width, spacing, section patterns, image behavior), typography (heading hierarchy, body text, captions, fallback fonts), images (preferred treatments, aspect ratios, alt-text process), buttons (primary and secondary hierarchy, shape, spacing, contrast, CTA language principles), footer (sender information, subscription context, preferences, unsubscribe), and QA (mobile, desktop, light mode, dark mode, links, dynamic fields, destination).
When these decisions exist before the campaign begins, the designer and writer can spend more time on what's unique about the email rather than rebuilding the mechanics around it.
Brandset is designed to keep those recurring brand decisions closer to the email creation process. The Brand Center stores information such as colors, typography, voice, positioning, audience context, products, services, and other brand foundations. Email Marketing can use that shared context so a new newsletter doesn't have to begin as an empty brand exercise.
Reusable campaign starting points also make it easier to preserve layout, visual hierarchy, spacing, and CTA patterns across different emails while still adapting the content to the job of the campaign. Mobile and dark-mode preview capabilities bring important rendering checks closer to the creation workflow. And because Email Marketing sits alongside Forms, CRM, Landing Pages, Website Builder, Brand Center, and automation capabilities, the visual experience can remain closer to the customer journey surrounding the email.
Good email design should eventually become almost invisible. The reader recognizes who sent it, understands what it says, can read it comfortably, knows what matters, and can act without confusion. Nothing in the design gets in the way. That's the standard.
Brandset Team25 min de leituraLearn how to plan, segment, write, design, and measure effective email campaigns for small businesses, focusing on strategy, relevance, deliverability, and post-send analysis.
Brandset Team11 min de leituraLearn how to clean your email list effectively by separating inactive, bounced, and unsubscribed contacts, using multiple engagement signals, and avoiding loss of good subscribers.
