Email campaigns and templates created with Brevo are designed to display optimally in all email clients However, variations may occur where content may not correspond exactly to the editor's appearance. Email clients have their own rendering rules, leading to slight differences in how emails appear. Despite your design efforts, these variations are due to the rendering engines used by different email clients.
Good to know
- If you are sending emails to recipients using Outlook, we recommend you also check our dedicated article My email looks different in Outlook, which provides a more extensive explanation of Outlook rendering issues.
Most common rendering issues
To assist you, we've created a list outlining the supported and unsupported features across popular email clients for desktop, mobile, and web. It will help you navigate their nuances and make informed design choices.
Borders | Buttons | Background images | Full-width rows | Small line height | Letter spacing | Border radius | Divider shape (dashed, dotted, double) | Fonts | Social media icons | |||
Standard fonts | Google fonts | Custom fonts | ||||||||||
Outlook 365 webmail | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Outlook 2019 | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Outlook 2016 | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Outlook 2013 | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Outlook 2011 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
Outlook 2010 | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Outlook 2007 | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Outlook 2003 | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Thunderbird | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ❌ | ✅ |
Thunderbird 60 | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ❌ | ✅ |
IBM Notes 10 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
IBM Notes 9 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Apple Mail 10 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
Apple Mail 12 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
Apple Mail 13 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
Borders | Buttons | Background images | Full-width rows | Small line height | Letter spacing | Border radius | Divider shape (dashed, dotted, double) | Fonts | Social media icons | |||
Standard fonts | Google fonts | Custom fonts | ||||||||||
Gmail App | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ |
Gmail App IOS | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ |
IOS 10 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
IOS 11 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
iPad Pro | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
iPad Mini | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
Microsoft Outlook | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ |
iPad Pro (12.9-inch) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
iPhone X | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
iPhone 7 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
iPhone 8 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
Pixel Gmail | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ |
Samsung app | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ |
Borders | Buttons | Background images | Full-width rows | Small line height | Letter spacing | Border radius | Divider shape (dashed, dotted, double) | Fonts | Social media icons | |||
Standard fonts | Google fonts | Custom fonts | ||||||||||
AOL Mail | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Freenet.de | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Comcast | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Gmail | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
GMX.de | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
GSuite | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Outlook.com | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
t-online.de | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Yahoo! Mail | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Web.de | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
How to solve those rendering issues?
↩️ Include fallback options
Include a fallback background color behind the original image in case the image doesn’t render and use fallback fonts when using Google and custom fonts in your emails. This will allow you to control what your recipients see even if some issues occur.
🔗 Include a View in browser link in your emails
Always include a View in browser link in your emails. This link allows readers to view your email campaign in a web browser if it displays poorly in the inbox.
🧪 Test your emails
The best way to determine whether your contacts’ preferred devices and email clients support the content of your email is to use a tool like Litmus or Email on Acid to preview your emails and see how they are rendering across environments. This will allow you to make changes to your design and solve issues before sending your email.
🤔 Have a question?
If you have a question, feel free to contact our support team by creating a ticket from your account. If you don't have an account yet, you can contact us here.
If you’re looking for help with a project using Brevo, we can match you with the right certified Brevo expert partner.