Have you ever opened an email in Gmail and noticed it looks strange? The layout might be off, text missing, fonts not showing correctly, and in dark mode, the design looks completely different. This is not a problem with Gmail, but often a result of not adapting the email to how Gmail displays content.

With more than 1.8 billion users, Gmail is one of the most widely used email clients, both for personal use and business. That is why it is important for email developers and marketers to make sure their HTML emails look good in Gmail, across devices, dark mode, and mobile.

To the reader, a broken email may seem messy or unfinished. For a company, that means a missed first impression and lower impact.

In this article, we will look at common Gmail display issues, why they happen, and how to avoid them, so your emails stay clear, attractive, and professional.

Gmail size limit

Gmail has a limit on the size of a message that can be sent. If the message size exceeds 102 KB, Gmail trims part of its content, specifically those elements that exceed this limit. This applies to both the text and attachments.

Gmail limitations on Web Font support

Gmail has some clear limitations when it comes to web fonts. It does not support fonts loaded from external sources like Google Fonts, or custom fonts using the font face rule. This means any font that is not a standard Gmail or system font might not show up correctly. Gmail will instead replace it with Arial or another default system font.

Gmail only supports two web fonts — Roboto and Google Sans. Both are Google’s own fonts and are used across its products, including Gmail. These will display correctly on all devices and in all Gmail clients.

You can read more about Fonts in this article. 

Image download icons in gmail

When emails contain embedded images, Gmail may show a download icon instead of loading them automatically. This usually happens if the images lack a proper URL or are too large. As a result, recipients need to click to see the images, which can negatively affect user experience. 

Situations where this happens:

• Images without URL: If the image does not contain a URL, Gmail will place an icon that allows recipients to download the image. In the worst case, this icon can cover important information on your image. In the best case, it looks unprofessional and reduces the effectiveness of your email.
• Large images: If images are large (for example, several megabytes), Gmail may not load them automatically. This can also result in the display of an icon to download the image. Large files can slow down the email loading process, further worsening the user experience.

How to avoid these issues:

• Use embedded images with URLs: Include images directly in the body of the email so they load automatically without the need to click an icon.
• Optimize image size: Reduce the size of images without losing quality, so they load quickly and don’t cause delays.
• Check image availability: If images are stored on an external server, make sure the server is stable and does not block access to the files.

Automatic styling of phone numbers, websites, and email addresses

Gmail improves user experience by automatically turning phone numbers, email addresses, and URLs into clickable links for easier interaction. The downside? These links are, by default, blue and underlined.

To avoid this, wrap the text that resembles a website address, phone number, or email address in a link and style it accordingly.

Gmail on Android devices: Not just @gmail.com

The Gmail app on Android has evolved beyond handling only @gmail.com addresses. It now supports:

• Google accounts – including standard @gmail.com addresses and Google Workspace accounts with custom domains.
• External email services – like Outlook, Yahoo, iCloud, or any email account with IMAP/POP3 support (e.g., @company.com or @university.edu).

This makes Gmail on Android a versatile email client, capable of handling various types of email addresses.

GANGA (Gmail Android with Non-Gmail Accounts) refers to the scenario where users access emails in the Gmail app on Android, but using non-Google email addresses (such as @outlook.com, @mail.com, or any corporate email).

In this mode, Gmail behaves differently compared to when handling @gmail.com accounts:

• HTML emails may not render correctly.
• Inline styles, fonts, media queries, and other rendering elements may behave inconsistently.
• Dark mode may aggressively invert colors.
• Certain CSS properties or <style> tags may be ignored.

As a result, GANGA is a critical testing scenario for email developers, given that many users access Gmail on Android with non-Gmail accounts.

Inconsistencies in Dark Mode

Gmail faces several dark mode compatibility issues on Android and iOS platforms.

One of the main problems is that Gmail changes light-colored text to dark in dark mode on iOS. For example, if an email contains white text on a black background, dark mode on iOS converts it to black text on a white background, which undermines the very concept of dark mode.

This issue is not limited to white text, it affects any light-colored text, potentially impacting accessibility and reducing the readability of emails.

In Gmail: 

You can read more about dark mode in this article: