Email Design Dimensions: Widths, Safe Areas and Mobile Breakpoints

Most email design guidance repeats a set of numbers without explaining them, which makes it impossible to know when a number can be bent and when it cannot. This is the same set with the reasoning attached.

Content width: 600px

The single most repeated number in email design, and still the right default.

The origin is Outlook's reading pane at the resolutions common when the convention formed. That specific cause has largely passed, but 600px survives because it is the width that nothing clips — desktop clients, mobile clients, reading panes, preview windows.

When you can go wider: 640px and even 680px are broadly safe now if your audience skews toward modern webmail and mobile. The risk is narrow reading panes, where wider content either clips or triggers a horizontal scrollbar.

When you should not: if a meaningful share of your list is on desktop Outlook, or if you cannot test, stay at 600px. The gain from 40 extra pixels is small; the cost of clipping is not.

Full canvas width: design beyond the content

Email renders inside a body background that extends past your content column. Designing only the 600px column means the surrounding colour is decided by accident.

Draw your frames at 640–800px with the intended background colour, and centre the 600px content column inside. It takes a minute and it prevents the surprise where a white email on a client's grey background suddenly has a visible edge you did not plan.

The visible area before scroll: 350–400px

The most important number in email design and the one least often stated.

On a phone, after the client's own header, subject line and sender row, the remaining visible height is roughly 350–400px of your email. On desktop in a reading pane it can be less.

Everything that must be seen without scrolling has to fit in that. In practice:

Element	Realistic height
Logo bar	50–70px
Hero image	150–250px
Headline	60–90px
One line of body copy	25–30px
Button	44–56px

That adds to roughly 330–500px. A tall hero is what pushes the button out of view, and it is the most common reason a well-designed email underperforms.

Practical step: draw a horizontal guide 400px from the top of your mobile frame. Treat it as a hard line for the primary action.

Image dimensions: export at 2×

Email clients do not reliably support responsive image sets, so the safe approach is a single image exported at twice its display width, constrained by CSS or the HTML width attribute.

Use	Display width	Export width
Full-width hero	600px	1200px
Two-column	290px	580px
Three-column	190px	380px
Product thumbnail	140px	280px
Logo	120–180px	240–360px

File size matters more than most designers expect. Keep individual images under about 200KB and the whole email under about 1MB. Gmail clips messages above 102KB of HTML — images are fetched separately and do not count toward that — but a heavy email is slow on a mobile connection and slow emails get closed.

Tap targets: 44px minimum

Buttons and any tappable element should be at least 44px tall. This comes from platform accessibility guidance and it is not arbitrary — below it, mis-taps rise sharply on a phone.

Two related constraints that get missed:

• Adjacent links need vertical separation. A stack of footer links at 14px with no spacing is a set of mis-taps waiting to happen. Give them 12px+ of vertical space each.
• Horizontal padding on buttons should survive a longer label. Build them with auto layout so it does.

Type minimums

Role	Minimum	Comfortable
Body copy	14px	16px
Secondary / caption	12px	14px
Headline	22px	24–32px
Legal / footer	12px	12–13px

iOS Mail applies a minimum text size and will scale up text it considers too small, which can break a layout that depends on 11px type fitting a fixed space. Designing at 14px and above avoids that entirely.

For older audiences or healthcare and financial contexts, 16px body should be the floor rather than the aspiration.

Spacing and rhythm

Email has no cascade to lean on, so spacing is set per element and inconsistency shows badly.

Pick a scale — 8, 16, 24, 32, 48 — and use it for every gap. Specifically:

• 24–32px vertical padding inside a content band.
• 32–48px between distinct sections.
• 16px side padding minimum on mobile, so text never touches the screen edge.
• 1.4–1.6 line height on body copy. Email is read fast; tight leading makes it slower.

Column collapse

Multi-column rows become single-column on mobile, and the design has to specify what happens.

• Two columns collapse cleanly to a stack.
• Three or four columns produce a very long stack. Consider collapsing to two columns instead, or showing fewer items on mobile.
• Image-and-text pairs need a stated stacking order. The default is source order, which means an image-left pair puts the image first — usually right, but check every instance, because an alternating layout will alternate on mobile too and can read oddly.

The 102KB Gmail clip

Gmail truncates a message once its HTML exceeds roughly 102KB, replacing the remainder with a "View entire message" link. Anything below the clip — commonly the footer and the unsubscribe — effectively disappears, and click tracking on it stops working.

Two clarifications, because this is widely misreported:

• It is the HTML that counts, not the images. Images are fetched separately and do not contribute to the 102KB.
• It is uncompressed HTML size. Long inline styles, repeated table markup and tracking parameters on every link all add up faster than the visible content suggests.

The design consequence is that very long emails — a twenty-item digest, a large gift guide, a full catalogue grid — are the ones at risk. If an email needs that much content, the answer is usually fewer items with a link to more rather than a thinner build.

Getting side padding right

Side padding is the dimension most often omitted from a Figma file and most visible when it is wrong: text touching the screen edge on a phone looks broken.

• 16px minimum on mobile, 24px is more comfortable.
• 24–40px inside the content column on desktop, which is also what brings a 600px-wide text block down to a comfortable 50–70 character measure.
• Applied to the band, not the text layer, so it survives content changes.

A related point: full-bleed imagery should genuinely reach the edges, which means it sits outside the padded container rather than inside it. Mixing padded and unpadded bands is intentional and needs specifying in the handoff.

The numbers, collected

Property	Value
Content width	600px (640–680px acceptable)
Canvas width	640–800px with background
Mobile frame	375px
Visible before scroll	350–400px
Image export	2× display width
Image file size	under ~200KB each
Total email weight	under ~1MB
HTML size (Gmail clip)	under 102KB
Tap target	44px minimum
Body type	16px
Side padding (mobile)	16px minimum
Body contrast	4.5:1 minimum

Applying these

Every template in this library is drawn to these numbers — 600px content width, 375px mobile frame, 16px body minimum, 44px buttons. If you want a starting point that has the decisions already made, the marketing and transactional collections are the two most structurally different places to begin.

For the full build process around these dimensions, see how to design an email in Figma.