The Ultimate Guide to Email Design: Font Sizes, Image Dimensions Best Practices

Why Email Design Matters: Importance in ecommerce and marketing.

Font & Typography

Font Sizes:

Recommended sizes for mobile and desktop emails

For mobile email readability, you generally want to stick to the following font sizes:

1. Body Text: 14-16px is a good range. Easy to read without zooming.
2. Headings: 22-27px works well for headers. You want them to stand out but not be overwhelming.
3. Sub-headings: Around 18-22px. They should be larger than body text but smaller than main headings.
4. CTA Buttons: Text inside buttons should be at least 14px for easy tapping.
5. Fine Print: Keep it at least 12px so it’s legible but clearly secondary.

Readability is key, especially for ecommerce where you want to guide the reader to take action. Always test your emails on multiple devices to make sure they look good!

Font Types

Serif vs. Sans-serif.

When it comes to email design, the choice between Serif and Sans-Serif fonts can make a real difference. Here’s the lowdown:

Serif Fonts

• Examples: Times New Roman, Georgia
• Vibe: More traditional, often seen as formal or scholarly.
• Best For: Long-form content where readability is key.
• But: Can look cluttered on small screens, so use cautiously in mobile emails.

Sans-Serif Fonts

• Examples: Arial, Helvetica, Verdana
• Vibe: Modern, clean, and casual.
• Best For: Short, snappy content and mobile readability.
• Why: Easier to read on small screens and gives a contemporary feel.

Tips for Email Design

1. Consistency: Stick to one or two fonts to keep the design cohesive.
2. Web-Safe Fonts: Use fonts that display well across all email clients.
3. Hierarchy: Use different fonts or styles for headings and body text to create visual hierarchy.
4. Test: Always test how fonts render on different devices and email clients.

Given our focus on ecommerce, you might lean towards Sans-Serif for its modern vibe and mobile readability.

But if you’re sending educational content, a Serif font could add a touch of authority. Choose based on your brand and message!

Line Spacing

Optimal spacing is important for email readability.

• Body Text: Aim for 1.4 to 1.6 times the font size. So, if your font size is 16px, line spacing would be around 22px to 26px.

Why line spacing matters

1. Readability: Proper line spacing prevents text from feeling cramped, making it easier to read.
2. Skimmability: Good spacing helps readers skim through content, which is how most people read emails.

Tips for line spacing

1. Consistency: Keep line spacing consistent throughout the email for a cohesive look.
2. Headings & Subheadings: These can have slightly tighter spacing since they’re usually larger and bolder.
3. Mobile: Test on different devices to ensure spacing looks good across the board.

For your ecommerce email campaigns, line spacing can help guide the reader’s eye to CTAs and key info. So, don’t overlook it!

Images & Media

Recommended Sizes for email images

1. Full-Width Images: 600-800px wide. This fits most email clients’ default widths.
2. Inline or Float Images: 200-300px wide. These are images that sit next to text.
3. Hero Images: 800-1200px wide. These are the big, attention-grabbing images at the top.
4. CTA Buttons: At least 44x44px for easy tapping on mobile.

Other Tips

1. Aspect Ratio: Stick to common ratios like 16:9 or 4:3 to ensure images scale well.
2. File Size: Keep it under 100KB if possible for faster loading.
3. High-DPI Screens: Consider retina displays and use higher resolution images, but compress them to keep file sizes low.

Image Formats in email

• JPEG: Good for complex images with lots of colors.
• PNG: Best for simple images, text, and logos.
• GIF: For simple animations.

Given your focus on ecommerce, crisp and fast-loading images can make your products look enticing and keep the user engaged. Always test on multiple devices to make sure everything looks good!

Alt Text for images in email

Accessibility

1. Visually Impaired: Screen readers use alt text to describe images.
2. Legal Compliance: Helps you meet accessibility standards like ADA.
3. Image Blocking in email clients: Some clients block images by default. Alt text gives context.

SEO Benefits

1. Search Ranking: While not directly affecting email, good alt text practices can help in overall SEO strategy.
2. This happens when you have a public archive page for the outgoing newsletters

User Experience

1. Slow Internet: If images don’t load, alt text provides context.
2. Clarification: Describes the image if it’s complex or contains important info.

Best Practices

1. Descriptive: “Blue women’s running shoes” is better than just “shoes.”
2. Concise: Keep it short but informative.
3. Keywords: Use relevant keywords but avoid keyword stuffing.

Video embeds in email

Adding video in email can boost engagement but come with some caveats. Here’s what you could cover:

The Pros

1. Engagement: Videos can increase click-through rates.
2. Information: Easier to convey complex info or showcase a product.

The Cons

1. Compatibility: Not all email clients support embedded videos.
2. Load Time: Heavy videos can slow down email loading.

Best Practices

1. Fallback Image: Use a thumbnail image that links to the video, in case the embed doesn’t work.
2. CTA: Add a play button overlay to encourage clicks.
3. Short & Sweet: Keep videos brief, ideally under 2 minutes.
4. Autoplay: Generally avoid it; let users choose to play the video.

How-To

1. HTML5: For email clients that support it, you can use HTML5 tags for embedding.
2. Third-Party Services: Platforms like Vibetrace, Mailchimp often have built-in options for video.

Alternatives to Video embed in emails

1. GIFs: Short, looping GIFs can give a video-like experience.
2. Linked Thumbnail: A static image that links to a video hosted elsewhere.

Testing

1. Multiple Clients: Test how the video appears in different email clients.
2. Mobile: Make sure it’s mobile-friendly.

Layout & Structure for Email Design

Single vs. Multi-column Layouts: Pros and cons.

Single-Column Layout

Pros

1. Mobile-Friendly: Easier to scale down on smaller screens.
2. Focused: Guides the reader in a linear, straightforward manner.
3. Simplicity: Easier to design and quicker to load.

Cons

1. Limited Content: Not ideal for complex messages with multiple sections.
2. Less Dynamic: Might not capture attention as effectively as multi-column layouts.

Multi-Column Layout

Pros

1. Content-Rich: Great for showcasing a variety of products or topics.
2. Visual Appeal: More dynamic and engaging.
3. Hierarchical: Allows for a more complex information structure.

Cons

1. Complexity: Harder to design and may not render well on all devices.
2. Overwhelming: Risk of clutter or information overload.

Tips for Your Ecommerce Focus

• Single-Column: Best for focused campaigns like product launches or special offers.
• Multi-Column: Ideal for newsletters or showcasing a range of products.

The choice between single and multi-column should align with your content strategy, the complexity of your message, and your target audience’s preferences. Always test both layouts to see what resonates best with your ecommerce audience!

Whitespace importance in email design

In design white space has a special importance. There are many advantages of using white space, but for email the most important are:

Readability & Breathing Room: Spacing between text and elements makes content easier to digest.

Focus & Attention: Whitespace can direct the reader’s eye to important elements like CTAs.

Professionalism & Clean Look: A clutter-free design looks more professional and trustworthy.

User Experience & Skimmable: Helps readers skim through content, which is how most people read emails.

Mobile Experience & Tap-Friendly: Extra space makes it easier to tap buttons on mobile devices.

For your ecommerce emails, whitespace can help guide the reader to key actions, like making a purchase or checking out a new product. It’s not just empty space; it’s a functional design element!

Mobile Responsiveness

Making sure it looks good on all devices. There is a higher certainty that mobile devices are used more than desktop to read emails.

Making sure your email is responsive and can adapt to mobile screens is not an option but the way to start designing an email.

Calls to Action (CTA) in Email

• CTA Placement: Where to place them for maximum impact.
• CTA Button Design: Size, color, text.

User Experience (UX)

Loading Time

Importance of email loading time (depending on size and number of images)

1. User Experience: Slow-loading emails can frustrate users and lead to lower engagement.
2. Mobile Users: They’re often on the go and won’t wait for slow content.
3. Optimize Images: Keep file sizes small but quality high.
4. Minimize Code: Clean, simple HTML/CSS loads faster.
5. Shorter emails: While it might be easier to try to add a lot into emails, keeping them shorter is actually better.
6. Email Clipping: certain email clients (like gmail) clip emails if they go over a certain size.
7. Test: Always test load times on various devices, email clients and resolutions.

Navigation

Email navigation

1. Content Discovery: For longer emails, like newsletters, navigation helps users find what they’re interested in.
2. CTAs: Clear navigation can guide users to take action.
3. Menu: For very content-rich emails, a small menu at the top can be helpful.
4. Hierarchy: Use headings and subheadings to break up content and guide the reader.

Accessibility

Fonts choice in email

1. Font Choice: Simple, clean fonts are easier to read.
2. Font Size: Stick to a readable size, generally 14-16px for body text.
3. Screen Readers: Test your email with screen reading software to ensure it’s accessible.
4. Font availability: when using custom fonts (that are not default installed on devices), make sure the font files load correctly.

Color Contrast

1. Readability: High contrast between text and background improves readability.
2. Accessibility: Helps those with vision impairments or color blindness.
3. Text vs Background: Aim for dark text on a light background or vice versa.
4. CTAs: Make sure buttons stand out but are also legible.
5. Tools: Use contrast checkers to test your color choices.