Websichere E-Mail-Schriften und die passenden Stacks
Websichere E-Mail-Schriften
Websichere E-Mail-Schriften: Stacks für jedes Postfach | We.Inc
Font-Stacks für HTML-E-Mails, die in Gmail, Outlook und Apple Mail funktionieren, welche Postfächer Webfonts laden, und eine Vorschau, mit der du jeden Stack auf deinem eigenen Gerät testest.
Websichere E-Mail-Schriften sind Schriftarten, die auf Windows und macOS bereits installiert sind, etwa Arial, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman und Courier New. Da Gmail und Yahoo Mail eigene Webfonts ignorieren, schreib jede font-family als Stack, der mit einer dieser Schriften und einer generischen Familie endet.
Schriften, die auf Windows 11 und macOS Sequoia installiert sind
Schrift
Typ
Geeignet für
Arial
Serifenlos
Fließtext, die sicherste Standardwahl
Verdana
Serifenlos
Kleiner Text; breite Buchstaben bleiben lesbar
Tahoma
Serifenlos
Kompakte Labels und Footer
Trebuchet MS
Serifenlos
Überschriften mit etwas Charakter
Georgia
Serif
Redaktionelle Newsletter und lange Texte
Times New Roman
Serif
Förmliche Mitteilungen
Courier New
Monospace
Codes, Bestellnummern, Belege
Eine E-Mail kann nicht in jedem Postfach Schriften herunterladen wie eine Webseite. Was Leser sehen, hängt von ihrer Mail-App und den Schriften auf ihrem Gerät ab, der Trick ist also ein Font-Stack, der sauber auf Alternativen zurückfällt. Wähle unten einen Stack, um ihn mit deinem eigenen Text in der Vorschau zu sehen, und kopiere das CSS.
Wähle einen Stack. Die Vorschau nutzt die Schrift aus dem Stack, die dein Gerät hat, genau wie eine Mail-App.
Gib deine Betreffzeile oder Überschrift als Beispieltext ein und passe die Größe an.
Kopiere die font-family-Zeile und setze sie als Inline-Style in jede Textzelle, nicht nur in einen style-Block.
Sende einen Test an die Postfächer, die deine Liste wirklich nutzt, denn die Darstellung unterscheidet sich je nach App.
Setze die font-family inline auf jedes td oder p mit Text, damit jeder Textblock seinen eigenen Stack trägt, statt von einem style-Block abzuhängen.
Setze Schriftnamen mit Leerzeichen in Anführungszeichen, etwa "Trebuchet MS", und beende jeden Stack mit einer generischen Familie wie sans-serif oder serif.
Wenn du eine Markenschrift mit @font-face lädst, wähle einen websicheren Fallback mit ähnlicher Breite, damit sich Zeilenumbrüche kaum verschieben.
Segoe UI wird mit Windows ausgeliefert, aber nicht mit macOS, und Helvetica mit macOS, steht aber nicht in der Liste von Windows 11. Kombiniere sie in einem Stack mit Arial.
Häufige Fragen
Welche Schriften sind für HTML-E-Mails sicher?
Schriften, die auf beiden großen Desktop-Systemen vorhanden sind: Arial, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman und Courier New stehen alle in der Schriftliste von Microsoft für Windows 11 und in der Schriftliste von Apple für macOS Sequoia.
Unterstützt Gmail eigene Webfonts?
Nein. caniemail.com führt @font-face in Gmail als nicht unterstützt, Gmail nutzt stattdessen eigene Schriften. Der Fallback deines Stacks ist das, was Gmail-Leser sehen, wähle ihn also sorgfältig.
Welche E-Mail-Apps zeigen Webfonts an?
Laut caniemail.com unterstützen Apple Mail auf macOS und iOS, Thunderbird und ProtonMail @font-face. Gmail, Yahoo Mail und AOL nicht, und die Unterstützung in Outlook.com ist als teilweise aufgeführt.
Warum zeigt Outlook unter Windows Times New Roman an?
Das klassische Outlook für Windows akzeptiert die @font-face-Regel, ignoriert aber externe Schriften, und caniemail.com merkt an, dass Text dann auf Times New Roman zurückfallen kann. Eine websichere Schrift weiter vorne im Stack verhindert das.
Wie groß sollte Fließtext in E-Mails sein?
Es gibt keine offizielle Regel. Viele Designer nutzen 14 bis 16 Pixel für Fließtext und mehr für Überschriften; teste auf einem Handy, wo kleiner Text am schwersten zu lesen ist.
Wie eine Schrift aus dem Stack gewählt wird
font-family ist eine Prioritätenliste. Die Mail-App geht sie von links nach rechts durch und nutzt Zeichen für Zeichen die erste Schrift, die sie findet, sodass ein Stack jeden Leser abdeckt, solange er mit einer Schrift endet, die alle haben.
MDN rät, die Liste immer mit einer generischen Familie wie sans-serif abzuschließen. Wenn sonst nichts passt, wählt die App trotzdem eine sinnvolle Schrift statt ihrer eigenen Standard-Serifenschrift.
Trotzdem eine Markenschrift verwenden
Du kannst einen Webfont in einem style-Block für die Apps deklarieren, die ihn unterstützen, und danach websichere Schriften auflisten. Leser in Apple Mail sehen die Markenschrift, Gmail-Leser den Fallback.
Halte wichtigen Text wie Preise und Buttons als echten Text statt als Bilder von Text. So bleibt er bei deaktivierten Bildern lesbar und funktioniert mit Screenreadern.
Welche Postfächer Webfonts laden
Unterstützung für @font-face laut caniemail.com, zuletzt aktualisiert am 19. Dezember 2023. Prüfe die aktuelle Seite, bevor du dich darauf verlässt, denn Mail-Apps ändern sich.
Unterstützung von @font-face nach E-Mail-Client
E-Mail-Client
@font-face
Apple Mail (macOS 12.2 und neuer, iOS 10.3 und neuer)
Unterstützt
Thunderbird
Unterstützt
ProtonMail
Unterstützt
Outlook für Windows (2003 bis 2019)
Regel akzeptiert, externe Schriften ignoriert
Outlook.com
Teilweise
Gmail
Nicht unterstützt
Yahoo Mail
Nicht unterstützt
AOL
Nicht unterstützt
Kopierbarer Schriftcode für E-Mails
Inline-Font-Stack auf einer Tabellenzelle
Der Stack steht im Inline-Style der Zelle selbst und hängt daher nicht von einem style-Block im head ab.
Markenschrift mit websicherem Fallback
Apps, die @font-face unterstützen, zeigen die Markenschrift; alle anderen fallen auf Trebuchet MS, Arial und schließlich eine beliebige serifenlose Schrift zurück.
Vorschau für E-Mail-Font-Stacks
Wähle einen Stack und gib deinen eigenen Text ein. Die Vorschau nutzt die auf diesem Gerät installierten Schriften, so wie eine Mail-App aus dem Stack wählt.
Font-Stack
Beispieltext
Größe: {n}px
CSS zum Inline-Einfügen
Deine Bestellung ist unterwegs. Verfolge sie jederzeit in deinem Konto.