Design-Grundlagen · Modul 2: Typografie

Lektion 2 von 4Übung 14 Min.

Lesbarkeit: Größe, Zeilenlänge, Abstand

Lernziele
  • die drei Stellschrauben der Lesbarkeit kennen: Größe, Zeilenlänge, Zeilenabstand
  • wissen, wie das Auge beim Lesen arbeitet
  • empfohlene Werte für Bildschirmtexte anwenden
  • typische Fehler wie Blocksatz ohne Silbentrennung vermeiden

Eine gute Schrift allein macht noch keinen gut lesbaren Text. Wie leicht sich ein Text lesen lässt, hängt mindestens ebenso stark davon ab, wie er gesetzt ist: wie groß die Schrift ist, wie lang die Zeilen sind und wie viel Abstand zwischen den Zeilen liegt. Diese drei Werte hängen zusammen, und schon kleine Abweichungen können einen Text spürbar anstrengender machen. Die gute Nachricht: Für alle drei gibt es gut begründete Richtwerte, die sich in wenigen Minuten umsetzen lassen.

1. Wie das Auge liest

Lesen ist kein gleichmäßiges Gleiten über die Zeile. Das Auge bewegt sich in schnellen Sprüngen, den Sakkaden, und hält zwischendurch für rund eine Viertelsekunde an, um einige Buchstaben scharf zu erfassen. Diese Haltepunkte heißen Fixationen. Am Ende einer Zeile folgt ein großer Rücksprung zum Anfang der nächsten. Gute Typografie unterstützt genau diese Bewegungen: Sie macht die Wortbilder klar erkennbar, hält die Sprünge angenehm und sorgt dafür, dass der Rücksprung die richtige Zeile trifft.

Definition 2.1
Sakkaden und Fixationen
Beim Lesen springt das Auge in schnellen Bewegungen (Sakkaden) von Punkt zu Punkt und verweilt jeweils kurz (Fixationen), um Information aufzunehmen. Pro Fixation werden etwa sieben bis neun Buchstaben scharf erfasst. Lesbarkeit hängt davon ab, wie reibungslos dieser Ablauf funktioniert.
ErkundenDie sechs Stellschrauben der Lesbarkeit
Schriftgröße: 16 Pixel sind das Minimum für Fließtext im Web, 18 bis 20 angenehmer. Ältere Augen und Handys im Sonnenlicht danken jedes zusätzliche Pixel.

2. Probieren Sie es aus

Der Beispieltext ist absichtlich ungünstig eingestellt: etwas zu klein, zu lange Zeilen, zu enger Zeilenabstand. Verändern Sie die drei Werte, bis sich der Text angenehm liest.

LaborLesbarkeit selbst einstellen

Wer online liest, liest selten Wort für Wort. Das Auge springt in kleinen Sprüngen über die Zeile, hält kurz an, erfasst einige Buchstaben und springt weiter. Am Zeilenende muss es den Anfang der nächsten Zeile finden. Ist die Zeile zu lang, verliert es sich auf dem Rückweg. Ist sie zu kurz, muss es ständig springen. Ist der Zeilenabstand zu eng, verrutscht es in die falsche Zeile. Gute Typografie macht diese Arbeit so leicht, dass der Leser sie nicht bemerkt.

  • ! Schrift eher klein – für Fließtext am Bildschirm sind 16 bis 20 px üblich.
  • ! Zeilen zu lang – der Weg zurück zum Zeilenanfang wird schwer.
  • ! Zeilenabstand zu eng – das Auge verrutscht leicht.
0 von 3 Werten im empfohlenen Bereich.

3. Die Richtwerte

Tab. 2.1Empfohlene Werte für Fließtext am Bildschirm
WertEmpfehlungBegründung
Schriftgröße16–20 px, auf dem Handy mindestens 16 pxBildschirme werden auf Armlänge gelesen; unter 16 px zoomen Mobilgeräte teils automatisch
Zeilenlänge45–75 Zeichen, ideal etwa 66kürzere Zeilen zerreißen den Lesefluss, längere erschweren den Rücksprung
Zeilenabstand1,4–1,7-fache Schriftgrößeje länger die Zeile, desto mehr Abstand braucht sie
Absatzabstandetwa eine Zeilenhöhetrennt Gedanken, ohne den Text zu zerreißen
Kontrastmindestens 4,5:1Anforderung der WCAG, siehe Kurs Barrierefreiheit

Die Zeilenlänge von 45 bis 75 Zeichen geht auf Robert Bringhurst zurück und ist durch Leseforschung gut gestützt.

Die drei Werte beeinflussen sich gegenseitig. Eine größere Schrift verlangt bei gleicher Spaltenbreite weniger Zeichen pro Zeile. Eine längere Zeile verlangt mehr Zeilenabstand, damit das Auge den Rückweg findet. Eine Schrift mit großer x-Höhe wirkt größer und braucht oft etwas mehr Zeilenabstand als eine mit kleiner x-Höhe. Die Richtwerte sind deshalb ein Ausgangspunkt, keine starre Vorschrift. Das letzte Wort hat immer das Auge.

Der häufigste Fehler auf Unternehmenswebsites ist nicht eine falsche Schrift, sondern zu lange Zeilen. Fließtext über die volle Breite eines großen Bildschirms mit 150 Zeichen pro Zeile ist kaum lesbar. Eine maximale Textbreite von etwa 65 bis 75 Zeichen löst das Problem sofort.

4. Ausrichtung und Trennung

Für Bildschirmtexte ist der linksbündige Flattersatz fast immer die beste Wahl. Jede Zeile beginnt an derselben Stelle, das Auge findet den Anfang zuverlässig, und die Wortabstände bleiben gleichmäßig. Der Blocksatz, bei dem alle Zeilen gleich lang sind, wirkt zwar ordentlich, führt im Web aber oft zu großen Lücken zwischen den Wörtern, weil Browser die Silbentrennung nur eingeschränkt beherrschen. Diese Lücken bilden senkrechte „Gassen“ durch den Text, die das Lesen stören und für Menschen mit Leseschwierigkeiten besonders hinderlich sind. Zentrierter Text eignet sich nur für kurze Elemente wie Überschriften oder Zitate, denn bei mehreren Zeilen muss das Auge den Zeilenanfang jedes Mal neu suchen.

Auch Großbuchstaben verdienen Vorsicht. Wörter in Versalien verlieren ihre charakteristische Umrisslinie mit Ober- und Unterlängen, an der geübte Leser sie erkennen. Längere Passagen in Großbuchstaben werden deshalb deutlich langsamer gelesen. Für kurze Beschriftungen, Rubriken oder Knöpfe sind sie in Ordnung, dann aber mit etwas erhöhter Laufweite, damit die Buchstaben nicht zu eng stehen.

5. Lesbarkeit auf dem Handy

Auf dem Smartphone gelten dieselben Prinzipien unter engeren Bedingungen. Die Zeilen sind automatisch kürzer, meist 35 bis 45 Zeichen, was etwas unter dem Idealbereich liegt, aber wegen der Nähe zum Auge gut funktioniert. Die Schrift sollte nicht kleiner als 16 Pixel sein, und ausreichende Seitenränder verhindern, dass Text am Bildschirmrand klebt. Wichtig ist, dass Nutzer den Text vergrößern können, ohne dass das Layout bricht. Wer mobil testet, sollte außerdem an Bedingungen außerhalb des Büros denken: Sonnenlicht, Bewegung, eine Hand am Gerät. Unter diesen Umständen zeigt sich schnell, ob eine Schrift wirklich gut lesbar ist.

Ein oft vergessener Punkt ist schließlich der Text selbst. Die beste Typografie hilft wenig, wenn Absätze zwanzig Zeilen lang sind und Sätze drei Nebensätze enthalten. Kurze Absätze, aussagekräftige Zwischenüberschriften und Aufzählungen dort, wo sie passen, sind Teil guter Lesbarkeit. Typografie und Text arbeiten zusammen.

6. Weitere Stellschrauben

Neben den drei Hauptwerten gibt es einige feinere Einstellungen, die den Unterschied zwischen ordentlichem und wirklich angenehmem Text ausmachen. Die Laufweite sollte bei Fließtext unverändert bleiben, denn Schriften sind für ihre Standardabstände gestaltet. Nur sehr kleine Beschriftungen profitieren von etwas mehr, sehr große Überschriften von etwas weniger Laufweite. Der Kontrast zwischen Text und Hintergrund sollte hoch, aber nicht maximal sein: Reines Schwarz auf reinem Weiß kann auf hellen Bildschirmen blenden, ein sehr dunkles Grau auf Weiß wirkt oft angenehmer und erfüllt die Anforderungen trotzdem mühelos.

Auch Hervorhebungen beeinflussen die Lesbarkeit. Fett gesetzte Schlüsselbegriffe helfen beim Überfliegen, wenn sie sparsam eingesetzt werden. Werden in jedem Satz mehrere Wörter betont, verliert die Hervorhebung ihre Wirkung und der Text wird unruhig. Kursivschrift eignet sich für einzelne Begriffe, Titel oder fremdsprachige Wörter, aber nicht für längere Passagen, weil sie am Bildschirm schwerer zu lesen ist. Unterstreichungen sind im Web für Links reserviert und sollten nicht zur Betonung verwendet werden. Schließlich spielen Absätze eine Rolle: Ein Abstand zwischen den Absätzen ist im Web üblicher als der eingerückte erste Zeilenanfang aus dem Buchdruck und gliedert längere Texte deutlich besser.

7. Lesbarkeit prüfen

Ob ein Text gut lesbar ist, lässt sich mit einfachen Mitteln überprüfen. Der erste Test ist das eigene Lesen: Einen längeren Abschnitt auf verschiedenen Geräten lesen und darauf achten, wo das Auge stockt, wo man in die falsche Zeile rutscht oder wo man ermüdet. Der zweite Test ist ein Blick in die Entwicklerwerkzeuge des Browsers, die Schriftgröße, Zeilenhöhe und Breite des Textblocks direkt anzeigen. Der dritte Test ist das Vergrößern der Seite auf 200 Prozent: Bleibt der Text lesbar, ohne dass Zeilen abgeschnitten werden oder Inhalte überlappen? Und schließlich hilft es, Menschen aus der Zielgruppe zu beobachten, besonders ältere Leser. Sie bemerken zu kleine Schriften und zu schwache Kontraste oft sofort, während sie jüngeren Gestaltern gar nicht auffallen.

Auch die Umgebung spielt eine Rolle: Dunkle Hintergründe verlangen meist etwas mehr Zeilenabstand und eine etwas kräftigere Schriftstärke, weil helle Schrift auf dunklem Grund optisch dünner wirkt.

Quellen und weiterführende Literatur
  1. [1]Rayner, K. (1998): Eye Movements in Reading and Information Processing: 20 Years of Research. Psychological Bulletin 124(3), 372–422.
  2. [2]Bringhurst, R. (2004): The Elements of Typographic Style. 3. Aufl., Kap. 2.1.2.
  3. [3]Dyson, M. C. (2004): How Physical Text Layout Affects Reading from Screen. Behaviour & Information Technology 23(6), 377–393.
  4. [4]W3C (2018): WCAG 2.1, Erfolgskriterien 1.4.8 und 1.4.12.

Stand: September 2026. Kursmaterial der Klarwerk Akademie.

Abschlussquiz

Drei Fragen – dann ist die Lektion geschafft.

Frage 1 von 3

Wie viele Zeichen pro Zeile gelten als ideal?