What are the standards for font usage and mobile optimization?

You've found a gorgeous custom font, dropped it into your email template, and the preview looks perfect. Then someone opens it in Outlook and it renders in Times New Roman. That's the font problem in email, and it's been around forever.

Most email clients don't support custom web fonts. Outlook (the desktop version) is the biggest offender. Gmail has inconsistent support depending on whether you're on Android, iOS, or web. Apple Mail and Yahoo Mail handle custom fonts better, but you can't build a template that only works for those two.

The safe move is to specify your custom font first, then list a fallback stack that degrades gracefully. Something like this:

font-family: 'Your Custom Font', Georgia, 'Times New Roman', serif;

If the client doesn't load your custom font, it drops to Georgia. If Georgia fails, Times New Roman. The email still looks decent everywhere. The stack is doing the real work.

Web-safe fonts that actually render reliably across clients:

• Arial, Helvetica (clean, sans-serif, works everywhere)
• Georgia, Times New Roman (classic serif options)
• Verdana (slightly wider, readable at small sizes)
• Trebuchet MS (slightly more personality than Arial, still safe)
• Courier New (code or monospace contexts)

For body text, 14 to 16px is the minimum you should consider. Many designers go to 16px as the default now, because a chunk of your list is reading on a phone while walking. Headers can sit at 22 to 28px without feeling oversized.

On the mobile side, the single most common mistake is link and button sizing. A 10px text link is nearly impossible to tap accurately on a phone screen. Buttons should have enough padding that the tap target is at least 44 by 44 pixels (the Apple Human Interface Guideline recommendation). Spacing between interactive elements matters too. Two links stacked close together is a frustration waiting to happen.

Now your email layout should also reflow at smaller screen widths. A fixed 600px wide template looks fine on desktop but forces horizontal scrolling on mobile. Use a single-column layout for mobile, or a responsive approach that stacks multi-column content. If you're using a framework, MJML handles a lot of this automatically and saves you from writing painful media queries by hand.

One thing worth testing properly: desktop previews lie. Load your email on an actual phone. The rendering differences between a preview tool and a real device (especially on Gmail's Android app) can still surprise you. Also check whether your accessibility choices hold up on mobile, since contrast and font size interact differently on small screens.

Want to check how your subject line and content look before you send? Our accessibility checker can flag contrast and readability issues in your template for free.