What is the standard email header size?

The most common and universally compatible email header size is 600 × 120-200px. A 600px width works in every major email client, and 120-200px height gives you enough room for branding without pushing content too far down. For a simple logo bar, 600 × 60-80px is standard. For hero-style headers, 600 × 300px is the maximum before you start losing recipients to scroll fatigue.

Why is 600px the standard email width?

600px became the standard because Microsoft Outlook's Word-based rendering engine caps content at around 600px. While modern clients like Gmail and Apple Mail can display wider content, designing at 600px ensures compatibility with everyone. Some modern templates use 640px or even 700px, but 600px is the safe choice that works everywhere without exceptions.

How tall should my email header be?

It depends on the email type. For newsletters: 60-120px (logo + issue info). For promotional campaigns: 150-200px (branded banner). For product launches: up to 300px (hero with CTA). For transactional emails: 40-60px (just a logo). The key rule: your header should be short enough that recipients can see the beginning of your content without scrolling, especially on mobile where screen height is limited.

Should I use a header image or HTML text?

Use a combination. Keep your logo as an image but use live HTML text for headlines, taglines, and navigation links. This way, if images don't load (Gmail blocks images by default for new senders), recipients still see your key message. Pure image headers appear as blank boxes when images are blocked, which is a terrible first impression.

How do I make my header look sharp on iPhone/Mac?

Apple devices have retina (2x) screens. Design your header at double resolution — for a 600×120 header, create the image at 1200×240px and set the HTML width attribute to 600. The image displays at the smaller size but uses the extra pixels for crispness. You can use lower JPEG quality (60-70%) for retina images since the extra detail compensates for compression.

Does my header need to work in Outlook?

If any of your recipients use Outlook desktop (very common in B2B), yes. Outlook uses Microsoft Word's rendering engine, which doesn't support CSS background-image, flexbox, or grid. Use table-based layouts, inline styles, and set explicit width/height attributes on all images. For background images in Outlook, use VML (Vector Markup Language) — it's ugly code but it works.

Should I use the same header for every email?

Consistent branding (same logo, same colors, same position) builds recognition — recipients should instantly know who the email is from. But the header style can vary: newsletters get a clean logo bar, promotions get a bold banner, and transactional emails get a minimal header. The logo and color scheme should be consistent; the size and content can change based on the email's purpose.

What about dark mode email headers?

Dark mode can invert your header colors unexpectedly. Email clients like Apple Mail and Outlook can change background colors and sometimes invert images. Transparent PNGs are especially risky — a logo on a transparent background looks great on white but may disappear on dark. Solutions: add a subtle background to transparent logos, test in dark mode before sending, and consider using our dark mode preview tool to catch issues.

Back to Tools

Email Header Size Guide

Complete reference for email header dimensions. Covers logo headers, standard banners, hero sections, and preheader bars. Includes a custom size checker, email type recommendations, and Outlook compatibility tips.

Email Header Dimensions Reference

Logo Header

Recommendedlogo

600 × 60px10:1

Best for: Simple logo placement at top of email

Just your logo centered or left-aligned. Clean, professional, and takes minimal space. Best for transactional emails and newsletters where content is the focus.

600×60

Logo + Navigation Bar

logo

600 × 80px7.5:1

Best for: Logo with category links below

Common in e-commerce: logo on top, then navigation links (Shop, Sale, New Arrivals). Keep nav items to 4-5 max. Use live text for links, not images.

600×80

Standard Email Header

Recommendedheader

600 × 120px5:1

Best for: Logo + tagline or brief message

Room for logo and a one-line message or date/issue number. Works well for weekly newsletters and digest-style emails.

600×120

Full-Width Header Banner

Recommendedheader

600 × 200px3:1

Best for: Branded header with imagery

The most common email header size. Enough room for a background image, logo overlay, and headline text. Works universally across email clients.

600×200

Tall Header / Hero Section

hero

600 × 300px2:1

Best for: Product launches, event announcements

Makes a big visual impact but pushes content below the fold on mobile. Use only when the image IS the primary message.

600×300

Hero with CTA

hero

600 × 350px12:7

Best for: Feature announcement with call-to-action

Header image + headline + CTA button area. Works for product announcements where you want immediate action. Keep the CTA as live HTML, not part of the image.

600×350

Preheader / Utility Bar

Recommendedpreheader

600 × 30px20:1

Best for: View in browser link, date, unsubscribe

Tiny bar at the very top. Usually plain text (not an image) with links like 'View in browser' or 'Add us to contacts'. Should always be HTML text.

600×30

Retina Logo Header

Recommendedlogo

1200 × 120px10:1

Best for: Sharp logo on high-DPI displays

Design at 2x (1200×120), display at 600×60 via HTML width. Your logo will look crisp on iPhones, iPads, and MacBooks. Keep the file compressed.

1200×120

Retina Full Header

header

1200 × 400px3:1

Best for: Crisp header on retina screens

2x version of the 600×200 standard header. Display at 600×200 in HTML. Compress aggressively — you can use JPEG quality 60-70% for retina because extra pixels compensate.

1200×400

Mobile-Optimized Header

header

320 × 100px3.2:1

Best for: Mobile-first email design

For campaigns where 70%+ of opens are on mobile. Scales up on desktop but may look slightly soft. Consider using a responsive approach with separate mobile/desktop images.

320×100

Check Your Custom Header Size

Enter your header dimensions to get feedback and optimization tips.

Width (px)

Height (px)

Header Structure: Anatomy of an Email Top Section

1. Preheader / Utility Bar

Height: ~30px

Content: View in browser, unsubscribe link, date

Use HTML text, not an image. Many people don't realize this section exists, but it's important for deliverability and accessibility.

2. Logo Bar

Height: 40-80px

Content: Company logo, optionally navigation links

Keep your logo under 200px wide and always include alt text. If images don't load, recipients should still see your brand name.

3. Header Image / Banner

Height: 120-200px

Content: Branded imagery, headline, date/issue number

This is where visual impact happens. Use a strong background image with overlaid text (as live HTML, not baked into the image).

4. Hero Section (optional)

Height: 250-350px

Content: Large product image, main CTA, key message

Only use for product launches or major announcements. In regular newsletters, this pushes content too far down.

Header Size by Email Type

Newsletter / Weekly Digest

600 × 120px

Clean and consistent. Logo + issue number or date. Readers should recognize it instantly.

Product Launch / Announcement

600 × 300px

Go big. This is your moment. Show the product prominently with a strong headline.

Sale / Promotional

600 × 200px

Discount or offer should be impossible to miss. Bold text, bright colors, clear CTA.

Transactional (Receipt, Confirmation)

600 × 60px

Just the logo. Transactional emails should be functional, not marketing-heavy. Get to the content fast.

Welcome / Onboarding

600 × 200px

Warm, inviting imagery. Set the tone for the relationship. Include a clear next-step CTA.

Re-engagement / Win-back

600 × 250px

Emotional appeal. 'We miss you' or an incentive to return. The header should hook them before they delete.

B2B / Professional

600 × 80px

Conservative and clean. B2B recipients often prefer text-heavy emails. A subtle header earns credibility.

Event Invitation

600 × 250px

Event name, date, location — all visible in the header. Make it feel special and worth attending.

Common Header Mistakes

Making the header image the entire email

Keep important content (especially CTAs) as live HTML text. If images don't load, your email shouldn't be blank.

Baking text into the header image

Overlay text using HTML/CSS positioned over the image. Image-only text can't be read by screen readers, selected, or translated.

Using a hero section for every email

Reserve large hero images for special occasions. Regular newsletters with 300px headers feel heavy and slow.

Forgetting the Outlook rendering engine

Outlook doesn't support background images via CSS background-image. Use VML (Vector Markup Language) for Outlook-compatible background images.

Not setting width and height attributes

Always set explicit width and height on <img> tags. This prevents layout shift while images load and helps Outlook render correctly.

Using non-standard fonts in header images

When you use fancy fonts in image text, they won't match the live text below. Either use web-safe fonts throughout or commit to the mismatch intentionally.

Like this tool? Try Sequenzy for free

AI-powered email marketing with Stripe integration, automations, and built-in analytics.

Start Free Trial

About this tool

The email header is the first thing recipients see when they open your email. Getting the dimensions right means it looks professional across every email client — from Gmail on a phone to Outlook on a desktop. Too tall and you push content below the fold. Too short and your branding gets lost. Wrong width and things break in unexpected ways.

This guide covers four types of email headers: preheader utility bars, logo bars, standard header banners, and hero sections. Each has a different purpose and optimal size. You'll also find a custom size checker that validates your specific dimensions and gives you feedback on compatibility.

For the complete picture on email image dimensions, also check our email banner size guide (focused on campaign-specific banners) and email signature size guide (for the other end of your email). Make sure your total email stays under clipping limits with our email word counter.

Once your header is sized right, use our dark mode preview to make sure it doesn't look weird on dark backgrounds, and our contrast checker to verify any text overlays remain readable.

Frequently Asked Questions

More Free Tools

View all tools

Email Banner Size Guide

Complete reference guide for email banner dimensions. Includes recommended sizes for newsletters, promos, and hero images, email client compatibility data, retina optimization, custom size checker, and image format comparison.

Email Signature Size Guide

Complete guide to email signature dimensions. Includes recommended sizes for photos, logos, social icons, and banners. Covers signature styles (minimal to corporate), email client compatibility, and a custom size checker.

Free AI HTML Email Builder

Build responsive HTML emails with AI chat. Generate subject lines, preview text, and production-ready email HTML with desktop/mobile preview, screenshot-based edits, and code you can copy into any email platform.

Shopify Profit Margin Calculator

Calculate real Shopify profit per order after COGS, shipping, fulfillment, payment fees, returns, apps, and ad cost.