Email Specs

Email Design Specs

Email design is constrained by rendering engines that predate most of the web platform, which is why the safe numbers below have barely moved in a decade. I would rather ship a template that renders identically everywhere than one that only looks good in Apple Mail.

Layout dimensions
ItemSafe valueWhy
Template width600pxFits every major desktop preview pane
Maximum practical width640pxSome clients clip beyond this
Mobile stacking breakpoint480pxCommon single column trigger
Header image width600px at 1200px exportRetina without breaking layout
Body padding20px to 24pxReadable on small screens
Typography and interaction
ItemRecommended value
Body font size16px minimum
Heading font size22px to 30px
Line height1.4 to 1.6
Tap target size44px by 44px minimum
Font stackWeb safe fallback always declared
File and asset constraints
ItemGuidance
Total HTML sizeUnder 102KB to avoid Gmail clipping
Individual image sizeUnder 200KB where possible
Image formatsJPG, PNG, GIF, animated GIF
Background imagesNot reliably supported in Outlook
Web fontsNot supported in several major clients

Notes

Gmail clips messages larger than roughly 102KB of HTML, hiding everything past the cut behind a View entire message link, and clipped content stops tracking correctly. Strip unused CSS, avoid inlining the same styles repeatedly, and check the raw size before every send.

Design for images off. A meaningful share of recipients see alt text before they see art, and some corporate clients block images by default. Every image needs real alt text, the call to action should be live HTML rather than a picture of a button, and the message must survive with no images at all.

Dark mode is the newest source of rendering surprises. Clients invert colours inconsistently, which turns black logos on transparent backgrounds invisible. Use PNG logos with a light stroke or a padded background, and test in Apple Mail and Outlook dark mode specifically.

Rendering behaviour changes as clients update, and Outlook in particular has multiple distinct rendering engines in active use. Test with a rendering service on every template change rather than assuming past results hold.

Frequently asked questions

Why is 600px still the standard email width?

Because desktop preview panes and older Outlook versions clip wider layouts. It is a legacy constraint, but the cost of ignoring it is broken layouts for the most valuable segment of many lists.

Can I use web fonts in email?

Partially. Apple Mail and some others support them, Outlook and Gmail largely do not. Always declare a full fallback stack and design so the fallback still looks intentional.

Is a single large image email ever acceptable?

No. It fails with images off, it is unreadable to screen readers, and it triggers spam heuristics. Use real text with images as support.

Official sources

Platforms change specifications without notice. Check the primary documentation before a launch that depends on an exact value.

Read next

You might also like

Ranked by how closely each page overlaps with this one, using a similarity model over the whole library.

More Email Specs