Ein praktischer Leitfaden für gut lesbare Schrift im modernen Web

Warum die meisten Websites schwerer zu lesen sind, als sie sein sollten

Die durchschnittliche Website im Jahr 2026 wird mit einer individuellen Schriftfamilie, sorgfältig ausgewählten Markenfarben und einem Designsystem ausgeliefert, das Abstände pixelgenau festlegt. Doch der Fließtext – also das, was die meisten Besucher tatsächlich lesen möchten – steht oft in 14px, in kontrastarmem Grau und in einer Schrift, die für Überschriften optimiert ist, nicht für Absätze.

Das ist kein Angriff auf Designer. Es ist eine Erinnerung daran, dass Lesbarkeit eine eigene Disziplin neben visuellem Design ist – und dass beides nicht immer zusammenpasst. Eine Schrift, die in einem Hero-Bereich scharf wirkt, kann über mehrere Absätze hinweg anstrengend sein. Eine Farbpalette, die auf Fotos gut aussieht, kann Kontrastprüfungen nicht bestehen. Ein Layout, das auf einem 27-Zoll-Monitor funktioniert, kann auf Mobilgeräten zu einer schmalen Spalte zusammenfallen.

Die gute Nachricht: Gut lesbare Schrift erfordert keinen Abschluss in Typografie. Sie erfordert Aufmerksamkeit für einige wenige Variablen, die unverhältnismäßig großen Einfluss haben.

Schriftgröße: größer, als Sie denken

Der häufigste Lesbarkeitsfehler im Web ist zu kleiner Fließtext. Designer setzen Fließtext oft auf 14px oder 15px, weil er auf dem Desktop „sauber aussieht“, und vergessen dann, dass ein erheblicher Teil der Leser auf Smartphones liest – oft bei nicht idealen Lichtverhältnissen.

Eine praktische Basis für Fließtext im Jahr 2026:

• Desktop: mindestens 18px, bevorzugt 20px
• Mobil: mindestens 16px, bevorzugt 18px

Diese Werte wirken groß, wenn Sie kleinere Schrift gewohnt sind, aber sie spiegeln wider, wie Menschen tatsächlich auf Bildschirmen lesen. Größerer Text reduziert Augenbelastung, verbessert das Verständnis und macht Ihre Inhalte für Leser mit leichter Sehbeeinträchtigung zugänglich, die ihre Browser-Einstellungen nicht angepasst haben.

Wenn Ihr Designsystem kleinere Schrift vorschreibt, testen Sie sie auf einem Smartphone in der Sonne. Wenn Sie die Augen zusammenkneifen müssen, ist sie zu klein.

Zeilenhöhe: Geben Sie Text Raum zum Atmen

Die Zeilenhöhe (Leading) ist der vertikale Abstand zwischen Textzeilen. Ist sie zu eng, verschwimmen Zeilen miteinander. Ist sie zu locker, verliert das Auge den Anschluss zwischen den Zeilen.

Für Fließtext funktioniert eine Zeilenhöhe von 1.5 bis 1.7 bei den meisten Schriften gut. Überschriften können enger gesetzt werden (1.1 bis 1.3), aber Fließtext braucht Luft.

Das CSS:

body {
  font-size: 18px;
  line-height: 1.6;
}

Das ist einer der einfachsten Gewinne für die Lesbarkeit. Wenn Ihr Fließtext aktuell bei line-height: 1.2 steht oder einen festen Pixelwert verwendet, ändern Sie das noch heute.

Zeilenlänge: kürzer, als Sie denken

Die optimale Zeilenlänge für Fließtext liegt bei 45 bis 75 Zeichen pro Zeile, ungefähr 8 bis 12 Wörtern. Zeilen mit mehr als 90 Zeichen erschweren es dem Auge, zum Anfang der nächsten Zeile zurückzufinden. Zeilen mit weniger als 40 Zeichen erzeugen ein abgehacktes, fragmentiertes Leseerlebnis.

Die meisten Websites machen das falsch, indem sie Text über die gesamte Breite des Viewports laufen lassen, besonders auf dem Desktop. Ein 1920px breiter Monitor kann 150+ Zeichen pro Zeile aufnehmen – das ist anstrengend zu lesen.

Die Lösung ist eine max-width für Ihren Textcontainer:

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

Die Einheit ch wird zu selten genutzt, ist dafür aber ideal: Sie skaliert mit der Schriftgröße und entspricht ungefähr der Zeichenbreite.

Kontrast: nicht so einfach wie Schwarz auf Weiß

WCAG 2.1 legt ein Mindest-Kontrastverhältnis von 4.5:1 für Fließtext (AA-Level) und 7:1 für erweiterte Barrierefreiheit (AAA-Level) fest. Die meisten Websites erfüllen das auf dem Papier, scheitern aber in der Praxis, weil sie hellgrauen Text auf weißem Hintergrund verwenden.

Häufige Problemfälle:

• #666666 auf #FFFFFF (4.54:1, besteht knapp)
• #777777 auf #FFFFFF (4.47:1, fällt durch)
• Jeder Ton, der auf Weiß heller als #767676 ist (fällt durch)

Wenn Ihr Designsystem „text-secondary“ als helles Grau festlegt, testen Sie es. Der WebAIM contrast checker ist der schnellste Weg zur Überprüfung.

Dark Mode macht das zusätzlich komplizierter. Rein weißer Text auf rein schwarzem Hintergrund erzeugt Halation (einen Leuchteffekt), der schwerer zu lesen ist als leicht gebrochenes Weiß auf Dunkelgrau. Ein besserer Ansatz:

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Schriftwahl: Standardschriften sind besser, als Sie denken

Individuelle Web Fonts sind allgegenwärtig, bringen aber Kompromisse mit sich. Sie erhöhen die Latenz, vergrößern das Seitengewicht und können das Rendering blockieren, wenn sie nicht sorgfältig geladen werden. Für Fließtext sind Systemschriften oft die bessere Wahl.

Ein robuster System-Font-Stack im Jahr 2026:

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

Damit erhalten Sie San Francisco auf macOS/iOS, Segoe UI auf Windows und Roboto auf Android – allesamt sehr gut lesbare, professionell gestaltete Schriften, die sofort laden.

Wenn Sie für Fließtext eine individuelle Schrift verwenden, wählen Sie eine, die für längeres Lesen gestaltet wurde, nicht für Display-Zwecke. Vermeiden Sie:

• Ultra-leichte oder ultra-fette Schriftschnitte für Fließtext
• Schmale oder breite Varianten
• Schriften mit niedriger x-Höhe (der Höhe von Kleinbuchstaben)

Testen Sie die gewählte Schrift über mehrere Absätze hinweg, bevor Sie sich festlegen.

Responsive Typografie: fließende Schriftskalen

Feste Schriftgrößen skalieren über Geräte hinweg nicht gut. Eine 20px-Fließtextschrift, die auf dem Desktop angenehm ist, kann auf Mobilgeräten überdimensioniert wirken.

Fließende Typografie verwendet clamp(), um die Schriftgröße stufenlos zwischen einem Minimum und einem Maximum zu skalieren:

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

Das skaliert von 16px auf kleinen Bildschirmen bis zu 20px auf großen Bildschirmen, mit sanfter Interpolation dazwischen. Es ist ausgereifter als Media-Query-Breakpoints und passt sich jeder Viewport-Breite an.

Für eine vollständige Schriftskala (Überschriften, Fließtext, Kleingedrucktes) erzeugen Tools wie Utopia fließende Skalen auf Basis Ihrer Vorgaben.

Absatzabstand und Textausrichtung

Zwei kleine Details, die wichtig sind:

1. Absatzabstand: Fügen Sie Abstand zwischen Absätzen hinzu (margin-block-end: 1em) oder verwenden Sie einen Erstzeileneinzug (text-indent: 1.5em), aber nicht beides. Die meisten Webinhalte verwenden Abstand.

1. Textausrichtung: Linksbündig (oder rechtsbündig für RTL-Sprachen) ist fast immer lesbarer als Blocksatz, der ungleichmäßige Wortabstände erzeugt, sofern keine Silbentrennung aktiviert ist. Zentrierter Fließtext ist schwer zu lesen und sollte kurzen Passagen vorbehalten bleiben.

Lesbarkeit in der Praxis testen

Lesbarkeit ist nicht rein objektiv, aber Sie können sie testen:

• Lesen Sie Ihre eigenen Inhalte auf Ihrem Smartphone bei unterschiedlichen Lichtverhältnissen
• Führen Sie ein Lighthouse accessibility audit aus, um Kontrast- und Schriftgrößenprobleme zu finden (siehe wie man einen Lighthouse report liest, ohne in Panik zu geraten für Orientierung)
• Bitten Sie eine Person über 50, eine Seite zu lesen, ohne ihre Einstellungen anzupassen
• Prüfen Sie Ihre Analytics auf die Absprungrate textlastiger Seiten – wenn Menschen schnell wieder gehen, kann Lesbarkeit ein Faktor sein

Wenn Ihre Inhalte schwer zu lesen sind, werden Menschen sie nicht lesen. So einfach ist das.

Wie das in der Praxis aussieht

Ein gut lesbarer Stil für Fließtext könnte 2026 so aussehen:

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Das deckt Schriftgröße, Zeilenhöhe, Zeilenlänge, Kontrast und responsive Skalierung in etwa einem Dutzend Zeilen CSS ab. Es ist nicht aufregend, aber es funktioniert.

Wann man die Regeln bricht

Diese Leitlinien gelten für Fließtext – die Absätze, die Menschen lesen, um Informationen zu erhalten. Überschriften, Bildunterschriften, UI-Labels und Marketingtexte haben andere Einschränkungen und können diese Regeln beugen.

Wenn aber jemand auf Ihre Website kommt, um einen Artikel, eine Dokumentationsseite oder eine Produktbeschreibung zu lesen, ist gut lesbare Schrift nicht optional. Sie ist die grundlegende Erwartung.