How to build mobile-friendly HTML email in EmailIQ's three editors (Bee, TinyMCE and raw HTML): which fonts to pick, how big to make images, how the layout tables work, and what classic Outlook will do to your design.
Two tiers: Plain rules for marketers. Code for template builders behind Builder notes.
Builder notes hold the code for template builders. Marketers can skip them.
Eight rules cover most of what goes wrong. The rest of this guide explains each one.
EmailIQ gives every content version three editors. Switch between them with Change HTML Editor in the content version's actions menu. Try a switch on a copy of the campaign first.
An email can only show a font the reader's device already has, or one their email app downloads. Most email apps don't download fonts. So every font choice is really a list: the font you want, then backups in order. That list is called a font stack, and the last item should always be a generic family like sans-serif.
Bee's eight web fonts (Bitter, Droid Serif, Lato, Montserrat, Open Sans, Roboto, Source Sans Pro, Ubuntu) come from Google Fonts. Here's who downloads them. Data from caniemail's @font-face tests, last run December 2023.
| Email app | Shows web fonts? | Notes |
|---|---|---|
| Apple Mail (Mac) | Yes | |
| Apple Mail (iPhone, iPad) | Yes | caniemail's last test covered iOS 10.3–12.3.1 |
| Thunderbird | Yes | |
| Outlook for Mac | Partial | |
| Outlook.com, new Outlook | Inconsistent | caniemail: partial. Beefree: no. Plan for the backup. |
| Samsung Email | Partial | Not with Microsoft email addresses |
| Classic Outlook for Windows | No | Reads the font rule but ignores fonts hosted online |
| Gmail (web, iPhone, Android) | No | |
| Yahoo Mail, AOL | No |
In practice: iPhone and Mac Mail readers see your web font. Gmail, Yahoo, AOL and classic Outlook readers see the next font in the stack. A web font is only ever seen by part of your list.
These are the 17 fonts (plus Global font) in EmailIQ's Bee menu, in menu order. Each name is drawn using its own stack, so what you see here is what your device would show. Three stacks were confirmed by decoding a live EmailIQ preview; the rest are Beefree's published defaults, which matched all three confirmed ones.
Web font specimens load the regular weight only, the same way EmailIQ does. System font specimens use whatever is installed on the device you're reading this on.
TinyMCE offers 17 fonts plus System Font. None are web fonts; each depends on the reader's device. The names and order in EmailIQ's menu match TinyMCE's default list exactly, so these are TinyMCE's default stacks. Several stop without a generic backup, which is why some verdicts are strict.
Symbol, Webdings and Wingdings only display as symbols on devices that have them installed. Everywhere else your text shows in a random fallback font, which is also wrong.
TinyMCE measures in points; Bee measures in pixels. One point is 1⅓ pixels, so 12pt is 16px.
| TinyMCE size | In pixels | Use it for |
|---|---|---|
| 8pt | ≈ 10.7px | Nothing. Too small to read on a phone. |
| 10pt | ≈ 13.3px | Fine print only: the responsible-gaming line, terms, the address block. |
| 12pt | 16px | Body text. This is TinyMCE's default in EmailIQ. |
| 14pt | ≈ 18.7px | Lead paragraph, subheads. |
| 18pt | 24px | Headlines. |
| 24pt | 32px | Big headlines. |
| 36pt | 48px | One or two words, like a jackpot amount. |
| Element | Phone size (Bee, px) | Line height |
|---|---|---|
| Body text | 16px (never under 14px) | 1.5 (24px) |
| Fine print | 13px minimum | 1.4 |
| Subheads | 18–20px | 1.3 |
| Headlines | 24–32px | 1.2 |
| Button text | 16–18px, bold | Button at least 44px tall |
-webkit-text-size-adjust:none) to keep layouts stable. The size you set is the size iPhone readers get. Bee's default paragraph is 14px with 1.2 line height; raise it to 16px and 1.5 in the mobile view.
For body text, no. For headlines, only a licensed brand font, only in raw HTML, and only if you accept that Gmail and Outlook readers see the backup.
Bee already hides its Google Fonts link from classic Outlook with a conditional comment (see Inside an EmailIQ email), so Outlook goes straight to the backup fonts. Copy the same pattern in raw HTML, and request the bold weight explicitly: EmailIQ's Bee link loads only the regular (400) weight.
<!-- In <head>: load the web font for everyone EXCEPT classic Outlook (same pattern Bee uses) -->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700" rel="stylesheet" type="text/css">
<!--<![endif]-->
<!-- Belt and braces: force a system font in classic Outlook -->
<!--[if mso]>
<style>h1,h2,h3,p,td,a,span{font-family:Arial,sans-serif !important;}</style>
<![endif]-->
<!-- In the body: always end the stack with a Recommended system font and a generic family -->
<h1 style="font-family:Montserrat,'Trebuchet MS',Arial,sans-serif;font-weight:700;">Win your share of $10,000</h1>If you declare your own @font-face, classic Outlook reads it and, without help, falls back to Times New Roman instead of your stack. Add mso-generic-font-family and mso-font-alt:
@font-face {
font-family: 'BrandSans';
src: url('https://cdn.example.com/fonts/brandsans.woff2') format('woff2');
font-weight: 400;
mso-generic-font-family: swiss; /* stops classic Outlook defaulting to Times New Roman */
mso-font-alt: 'Arial';
}Design one email at 600px wide. On phones, Bee turns each multi-column row into a single column. You rarely need a separate mobile design, but you do need to check the mobile view.
In Bee, rows are the containers for your content, and they decide how the layout collapses on smaller screens.
This is the media query EmailIQ's Bee output contained, verbatim. .stack .column is what turns columns into full-width blocks; .mobile_hide and .desktop_hide are Bee's device-visibility classes (desktop-hidden blocks also carry mso-hide:all so classic Outlook hides them).
@media (max-width:768px){
.row-content{width:100%!important}
.stack .column{width:100%!important;display:block}
.mobile_hide{min-height:0;max-height:0;max-width:0;display:none;overflow:hidden;font-size:0}
.desktop_hide,.desktop_hide table{display:table!important;max-height:none!important}
}Hand-coding a two-column row? Use inline-block columns that stack naturally, with an Outlook-only table (a “ghost table”) that holds them side by side in classic Outlook, which ignores max-width and media queries:
<td style="font-size:0;"> <!-- font-size:0 removes the gap between inline-block columns -->
<!--[if mso]><table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0"><tr><td width="300" valign="top"><![endif]-->
<div class="col" style="display:inline-block;width:100%;max-width:300px;vertical-align:top;">
<!-- left column: stacks FIRST on phones -->
</div>
<!--[if mso]></td><td width="300" valign="top"><![endif]-->
<div class="col" style="display:inline-block;width:100%;max-width:300px;vertical-align:top;">
<!-- right column: stacks second -->
</div>
<!--[if mso]></td></tr></table><![endif]-->
</td>Phones and most laptops have high-density screens, so an image saved at the exact size it displays looks soft. Save it at twice the size and let the email scale it down.
| Where it goes | Displays at | Export at (2×) | Format |
|---|---|---|---|
| Full-width hero or banner | 600px wide | 1200px wide | JPG for photos, PNG for flat graphics |
| Half of a two-column row | about 280px | about 560px | JPG or PNG |
| Logo | 150–200px wide | 300–400px | PNG, see Dark mode |
| Icons, social buttons | 24–48px | 48–96px | PNG |
| Animation | Same as above | Same as above | GIF, and the first frame must work on its own |
editor_images) and the original is left alone. TinyMCE keeps a separate image folder per campaign. The largest image you can upload is set by your EmailIQ administrator.
<img src="https://example.com/images/hero-1200.jpg"
width="600"
alt="Double points on every slot this Friday and Saturday"
style="display:block;width:100%;max-width:600px;height:auto;border:0;">width attribute. Classic Outlook ignores CSS widths on images; without the attribute, it shows the 1200px file at 1200px.display:block removes the gap some clients add under images.Classic Outlook renders email with Microsoft Word, which doesn't understand modern web layout. So email layout is built from nested tables. Bee writes all of this for you. You only need this section if a designer or agency hands you HTML to paste into the raw editor.
role="presentation", border="0", cellpadding="0" and cellspacing="0". Bee does this on every table.<td>, never on <img> or <a>.<style> block in the <head> for media queries only: Gmail ignores styles in the body, and Gmail on the web caps the style block at 16KB.width="600" and style="width:600px". The inline style keeps classic Outlook from rescaling the email on 120 DPI Windows displays, together with the PixelsPerInch block below.mso-line-height-rule:exactly when a precise line height matters in classic Outlook. Bee writes mso-line-height-alt for the same reason.<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Double Points Weekend</title>
<!--[if mso]>
<xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml>
<![endif]-->
<style>
body{margin:0;padding:0}
@media (max-width:620px){
.container{width:100%!important}
.col{display:block!important;width:100%!important;max-width:100%!important}
}
</style>
</head>
<body style="margin:0;padding:0;background-color:#ffffff;">
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table role="presentation" class="container" width="600" border="0" cellpadding="0" cellspacing="0" style="width:600px;">
<tr>
<td style="padding:24px;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:16px;line-height:24px;mso-line-height-rule:exactly;color:#1a1a1a;">
Your content here.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>“Outlook” now means two very different programs. The new Outlook renders email like a web browser. Classic Outlook for Windows still uses Microsoft Word to draw email, and Microsoft supports it through at least 2029. Every email has to work in both.
| Classic Outlook for Windows | New Outlook for Windows, Outlook.com | |
|---|---|---|
| Rendering engine | Microsoft Word | Browser-based (WebView2) |
| Status | Supported by Microsoft through at least 2029 | Becoming the default for Windows users |
| Web fonts | Ignored; shows the backup font | Inconsistent; plan for the backup |
| Background images | Need VML code | Work |
| Rounded corners | Show square unless drawn with VML | Work |
| Animated GIFs | Some versions show the first frame only | Play |
| Media queries | Ignored | Partly supported |
| Image sizing | Needs the HTML width attribute | Works with CSS |
| Padding on images | Stripped | Works |
| Dark mode | Fully inverts colors (Office 365, Outlook 2021) | Partially inverts (Outlook.com) |
Confirmed by decoding a live EmailIQ preview. None of this needs any action from you.
PixelsPerInch 96) and allows PNG images (AllowPNG).mso-table-lspace, mso-table-rspace) and sets line heights Outlook respects (mso-line-height-alt).mso-hide:all).Conditional comments wrap code that only Outlook (or only non-Outlook) reads: <!--[if mso]>…<![endif]--> for Outlook and <!--[if !mso]><!-->…<!--<![endif]--> for everyone else. EmailIQ's TinyMCE keeps them by default, so they survive a trip through the WYSIWYG editor.
A button with rounded corners in every Outlook: VML for classic Outlook, a normal link for everything else.
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="https://example.com/offer" style="height:48px;v-text-anchor:middle;width:260px;"
arcsize="17%" stroke="f" fillcolor="#005b8b">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Claim your Free Play</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://example.com/offer"
style="display:inline-block;width:260px;background-color:#005b8b;border-radius:8px;
color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;
line-height:48px;text-align:center;text-decoration:none;">Claim your Free Play</a>
<!--<![endif]-->Gmail clips any email whose HTML is larger than 102KB and hides the rest behind a “View entire message” link. Images don't count toward the limit, since they're linked rather than attached, but every block of HTML does.
List-Unsubscribe-Post: One-Click), so Gmail's own Unsubscribe button keeps working.
<style> placed in the body.Many readers have dark mode on, and email apps handle it in three different ways. You can't switch it off from inside the email, so design colors and images that survive being flipped.
| What the app does | Apps |
|---|---|
| No change. Your email looks the same as in light mode. | Apple Mail, Gmail on the web, Yahoo Mail, AOL |
| Partial invert. Light backgrounds turn dark and dark text turns light. | Outlook.com, Outlook for iPhone and Android, Gmail for Android |
| Full invert. Changes light and dark areas. | Gmail for iPhone, Outlook 2021 and Office 365 for Windows, Windows Mail |
Tick through this for each campaign. Your ticks are saved in this browser only.
On September 11, 2026 we built a test campaign in EmailIQ's Bee editor (three headlines set to Montserrat, Helvetica and Global font, plus a paragraph), sent a preview to Gmail and decoded it. Every “confirmed” claim in this guide comes from these lines.
<!--[if mso]>
<xml>
<w:WordDocument xmlns:w="urn:schemas-microsoft-com:office:word"><w:DontUseAdvancedTypographyReadingMail/></w:WordDocument>
<o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings>
</xml>
<![endif]--><!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<!--<![endif]-->@media (max-width:768px){
.row-content{width:100%!important}
.stack .column{width:100%!important;display:block}
.mobile_hide{min-height:0;max-height:0;max-width:0;display:none;overflow:hidden;font-size:0}
.desktop_hide,.desktop_hide table{display:table!important;max-height:none!important}
}<table class="row-content stack" align="center" role="presentation" width="900"
style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:900px;margin:0 auto"><body class="body" style="margin:0;padding:0;-webkit-text-size-adjust:none;text-size-adjust:none;background-color:#fff"><h1 style="...font-family:Montserrat,'Trebuchet MS','Lucida Grande','Lucida Sans Unicode','Lucida Sans',Tahoma,sans-serif;font-size:23px;font-weight:700;line-height:1.2;mso-line-height-alt:28px">
<h1 style="...font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;..."> <!-- menu label: Helvetica -->
<h1 style="...font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;..."> <!-- menu label: Global font -->
<div style="...font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:14px;line-height:1.2;mso-line-height-alt:17px">List-Unsubscribe: <https://…/unsubscribe/…>, <mailto:…>
List-Unsubscribe-Post: List-Unsubscribe=One-Click
Content-Type: text/html; charset=UTF-8<!-- End --><img src="https://…/open/…" height="2" width="3" alt=""></body></html>Decoded HTML size: 5,152 bytes. Tracking addresses replaced with “…”.