A comprehensive guide to email template sizes, width, and height

If you want to strengthen your email marketing, you’ll find countless tips and best practices for making your content compelling and exciting. 

As fun as it can be to experiment with different engagement strategies, it’s important to get the basics right, like sizing your emails correctly. Your email templates’ sizes will determine whether the emails display properly across devices, an element crucial for getting your message across to readers. In fact, a study by Adestra found that 71.6% of consumers will delete an email if it doesn’t display well on their mobile devices.

Far be it from us to tell you why you should follow certain practices in your email marketing but not explain how to do it. So, let’s get into the details of how you should size your emails and how to size the various components of your email templates.

Why standard email template size, width, and height matter 

The tricky part of proper email sizing is that your customers will use various email providers (AKA email clients) to receive your emails. Some may use Gmail, while others use Apple Mail, Yahoo, or Outlook. 

Each email client has different capabilities for displaying emails. To make it even more complicated, customers view emails on numerous devices with different dimensions. 

Standard email template size, width, and height limits help ensure your emails display as intended on most email clients and screen sizes.

Ideal email width

The standard email width for optimal display across devices is 600 pixels. Widths up to 800 pixels may still display well for most customers, but you may still experience some challenges with Outlook or Yahoo. For example, Emails on Acid found that Yahoo and Outlook could only display about 650 pixels of width. 

Best email height

While there’s a limit to the width that an email app can display, the height of an email is completely up to you! Ideally though, the less a reader has to scroll - the better. 

The best practice is to make your email height between 1500 pixels and 2000 pixels tall. We recommend no more than 3000 pixels in height. 

This height provides you with ample space to share valuable and compelling content without becoming so long that customers don’t scroll all the way through. Even if you’re within the 1500-2000 pixel range, make sure your content isn’t too one-dimensional - not too much text or too many images. The best practice is the 60-40 rule: spend about 60% of the space on text and 40% on images.

“Above the fold”

Another best practice when it comes to height is to consider the “above the fold” rule. This refers to the space in your email that displays before customers begin to scroll. This is typically the first 250-400 pixels of height and the #1 most important space within an email as it influences how the reader interacts with the rest of your content. Make a strong impression and give viewers a reason to scroll for more.

Email size

Along with the width and height, pay attention to the file size of your email too. Emails that are too large will take longer to load (or may not fully load at all on some devices or internet connections) and making your customers wait isn’t the top-notch user experience you want. The standard recommendation is to keep your emails under 102 KB.

How to reduce email’s file size

Have a beautifully constructed email that’s just too big? Here are a few tricks to reduce the file size:

• Use fewer images
• Compress the images
• Use web-friendly fonts instead of custom fonts
• Use mostly JPEGs for your images - use GIFs sparingly when they’re beneficial and keep PNGs to a minimum because PNGs take up more space
• Minimize complex HTML and CSS code

These can allow you to reduce your file size while still keeping your email template roughly the same.

Best sizes for email components

Here is an additional set of guidelines to help you proportion the different components of your emails.

Banner size

Your email banner is the space above the fold of your email where you introduce the main idea of the email. It could be announcing a sale or displaying a new product you’re launching - either way, the intent of the email should be clear. 

The ideal email banner size is  600-680 pixels wide. The height can vary, but you want it all to fit above the fold, so 200-400 pixels is advised.

Header size

Your header is the block at the top of your email that contains your logo and sometimes even a menu bar. This is a great place to highlight your brand, and the menu bar can serve as a convenient way for customers to explore more information about your brand/

Your header should span the full width of your email, so 600-680 pixels wide. You don’t want it to be too tall, though. A height of 50-70 pixels is excellent if you don’t have a menu bar, and if you do have a menu bar, you can go up to about 150 pixels tall.

Button size

Within your email, buttons are opportunities for customers to convert from just reading to taking action. You can include buttons to shop your current sale, contact your business, or get to a particular page on your site like a page about a service you’re promoting.

Buttons can come in many different sizes and styles, but they need to be large enough for customers to be able to reliably and accurately click them. The suggested minimum size is 44 pixels x 44 pixels. 

Make sure you also have enough white space around them so that they visually stand out and they’re easy to click without clicking something else by accident.

Image size

As we noted above, images can be tricky for email marketing because while you want them to be high-quality, you don’t want them to be so large that the email doesn’t load smoothly. 

There aren’t any specific standards for pixel sizing for images; however, they should be no larger than the width of your email, which is 600-680 pixels.‍

Depending on how you use them, they could take up a large amount of your email (like banners) or be relatively small (like product images). At any size, be sure to compress your images to keep your email file size from becoming too large.

Preview dimensions

Some email clients have a preview window that shows customers a brief view of the email before they actually open it. 

This is a great opportunity for you to reel in customers’ attention and encourage them to open your email. These preview windows are typically up to 600 pixels wide and 300-500 pixels tall. 

Design your email so that this area’s visual and textual content is eye-catching and makes opening your email irresistible. Here’s a look at a preview window in Gmail:

Pre-header Size

A pre-header is a small piece of text that appears after your subject line in customers’ inboxes. On some platforms, it might also be called preview text or summary text.

The pre-header also appears above your email. Pre-headers should be short and snappy, between 40 and 100 characters long. 

In that short text, you have an extra opportunity to tell customers why they should open your email. For example, this is a great place to note the sale your email is promoting:

Or, for an email newsletter, you can tout the stories that didn’t make it into your subject line:

Footer size

A footer should have basic information that closes out your email, including contact information, social media links, and an unsubscribe link. 

This gives customers an easy way to get in touch with you and adheres to anti-spam regulations. 

Email footers don’t need to be very large. We recommend 600-680 pixels wide and 50-100 pixels of height to offer the necessary information without taking up too much space.

Font size

Your font size needs to be large and clear enough to be readable, including for customers with visual impairments, but not so large that it makes your email excessively long. So, what’s the perfect middle ground? ‍

• ‍For body text:  14-16 px. ‍
• Headers and sub-headers: 18-22px.

For inclusive readability for all your customers, make sure that your fonts are not only large enough but also clear and easy to read. Artistic fonts might look fun, but they miss the point if customers can’t read them.

Content block size

A content block usually contains text, an image, and a button. These can be used for different purposes in certain types of emails. For example, a promotional email might have product cards that promote certain products while an email newsletter might have a content block for each story.

Depending on your layout, a content block could be as wide as your email (600-680 pixels) or less. You might do two columns, for example, with each content block about 300 pixels wide. The height will depend on how much content you have and how long you want your email to be.

Try to keep your content area (the area with all your content blocks) 900 pixels tall or less. That’s typically enough to fit three rows of content blocks. Dedicating more space than this will risk clients getting bored or overwhelmed with all the information.

Designing well-balanced email layouts

Sure, sizing your emails and their components appropriately might not be the most exciting part of your email marketing, but it makes it easier to ensure that your emails will load properly and be displayed as intended across most email clients. 

Think of proper email template size as the foundation that allows all your creative content to shine.