Creating robust email templates at scale requires strict design consistency and a clear set of foundational rules. These principles help reduce rendering issues, maintain brand integrity, and support modular, component-driven development workflows.
Always use a 600px width for the content area. This is the industry standard and ensures optimal readability across all major desktop and mobile clients. It's wide enough to present structured content, but narrow enough to avoid horizontal scrolling.
Adopt a 12-column grid system, even in environments with limited layout complexity. Responsive behavior should be restricted to predictable column patterns, typically 1, 2, or 3 columns, to minimize breakage in older or less consistent clients.
Use white (#ffffff) as the default background color for both the content and the surrounding email area. This maintains clarity, supports accessibility, and aligns with most brand palettes unless otherwise specified.
Apply margin values in increments of 10 pixels, e.g., 10px, 20px, 30px. This approach ensures a visual rhythm and simplifies alignment across nested elements. It's also easier for design and development teams to implement consistently.
Stick to email-safe fonts. For sans-serif, use Arial, for serif, use Times New Roman. These fonts ensure consistent rendering across platforms without requiring fallbacks or embedded font loading.
Set text to black (#000000) by default. This provides maximum contrast and supports readability across both light and dark modes. Color variations must align with approved brand palettes.
Use even-numbered values for font sizes and line heights to maintain a clean vertical rhythm. Body text should be no smaller than 14px with a line height around 150%, e.g., 14px font with 20–22px line height. This improves legibility and layout alignment.
Limit live text to normal and bold weights. Avoid lighter or heavier variations, as they often render inconsistently. Other weights may be used only in static image content, not live HTML.
Do not use justified text. Left-aligned content improves legibility and accessibility, especially on smaller screens. Justification can result in awkward spacing and word breaks.
For superscript text, e.g., trademarks or registered symbols, scale the font size to approximately 75% of the base. Use UTF symbols only to maintain compatibility across clients. This technique provides clean, predictable rendering.
Avoid using rounded corners, shadows, or borders in live HTML. These styles are inconsistent across email clients and should be reserved for static image sections. The only exception, CTA buttons may have rounded corners.
Always use live UTF text for CTA button captions. Do not combine text and image inside buttons. Mixed formats lead to unpredictable rendering, particularly in Outlook and Gmail.
Avoid irregular-shaped “card” or “container” patterns. These often break in dark mode and can't be reliably corrected with CSS overrides or conditional fallbacks.
Figma is the preferred tool for design due to its collaborative features and component support. Photoshop is also acceptable. Other tools like InDesign or Illustrator may be used if they conform to these principles.
Use JPG for photographs and full-width background images. Use PNG with transparency for logos, social icons, and any image requiring crisp detail or text overlays.
Ensure all exported image dimensions are multiples of 10 pixels, e.g., 600x400, 300x300. This supports consistency across layout spacing, development, and retina scaling.
All images must be exported at 2x or 3x their display size to ensure retina clarity. Use @2x for standard images and @3x for text-heavy graphics. Blurry assets are unacceptable in production.
Consistency is non-negotiable in scalable email systems. These principles reduce errors, streamline development, and create a visual foundation that ensures every campaign aligns with brand standards and user expectations.
Got your own edge-case rule, let’s refine it together.