Replied to Discussion: Gmail iOS Dark Mode Inverting Text Color On Background Image by Lee Borowiak
Hi Laura,
Try using @media prefers-color-scheme like this, and target your h1 class and make the text white:
<style type="text/css">
@media (prefers-color-scheme: dark) {
.h1 {
color: #ffffff !important;
}
}
</style>
See more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
Thanks,
Lee.
Replied to Discussion: How to get Responsive Tables for Outlook on iOS by
Hi Sara,
I created this grid which has responsive columns. It also works without relying on CSS or Media Queries. The columns stack automatically depending on device width as they use inline-block.
Check out the code:
https://litmus.com/builder/b8b7148
Here's the preview results:
https://litmus.com/checklist/emails/public/80effbe
Thank,
Lee.
http://www.lb-digital.com
Replied to Discussion: Ipad Hybrid Fluid Issue in 3 column by
Hi Tahsin,
I built my own grid which is super simple, I actually just shared this on another post too.
Check it out:
https://litmus.com/builder/b8b7148
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- Fix DPI Scaling Issues in Outlook -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<title>Responsive HTML Email Framework, built by Lee Borowiak, lb-digital.com</title>
<!-- Character encoding -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Set 100% scale, allow zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Remove default blue colour from links so you can style your own -->
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="telephone=no">
<!-- Prevent iOS 11 from automatically scaling your email -->
<meta name="x-apple-disable-message-reformatting">
<!-- Enable CSS3 and media queries in Windows Phone 7.5 and higher -->
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<style type="text/css">
body {
margin:0 auto;
padding:0;
width:100%;
height:auto;
font-size:15px;
background-color:#ffffff;
}
::selection {
background-color:#e5e5e5;
}
body, h1, h2, h3, h4, h5, h6, p, ul, ul li, ol, ol li, blockquote {
margin:0;
padding:0;
font-family: Helvetica, Arial, sans-serif;
font-weight:normal;
line-height:normal;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
/* Outlook.com and Hotmail .ExternalClass class override */
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Outlook 2007/2010/2013 'Read in Browser' Link */
#outlook a {
padding:0;
}
/* Outlook fix spacing left and right side of tables */
table {
mso-table-lspace:0pt;
mso-table-rspace:0pt;
border-spacing:0;
}
table, td {
border-collapse:collapse;
}
/* IE ensure image resizing looks a little better using: -ms-interpolation-mode:bicubic; */
img {
-ms-interpolation-mode:bicubic;
border:0 none;
height:auto;
line-height:100%;
outline:none;
color:#666666;
text-decoration:none;
}
img,
img a,
a img {
border:0 none;
font-size:15px;
color:#666666;
text-decoration:none;
}
a {
outline:none;
color:#666;
text-decoration:none;
}
/* Remove blue links on Apple and Samsung devices */
a[x-apple-data-detectors],
#MessageViewBody a {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.wrapper {
margin:0 auto;
padding:0;
width:100%;
max-width:100%;
background-color:#ffffff;
}
.wrapper-inner {
margin:0 auto;
padding:0;
width:700px;
max-width:100%;
background-color:#ffffff;
}
p {
font-size:15px;
}
/* Responsive Scaling */
@media only screen and (max-width: 700px) {
.wrapper {
width:100% !important;
max-width:100%;
}
.wrapper-inner {
width:100% !important;
max-width:100%;
}
.cols-1-1 {
width:100% !important;
}
.cols-2-1,
.cols-2-2 {
width:50% !important;
}
.cols-3-1,
.cols-3-2,
.cols-3-3 {
width:33.3333% !important;
}
.cols-4-1,
.cols-4-2,
.cols-4-3,
.cols-4-4 {
width:50% !important; /* Change to 25% to keep 4 cols */
}
}
/* Mobile stack all cols to 1 */
@media only screen and (max-width: 480px) {
.cols-1-1,
.cols-2-1,
.cols-2-2,
.cols-3-1,
.cols-3-2,
.cols-3-3,
.cols-4-1,
.cols-4-2,
.cols-4-3,
.cols-4-4 {
width:100% !important;
}
}
</style>
<!--[if mso]>
<style>
body {
line-height-rule:exactly;
mso-line-height-rule:exactly;
}
</style>
<![endif]-->
</head>
<body style="margin:0 auto;">
<!-- 100% wrapper -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="wrapper">
<tr>
<td align="center" valign="top">
<table width="700" border="0" cellspacing="0" cellpadding="0" class="wrapper-inner" style="background-color:#f0f0f0;">
<!-- 1 Col -->
<tr>
<td align="center" class="" valign="middle" style="font-size:0;padding:20px;">
<!--[if (mso)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660" role="presentation">
<tr>
<td align="left" valign="top" style="background-color:#cccccc;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:100%; max-width:660px; text-align:left;background-color:#cccccc; margin:0 auto;" class="cols-1-1">
<div style="Margin:10px; background-color:#cccccc;">
<h6 style="font-size:14px;">1 col.<br>Make Margin 0 to remove 10px margin.</h6>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- / 1 Col -->
<!-- 2 Cols -->
<tr>
<td align="center" class="" valign="middle" style="font-size:0;padding:20px; background-color:#e0e0e0;">
<!--[if (mso)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660" role="presentation">
<tr>
<td align="left" width="330" valign="top" style="background-color:#cccccc;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:330px; text-align:left;background-color:#cccccc; margin:0 auto;" class="cols-2-1">
<div style="Margin:10px;font-size:16px;background-color:#cccccc;">
<p>2 cols, col 1.<br>Make Margin 0 to remove 10px margin.</p>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
<td align="left" width="330" valign="top" style="background-color:#999999;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:330px; text-align:left;background-color:#999999; margin:0 auto;" class="cols-2-2">
<div style="Margin:10px;font-size:16px;background-color:#999999;" >
<p>2 cols, col 2.<br>Make Margin 0 to remove 10px margin.</p>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- / 2 Cols -->
<!-- 3 Cols -->
<tr>
<td align="center" class="" valign="middle" style="font-size:0;padding:20px; background-color:#f0f0f0;">
<!--[if (mso)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660" role="presentation">
<tr>
<td align="left" width="220" valign="top" style="background-color:#cccccc;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:220px; text-align:left;background-color:#cccccc; margin:0 auto;" class="cols-3-1">
<div style="Margin:10px;font-size:16px;background-color:#cccccc;">
<p>3 cols, col 1.<br>Make Margin 0 to remove 10px margin.</p>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
<td align="left" width="220" valign="top" style="background-color:#999999;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:220px; text-align:left;background-color:#999999; margin:0 auto;" class="cols-3-2">
<div style="Margin:10px;font-size:16px;background-color:#999999;">
<p>3 cols, col 1.<br>Make Margin 0 to remove 10px margin.</p>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
<td align="left" width="220" valign="top" style="background-color:#cccccc;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:220px; text-align:left;background-color:#cccccc; margin:0 auto;" class="cols-3-3">
<div style="Margin:10px;font-size:16px;background-color:#cccccc;">
<p>3 cols, col 1.<br>Make Margin 0 to remove 10px margin.</p>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- / 3 Cols -->
<!-- 4 Cols -->
<tr>
<td align="center" class="" valign="middle" style="font-size:0;padding:20px; background-color:#e0e0e0;">
<!--[if (mso)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660" role="presentation">
<tr>
<td align="left" width="165" valign="top" style="background-color:#cccccc;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:165px; text-align:left;background-color:#cccccc; margin:0 auto;" class="cols-4-1">
<div style="Margin:10px;font-size:16px;background-color:#cccccc;">
<p>4 cols, col 1.<br>Make Margin 0 to remove 10px margin.</p>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
<td align="left" width="165" valign="top" style="background-color:#999999;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:165px; text-align:left;background-color:#999999; margin:0 auto;" class="cols-4-2">
<div style="Margin:10px;font-size:16px;background-color:#999999;">
<p>4 cols, col 2.<br>Make Margin 0 to remove 10px margin.</p>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
<td align="left" width="165" valign="top" style="background-color:#cccccc;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:165px; text-align:left;background-color:#cccccc; margin:0 auto;" class="cols-4-3">
<div style="Margin:10px;font-size:16px;background-color:#cccccc;">
<p>4 cols, col 3.<br>Make Margin 0 to remove 10px margin.</p>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
<td align="left" width="165" valign="top" style="background-color:#999999;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:165px; text-align:left;background-color:#999999; margin:0 auto;" class="cols-4-4">
<div style="Margin:10px;font-size:16px;background-color:#999999;">
<p>3 cols, col 4.<br>Make Margin 0 to remove 10px margin.</p>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- / 4 Cols -->
</table>
</td>
</tr>
</table>
<!-- / 100% wrapper -->
</body>
</html>
Thanks,
Lee.
http://www.lb-digital.com
Replied to Discussion: Is it really possible to create a responsive fluid email template, Which work in all devices perfectly? by
Hi Resnick,
I built my own grid over 1 year ago which does exactly this. Not all devices support CSS or Media Queries.
This grid displays each column as an inline-block, so when CSS or Media Queries aren't supported they automatically stack for mobiles, such as Android.
Tables are used only when they need to be, so having inline-blocks allow much more flexibility. For example; you can have 4 cols stack to 2 then 1.
Check it out:
https://litmus.com/builder/b8b7148
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- Fix DPI Scaling Issues in Outlook -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<title>Responsive HTML Email Framework, built by Lee Borowiak, lb-digital.com</title>
<!-- Character encoding -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Set 100% scale, allow zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Remove default blue colour from links so you can style your own -->
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="telephone=no">
<!-- Prevent iOS 11 from automatically scaling your email -->
<meta name="x-apple-disable-message-reformatting">
<!-- Enable CSS3 and media queries in Windows Phone 7.5 and higher -->
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<style type="text/css">
body {
margin:0 auto;
padding:0;
width:100%;
height:auto;
font-size:15px;
background-color:#ffffff;
}
::selection {
background-color:#e5e5e5;
}
body, h1, h2, h3, h4, h5, h6, p, ul, ul li, ol, ol li, blockquote {
margin:0;
padding:0;
font-family: Helvetica, Arial, sans-serif;
font-weight:normal;
line-height:normal;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
/* Outlook.com and Hotmail .ExternalClass class override */
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Outlook 2007/2010/2013 'Read in Browser' Link */
#outlook a {
padding:0;
}
/* Outlook fix spacing left and right side of tables */
table {
mso-table-lspace:0pt;
mso-table-rspace:0pt;
border-spacing:0;
}
table, td {
border-collapse:collapse;
}
/* IE ensure image resizing looks a little better using: -ms-interpolation-mode:bicubic; */
img {
-ms-interpolation-mode:bicubic;
border:0 none;
height:auto;
line-height:100%;
outline:none;
color:#666666;
text-decoration:none;
}
img,
img a,
a img {
border:0 none;
font-size:15px;
color:#666666;
text-decoration:none;
}
a {
outline:none;
color:#666;
text-decoration:none;
}
/* Remove blue links on Apple and Samsung devices */
a[x-apple-data-detectors],
#MessageViewBody a {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.wrapper {
margin:0 auto;
padding:0;
width:100%;
max-width:100%;
background-color:#ffffff;
}
.wrapper-inner {
margin:0 auto;
padding:0;
width:700px;
max-width:100%;
background-color:#ffffff;
}
p {
font-size:15px;
}
/* Responsive Scaling */
@media only screen and (max-width: 700px) {
.wrapper {
width:100% !important;
max-width:100%;
}
.wrapper-inner {
width:100% !important;
max-width:100%;
}
.cols-1-1 {
width:100% !important;
}
.cols-2-1,
.cols-2-2 {
width:50% !important;
}
.cols-3-1,
.cols-3-2,
.cols-3-3 {
width:33.3333% !important;
}
.cols-4-1,
.cols-4-2,
.cols-4-3,
.cols-4-4 {
width:50% !important; /* Change to 25% to keep 4 cols */
}
}
/* Mobile stack all cols to 1 */
@media only screen and (max-width: 480px) {
.cols-1-1,
.cols-2-1,
.cols-2-2,
.cols-3-1,
.cols-3-2,
.cols-3-3,
.cols-4-1,
.cols-4-2,
.cols-4-3,
.cols-4-4 {
width:100% !important;
}
}
</style>
<!--[if mso]>
<style>
body {
line-height-rule:exactly;
mso-line-height-rule:exactly;
}
</style>
<![endif]-->
</head>
<body style="margin:0 auto;">
<!-- 100% wrapper -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="wrapper">
<tr>
<td align="center" valign="top">
<table width="700" border="0" cellspacing="0" cellpadding="0" class="wrapper-inner" style="background-color:#f0f0f0;">
<!-- 1 Col -->
<tr>
<td align="center" class="" valign="middle" style="font-size:0;padding:20px;">
<!--[if (mso)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660" role="presentation">
<tr>
<td align="left" valign="top" style="background-color:#cccccc;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:100%; max-width:660px; text-align:left;background-color:#cccccc; margin:0 auto;" class="cols-1-1">
<div style="Margin:10px; background-color:#cccccc;">
<h6 style="font-size:14px;">1 col.<br>Make Margin 0 to remove 10px margin.</h6>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- / 1 Col -->
<!-- 2 Cols -->
<tr>
<td align="center" class="" valign="middle" style="font-size:0;padding:20px; background-color:#e0e0e0;">
<!--[if (mso)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660" role="presentation">
<tr>
<td align="left" width="330" valign="top" style="background-color:#cccccc;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:330px; text-align:left;background-color:#cccccc; margin:0 auto;" class="cols-2-1">
<div style="Margin:10px;font-size:16px;background-color:#cccccc;">
<p>2 cols, col 1.<br>Make Margin 0 to remove 10px margin.</p>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
<td align="left" width="330" valign="top" style="background-color:#999999;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:330px; text-align:left;background-color:#999999; margin:0 auto;" class="cols-2-2">
<div style="Margin:10px;font-size:16px;background-color:#999999;" >
<p>2 cols, col 2.<br>Make Margin 0 to remove 10px margin.</p>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- / 2 Cols -->
<!-- 3 Cols -->
<tr>
<td align="center" class="" valign="middle" style="font-size:0;padding:20px; background-color:#f0f0f0;">
<!--[if (mso)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660" role="presentation">
<tr>
<td align="left" width="220" valign="top" style="background-color:#cccccc;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:220px; text-align:left;background-color:#cccccc; margin:0 auto;" class="cols-3-1">
<div style="Margin:10px;font-size:16px;background-color:#cccccc;">
<p>3 cols, col 1.<br>Make Margin 0 to remove 10px margin.</p>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
<td align="left" width="220" valign="top" style="background-color:#999999;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:220px; text-align:left;background-color:#999999; margin:0 auto;" class="cols-3-2">
<div style="Margin:10px;font-size:16px;background-color:#999999;">
<p>3 cols, col 1.<br>Make Margin 0 to remove 10px margin.</p>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
<td align="left" width="220" valign="top" style="background-color:#cccccc;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:220px; text-align:left;background-color:#cccccc; margin:0 auto;" class="cols-3-3">
<div style="Margin:10px;font-size:16px;background-color:#cccccc;">
<p>3 cols, col 1.<br>Make Margin 0 to remove 10px margin.</p>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- / 3 Cols -->
<!-- 4 Cols -->
<tr>
<td align="center" class="" valign="middle" style="font-size:0;padding:20px; background-color:#e0e0e0;">
<!--[if (mso)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660" role="presentation">
<tr>
<td align="left" width="165" valign="top" style="background-color:#cccccc;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:165px; text-align:left;background-color:#cccccc; margin:0 auto;" class="cols-4-1">
<div style="Margin:10px;font-size:16px;background-color:#cccccc;">
<p>4 cols, col 1.<br>Make Margin 0 to remove 10px margin.</p>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
<td align="left" width="165" valign="top" style="background-color:#999999;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:165px; text-align:left;background-color:#999999; margin:0 auto;" class="cols-4-2">
<div style="Margin:10px;font-size:16px;background-color:#999999;">
<p>4 cols, col 2.<br>Make Margin 0 to remove 10px margin.</p>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
<td align="left" width="165" valign="top" style="background-color:#cccccc;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:165px; text-align:left;background-color:#cccccc; margin:0 auto;" class="cols-4-3">
<div style="Margin:10px;font-size:16px;background-color:#cccccc;">
<p>4 cols, col 3.<br>Make Margin 0 to remove 10px margin.</p>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
<td align="left" width="165" valign="top" style="background-color:#999999;">
<![endif]-->
<div style="display:inline-block; vertical-align:top; width:165px; text-align:left;background-color:#999999; margin:0 auto;" class="cols-4-4">
<div style="Margin:10px;font-size:16px;background-color:#999999;">
<p>3 cols, col 4.<br>Make Margin 0 to remove 10px margin.</p>
</div>
</div>
<!--[if (mso)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- / 4 Cols -->
</table>
</td>
</tr>
</table>
<!-- / 100% wrapper -->
</body>
</html>
Thanks,
Lee.
http://www.lb-digital.com
Replied to Discussion: Outlook App vs. Dark Mode on iOS - A disaster by
Hi Hans,
Have you tried using @media prefers-color-scheme: dark
<style type="text/css">
@media (prefers-color-scheme: dark) {
.mycolour {
background:#cccccc !important;
}
}
</style>
See more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
Thanks,
Lee.
Replied to Discussion: Outlook and Fallback Fonts by
Hi all,
If you use if mso, this targets all mso, but custom fonts actually work on Outlook 2000–2003, according to this:
https://www.campaignmonitor.com/css/text-fonts/font-face/
They don't work for Outlook 2007–2016.
I wrote some code which targets Outlook 2007–2016 specifically to display Helvetica, and then custom fonts for other Outlook versions:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- Fix DPI Scaling Issues in Outlook -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<title>Custom Fonts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="telephone=no">
<meta name="x-apple-disable-message-reformatting">
<style type="text/css">
body {
margin:0 auto;
padding:0;
width:100%;
height:auto;
font-size:15px;
background-color:#ffffff;
line-height-rule:exactly;
mso-line-height-rule:exactly;
}
/* Load Google fonts through @media screen so Outlook 2007/2010/2013/2016 doesn't default to Times New Roman. Litmus uses @font-face with their newsletters too! */
@media screen {
@font-face {
font-family: 'Heebo';
font-style: normal;
font-weight: 300;
src: local('Heebo Light'), local('Heebo-Light'), url(https://fonts.gstatic.com/s/heebo/v3/NGS3v5_NC0k9P9ldb6RMkK4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Heebo';
font-style: normal;
font-weight: 700;
src: local('Heebo Bold'), local('Heebo-Bold'), url(https://fonts.gstatic.com/s/heebo/v4/NGS3v5_NC0k9P9lNaKRMkK4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
}
/* Typography Setup + Desktop Sizes */
h1 {
font-family:'Heebo', Helvetica, Arial, sans-serif;
font-weight:300;
line-height:normal;
font-size:40px;
margin:0;
padding:0;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
h1 a {
color:#000000;
}
strong, b {
font-weight:700;
}
/* Mobile */
@media only screen and (max-width: 480px) {
h1 {
font-size:25px;
}
}
</style>
<!-- For reference, here's all the Outlook versions and the mso to use
Outlook 2000 = mso 9
Outlook 2002 = mso 10
Outlook 2003 = mso 11
Outlook 2007 = mso 12
Outlook 2010 = mso 14
Outlook 2013 = mso 15
Outlook 2016 = mso 16
-->
<!-- Outlook 2007–2016 doesn't support font-face, use web safe fonts instead. Outlook 2000–2003 does support font-face, so we don't need to target those -->
<!--[if (mso 12) | (mso 14) | (mso 15) | (mso 16) ]>
<style>
h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight:normal;
}
strong, b {
font-weight:bold;
}
</style>
<![endif]-->
</head>
<body style="margin:0 auto;">
<h1 style="font-family:Heebo, Helvetica, Arial, sans-serif;">This text is using [if (mso 12) | (mso 14) | (mso 15) | (mso 16) ] so is displaying <strong>Helvetica</strong> for Outlook 2007, 2010, 2013, 2016.<br><br>The custom font <strong><a href="https://fonts.google.com/specimen/Heebo" target="_blank">Heebo</a></strong> is being displayed for Outlook 2000, 2002 and 2003.</h1>
</body>
</html>
Thanks,
Lee.
Replied to Discussion: Outlook app on Android no longer honouring inline styles on links by
Hi Adrian,
Have you tried adding the meta format-detection to the head of the email?
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="telephone=no">
<meta name="x-apple-disable-message-reformatting">
I just created a test and uploaded it to Litmus and it seemed to work fine, no blue links.
Here's the Litmus results (click on View email tests, right corner):
https://litmus.com/builder/525a89f
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- Fix DPI Scaling Issues in Outlook -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<title>Linked text and numbers</title>
<!-- Character encoding -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Open Graph Sharing Title -->
<meta property="og:title" content="Linked text and numbers" />
<!-- Set 100% scale, allow zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Remove default blue colour from links so you can style your own -->
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="telephone=no">
<meta name="x-apple-disable-message-reformatting">
<!-- Prevent iOS 11 from automatically scaling your email -->
<meta name="x-apple-disable-message-reformatting">
<!-- Enable CSS3 and media queries in Windows Phone 7.5 and higher -->
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<style type="text/css">
/* Reset CSS */
body {
margin:0 auto;
padding:0;
width:100%;
height:auto;
font-size:15px;
background-color:#ffffff;
line-height-rule:exactly;
mso-line-height-rule:exactly;
}
body, h1, h2, h3, h4, h5, h6, p, ul, ul li, ol, ol li, blockquote {
margin:0;
padding:0;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
font-family: Helvetica, Arial, sans-serif;
font-weight:normal;
line-height:normal;
color:#666666;
}
/* Outlook.com and Hotmail .ExternalClass class override */
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Outlook 2007/2010/2013 'Read in Browser' Link */
#outlook a {
padding:0;
}
/* Outlook fix spacing left and right side of tables */
table {
mso-table-lspace:0pt;
mso-table-rspace:0pt;
border-spacing:0;
}
table, td {
border-collapse:collapse; /* If you’re using border-radius, use border-collapse:separate; instead */
}
/* IE ensure image resizing looks a little better using: -ms-interpolation-mode:bicubic; */
img {
-ms-interpolation-mode:bicubic;
border:0 none;
height:auto;
line-height:100%;
outline:none;
color:#666666;
text-decoration:none;
}
img,
img a,
a img {
border:0 none;
font-size:15px;
color:#666666;
text-decoration:none;
}
a {
outline:none;
color:#333333;
text-decoration:none;
}
/* Remove blue links on Apple and Samsung devices */
a[x-apple-data-detectors],
#MessageViewBody a {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
strong, b {
font-weight:bold;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="" style="background-color:#e4e4e4;">
<tr>
<td align="center" class="" valign="top" style="font-size:20px;padding-top:30px; padding-bottom:30px;">
<p style="color:#666666; font-size:20px;"><a href="https://www.google.com" style="color:#333333; font-size:20px;text-decoration:underline;">This is a link</a><br><br></p>
<p style="color:#666666; font-size:20px;">This number isn't linked 0444444333<br><br></p>
<p style="color:#666666; font-size:20px;">This is a link <a href="tel:0444444333" style="color:#333333;font-size:20px;text-decoration:underline;">0444444333</a></p>
</td>
</tr>
</table>
</body>
</html>
Thanks,
Lee.
Replied to Discussion: Problems with Android 7.1 & 8.0 Gmail by
Hi Ryan,
I've been using this for buttons and it works great when I test in my Litmus account. As you can see, no tables either.
Just change the width from auto to your required px width.
I've just tested this in Android 7.1 and Gmail 8.0 and it displays fine.
<a href="https://minimalco.de" style="font-family:Helvetica, Arial, sans-serif;font-weight:normal;font-size:13px;color:#ffffff;text-decoration:none;padding-top:10px;padding-bottom:10px;padding-left:25px;padding-right:25px;display:inline-block;width:auto;border-radius:20px;background-color:#666666;border:2px solid #666666;mso-border-alt:20px solid #666666;mso-padding-alt:0px;">Button Rounded →</a>
<a href="https://minimalco.de" style="font-family:Helvetica, Arial, sans-serif;font-weight:normal;font-size:13px;color:#ffffff;text-decoration:none;padding-top:10px;padding-bottom:10px;padding-left:25px;padding-right:25px;display:inline-block;width:auto;border-radius:0;background-color:#666666;border:2px solid #666666;mso-border-alt:20px solid #666666;mso-padding-alt:0px;">Button Square →</a>
Thanks,
Lee.