{"id":5696,"date":"2016-10-31T00:00:00","date_gmt":"2016-10-31T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email\/"},"modified":"2025-12-18T15:59:58","modified_gmt":"2025-12-18T20:59:58","slug":"the-ultimate-guide-to-styled-alt-text-in-email","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email","title":{"rendered":"The Ultimate Guide to Styled ALT Text in Email"},"content":{"rendered":"<p>A commonly accepted best practice in the email world is the inclusion of ALT attributes for images. Shorthand for alternative text, ALT text in email is now the standard practice for email aficionados.<\/p>\n<p>There are a few reasons why:<\/p>\n<ul>\n<li>Most email clients block images by default. In some cases, instead of showing the image, the email client will instead display the ALT text. This is definitely handy, especially in cases where an email design is predominantly composed of images. The ALT text can help communicate the message even if the images cannot.<\/li>\n<li>In a situation\u00a0where images can&#8217;t or won&#8217;t load due to a bad connection, broken link, etc., the ALT text will appear instead of the image.<\/li>\n<li>Marketers and designers sensitive to the needs of visually impaired readers understand that ALT text is used by screen readers. Since these users are unable to view text or images, the ALT text serves to describe the image via the screen reader.<\/li>\n<\/ul>\n<div class=\"cta\">\n<table>\n<tbody>\n<tr>\n<td class=\"block-1\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/checklist-icon.png\" alt=\"Verify that your images have ALT text\" width=\"640\" height=\"742\" \/><\/td>\n<td class=\"block-2\">\n<h2>Verify that your images have ALT text<\/h2>\n<p>With Litmus Checklist, you&#8217;ll get previews of your emails with images-off, and will get notified if any of your images are missing ALT text. Send with confidence everytime.<\/p>\n<p class=\"zero\"><a class=\"btn medium orange button\" rel=\"noopener\" href=\"https:\/\/litmus.com\/pricing\" target=\"_blank\" rel=\"noopener noreferrer\">Book a demo \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<div>\n<h2>Setting up standard ALT text<\/h2>\n<\/div>\n<p>Setting ALT text for images in an HTML email is simple. Known as an <em>attribute<\/em>, it&#8217;s a standard part of HTML&#8217;s syntax, and is included in the image tag:<\/p>\n<pre><code style=\"background: #333; color: #fff; margin: 20px 0 30px 0;\">&lt;img src=\"logo.jpg\" width=\"400\" height=\"149\" <span style=\"color: #ff0000;\">alt=\"Litmus\"<\/span>&gt;<\/code><\/pre>\n<p>It&#8217;s important to include height and width values as this creates a placeholder box for the ALT text to reside when images are disabled.<\/p>\n<h2>Standard ALT text display<\/h2>\n<p>Here&#8217;s what disabled images in an email <strong>without\u00a0ALT text<\/strong>\u00a0sent to Gmail looks like:<\/p>\n<div><img decoding=\"async\" class=\"alignnone size-full wp-image-2002\" title=\"Disabled image without alt text in Gmail\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/no-alt-text-gmail.png\" alt=\"Disabled image without alt text in Gmail\" width=\"540\" height=\"234\" \/><\/div>\n<p>Compared to disabled images in an email <strong>with\u00a0ALT text<\/strong>:<\/p>\n<div><img decoding=\"async\" class=\"alignnone size-full wp-image-2001\" title=\"Disabled image with alt text in Gmail\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/default-alt-text-gmail.png\" alt=\"Disabled image with alt text in Gmail\" width=\"540\" height=\"234\" \/><\/div>\n<p>Which one would you rather receive?<\/p>\n<h2>Adding style to ALT text<\/h2>\n<p>You can also get fancy with your ALT text, adding a bit of inline CSS to change the font, color, size, style and weight of the ALT text:<\/p>\n<pre><code style=\"background: #333; color: #fff; margin: 20px 0 30px 0;\">&lt;img src=\"NAME OF IMAGE.PNG\" width=\"500\" height=\"462\" style=\"width: 100%; height: auto; display: block; color: green; font-size: 36px; font-style: italic; font-family: Georgia, serif;\" alt=\"Litmus\"\/&gt;<\/code><\/pre>\n<p>Here&#8217;s the same example above, but with ALT text styles applied:<\/p>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-2004\" title=\"Disabled image with styled alt text in Gmail\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/styled-alt-text-italic-gmail.png\" alt=\"Disabled image with styled alt text in Gmail\" width=\"540\" height=\"234\" \/>\n<h2>Styled ALT text support across email clients<\/h2>\n<p>While a nifty technique, this is still email we&#8217;re talking about, so naturally support is a bit scattered amongst different <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/state-of-email-design-tools\" target=\"_blank\" rel=\"noopener\">email design programs<\/a>. I&#8217;ve borrowed some elements from Salesforce&#8217;s impressive <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/inspiration-dreamforce\">Dreamforce email<\/a> to test styled ALT text for the following examples.<\/p>\n<p>Webmail Styled ALT Text Support<\/p>\n<table border=\"1\" cellspacing=\"1\" cellpadding=\"5\">\n<tbody>\n<tr>\n<th style=\"background-color: #ccc;\" colspan=\"4\"><strong>ALT Text in Webmail Clients<\/strong><\/th>\n<\/tr>\n<tr>\n<th>Webmail clients<\/th>\n<th>Images blocked by default<\/th>\n<th>Displays ALT text<\/th>\n<th>Displays styled ALT text<\/th>\n<\/tr>\n<tr>\n<td>AOL Mail (Internet Explorer)<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2718<\/td>\n<\/tr>\n<tr>\n<td>AOL Mail (Firefox)<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>AOL Mail (Chrome)<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Comcast (All Browsers)<\/td>\n<td>\u2714<\/td>\n<td>\u2718<\/td>\n<td>\u2718<\/td>\n<\/tr>\n<tr>\n<td>G-Suite and Gmail (Internet Explorer)<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>G-Suite and Gmail (Firefox)<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>G-Suite and Gmail (Chrome)<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>GMX.de (Internet Explorer)<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>GMX.de (Firefox)<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>GMX.de (Chrome)<\/td>\n<td>\u2718<\/td>\n<td>\u2718<\/td>\n<td>\u2718<\/td>\n<\/tr>\n<tr>\n<td>Mail.ru (All Browsers)<\/td>\n<td>\u2718<\/td>\n<td>\u2718<\/td>\n<td>\u2718<\/td>\n<\/tr>\n<tr>\n<td>Office 365 (Internet Explorer)<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Office 365 (Firefox)<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Office 365 (Chrome)<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Outlook.com (Internet Explorer)<\/td>\n<td>Sometimes*<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Outlook.com (Firefox)<\/td>\n<td>Sometimes*<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Outlook.com (Chrome)<\/td>\n<td>Sometimes*<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Web.de (Internet Explorer)<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Web.de (Firefox)<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Web.de (Chrome)<\/td>\n<td>\u2718<\/td>\n<td>\u2718<\/td>\n<td>\u2718<\/td>\n<\/tr>\n<tr>\n<td>Yahoo! Mail (Internet Explorer)<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Yahoo! Mail (Firefox)<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Yahoo! Mail (Chrome)<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Webmail clients such as Gmail are the most diverse since these mail programs can be accessed in different browsers.\u00a0In all webmail clients, support for styled ALT text relies on the browser being used. Styled ALT text is supported in current versions of Firefox, Chrome, and Safari.<\/p>\n<p>For example, styled ALT text will be visible to a subscriber viewing their Gmail in Firefox, but only sort of works in Internet Explorer. In that case, color is supported, but not font or other attributes. Internet Explorer seems to be an unfriendly browser for styled ALT text in general. We found that while color was supported, often font was not:<\/p>\n<ul>\n<li>Gmail and G-Suite in Internet Explorer<\/li>\n<li>GMX.de in Internet Explorer<\/li>\n<li>Office 365 in Internet Explorer<\/li>\n<li>Outlook.com in Internet Explorer<\/li>\n<li>Web.de in Internet Explorer<\/li>\n<li>Yahoo! Mail in Internet Explorer<\/li>\n<\/ul>\n<h3>Styled ALT text in Gmail\/Firefox:<\/h3>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-2010\" title=\"Styled ALT text in Gmail\/Firefox\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/styled-alt-text-gmail-ff.png\" alt=\"Styled ALT text in Gmail\/Firefox\" width=\"540\" height=\"59\" \/>\n<h3>Styled ALT text in Gmail\/IE:<\/h3>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-2011\" title=\"Styled ALT text in Gmail\/IE\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/styled-alt-text-gmail-ie.png\" alt=\"Styled ALT text in Gmail\/IE\" width=\"540\" height=\"59\" \/>\n<h3>ALT text on linked images<\/h3>\n<p>ALT text for linked images may be underlined or blue in some webmail clients. Yahoo! underlines ALT text in linked images, while Gmail both underlines and ignores specified colors, instead defaulting to a vibrant blue:<\/p>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-2009\" title=\"Styled &amp; Linked ALT text in Gmail\/Firefox\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/styled-linked-alt-text-gmail-ff.png\" alt=\"Styled &amp; Linked ALT text in Gmail\/Firefox\" width=\"540\" height=\"59\" \/>\n<h3>Outlook.com<\/h3>\n<p>Rather than blocking all images, Outlook.com claims to &#8220;block content from suspicious-looking senders,&#8221; though I&#8217;m not sure how they determine who looks suspicious!\u00a0Randomly, some senders are &#8220;trusted,&#8221; automatically displaying images, while others throw a blocked content warning:<\/p>\n<img decoding=\"async\" title=\"Blocked Content in Outlook.com\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/outlook-com-content-blocked.png\" alt=\"Blocked Content in Outlook.com\" width=\"540\" height=\"87\" \/>\n<p>Users have the ability to block images for anyone not in their safe senders list in their Outlook.com settings. Outlook.com treats these two types of content filtering differently, using a Gmail-like image blocking behavior for &#8220;suspicious-looking&#8221; senders while using Hotmail&#8217;s grey boxes to block out images for users that have the stricter content blocking settings in place.<\/p>\n<h2>Desktop Styled ALT Text Support<\/h2>\n<p>Desktop clients are a bit more reliable since there aren&#8217;t as many variables involved:<\/p>\n<table border=\"1\" cellspacing=\"1\" cellpadding=\"5\">\n<tbody>\n<tr>\n<th style=\"background-color: #ccc;\" colspan=\"4\"><strong>ALT Text in Desktop Clients<\/strong><\/th>\n<\/tr>\n<tr>\n<th>Desktop clients<\/th>\n<th>Images blocked by default<\/th>\n<th>Displays ALT text<\/th>\n<th>Displays styled ALT text<\/th>\n<\/tr>\n<tr>\n<td>Apple Mail<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Lotus Notes 8.5<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2718<\/td>\n<\/tr>\n<tr>\n<td>Outlook 2000-2003<\/td>\n<td>\u2714<\/td>\n<td>sort of*<\/td>\n<td>\u2718<\/td>\n<\/tr>\n<tr>\n<td>Outlook 2007<\/td>\n<td>\u2714<\/td>\n<td>sort of*<\/td>\n<td>\u2718<\/td>\n<\/tr>\n<tr>\n<td>Outlook 2010<\/td>\n<td>\u2714<\/td>\n<td>sort of*<\/td>\n<td>\u2718<\/td>\n<\/tr>\n<tr>\n<td>Outlook 2011 (Outlook for Mac)<\/td>\n<td>\u2714<\/td>\n<td>sort of*<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Outlook 2013<\/td>\n<td>\u2714<\/td>\n<td>sort of*<\/td>\n<td>\u2718<\/td>\n<\/tr>\n<tr>\n<td>Outlook 2016<\/td>\n<td>\u2714<\/td>\n<td>sort of*<\/td>\n<td>\u2718<\/td>\n<\/tr>\n<tr>\n<td>Thunderbird<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Windows 10 Mail<\/td>\n<td>\u2718<\/td>\n<td>\u2718<\/td>\n<td>\u2718<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><em>*Outlook adds a security message to ALT text. More details below.<\/em><\/p>\n<p>While Apple Mail and Thunderbird don&#8217;t block images by default, you can choose to do so in the preferences for each application. I manually enabled image blocking on these clients to see if they supported styled ALT text.<\/p>\n<p>There were some slight variations in support of other variables, particularly related to <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\/\">web fonts<\/a>:<\/p>\n<ul>\n<li>Apple Mail did not support styled fonts, though color and other properties were still included.<\/li>\n<li>In Outlook 2000-2003, though you could change the color, you could not adjust anything else with the styled ALT text.<\/li>\n<\/ul>\n<h3>Outlook&#8217;s security message<\/h3>\n<p>Outlook 2003, 2007, 2010, 2013, and 2016\u00a0preface ALT text with a lengthy security message, stating \u201cRight-click here to download pictures. To help protect your privacy, Outlook prevented automatic download of this picture from the Internet.\u201d Unfortunately, this makes ALT text in these email clients nearly useless as it only appears at the very end of Outlook&#8217;s security warning:<\/p>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-2012\" title=\"ALT Text in Outlook\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/alt-text-outlook.png\" alt=\"ALT Text in Outlook\" width=\"540\" height=\"55\" \/>\n<p>This message also appears in Windows 10, completely blocking any ALT text.<\/p>\n<h2>Mobile Styled ALT Text Support<\/h2>\n<p>Mobile clients have strong support for styled ALT text, which is great news\u2014especially for marketers with heavy Android audiences.<\/p>\n<table border=\"1\" cellspacing=\"1\" cellpadding=\"5\">\n<tbody>\n<tr>\n<th style=\"background-color: #ccc;\" colspan=\"4\"><strong>ALT Text in Mobile Clients<\/strong><\/th>\n<\/tr>\n<tr>\n<th>Mobile Clients<\/th>\n<th>Images blocked by default<\/th>\n<th>Displays ALT text<\/th>\n<th>Displays styled ALT text<\/th>\n<\/tr>\n<tr>\n<td>Android Email (4.4)<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Android Gmail (4.4)<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>AOL Mail (Android browser)<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>AOL Mail (iPhone browser)<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>AOL Alto Mail App<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Blackberry OS 6<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Blackberry OS 7<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Blackberry Z10<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>iOS 6.x (Native email client)<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>iPhone 5s (iOS 7)<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>iPhone 5s (iOS 8)<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>iPhone 6<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>iPhone 6s<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>iPhone 6s +<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>iPad (iOS 9)<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>iPad Mini (iOS 9)<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Gmail app (iOS)<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Gmail app (iPhone browser)<\/td>\n<td>\u2718<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Mailbox (iOS)<\/td>\n<td>\u2718<\/td>\n<td>\u2718<\/td>\n<td>\u2718<\/td>\n<\/tr>\n<tr>\n<td>Outlook.com (Android browser)<\/td>\n<td>Sometimes<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Outlook.com (iPhone browser)<\/td>\n<td>Sometimes<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Windows Mobile 7.5<\/td>\n<td>\u2714<\/td>\n<td>\u2718<\/td>\n<td>\u2718<\/td>\n<\/tr>\n<tr>\n<td>Windows Phone 8<\/td>\n<td>\u2714<\/td>\n<td>\u2718<\/td>\n<td>\u2718<\/td>\n<\/tr>\n<tr>\n<td>Yahoo! App (Android)<\/td>\n<td>\u2714<\/td>\n<td>\u2718<\/td>\n<td>\u2718<\/td>\n<\/tr>\n<tr>\n<td>Yahoo! App (iOS)<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td>Yahoo! Mail (Android browser)<\/td>\n<td>\u2714<\/td>\n<td>Sort of<\/td>\n<td>Sort of<\/td>\n<\/tr>\n<tr>\n<td>Yahoo! Mail (iPhone browser)<\/td>\n<td>\u2718<\/td>\n<td>\u2718<\/td>\n<td>\u2718<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Like Apple Mail and Thunderbird, I manually updated my iOS settings to block images in order to observe how this mobile OS handles ALT text.<\/p>\n<h3>Styled ALT text in Android (Samsung Galaxy Nexus):<\/h3>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-2037\" title=\"Styled ALT text in Android\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/android-styled-alt-text.png\" alt=\"Styled ALT text in Android\" width=\"540\" height=\"287\" \/>\n<p>Styled ALT text appears identically in the email and Gmail apps in Android.<\/p>\n<h3>Styled ALT text in BlackBerry OS 6 (Torch 9810):<\/h3>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-2039\" title=\"Styled ALT text in BlackBerry\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/bb-styled-alt-text.png\" alt=\"Styled ALT text in BlackBerry\" width=\"540\" height=\"170\" \/>\n<h3>Styled ALT text in iOS (iPhone 5):<\/h3>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-2036\" title=\"Styled ALT text in iPhone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/iphone-styled-alt-text.png\" alt=\"Styled ALT text in iPhone\" width=\"540\" height=\"450\" \/>\n<h3>Image blocking in Windows Phone 7.5 (Nokia Lumia 900):<\/h3>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-2038\" title=\"Styled ALT text in Windows Phone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/wp-styled-alt-text.png\" alt=\"Styled ALT text in Windows Phone\" width=\"540\" height=\"377\" \/>\n<h2>CSS font properties, links and length are variables<\/h2>\n<p>Diving into specifics, most of the following font properties are supported in clients that display styled ALT text:<\/p>\n<ul>\n<li>font-family<\/li>\n<li>font-size<\/li>\n<li>font-weight<\/li>\n<li>color<\/li>\n<li>font-style<\/li>\n<\/ul>\n<p>There was some variation in testing when it came to specific properties supported. Almost every client supported color properties, but not font. This varied among browsers as well. For example, here\u2019s what Gmail\/G-Suite in Chrome looked like in my test of two styled fonts, with different colors:<\/p>\n<figure id=\"post-15541 media-15541\" class=\"alignnone nudged\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/screen-shot-2016-10-31-at-2.53.54-pm.png\" alt=\"CSS font properties\" width=\"612\" height=\"339\" \/><\/figure>\n<p>While Gmail\/G-Suite in Internet Explorer respected color but not font:<\/p>\n<figure id=\"post-15542 media-15542\" class=\"alignnone nudged\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/screen-shot-2016-10-31-at-2.54.06-pm.png\" alt=\"Gmail\/G-Suite in Internet Explorer respected color but not font\" width=\"624\" height=\"423\" \/><\/figure>\n<p>Be aware that some clients may not support all fonts or sizes in their styled ALT text, but that doesn\u2019t mean you can\u2019t add some branding or flair. Check out this handy resource Email Marketing Specialist Jaina Mistry wrote for Campaign Monitor to <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.campaignmonitor.com\/resources\/guides\/web-fonts-in-email\/\">double check web font support. <\/a><\/p>\n<p>I&#8217;d also recommend <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/www.ampsoft.net\/webdesign-l\/WindowsMacFonts.html\">this list of commonly installed fonts<\/a> on Windows and Mac.<\/p>\n<h2>Other notable image blocking behaviors<\/h2>\n<p>In many email clients, ALT text will disappear once the size or length of the text exceeds the width and\/or height of the image container. Due to this behavior, it&#8217;s probably best to stick to shorter descriptions and smaller font sizes to avoid having your ALT text removed altogether. And use <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\" target=\"_blank\" rel=\"noopener\">web safe fonts<\/a> to make your emails more readable.<\/p>\n<p>Almost all email clients allow you to change your settings to display or hide images automatically (although most often hiding\/blocking is the default setting), and they&#8217;ll prompt users to turn images on for individual messages. Some also allow users to add specific senders to an allowlist or address book, or select a &#8220;Always display images from&#8230;&#8221;<\/p>\n<h2>Preview your email with images off (and on!)<\/h2>\n<p>How does your email look with images disabled? Is your ALT text rendering properly? Preview your email in over 50 desktop, mobile, and webmail clients\u2014including images-off views\u2014with Litmus.<\/p>\n<p><a class=\"btn medium orange\" style=\"color: #fff; font-size: 16px; font-weight: bold;\" rel=\"noopener\" href=\"https:\/\/litmus.com\/pricing\">Start testing \u2192<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A commonly accepted best practice in the email world is the inclusion of alt attributes (frequently known as an &#8220;ALT tag&#8221; or &#8220;ALT text,&#8221; which is shorthand for alternative text) for images. Why it&#8217;s important to remember this detail to best optimize your email &gt;&gt;<\/p>\n","protected":false},"author":6,"featured_media":5697,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[238,478,468],"blog_category":[53],"class_list":["post-5696","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-alt-text","tag-design","tag-images","blog_category-tips-resources"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>The Ultimate Guide to Styled ALT Text in Email - Litmus<\/title>\n<meta name=\"description\" content=\"A commonly accepted best practice in the email world is the inclusion of alt attributes (frequently known as an &quot;ALT tag&quot; or &quot;ALT text,&quot; which is shorthand for alternative text) for images. Why it&#039;s important to remember this detail to best optimize your email &gt;&gt;\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Ultimate Guide to Styled ALT Text in Email\" \/>\n<meta property=\"og:description\" content=\"A commonly accepted best practice in the email world is the inclusion of alt attributes (frequently known as an &quot;ALT tag&quot; or &quot;ALT text,&quot; which is shorthand for alternative text) for images. Why it&#039;s important to remember this detail to best optimize your email &gt;&gt;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2016-10-31T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-18T20:59:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/featured-image-how-to-write-high-converting-button-text-in-your-emails.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"724\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The Ultimate Guide to Styled ALT Text in Email - Litmus","description":"A commonly accepted best practice in the email world is the inclusion of alt attributes (frequently known as an \"ALT tag\" or \"ALT text,\" which is shorthand for alternative text) for images. Why it's important to remember this detail to best optimize your email &gt;&gt;","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email","og_locale":"en_US","og_type":"article","og_title":"The Ultimate Guide to Styled ALT Text in Email","og_description":"A commonly accepted best practice in the email world is the inclusion of alt attributes (frequently known as an \"ALT tag\" or \"ALT text,\" which is shorthand for alternative text) for images. Why it's important to remember this detail to best optimize your email &gt;&gt;","og_url":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2016-10-31T00:00:00+00:00","article_modified_time":"2025-12-18T20:59:58+00:00","og_image":[{"width":1380,"height":724,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/featured-image-how-to-write-high-converting-button-text-in-your-emails.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email"},"author":{"name":"","@id":""},"headline":"The Ultimate Guide to Styled ALT Text in Email","datePublished":"2016-10-31T00:00:00+00:00","dateModified":"2025-12-18T20:59:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email"},"wordCount":1547,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/featured-image-how-to-write-high-converting-button-text-in-your-emails.png","keywords":["Alt Text","Design","Images"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email","url":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email","name":"The Ultimate Guide to Styled ALT Text in Email - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/featured-image-how-to-write-high-converting-button-text-in-your-emails.png","datePublished":"2016-10-31T00:00:00+00:00","dateModified":"2025-12-18T20:59:58+00:00","description":"A commonly accepted best practice in the email world is the inclusion of alt attributes (frequently known as an \"ALT tag\" or \"ALT text,\" which is shorthand for alternative text) for images. Why it's important to remember this detail to best optimize your email &gt;&gt;","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/featured-image-how-to-write-high-converting-button-text-in-your-emails.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/featured-image-how-to-write-high-converting-button-text-in-your-emails.png","width":1380,"height":724},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"The Ultimate Guide to Styled ALT Text in Email"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/5696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=5696"}],"version-history":[{"count":5,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/5696\/revisions"}],"predecessor-version":[{"id":121706,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/5696\/revisions\/121706"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/5697"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=5696"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=5696"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=5696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}