Typografie in E-Mail-Marketing: Schriftgröße, Kontrast und Lesbarkeit

E-Mail-Typografie beeinflusst, ob Empfänger eine Nachricht lesen oder wegklicken. Schriftgröße, Kontrast und Zeilenhöhe entscheiden darüber, wie schnell sich ein Text erschließt – und ob der Leser bis zum Call-to-Action kommt. Wer diese drei Parameter sauber einstellt, hat die technische Grundlage für hohe Lesbarkeit gelegt, bevor der erste Betreff getextet ist.

Das Wichtigste in Kürze

• Schriftgröße unter 16 px zwingt mobile Nutzer zum Zoomen und erhöht die Absprungrate.
• Der WCAG-Mindestkontrast von 4,5:1 gilt als verbindlicher Maßstab; viele Grautöne in Standard-Templates fallen darunter.
• Zeilenhöhe zwischen 1,4 und 1,6 der Schriftgröße ist der übliche Standard für angenehme Lesbarkeit auf Bildschirmen.
• Maximal zwei Schriftfamilien pro E-Mail – immer mit vollständigem Fallback-Stack, weil Web-Fonts in vielen E-Mail-Clients nicht geladen werden.
• Typografische Parameter lassen sich in ActiveCampaign isoliert testen; ein A/B-Test zeigt, welche Einstellung tatsächlich einen Unterschied macht.

Warum Schriftentscheidungen in E-Mails eine andere Logik haben als auf Websites

Auf einer Website kann CSS für jede Bildschirmgröße angepasst werden, Fonts werden zuverlässig aus externen Quellen geladen, und der Browser gibt vollständige Kontrolle über das Rendering. In E-Mail-Clients ist das anders. Gmail, Outlook und Apple Mail verarbeiten CSS unterschiedlich – manche ignorieren bestimmte Eigenschaften, andere skalieren Text automatisch hoch, wenn er zu klein erscheint.

Der größere Teil der E-Mails wird heute auf Smartphones geöffnet. Das verändert die Anforderungen grundlegend: Textelemente müssen fingerfreundlich sein, ohne Zoom lesbar und kurz genug, damit der Leser nicht horizontal scrollt. Ein Desktop-Template, das unverändert auf Mobilgeräte ausgeliefert wird, produziert häufig unlesbaren Fließtext mit zu langen Zeilen und zu kleiner Schrift.

Hinzu kommt, dass E-Mail-Clients den HTML-Code filtern und teilweise stark einschränken. Outlook für Windows verwendet die Word-Engine statt eines Browser-Renderers, was dazu führt, dass CSS-Eigenschaften wie line-height oder font-relative Größenangaben sich anders verhalten als erwartet. Diese technischen Einschränkungen sind der Grund, warum E-Mail-Typografie eigene Regeln hat – und warum Entscheidungen, die auf Websites problemlos funktionieren, in E-Mails scheitern können.

Schriftgröße, Zeilenhöhe und Zeilenlänge – die Basis guter Lesbarkeit

16 px gilt als Untergrenze für fließenden Lesetext in E-Mails. Auf Viewports unter 400 px Breite ist alles darunter ohne Zoomen kaum lesbar. iOS skaliert Schriften, die in Formularen unter 16 px gesetzt sind, automatisch hoch, damit der Nutzer nicht zoomen muss – ein Mechanismus, der verdeutlicht, dass Apple selbst 16 px als kritische Schwelle definiert. Für E-Mail-Fließtext gilt dieselbe Logik: Wer 14-px-Text auf einem 375-px-Viewport liest, muss zoomen. Wer zoomen muss, verliert den Lesefluss.

Die Größenhierarchie im Template sollte aus vier Stufen bestehen:

• Hauptüberschrift: 26–30 px, fett oder medium gewichtet
• Zwischenüberschriften im Body: 20–24 px
• Fließtext und Button-Beschriftung: 16–18 px
• Footer (Abmeldelink, Impressum): 13–14 px als zulässige Ausnahme

Mehr als vier Größenstufen schaffen optische Unordnung statt Hierarchie. Wer zwischen normalem Fließtext und einem kleinen Hinweis differenzieren will, erreicht das über Schriftgewicht (regular vs. bold) und Farbe – nicht über eine weitere Größe.

Relative Größenangaben oder px-Werte in E-Mails?

In Standard-E-Mail-Clients sind px-Werte zuverlässiger als relative Angaben wie em oder rem. Kein einheitlicher Eltern-Container ist definiert, und manche Clients ignorieren rem-Werte vollständig. Im ActiveCampaign-Template-Editor arbeitest du deshalb mit px-Werten für kritische Textbereiche. Em-Werte sind nur dann sinnvoll, wenn ein explizit definierter Elternblock mit bekannter Schriftgröße vorhanden ist – das ist in E-Mail-Templates die Ausnahme, nicht die Regel.

Zeilenhöhe: wie eng ist zu eng?

Die Zeilenhöhe (line-height) bestimmt den vertikalen Abstand zwischen Textzeilen. Zu eng bedeutet, dass das Auge Schwierigkeiten hat, der Leserichtung zu folgen, ohne in die benachbarte Zeile zu springen. Zu weit lässt den Text als Ansammlung isolierter Zeilen wirken statt als zusammenhängendes Argument.

Der Korridor zwischen 1,4 und 1,6 der Schriftgröße ist der Bereich, in dem Fließtext für digitale Medien gesetzt wird. Bei 16 px Schriftgröße bedeutet das eine Zeilenhöhe zwischen 22,4 px und 25,6 px – in der Praxis also 23–26 px. In Überschriften wird der Korridor enger gewählt (1,2–1,35), weil große Schrift ohnehin mehr visuelle Luft hat.

Zeilenlänge: wie viele Zeichen passen auf eine Zeile?

Die typografische Faustregel nennt 45–75 Zeichen als optimale Zeilenlänge für Fließtext. Kürzere Zeilen unterbrechen den Lesefluss durch häufige Zeilensprünge; längere Zeilen machen es schwerer, nach einem Zeilenende die nächste Zeile zu finden. Für E-Mails bedeutet das: Ein Content-Bereich mit 600 px Breite und 16 px Schriftgröße in einem nicht-zu-kompakten Font kommt auf etwa 70–80 Zeichen pro Zeile. Ein Innenabstand von 40–60 px links und rechts bringt die Zeilen in den optimalen Bereich, ohne den Bereich zu eng zu machen.

Auf mobilen Viewports unter 480 px Breite schrumpft die Zeilenlänge von selbst, wenn das Template responsiv aufgebaut ist. Probleme entstehen, wenn ein fixes Breiten-Layout auf kleinen Bildschirmen horizontales Scrollen erzwingt – das ist der Fall, wenn der Content-Container eine feste Breite von 600 px hat und keine Media Query ihn auf 100 % Breite setzt.

Kontrast – der WCAG-Standard als verbindlicher Maßstab

Die Web Content Accessibility Guidelines (WCAG) 2.1 definieren für normalen Text (unter 18 pt bzw. 14 pt fett) ein Mindest-Kontrastverhältnis von 4,5:1 zwischen Text- und Hintergrundfarbe. Für großen Text (18 pt und größer oder 14 pt fett und größer) gilt ein Mindestkontrast von 3:1. Diese Anforderungen sind primär auf Webanwendungen ausgerichtet, gelten aber branchenweit als Maßstab für alle digitalen Medien – einschließlich E-Mails.

Wie misst man Kontrast in der Praxis? Das kostenlos nutzbare Tool WebAIM Contrast Checker (webaim.org/resources/contrastchecker) berechnet das Verhältnis aus zwei Hex-Werten. Wer #999999 auf #FFFFFF testet, erhält ein Verhältnis von 2,85:1 – deutlich unterhalb des Minimums. Dieser Grauton kommt in zahlreichen Standard-E-Mail-Templates vor, weil er ästhetisch dezent wirkt. Bei schlechten Lichtverhältnissen, auf älteren Bildschirmen oder bei nachlassender Sehschärfe ist er kaum noch lesbar. Die Prüfung dauert weniger als eine Minute und kostet nichts.

Dark Mode – eine neue Variable im Kontrast-Kalkül

Apple Mail, Outlook für iOS und viele Android-Mail-Apps bieten einen Dark Mode. Manche Clients invertieren dabei Farben automatisch; andere lassen das HTML-Design unverändert, sodass schwarzer Text auf einem ebenfalls schwarz gewordenen Hintergrund erscheinen kann. Eine kontrollierte Dark-Mode-Unterstützung erfordert CSS-Media-Queries wie @media (prefers-color-scheme: dark), die von Client zu Client unterschiedlich interpretiert werden und deren Unterstützung deshalb nicht vorausgesetzt werden kann.

Der praktische Umgang: Teste dein Template sowohl im hellen als auch im dunklen Modus auf einem echten Gerät. ActiveCampaigns Vorschaufunktion zeigt Dark-Mode-Darstellungen nicht zuverlässig für alle Clients. Wer häufig auf Apple Mail oder iOS-Mail setzt, sollte auf einem iPhone mit aktiviertem Dark Mode testen, bevor eine Kampagne versendet wird.

Kontrast bei farbigen Call-to-Action-Buttons

Für Buttons ist der relevante Kontrast derjenige zwischen Schriftfarbe und Button-Hintergrundfarbe – nicht der Kontrast zwischen Button und E-Mail-Hintergrund. Ein orangefarbener Button mit weißer Beschriftung hat häufig ein geringeres Kontrastverhältnis als erwartet; das hängt vom genauen Orangeton ab. Ein leicht dunkleres Orange kann die Lesbarkeit der Beschriftung deutlich verbessern, ohne die Signalwirkung des Buttons zu mindern. Jede Farbkombination sollte mit dem Contrast Checker geprüft werden, bevor das Farbsystem im Template festgelegt wird.

Schriftfamilien – was in E-Mails tatsächlich ankommt

Der wichtigste Unterschied zwischen E-Mail-Typografie und Web-Typografie ist die eingeschränkte Unterstützung benutzerdefinierter Web-Fonts. Google Fonts und ähnliche Dienste werden über einen @import-Tag oder einen link-Tag eingebunden und funktionieren nur in Clients, die externe Ressourcen zulassen. Gmail – in vielen Verteilerkreisen der häufigste Client – blockt externe Stylesheets im standardmäßigen HTML-Rendering vollständig. Apple Mail auf macOS und Outlook auf dem Mac unterstützen Web-Fonts hingegen. Das Ergebnis: Benutzerdefinierte Schriften kommen bei einem Teil der Empfänger an, beim Rest nicht.

Konsequenz für die Praxis: Wer einen Branding-Font einsetzt, braucht in jedem Fall einen vollständigen Fallback-Stack. Fehlt der Fallback, bestimmt der E-Mail-Client die Schrift selbst – häufig Arial oder Times New Roman, was selten dem Designentwurf entspricht.

Web-sichere Schriften für E-Mails

Folgende Schriften sind auf dem Großteil der Geräte vorinstalliert und werden ohne Ladevorgang gerendert:

• Arial – sans-serif, breit unterstützt auf Windows, macOS, iOS und Android; solide Basiswahl für Fließtext
• Helvetica – auf macOS und iOS vorinstalliert; auf Windows fällt der Client auf Arial zurück; im Font-Stack deshalb immer mit Arial kombinieren
• Verdana – sans-serif, ausdrücklich für Bildschirmlesbarkeit entwickelt; breitere Buchstaben verbessern die Lesbarkeit bei kleinen Größen
• Georgia – serif, auf allen gängigen Plattformen verfügbar; gut für Überschriften in Kontexten, die Seriosität und Tradition signalisieren sollen
• Trebuchet MS – sans-serif, auf Windows und macOS verfügbar; auf mobilen Geräten nicht garantiert, deshalb stets mit Arial als Fallback
• Times New Roman – serif, auf fast allen Plattformen vorhanden; im B2B-Kontext oft als zu traditionell wahrgenommen, aber in bestimmten Branchen gezielt einsetzbar

Für deutschsprachige Geschäftskommunikation ist ein Stack wie 'Helvetica Neue', Arial, sans-serif eine solide Ausgangswahl für Fließtext. Wer Branding-Schriften einsetzen möchte, kombiniert sie: 'Nunito', 'Helvetica Neue', Arial, sans-serif – wer Nunito nicht laden kann, bekommt Helvetica Neue, und das Layout bleibt stimmig, solange die Buchstabenbreite ähnlich ist.

Wann Serifenschriften für E-Mails sinnvoll sind

Serifenschriften gelten auf Bildschirmen mit normaler Auflösung als etwas schwerer lesbar, weil die feinen Serifen verschwimmen können. Auf Retina-Displays fällt dieser Unterschied deutlich geringer aus. Georgia als Heading-Font mit Arial als Fließtext-Font ist eine kombinierte Entscheidung, die ohne Web-Font-Unterstützung auskommt und dennoch eine klare typografische Hierarchie erzeugt. Im Fließtext – besonders bei Schriftgrößen unter 16 px – ist Sans-Serif in der Regel die zuverlässigere Wahl.

Typografie in ActiveCampaign einrichten – Schritt für Schritt

Diese Anleitung bezieht sich auf den Drag-and-Drop-Template-Editor von ActiveCampaign. Am Ende des Prozesses hast du ein Template mit konsistenter Schriftgröße, Zeilenhöhe und ausreichendem Kontrast, das auf Mobilgeräten ohne Zoomen lesbar ist.

1. Template öffnen: Kampagnen → Erstellen → Kampagnentyp „Standard" → Template auswählen oder neues Template erstellen.
2. Globale Stile aufrufen: Im Editor oben rechts das Pinsel-Symbol oder „Stil" anklicken. Hier sind die Grundeinstellungen für das gesamte Template hinterlegt.
3. Schriftart festlegen: Im Dropdown „Font-Family" eine Web-sichere Schrift wählen oder einen Stack mit Fallback eintragen, z. B. 'Helvetica Neue', Arial, sans-serif.
4. Schriftgröße auf 16 px setzen: Unter „Font Size" oder „Body Font Size" den Wert auf mindestens 16 px stellen. Überschriften-Größen auf 22–26 px anpassen.
5. Zeilenhöhe auf 1,5 setzen: Manche Versionen bieten den Multiplikator direkt an; andere nur px-Werte. Bei 16 px Schrift entspricht 1,5 einer Zeilenhöhe von 24 px.
6. Textfarbe prüfen: Den aktuellen Hex-Wert notieren und mit WebAIM Contrast Checker gegen den E-Mail-Hintergrund (#FFFFFF) testen. Nur Werte mit einem Kontrastverhältnis ≥ 4,5:1 übernehmen. #333333 auf Weiß liegt bei 12,63:1; #666666 auf Weiß bei 5,74:1 – beide bestehen.
7. Button-Kontrast prüfen: Die Schriftfarbe auf dem Button gegen die Button-Hintergrundfarbe testen – nicht nur die Button-Farbe gegen den E-Mail-Hintergrund.
8. Mobile Vorschau aktivieren: Im Editor das Smartphone-Symbol unten oder links anklicken. Überprüfen, ob Fließtext ohne horizontales Scrollen lesbar ist und ob die Schrift groß genug wirkt.
9. Test-E-Mail auf einem echten Gerät öffnen: Der Editor-Preview ersetzt keinen echten Mobiltest. Eine Test-E-Mail an eine eigene Adresse senden und auf dem Smartphone öffnen – Schriftgröße und Kontrast direkt am Gerät beurteilen.

A/B-Tests für typografische Entscheidungen strukturieren

Typografische Parameter lassen sich direkt in ActiveCampaign als A/B-Test anlegen. Wichtig dabei: Nur eine Variable gleichzeitig testen. Wer Schriftgröße und Zeilenhöhe gleichzeitig ändert, weiß am Ende nicht, welche Änderung den Unterschied gemacht hat. Sinnvoll isolierbare Tests:

• Schriftgröße: 16 px vs. 18 px im Fließtext
• Schriftfarbe: #333333 vs. #000000
• Zeilenhöhe: 1,4 vs. 1,6
• Button-Schriftgröße: 16 px vs. 18 px

Den methodischen Rahmen für A/B-Tests – Stichprobengröße, Laufzeit, statistische Signifikanz – beschreibt der Leitfaden zum A/B-Test im E-Mail-Marketing mit ActiveCampaign ausführlicher.

Typische Fehler und Grenzen der Typografie-Optimierung

Zu viele Schriftarten in einem Template

Viele E-Mail-Templates entstehen iterativ über Monate: Unterschiedliche Personen fügen Elemente hinzu, ohne das Gesamtbild im Blick zu haben. Das Ergebnis sind drei Schriften in fünf Größen, die keine klare Hierarchie bilden. Der Leser registriert das als visuelles Rauschen, ohne es benennen zu können. Die Regel: Maximal zwei Schriftfamilien pro Template. Hierarchie entsteht durch Größe und Schriftgewicht (regular, bold), nicht durch zusätzliche Schriften.

Fehlender Fallback-Stack

Wenn ein Template nur font-family: 'Montserrat' ohne Fallback definiert und Montserrat nicht geladen wird, bestimmt der E-Mail-Client die Schrift. Das kann auf Gmail Android Roboto sein, auf Outlook für Windows Times New Roman. Weder passt dann die Buchstabenbreite noch die Zeilenlänge zum ursprünglichen Layout. Der Fix ist einzeilig: 'Montserrat', 'Helvetica Neue', Arial, sans-serif – ein Eingriff, der verhindert, dass das Template bei einem großen Teil der Empfänger unbeabsichtigt anders aussieht.

Kontrastarmer Footer

Footer-Texte mit Abmeldelink, Impressum und rechtlichem Hinweis werden häufig sehr klein und sehr grau gesetzt, damit sie optisch zurücktreten. Das ist gestalterisch verständlich, aber die Kontrastvorgabe gilt auch hier. #AAAAAA auf #FFFFFF ergibt ein Verhältnis von 2,32:1 – weit unter 4,5:1. Ein dunklerer Grauton wie #767676 erreicht knapp das Minimum; #555555 liegt deutlich darüber und ist gleichzeitig zurückhaltend genug, um den Footer nicht optisch zu übergewichten.

All-Caps-Texte als Betonungsmittel

Großbuchstaben verringern die Lesbarkeit, weil das Auge keine Wortform erkennen kann und jeden Buchstaben einzeln verarbeitet. Bei Headlines mit zwei oder drei Wörtern ist das vertretbar; für Fließtext-Betonungen und längere Button-Beschriftungen ist Fettdruck die bessere Alternative. „JETZT ANMELDEN" liest sich langsamer als „Jetzt anmelden" – und der optische Effekt ist derselbe, wenn der Button deutlich kontrastiert.

Zu enge Zeilenhöhe bei kleiner Schrift

14-px-Text mit einer Zeilenhöhe von 1,2 liegt so eng, dass das Auge beim Lesen in die benachbarte Zeile springt. Dieser Fehler entsteht oft, wenn Templates aus Print-Designs übernommen werden oder auf einem großen Desktop-Monitor gesetzt wurden – dort fällt die Enge kaum auf. Auf einem 5-Zoll-Display ist sie deutlich spürbar. Die Lösung: Zeilenhöhe auf mindestens 1,4 setzen, bei kleinen Schriftgrößen eher 1,5–1,6.

Wann Typografie-Optimierung nicht der richtige Hebel ist

Typografie ist eine notwendige, aber nicht hinreichende Bedingung für gute E-Mail-Performance. Ein typografisch einwandfrei gesetzter Text, der inhaltlich irrelevant ist, wird trotzdem überflogen. Wenn die Öffnungsrate niedrig ist, liegt das Problem beim Betreff oder Absendernamen – Typografie spielt erst nach dem Öffnen eine Rolle. Wenn die Klickrate trotz guter Lesbarkeit niedrig bleibt, liegt das Problem am Angebot, an der Segmentierung oder am Timing. Wenn in einem A/B-Test Typografie-Variablen und Inhaltsvariablen gleichzeitig verändert werden, ist das Ergebnis nicht interpretierbar.

Die sinnvolle Reihenfolge: Betreff und Absender → Segmentierung → Inhalt → Typografie und Gestaltung. Wer Typografie optimiert, bevor die ersten drei Parameter stimmen, investiert am falschen Ende des Trichters.

Häufige Fragen

Welche Schriftgröße ist für E-Mails auf dem Smartphone richtig?

16 px für Fließtext ist die Untergrenze, bei der auf gängigen Smartphones ohne Zoom gelesen werden kann. 17 oder 18 px geben etwas mehr Spielraum, besonders bei inhaltlich dichten E-Mails. Für Buttons und Call-to-Actions gilt dieselbe Untergrenze; Apple Human Interface Guidelines empfehlen eine Touch-Zielfläche von mindestens 44 × 44 Punkt – ein zu klein gesetzter Button-Text lässt die Zielgröße kleiner erscheinen als sie ist, was die Klickrate auf Touchscreens spürbar beeinflusst.

Warum werden meine Schriften im E-Mail-Client nicht angezeigt?

Die häufigste Ursache: Der E-Mail-Client blockt das Laden externer Ressourcen. Gmail in der Web-Version lässt keine @import- oder link-Tags durch, die auf externe Font-Dateien zeigen. Google Fonts sind bei Gmail-Empfängern grundsätzlich nicht verfügbar; der Client greift auf den Fallback-Stack zurück. Fehlt der Fallback, wählt der Client die Schrift selbst – meist Arial oder Times New Roman. Die Lösung: immer einen vollständigen Font-Stack mit Web-sicheren Fallback-Schriften definieren.

Wie teste ich den Kontrast meiner E-Mail-Farben?

Das Tool WebAIM Contrast Checker (webaim.org/resources/contrastchecker) ist kostenlos und erfordert keine Anmeldung. Du gibst die Hex-Werte für Textfarbe und Hintergrundfarbe ein; das Tool zeigt sofort, ob WCAG-AA-Kontrast (4,5:1) oder WCAG-AAA-Kontrast (7:1) erreicht ist. Für Buttons prüfst du Schriftfarbe gegen Button-Hintergrundfarbe – diese Kombination wird häufig übersprungen, obwohl sie für die Lesbarkeit von Call-to-Actions entscheidend ist.

Sind Serifenschriften für E-Mails veraltet?

Nein, aber ihr Einsatzkontext ist entscheidender als auf der Website. Georgia in Überschriften funktioniert gut für Branchen, die Seriosität signalisieren wollen – Finanzdienstleistungen, Beratung, Fachjournalismus. Im Fließtext bei kleinen Schriftgrößen auf Bildschirmen mit normaler Auflösung sind Sans-Serif-Schriften meist leichter lesbar, weil die feinen Serifen verschwimmen können. Auf Retina-Displays fällt dieser Unterschied deutlich geringer aus.

Kann ich in ActiveCampaign verschiedene Schriftgrößen für Desktop und Mobil einrichten?

Im Standard-Drag-and-Drop-Editor sind geräteabhängige Schrifteinstellungen nicht über die Benutzeroberfläche zugänglich. Im HTML-Editor kannst du CSS-Media-Queries einbinden, die auf @media screen and (max-width: 480px) reagieren und separate Schriftgrößen definieren. Diese Methode erfordert HTML-Kenntnisse und wird nicht von allen Clients korrekt gerendert – Outlook für Windows ignoriert Media Queries vollständig. Für die meisten Anwendungsfälle ist eine responsive Basis-Schriftgröße von 16 px ohne geräteabhängige Unterscheidung die einfachere und zuverlässigere Lösung.

Wie viele Schriftarten sind in einer E-Mail sinnvoll?

Zwei Schriftfamilien gelten als Maximum: eine für Überschriften, eine für Fließtext. Innerhalb dieser Familien wird Hierarchie über Größe und Schriftgewicht hergestellt, nicht über weitere Schriften. Mehr als zwei Familien produzieren optische Unordnung, die Leser unbewusst als unprofessionell wahrnehmen – auch wenn sie den Grund nicht benennen können.

Typografie gehört zur Architektur der E-Mail, nicht zur Dekoration. Wer Schriftgröße, Kontrast und Zeilenhöhe einmal methodisch einrichtet und mit Fallback-Stacks absichert, schafft eine Grundlage, die bei jedem Versand wirkt – ohne bei jeder neuen Kampagne neu überdacht werden zu müssen. Wer das Template dabei auf eine saubere Grundlage stellen möchte, findet in der Anleitung zu ActiveCampaign Vorlagen richtig nutzen den nächsten logischen Schritt.