Typografie im Web: Lesbarkeit als Conversion-Faktor

Typografie ist das meistgenutzte Element jeder Website und das am häufigsten unterschätzte. Während über Bilder, Farben und Layouts stundenlang diskutiert wird, bekommt Schrift oft nur einen Satz: „Nehmen wir Inter.“ Fertig.

Das ist ein Fehler. Typografie entscheidet darüber, ob Besucher lesen oder abbrechen. Ob sie verstehen oder raten. Ob sie vertrauen oder weiterklicken.

Warum Typografie im Web anders funktioniert

Print-Typografie ist gelernt. Bücher, Zeitungen, Magazine haben feste Regeln, die über Jahrhunderte entstanden sind. Web-Typografie ist jünger, variabler, unkontrollierter.

Im Web lest ihr auf unterschiedlichen Bildschirmen, in unterschiedlichen Lichtverhältnissen, mit unterschiedlichen Zoomstufen. Typografie ist deshalb kein Zubehör des UX/UI Design, sondern dessen am häufigsten benutztes Werkzeug. Die gleiche Schriftgröße wirkt auf dem iPhone anders als auf dem 27-Zoll-Monitor. Typografie im Web muss mit dieser Vielfalt umgehen.

Die Grundregeln für lesbaren Web-Text

1. Zeilenlänge: 60 bis 75 Zeichen

Zu kurze Zeilen zwingen das Auge zu oft in den Zeilenwechsel. Zu lange Zeilen machen es schwer, wieder den Zeilenanfang zu finden. Zwischen 60 und 75 Zeichen ist das Optimum: entsprechend meist 600 bis 750 Pixel Textbreite.

2. Zeilenhöhe: 1,5 bis 1,75

Zu eng gesetzter Text ermüdet schnell. Eine Zeilenhöhe von 1,5 (also 150% der Schriftgröße) ist das Minimum für Fließtext. 1,6 bis 1,75 wirken oft angenehmer.

3. Schriftgröße: Mindestens 16 Pixel

Auf Desktop gelten 16px als absolute Untergrenze für Fließtext. 18px bis 20px sind inzwischen Standard und deutlich angenehmer zu lesen. Auf Mobilgeräten gelten die gleichen Regeln.

4. Kontrast: ausreichend hoch

Schwarz auf Weiß ist nicht immer optimal, aber grauer Text auf hellgrauem Hintergrund ist es auch nicht. Mindestkontrast: 4.5:1 für normalen Text, 3:1 für große Überschriften (WCAG-Anforderung).

5. Hierarchie: klar und konsistent

Überschriften müssen sich von Fließtext unterscheiden, Unterüberschriften von Hauptüberschriften. Die Hierarchie schafft Orientierung. Wer einmal auf die Seite schaut, muss sofort sehen, was wichtig ist.

Welche Schrift für B2B?

Die Auswahl ist riesig, die Regeln klar:

Für den Fließtext braucht ihr Schriften, die in kleinen Größen gut lesbar bleiben. Inter, Source Sans, IBM Plex Sans und Open Sans sind bewährte Wahl. Serifenschriften wie Merriweather oder Source Serif funktionieren ebenfalls und wirken in längeren Blogtexten oft angenehmer.

Bei Überschriften habt ihr mehr Freiheit, dort darf Schrift Persönlichkeit zeigen. Die Grenze liegt bei zwei Schriften pro Seite, drei sind zu viel und wirken unentschieden.

Eine eigene Schrift kann eine Marke differenzieren, ob kommerziell lizenziert oder quelloffen. Sie wird damit Teil der Marke, bringt aber Lizenzkosten mit und will bei Performance und Barrierefreiheit im Blick behalten werden.

Google Fonts vs. selbst gehostet

Google Fonts sind einfach zu nutzen, aber datenschutzrechtlich seit 2022 problematisch (LG München: Einbindung ohne Consent rechtswidrig). Die saubere Lösung ist selbstgehostete Schrift.

Vorgehen:

1. Schrift lokal im Projekt hosten
2. Im CSS über `@font-face` einbinden
3. Nur die tatsächlich genutzten Schnitte laden (nicht alle Gewichte)
4. Moderne Formate nutzen: WOFF2 ist Standard

Das spart Performance, vermeidet DSGVO-Risiken und gibt euch Kontrolle.

Performance: Schrift kostet Ladezeit

Jede Schrift braucht Zeit zum Laden. Vier Schriftschnitte können eine Seite deutlich verlangsamen.

Wie ihr optimiert:

• Nur nötige Schnitte laden (Regular, Bold reichen oft)
• Font-Display: swap nutzen (zeigt System-Schrift während Font lädt)
• Variable Fonts einsetzen (eine Datei für viele Schnitte)
• Subsetting: nur die tatsächlich genutzten Zeichen einbinden

Schriften gehören damit auf jede Liste für die Performance-Optimierung, meist noch vor den Bildern.

Wenn ihr eure Typografie systematisch aufbauen wollt: Wir entwickeln im UX/UI Design Typografie-Systeme mit klaren Regeln für Skalierung, Hierarchie und Performance.

Typografie für Mobilgeräte

Auf Smartphones ist Typografie noch kritischer. Kleine Bildschirme, schnelle Scroll-Bewegungen, oft unterwegs gelesen. Regeln:

• Nicht kleiner als 16px Fließtext
• Überschriften kleiner skalieren als auf Desktop, aber klarer abgesetzt
• Ausreichend Abstand zwischen Absätzen
• Zeilenlänge automatisch reduzieren auf 35 bis 45 Zeichen

Typografie und Barrierefreiheit

Mit dem Barrierefreiheitsstärkungsgesetz (seit 2025 in Kraft) ist lesbare Schrift nicht mehr optional. Menschen mit Sehbehinderungen, Dyslexie oder Altersweitsichtigkeit brauchen:

• Ausreichenden Kontrast
• Skalierbare Schriftgrößen (nicht Pixel-fix)
• Schriftarten ohne übertriebene Stilelemente
• Klare Zeichenabstände

Schrift muss zoomen können, ohne dass das Layout zerbricht. Das ist technisches Handwerk.

Typische Typografie-Fehler auf B2B-Websites

Fließtext in Mittelgrau sieht modern aus und ist schlecht lesbar, besonders bei ungünstigem Licht. Zu schmale Textspalten mit dreißig Zeichen pro Zeile liest niemand gern, weil das Auge ständig springt.

Drei Schriften auf einer Seite überzeugen selten, meist wirkt dann keine davon. Komplett in Versalien gesetzte Überschriften sind schwerer zu lesen, weil die Wortform verloren geht. Und fehlendes responsives Verhalten führt dazu, dass Desktop-Größen auf dem Smartphone entweder riesig oder winzig wirken.

Fazit: Typografie ist Funktion

Typografie ist nicht Dekoration. Sie ist das Transportmittel eurer Inhalte. Wer sie vernachlässigt, verliert Leser, egal wie gut der Inhalt ist.

Gute Typografie wirkt unauffällig. Sie stört nicht, sie trägt. Sie zeigt sich erst, wenn ihr eine Seite mit schlechter Typografie dagegen haltet. Dann wird klar: Schrift ist Strategie.