Best practices.
Email clients render HTML differently than web browsers. Follow these guidelines to ensure your designs look perfect in Outlook, Gmail, and Apple Mail.
Layout & Structure
Use Auto Layout
FigMail converts Auto Layout frames into HTML tables. Avoid absolute positioning.
Keep Width to 600px
Standard width for newsletters. Ensures readability in preview panes.
Avoid Negative Spacing
Email clients don't handle negative margins well. Use spacers instead.
Typography
Use Web-Safe Fonts
Arial, Verdana, Helvetica. If using custom fonts, always define a safe fallback.
Minimum Font Size
Use at least 14px for body text and 16px for iOS to prevent resizing.
Images & Graphics
Export at 2x
Design at 1x (600px), export at 2x for crisp rendering on Retina displays.
Avoid BG Images
Outlook doesn't support background images on divs easily. Flatten if needed.
Dark Mode Compatibility
Transparent PNGs
Icons and logos should have transparent backgrounds to adapt to themes.
Stroke on Dark Logos
Add a white stroke to black logos so they remain visible in dark mode.