メール用最高のフォント:Webセーフとフォールバック対応
Best Fonts for Email: Web-Safe and Fallback-Friendly
Typography on the web has made enormous progress over the past decade. Variable fonts, modern CSS font loading APIs, and robust CDN infrastructure have made it possible to deploy virtually any typeface with excellent performance and broad browser support. Email typography has not kept pace. In 2026, many of the same constraints that shaped email design in 2006 still apply: major email clients ignore web fonts entirely, strip @font-face declarations, or render CSS properties inconsistently across platforms. Designing email typography means accepting this reality and building with it rather than against it.
This guide covers the full landscape: which fonts work reliably as-is in email, which modern approaches have partial support worth exploiting, and how to build bulletproof font stacks that degrade gracefully across every email client your subscribers might be using.
Why Email Typography Is Complicated
The Client Fragmentation Problem
Web browsers share rendering engines — Blink powers Chrome, Edge, and most Chromium-based browsers; WebKit powers Safari; Gecko powers Firefox. The major browser engines converge more and more on standards every year. Email clients, by contrast, are a patchwork of incompatible rendering approaches with no convergence in sight.
Gmail renders HTML email using a modified version of the browser engine, but strips many CSS properties in the process. Apple Mail on macOS and iOS has excellent CSS support, including web fonts. Outlook on Windows (2016, 2019, and Microsoft 365 desktop) renders HTML email using Microsoft Word's rendering engine — yes, literally Word — which means HTML and CSS support is dramatically limited compared to any modern browser. Outlook on Windows does not support web fonts at all. Samsung Email uses WebKit. Yahoo Mail uses its own renderer. HEY uses its own renderer. Thunderbird's support is inconsistent across versions.
The practical consequence is that any font you load via @font-face or link from Google Fonts will display only in the email clients that support web fonts. Every other client will fall back to whatever system font it can find next in your font-family declaration. If you haven't built a thoughtful fallback stack, that means Times New Roman or the client's default, which is rarely what you designed for.
Why This Matters for Brand Consistency
For marketing emails, this fragmentation means that a significant portion of your audience — potentially the majority, depending on your list composition — sees a different typeface than the one you designed with. This isn't just aesthetic: different fonts have different metrics, so line lengths, line breaks, and text-to-element spacing all shift. A layout that looks perfectly balanced in Apple Mail can break badly in Outlook if you didn't account for Outlook's metric differences.
The best email typography strategy accepts this constraint and designs specifically for it. Use web-safe fonts as the foundation. Layer web font support as a progressive enhancement. Always test in actual email clients, not just browser previews.
Email Client Font Support in 2026
Understanding current support levels guides every decision in email font selection.
Apple Mail on macOS and iOS provides the best web font support of any major email client. It renders @font-face fonts reliably and supports Google Fonts served via standard import methods. Apple ecosystem users — iPhone, iPad, Mac — generally see web fonts correctly in email.
Gmail web (in Chrome) supports web fonts loaded via @font-face but only when the font is referenced using an https:// URL, not a Google Fonts @import URL. Gmail on iOS and Android uses the native app's renderer and has less consistent web font support. Gmail's behavior around CSS class-based font declarations has improved significantly in recent years but still requires careful testing.
Outlook on Windows is the most restrictive major client. Any version of Outlook that uses Microsoft Word as its rendering engine (Outlook 2007 through current Microsoft 365 desktop) ignores @font-face entirely and renders all text using the system font stack. Outlook on Mac has better support than Windows Outlook. Outlook on the web (OWA) behaves like a modern browser.
Samsung Email, HEY, and most other mobile clients generally fall into the Apple Mail / modern-browser category for web font support. Thunderbird and older enterprise clients vary by version.
The practical conclusion: design for web-safe fonts as your baseline. Any subscriber using Windows Outlook, which represents a meaningful share of professional email lists, will see your fallback stack. It should look good.
Best Web-Safe Fonts for Email
Web-safe fonts are fonts that are pre-installed on virtually every operating system. They require no downloading, load instantly, and render consistently (with minor differences) across all email clients. The following are the strongest choices for professional email typography.
Georgia
Georgia remains the finest choice for serif email typography. Designed by Matthew Carter specifically for screen rendering in 1993, it predates modern font optimization but embodies many of the same principles: generous x-height, open apertures, and carefully hinted strokes that remain legible at small email body text sizes. Georgia is available on Windows, macOS, iOS, and Android, making it genuinely universal.
Georgia works well for newsletter body text, particularly in longer-form content where its warm, book-like personality enhances the reading experience. It pairs naturally with Arial or Helvetica Neue for headings. The one limitation is that Georgia feels traditional — it doesn't project a modern, technology-forward brand image. For SaaS, fintech, or technology company communications, it can feel slightly dated. For editorial newsletters, media brands, and service businesses, it's often the best available choice.
Arial and Helvetica Neue
Arial is the universal sans-serif. It's installed on every Windows system since Windows 95 and every macOS since the early Intel era. Its letterforms are clean, neutral, and well-hinted for screen rendering. Arial is not as refined as many web fonts, but it's reliable and widely understood as a professional typographic default. The kerning and spacing in Arial is acceptable rather than excellent, which is why professional designers rarely choose it when better options are available.
Helvetica Neue is the macOS equivalent — it ships on every Mac but is not available on Windows. In a font stack, Helvetica Neue should appear before Arial to ensure Mac users see the more refined version:
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
This text uses Helvetica Neue on Mac, Arial on Windows.
</p>
Verdana
Verdana, also designed by Matthew Carter for Microsoft, was purpose-built for maximum legibility at small screen sizes. It has an exceptionally large x-height, wide letter spacing, and open letterforms that remain readable even at sizes smaller than typical email body text. Verdana at 12px is more legible than most fonts at 14px.
Its limitation is personality: Verdana reads as very "late 1990s web," which can undermine modern brand aesthetics. For email use cases where legibility is the primary concern — transactional emails, invoices, receipts, legal notices — Verdana is a strong choice. For brand marketing emails targeting design-conscious audiences, its dated associations are a real disadvantage.
Using Google Fonts in Email (When Possible)
Web fonts in email work in Apple Mail, modern Gmail (web and iOS), and a subset of other modern clients. The correct implementation uses @import inside a <style> tag in the email's <head>, combined with a robust font-family fallback:
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
</style>
</head>
In this implementation, clients that support web fonts will load and render Roboto. Clients that don't support web fonts (Windows Outlook, some Android Gmail) will skip to Helvetica Neue or Arial. The visual result will be slightly different, but both should be legible and professional.
The best Google Fonts candidates for email, based on their similarity to common web-safe fallbacks and their general legibility in email rendering environments:
Roboto is the first choice for most modern email. It's similar enough to Arial that the swap between Roboto and Arial fallback doesn't cause significant layout shifts. Its weight range makes it versatile across header and body text roles. Modern, clean, and widely recognized.
Open Sans is another reliable choice. Its warm, humanist character distinguishes it from Arial without creating jarring transitions when the Arial fallback activates. Open Sans has excellent readability at email body text sizes (14–16px) and a full weight range.
Lato provides a similar profile — humanist sans-serif, widely distributed, reliable legibility, friendly visual character. Its slightly narrower default spacing than Open Sans can be an advantage in email layouts where horizontal space is constrained.
Noto Sans is the best choice for multilingual email lists. It provides consistent visual quality across scripts and degrades gracefully to system fonts in non-supporting clients.
Building Bulletproof Fallback Stacks
A bulletproof email font stack plans for three distinct scenarios: (1) web font loads successfully, (2) web font fails but a common system font is available, (3) neither applies and the client renders its own default. The stack should produce acceptable results in all three scenarios.
The hierarchy should be: preferred web font → closest system font equivalent → generic family. Here are practical stacks for common scenarios:
<!-- Modern sans-serif email: Roboto-first -->
<p style="font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6;">
<!-- Editorial/newsletter email: Georgia-first for warmth -->
<p style="font-family: Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 1.7;">
<!-- Open Sans with system UI fallback -->
<p style="font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.6;">
<!-- Lato with comprehensive fallback -->
<p style="font-family: 'Lato', 'Helvetica Neue', Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 1.6;">
The -apple-system and BlinkMacSystemFont entries in the Open Sans stack above serve a specific purpose: in email clients that completely ignore web fonts but use a WebKit-based renderer (some mobile clients), these system font aliases will resolve to San Francisco on Apple devices and Roboto on Android, ensuring that the visual result is a high-quality system font rather than falling through to a legacy default like Arial.
For more on building effective font stacks for web contexts, see our CSS font stacks best practices guide.
Email Typography Best Practices
Size, Line Height, and Measure
Email body text should be set at a minimum of 14px and ideally 15–16px. Many email clients apply minimum font sizes that override smaller declarations, so setting below 14px is counterproductive. Line height of 1.5 to 1.7 is standard for body text — the slightly more generous range compared to web body text accounts for the fact that email column widths are typically narrower (600px standard) than browser viewport widths, which means more line breaks per sentence and a need for more breathing room between lines.
Heading text in email typically runs 22–28px for H1 equivalents and 18–22px for secondary headings. These sizes read well on both desktop and mobile email clients without requiring media queries to adjust, though responsive email CSS can certainly improve the result where supported.
Using Inline Styles
Many email clients strip <style> tag declarations, particularly in forwarded emails or when the email is processed by certain security gateways. Using inline styles for all critical font declarations is the safest approach for maximum compatibility. This means repeating your font-family and font-size declarations directly on every element rather than relying on class-based or cascading style inheritance:
<p style="margin: 0 0 16px 0; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.6; color: #333333;">
Your paragraph text here.
</p>
Readability in Email Contexts
Email reading environments are more fragmented than browser environments — emails are read on phones, tablets, desktop clients, web clients, and even printed. Typography choices that accommodate this diversity are those that prioritize legibility over aesthetics: clear weight differences between headings and body text, sufficient line-height, adequate font size for mobile rendering, and high contrast ratios between text and background.
Dark mode support in email is increasingly important as many email clients now offer or default to dark mode. Setting text colors and background colors explicitly (rather than relying on client defaults) and testing in dark mode versions of major clients ensures your typography remains legible regardless of the user's display preference.
For readers interested in broader font choices beyond web-safe email options, see our best Google Fonts for websites guide. And for a comparison of two of the most popular Google Fonts that appear in email fallback stacks, see Noto Sans vs Roboto. The principles of legibility, fallback planning, and honest client support assessment that guide email typography are the same principles that drive good web typography — they're just more constrained, more inescapable, and more demanding in the email environment.
Best Fonts For
Typography Terms
Try These Tools
Fonts Mentioned
Designed by Christian Robertson for Google's Material Design ecosystem, this neo-grotesque sans-serif is the most widely used typeface on the web and Android. Its dual-nature design balances mechanical precision with natural reading rhythm, making it equally at home in UI labels and long-form text. The variable font supports width and weight axes alongside Cyrillic, Greek, and extended Latin scripts.
Steve Matteson crafted this humanist sans-serif with upright stress and open apertures that prioritize legibility across screen sizes and resolutions. One of the most-deployed web fonts ever published, it strikes a neutral, professional tone well-suited to body copy, email templates, and web applications. Variable width and weight axes, plus Hebrew and Greek script support, make it a versatile multilingual workhorse.
Warsaw-based designer Lukasz Dziedzic created Lato with a dual personality: semi-rounded details in letters like 'a' and 'e' give it warmth up close, while the overall structure reads as clean and businesslike at a distance. These seemingly contradictory traits make it highly effective for corporate websites and marketing materials where trustworthiness and approachability must coexist. Available in five weights with matching italics, it has endured as a reliable body text choice for over a decade.
The Latin-primary entry in Google's Noto pan-Unicode project, this humanist sans-serif is engineered for maximum script harmony across Devanagari, Cyrillic, Greek, and Vietnamese alongside standard Latin. Variable width and weight axes allow fine-grained control for both compact UI labels and comfortable reading text. Its deliberate neutrality makes it the safest choice when a document must render correctly across diverse writing systems.