Typografie im Web-Design: Schriftgröße, Kontrast und Hierarchie für bessere Conversion

Typografie bestimmt, ob ein Leser deinen Text bis zum Handlungsaufruf verfolgt oder vorher abbricht. Schriftgröße, Zeilenabstand, Kontrast und Spaltenbreite entscheiden, wie schnell jemand die Orientierung verliert und wie leicht er dem Text folgen kann. Dieser Beitrag erklärt die Werte, die fachlich belastbar sind, und zeigt, wie du die Optimierung für Websites und ActiveCampaign-Kampagnen umsetzt.

Das Wichtigste in Kürze

• Zeilenabstand von mindestens 1,5× Schriftgröße ist die Untergrenze für lesbare Fließtexte; WCAG 2.1 SC 1.4.12 nennt diesen Wert als barrierefreie Mindestanforderung.
• Fließtext unter 16 px löst in iOS Safari automatisch den Browser-Zoom aus – eine technische, keine ästhetische Grenze.
• WCAG 2.1 SC 1.4.3 fordert mindestens 4,5:1 Kontrast für Normaltext; viele Hellgrau-Varianten scheitern an diesem Schwellenwert.
• Die bewährte Zeilenlänge für Fließtext liegt zwischen 60 und 75 Zeichen; längere Zeilen erhöhen die Fehlerquote beim Zeilenumbruch und ermüden das Auge.
• In ActiveCampaign-E-Mails entscheidet die mobile Darstellung stärker als das Desktop-Layout, weil ein Großteil der Öffnungen auf Smartphones stattfindet.

Warum schlechte Typografie Conversions kostet

Ein Text, den niemand liest, kann nichts verkaufen. Das klingt trivial, beschreibt aber genau, wie schlechte Typografie Conversions vernichtet. Der Mechanismus ist einfach: Wer einen Text mühsam lesen muss, bricht früher ab. Wer früher abbricht, sieht den Handlungsaufruf nicht. Wer den Handlungsaufruf nicht sieht, konvertiert nicht.

Die kognitive Last steigt, wenn Buchstaben zu klein sind, Zeilen zu lang werden oder Grau auf Weiß zu wenig Kontrast bietet. Das Gehirn verwendet mehr Energie für das Entziffern und weniger für das Verstehen des Inhalts. Dadurch überfliegen Leser den Text statt ihn zu lesen – und beim Überfliegen werden Argumente, Nuancen und Call-to-Actions übersprungen, die entscheidend für eine Konversion wären.

Hinzu kommt ein Vertrauenseffekt. Ein schlecht gesetzter Text signalisiert unbewusst mangelnde Sorgfalt. Wenn das visuelle Erscheinungsbild einer Seite Mühe macht, überträgt sich diese Wahrnehmung auf den Absender. Vertrauen ist die Grundlage jeder Kaufentscheidung, besonders im B2B-Bereich. Typografie beeinflusst Vertrauen, bevor ein Leser die erste inhaltliche Aussage bewertet hat.

Lesbarkeit ist kein gestalterisches Extra. Sie ist die Voraussetzung dafür, dass der Inhalt überhaupt Wirkung entfalten kann. Jede andere Conversion-Maßnahme – überzeugender Text, ein klarer CTA, ein passendes Angebot – greift erst, wenn der Leser überhaupt bis dorthin gekommen ist.

Die drei typografischen Grundparameter: Schriftgröße, Zeilenabstand und Spaltenbreite

Schriftgröße: 16 px als technische, nicht ästhetische Untergrenze

16 px für Fließtext ist keine willkürliche Empfehlung. iOS Safari vergrößert Textelemente automatisch, sobald die Schriftgröße unter 16 px fällt – dieses Verhalten ist in der Apple-Rendering-Engine WebKit fest hinterlegt. Die automatische Vergrößerung verschiebt das Layout, bricht das Design und unterbricht den Lesefluss auf eine Weise, die du nicht kontrollierst. Wer Text absichtlich kleiner als 16 px setzt, überlässt das Rendering dem Browser.

Auch der Browserstandard spricht für 16 px: Die User-Agent-Stylesheets aller gängigen Browser setzen 16 px als Standard für Fließtext, weil sich dieser Wert über viele Geräteklassen als ausgewogener Ausgangspunkt erwiesen hat. Wer darunter bleibt, kämpft gegen das System statt mit ihm.

Für ein DACH-Publikum ist häufig mehr als 16 px sinnvoll. Nutzer ab 40 Jahren profitieren spürbar von größerem Text, besonders auf Smartphones und Tablets. 18 px für Fließtext ist keine Übertreibung, wenn die Zielgruppe Entscheider in mittelgroßen Unternehmen sind, die in Meetings schnell etwas nachlesen.

Schriftgrößen-Hierarchie: Genug Abstand zwischen den Ebenen

Eine Typografiehierarchie funktioniert nur, wenn der Größensprung zwischen den Ebenen deutlich erkennbar ist. Wenn dein H2 nur 2 px größer ist als dein Fließtext, nimmt das Auge keinen Unterschied wahr – auf einem 13-Zoll-Display erst recht nicht. Eine bewährte Ausgangskonfiguration für Websites:

• H1 setzt du auf 28–36 px in Fettschrift, mit deutlichem Weißraum darüber und darunter.
• H2 liegt bei 22–28 px, fett oder semibold.
• H3 wählst du mit 18–22 px und semibold.
• Fließtext läuft mit 16–18 px in regulärem Gewicht.
• Nebentext wie Bildunterschriften und Metaangaben setzt du auf 14 px – nie für Hauptinhalte.

Diese Abstufung sorgt dafür, dass Leser, die einen Text zunächst überfliegen, sofort erkennen, welche Überschrift zu welchem Abschnitt gehört. Erst dann lesen sie gezielt die Abschnitte, die für sie relevant sind – und kommen mit dieser Vorstrukturierung eher zum CTA als ohne sie.

Zeilenabstand: Was 1,5× konkret bedeutet

WCAG 2.1 SC 1.4.12 ("Text Spacing") legt fest, dass Seiten ihre Funktionalität behalten müssen, wenn Nutzer den Zeilenabstand auf mindestens 1,5× Schriftgröße erhöhen. Das ist keine Designempfehlung, sondern eine Barrierefreiheits-Anforderung der W3C-Arbeitsgruppe. Sie zeigt, welchen Wert diese Gruppe als Untergrenze für barrierefreie Lesbarkeit betrachtet.

In der Praxis ist 1,5 das Minimum. 1,6 ist für Fließtexte komfortabler, 1,7 eignet sich für besonders dichte Texte oder ältere Zielgruppen. Für Überschriften verwendest du engeren Abstand (1,2 bis 1,3), weil mehrzeilige Überschriften sonst auseinanderfallen und nicht mehr als zusammengehörig wahrgenommen werden. Einen Zeilenabstand unter 1,2 für Fließtext zu wählen erzeugt Textwände, die das Auge ermüden. Die meisten Leser bemerken das nicht bewusst, brechen aber früher ab.

Spaltenbreite und Zeilenlänge: Die Maßgröße der Typografie

Die Zeilenlänge wird in Zeichen pro Zeile gemessen, weil diese Einheit unabhängig von Schriftgröße und Gerät stabil ist. Der empfohlene Bereich von 60 bis 75 Zeichen für Fließtext entspricht dem, was das Auge beim Zeilenumbruch noch zuverlässig findet, ohne zu stocken. Zu kurze Zeilen (unter 45 Zeichen) erzeugen einen unruhigen Leserhythmus. Zu lange Zeilen (über 85 Zeichen) lassen das Auge nach dem Umbruch häufig in die falsche Zeile springen.

Im CSS lässt sich diese Begrenzung mit max-width: 65ch direkt umsetzen. Die Einheit ch entspricht der Breite des Zeichens "0" in der aktuellen Schriftart und passt sich damit automatisch an unterschiedliche Schriftgrößen an. Auf mobilen Geräten gilt ein engerer Bereich von 45 bis 55 Zeichen, weil der Viewport schmaler ist und ein breiteres Layout horizontales Scrollen erzwingen würde.

Für E-Mail-Templates hat sich 600 px als praktische Maximalbreite etabliert. Dieses Maß passt auf die meisten Laptop-Displays und bleibt auf Smartphones durch Responsive Styles lesbar. Templates, die über 680 px hinausgehen, erzwingen in bestimmten E-Mail-Clients horizontales Scrollen.

Kontrast nach WCAG 2.1 prüfen und einhalten

WCAG 2.1 SC 1.4.3 ("Contrast Minimum") fordert ein Kontrastverhältnis von mindestens 4,5:1 für Normaltext und 3:1 für großen Text. Großer Text ist dabei definiert als mindestens 18 pt (24 px) in regulärer Stärke oder 14 pt (ca. 18,67 px) in Fettschrift. Diese Werte gelten für Konformitätsstufe AA, die in der Praxis relevante Anforderungsstufe.

Das Kontrastverhältnis ergibt sich aus der Leuchtdichte (Luminance) von Vorder- und Hintergrundfarbe. Reines Schwarz (#000000) auf reinem Weiß (#FFFFFF) ergibt 21:1 – das theoretische Maximum. Dunkelgrau #333333 auf Weiß ergibt etwa 12,6:1. Das bei Designern beliebte Mittelgrau #888888 auf Weiß kommt auf etwa 3,5:1 und fällt damit für Normaltext durch die WCAG-Anforderung.

Häufige Fallen beim Kontrast-Check

Diese Konstellationen führen in der Praxis regelmäßig zu Kontrast-Unterschreitungen:

• Hellgrauer Sekundärtext für Datumsangaben, Bildunterschriften oder Metainformationen gilt oft als dezent, liegt aber häufig unter 4,5:1 und scheitert damit an der WCAG-Anforderung.
• Weißer Text auf einem mittelhellen Markenfarben-Hintergrund hat oft keinen ausreichenden Abstand zur 4,5:1-Grenze.
• Text über Fotos oder Farbverläufen besteht den Kontrast-Check nur an bestimmten Bildausschnitten – an anderen liegt er darunter.
• Placeholder-Text in Formularen wird bewusst blass gesetzt, um nicht abzulenken – er muss aber lesbar sein, solange er Informationen trägt.

Werkzeuge zur Kontrastprüfung im Alltag

Der WebAIM Contrast Checker (webaim.org/resources/contrastchecker/) erlaubt die direkte Eingabe von Hex-Werten und zeigt sofort, ob das Verhältnis WCAG AA oder AAA erfüllt. Chrome DevTools haben einen integrierten Kontrast-Check im Elements-Panel: Wenn du auf ein Textelement klickst und die Farbe im Styles-Panel öffnest, zeigt Chrome das aktuelle Kontrastverhältnis direkt daneben an. In Figma überprüfen Plugins wie "Contrast" die Farbkombinationen direkt im Designprozess. Wichtig: Den Check nach jeder Designänderung wiederholen, weil Markenfarben oft in mehreren Helligkeitsstufen existieren und nur eine davon getestet wurde.

Typografische Hierarchie: Den Leser sicher zum CTA führen

Eine funktionierende Typografiehierarchie erfüllt zwei Aufgaben gleichzeitig: Sie gibt Lesern, die einen Text zunächst scannen, genug Orientierung, um schnell zu entscheiden, welche Abschnitte für sie relevant sind. Und sie führt Leser, die sich eingehend mit dem Text beschäftigen, in einer Reihenfolge, die auf den Handlungsaufruf zusteuert.

Der erste Schritt zu einer guten Hierarchie ist, die Anzahl der Ebenen zu begrenzen. Drei Ebenen – H2, H3, Fließtext – reichen für die meisten Seiten. Mehr als drei Ebenen führt dazu, dass keine Ebene mehr auffällt, weil keine mehr ausreichend kontrastiert.

Weißraum als strukturierendes Element

Der Abstand vor und nach einer Überschrift ist Teil der Hierarchie. Wenn eine H2 oben und unten denselben Abstand hat wie der Fließtext, wirkt sie wie ein hervorgehobenes Wort, nicht wie eine Strukturgröße. Bewährt ist ein deutlich größerer Abstand vor einer H2 – ca. das Doppelte der Fließtextzeilenhöhe – und ein kleinerer Abstand danach, ca. die Hälfte. Das verbindet die Überschrift visuell mit dem Text, der unter ihr folgt, und trennt sie gleichzeitig von dem Text davor.

Konsistenz schlägt Kreativität

Typografische Hierarchien funktionieren durch Wiederholung. Wenn H2-Überschriften auf einer Seite mal 24 px und mal 20 px sind, verliert das System seinen Rastercharakter. Leser erkennen nicht mehr, auf welcher Strukturebene sie sich befinden. Ein dokumentiertes Typosystem ist deshalb sinnvoller als situative Entscheidungen im Editor – auch für kleinere Projekte.

In ActiveCampaign lohnt es sich, für E-Mails eine eigene Vorlage mit festen Textstilen zu speichern: eine Ebene für Hauptüberschriften, eine für Zwischenüberschriften, eine für Fließtext. Sobald diese Stile einmal definiert sind, kostet das konsistente Einhalten keine Extrazeit mehr.

CTA-Typografie: Der letzte Meter zählt

Viele Websites optimieren die Texthierarchie für den Fließtext, lassen aber den Call-to-Action typografisch schlecht stehen. Ein CTA-Button mit 12-px-Text verliert die visuelle Konkurrenz gegen eine 18-px-Zwischenüberschrift. Der Text im Button sollte mindestens 16 px haben, idealerweise 18–20 px. Das gilt auch für den Begleittext rund um den CTA – der Satz, der unmittelbar auf den Button führt, muss typografisch die Aufmerksamkeit halten, die der Button dann einlöst. Konkrete Strategien für unterschiedliche CTA-Typen beschreibt der Beitrag zu Call-to-Action-Strategien und CTA-Typen für Websites.

Typische Fehler und ihr Gegenmittel

Dieselben typografischen Fehler tauchen unabhängig von Branche und Plattform immer wieder auf. Die folgende Übersicht zeigt die häufigsten Muster, ihre Ursache und das konkrete Gegenmittel.

Zu kleiner Fließtext für einen "schlanken" Look

Ursache: Designer und Texter optimieren zunächst auf dem Desktop-Monitor und unterschätzen, wie derselbe Text auf einem Smartphone wirkt. Gegenmittel: 16 px als technische Untergrenze behandeln, 18 px als Zielwert für längere Texte auf Landing Pages. Den Entwurf immer auch auf einem echten Gerät prüfen – nicht nur im Browser-Responsive-Mode, weil Browser-Emulatoren Font-Rendering nicht identisch zu echten Geräten abbilden.

Hellgrauer Sekundärtext als Stilmittel

Ursache: Graue Töne gelten in vielen Design-Systemen als dezent und modern. Tatsächlich unterschreiten viele dieser Töne den WCAG-2.1-Schwellenwert von 4,5:1. Gegenmittel: Für alle Textelemente, die Informationen tragen, den Kontrast prüfen – auch für Nebentext wie Datumsangaben und Kategorien. Nur rein dekorativer Text, der keine Information trägt, ist von der Kontrastanforderung ausgenommen.

Fehlende Hierarchie durch zu ähnliche Schriftgrößen

Ursache: Moderate Größenabstufungen wirken im Designtool kontrolliert. Im Webbrowser auf einem 13-Zoll-Display sehen 22 px für H2 und 18 px für Fließtext kaum unterschiedlich aus. Gegenmittel: Den finalen Abstand zwischen den Ebenen immer im Browser prüfen, nicht im Designtool. Ein Sprung von mindestens 4–6 px ist empfehlenswert, um deutlich erkennbar zu bleiben.

Fließtext ohne Breitengrenze auf großen Viewports

Ursache: Layouts ohne max-width-Begrenzung dehnen sich auf breiten Viewports auf volle Seitenbreite aus. Auf einem 1600-px-Monitor können das 90–120 Zeichen pro Zeile sein – weit über der empfohlenen Grenze von 65–75. Gegenmittel: max-width: 65ch auf den Textcontainer setzen oder eine Spaltenstruktur mit begrenzter Textbreite wählen.

Zeilenabstand unter 1,3 für mehr Inhalt im sichtbaren Bereich

Ursache: Die Annahme, dass Nutzer nicht scrollen, führt dazu, dass möglichst viel Text auf den sichtbaren Bereich gepresst wird. Ergebnis ist ein Zeilenabstand unter 1,3, der den Text schwer lesbar macht. Gegenmittel: Nutzer, die eine Seite öffnen und Interesse haben, scrollen. Bessere Lesbarkeit hält sie im Text, nicht mehr Zeilen auf kleinem Raum. Die Annahme, dass ausschließlich der zuerst sichtbare Bereich entscheidet, ist für erklärungsbedürftige Angebote ohnehin eine Vereinfachung.

Schriftart ohne vollständige Fallback-Kette

Ursache: Webfonts werden nicht immer geladen – Netzwerkprobleme, Adblocker, restriktive Unternehmens-Firewalls. Wenn kein Fallback definiert ist, zeigt der Browser eine Systemschriftart, die möglicherweise die Abstände und Hierarchie verändert. Gegenmittel: Immer eine vollständige Fallback-Kette definieren: benutzerdefinierte Schriftart, dann eine ähnliche Systemschriftart, dann eine generische Familie wie sans-serif.

So prüfst und optimierst du Typografie in ActiveCampaign – Schritt für Schritt

Dieser Block beschreibt, wie du die typografischen Parameter einer bestehenden E-Mail-Kampagne in ActiveCampaign prüfst und anpasst. Am Ende hast du eine Vorlage, die du für alle künftigen Kampagnen wiederverwenden kannst.

1. E-Mail-Designer öffnen. Gehe in ActiveCampaign zu Kampagnen oder Vorlagen. Wähle die zu prüfende E-Mail aus und öffne sie im Editor.
2. Schriftgröße im Textblock prüfen. Klicke auf einen Textblock und markiere den gesamten Fließtext. Im Formatierungs-Panel siehst du die aktuelle Schriftgröße. Liegt sie unter 16 px, ändere sie auf 16 px oder 18 px.
3. Zeilenabstand anpassen. In den Blockeinstellungen findest du unter Paragraph oder Text-Einstellungen den line-height-Wert. Setze ihn auf mindestens 1,5, besser 1,6. Wenn das Feld keinen numerischen Wert akzeptiert, nutze Custom HTML und setze line-height: 1.6 als Inline-Style direkt am Paragraph-Element.
4. Template-Breite kontrollieren. Gehe in die globalen Template-Einstellungen. Die maximale Content-Breite sollte auf 600 px oder weniger gesetzt sein. Einige Templates verwenden 640 px oder mehr – das führt auf schmalen Viewports zu ungewolltem horizontalem Scrollen.
5. Kontrastprüfung für Hauptfarben. Notiere die Hex-Werte für Hintergrundfarbe und Textfarbe deiner E-Mail. Öffne den WebAIM Contrast Checker unter webaim.org/resources/contrastchecker/ und gib beide Werte ein. Liegt das Verhältnis unter 4,5:1, wähle einen dunkleren Texton oder einen helleren Hintergrund.
6. Typografische Hierarchie prüfen. Klicke nacheinander auf Hauptüberschrift, Zwischenüberschrift und Fließtext. Notiere die Schriftgrößen. Der Sprung zwischen Fließtext und Zwischenüberschrift sollte mindestens 4 px betragen; der Sprung zur Hauptüberschrift mindestens 8 px.
7. Mobile Preview aktivieren. Wechsle im Designer auf die Mobile-Vorschau über Vorschau in der oberen Menüleiste. Prüfe: Läuft der Text über den Rand? Ist der CTA-Button ausreichend groß (mindestens 44 px Höhe)? Sind Überschriften noch deutlich größer als der Fließtext?
8. Test auf echten Geräten. Schicke eine Testmail an eine eigene Adresse und öffne sie auf mindestens zwei unterschiedlichen Geräten – zum Beispiel iPhone mit Apple Mail und Android mit Gmail-App. Die Designer-Vorschau zeigt idealisierte Darstellungen; echte E-Mail-Clients rendern unterschiedlich.
9. Vorlage speichern. Wenn alle Parameter stimmen, speichere das Design als Vorlage unter einem sprechenden Namen, etwa Standard-Newsletter-2026. Künftige Kampagnen basieren auf dieser Vorlage und erben die typografischen Einstellungen automatisch.

Häufige Fragen

Welche Schriftgröße ist für ActiveCampaign-E-Mails optimal?

16 px ist die technische Untergrenze, die verhindert, dass iOS Safari automatisch heranzoomt. Für Fließtext in E-Mails an ein DACH-Publikum ist 16–18 px ein sinnvoller Bereich. Überschriften in E-Mails brauchen weniger Ebenen als auf Websites: eine Hauptüberschrift bei 22–28 px und Zwischenüberschriften bei 18–20 px reichen. Alles darunter zwingt Leser auf Smartphones zu zoomen, was den Lesefluss unterbricht und Klicks kostet.

Bin ich als Website-Betreiber in Deutschland verpflichtet, WCAG 2.1 einzuhalten?

Für öffentliche Stellen gilt in Deutschland die BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung), die sich an WCAG 2.1 orientiert. Für private Unternehmen hat das Barrierefreiheitsstärkungsgesetz (BFSG) seit Juni 2025 für bestimmte Dienstleistungen und digitale Produkte verbindliche Anforderungen eingeführt. Auch ohne gesetzliche Pflicht lohnt sich die Einhaltung: Kontrastarme Texte erzeugen Nachteile für alle Nutzer bei ungünstigen Lichtverhältnissen, nicht nur für Menschen mit Sehbeeinträchtigungen.

Wie teste ich, ob eine E-Mail auf allen Geräten gut lesbar ist?

Der verlässlichste Test ist der auf echten Geräten – mindestens iPhone mit Apple Mail, Android mit Gmail-App und Outlook auf einem Windows-Rechner, weil diese Clients HTML-CSS unterschiedlich interpretieren. Litmus und Email on Acid bieten automatisierte Vorschau-Dienste für viele Clients gleichzeitig, was bei häufigen Versendungen den manuellen Aufwand reduziert. Wichtig: Nicht nur die Darstellung prüfen, sondern auch aktiv durch die E-Mail scrollen, um sicherzustellen, dass kein Element abgeschnitten wird.

Was ist der Unterschied zwischen Zeilenabstand im Web und in E-Mails?

Im Web setzt du line-height in CSS und der Browser rendert den Wert zuverlässig. In E-Mails ist das Rendering fragmentiert: Gmail Desktop, Apple Mail, Outlook und mobile Apps interpretieren CSS-Anweisungen unterschiedlich. Outlook für Windows unterstützt line-height nur eingeschränkt; dort hilft Inline-CSS direkt am Element statt in separaten Styleblöcken. In ActiveCampaign lohnt es sich, Schriftgrößen und Abstände über die eingebauten Template-Einstellungen zu steuern, weil der Editor das Inline-Rendering übernimmt und damit die Kompatibilität zwischen Clients erhöht.

Kann ich mit Typografie-Optimierung allein meine Conversion-Rate verbessern?

Typografie ist eine Schicht im Conversion-Stack, nicht der ganze Stack. Wer eine Landing Page mit schwachem Angebot typografisch optimiert, verbessert die Lesbarkeit eines Textes, der keinen Bedarf trifft. In E-Mail-Kampagnen kommt hinzu: Die Betreffzeile entscheidet über die Öffnungsrate, bevor irgendjemand die Typografie des E-Mail-Bodys sieht. Gute Typografie ist eine Voraussetzung dafür, dass Leser, die öffnen, auch klicken – sie ersetzt aber keine überzeugende Betreffzeile und kein passendes Angebot.

Hat die Wahl der Schriftart selbst Auswirkung auf Lesbarkeit und Conversion?

Die Schriftart beeinflusst die Lesbarkeit, aber der Effekt ist kleiner als der von Schriftgröße, Zeilenabstand und Kontrast zusammen. Wichtiger als die Schriftartwahl ist die Ladezeit der Webfont-Datei. Eine schnell ladende Systemschriftart wie -apple-system oder Segoe UI schlägt eine langsam ladende Custom-Font oft, weil sie sofort verfügbar ist und keinen Layout-Shift erzeugt. Wer eine Custom-Font einsetzt, sollte sie im WOFF2-Format ausliefern und einen vollständigen Fallback-Stack definieren.

Wer Typografie und Struktur einer E-Mail als Einheit betrachtet, findet im Beitrag zu E-Mail-Design-Strategien für Engagement und Conversions eine gesamthafte Perspektive auf Bildsprache, Abschnittsgliederung und Layout. Konkrete Vorlagen für unterschiedliche Newsletter-Typen beschreibt der Beitrag zu Newsletter-Design mit ActiveCampaign.