Website-Texte lesbar gestalten – 9 typische Fehler bei Lesbarkeit und Typografie

Website-Texte lesbar gestalten: das Wichtigste in Kürze

Diese Werte sorgen dafür, dass deine Texte gern gelesen werden:

• Zeilenlänge: 50 bis 75 Zeichen inklusive Leerzeichen
• Schriftgröße im Fließtext: mindestens 16 Pixel, besser 18 Pixel
• Zeilenabstand: das 1,5- bis 1,7-Fache der Schriftgröße
• Absätze: höchstens drei bis fünf Zeilen
• Kontrast zwischen Schrift und Hintergrund: mindestens 4,5 : 1
• Fließtext linksbündig, nie im Blocksatz

Fehler 1

Die Zeilen sind zu breit

Viel zu breite Textblöcke sehe ich ständig. Breit laufende Zeilen lesen sich extrem anstrengend, ich bekomme davon Kopfschmerzen. Probier es selbst aus: Halte ein DIN-A4-Blatt quer vor deine Augen, etwa 50 Zentimeter entfernt, so wie vor deinem Monitor. Wandere mit den Augen die obere Kante des Blatts entlang, von Blattspitze zu Blattspitze, von links nach rechts und wieder zurück, ein paar Mal hintereinander.

Das ist Schwerstarbeit für die Augen. Und genau das verlangst du von deinen Leserinnen, wenn deine Zeilen über die ganze Bildschirmbreite laufen. Beim Tennis bewegst du den Kopf von links nach rechts. Vor dem Monitor macht das niemand.

Übrigens: Übliche Monitore sind weitaus breiter als ein Din-A4-Blatt. Leider machen viele den Fehler, ihre Website für ihr viel kleineres Notebook zu optimieren. Das Problem: Auf dem nächst größeren Display laufen die Textzeilen 40 cm breit…

Wie breit darf eine Zeile sein?

Früher lautete die Empfehlung: nicht breiter als 800 Pixel oder etwa 20 Zentimeter. Das Problem dabei: Pixel ist nicht gleich Pixel. Auf einem hochauflösenden Display sind 800 Pixel deutlich schmaler als auf einem älteren Monitor. Verlässlicher ist die Zahl der Zeichen pro Zeile.

Außerdem hängt die Lesbarkeit auch von der Größe und Art der Schrift ab. Eine breit laufende Montserrat in 28 Pixel Höhe liest sich angenehmer als eine schmal laufende Roboto Condensed in 17 Pixel Höhe, auch wenn die Zeile dieselbe Breite hat.

Gut lesbar sind 50 bis 75 Zeichen inklusive Leerzeichen. Dafür gibt es in CSS eine eigene Einheit: ch entspricht ungefähr der Breite eines Zeichens. Ungefähr, weil natürlich nicht alle Zeichen gleich breit sind (ein t ist schmaler als ein M). Mit max-width: 70ch; begrenzt du die Zeile auf rund 70 Zeichen, egal auf welchem Display. In Divi trägst du die Angabe im Textmodul unter Erweitert > Benutzerdefiniertes CSS > Hauptelement ein. Die Zeile passt sich der Schriftgröße automatisch an, du musst nichts nachrechnen.

Fehler 2

Textwüsten – zu wenig Absätze

Oft gesehen, besonders auf Magazinseiten: Die Textblöcke haben zu wenig Absätze. Texte nehmen auf den meisten Websites den größten Teil der Fläche ein. Umso erstaunlicher, wie wenig Aufmerksamkeit die Absätze bekommen. Riesige Textblöcke ohne Gliederung machen jede Seite unübersichtlich, die berüchtigten Textwüsten. Lesen am Bildschirm ist anstrengend, und auf Websites wird anders als in Büchern eher gescannt als gelesen.

Gliedere deine Texte deshalb in kurze, leicht verdauliche Happen: Absätze mit höchstens drei bis fünf Zeilen, alle drei bis vier Absätze eine Zwischenüberschrift. So erkennen deine Leserinnen auf einen Blick, wo sie einsteigen wollen. Auch Listen helfen:

• Listen bringen Abwechslung in den Text.
• Listen lockern lange Seiten auf.
• Listen bleiben gut im Gedächtnis.
• Google übernimmt gut strukturierte Listen gern in die Suchergebnisse.

Fehler 3

Schriften, die das Lesen erschweren

Vorbei die Zeiten, als Websites mit drei oder vier Schriften auskommen mussten. Mit Google Fonts steht dir heute eine riesige Auswahl zur Verfügung. Wer die Wahl hat, hat die Qual: Die meisten Websitebetreiberinnen sind keine Designerinnen und greifen zu Schriften, die im Fließtext schwer zu lesen sind.

Ein wichtiger Hinweis vorab: Binde Google Fonts lokal ein, sonst verstößt deine Website gegen die DSGVO. Wie du Google Fonts DSGVO-konform einsetzt, habe ich im Artikel > Google Fonts DSGVO-konform einbinden beschrieben.

Schmale und sehr feine Schriftschnitte

Manche Schriften sind sehr schlank geschnitten, etwa die Condensed-Schnitte vieler Schriftfamilien. Ich finde sie schick, sie wirken edel. Im Fließtext sind sie eine Katastrophe, besonders für Augen ab 50. Ebenso problematisch sind sehr feine Schnitte, oft als „Thin“ oder „Light“ bezeichnet. Auf Papier sehen sie elegant aus, auf dem Display verschwimmen die dünnen Linien. Für Überschriften und kurze Teaser können schmale Schnitte gut funktionieren, für längere Texte nimm einen normalen Schnitt.

Script-Schriften

Script-Schriften sehen aus wie von Hand geschrieben. Sie wirken nahbar und bringen eine persönliche Note in den Text. Zu vielen Branchen passen sie wunderbar. Ihr Haken: Sie sind oft miserabel lesbar. Neulich las ich auf einer Website eine wunderschön geschwungene Überschrift. Aber: Ich konnte auf den ersten Blick nicht erkennen, ob ein Buchstabe ein f oder ein s war. Ich kam ins Stocken und musste mehrmals lesen. Es war ein s.

Wer fünf Sekunden braucht, um eine Überschrift zu entziffern, verliert wertvolle Zeit, bevor er überhaupt erfährt, worum es geht. Setz Script-Schriften deshalb sparsam ein, für einzelne Akzente, nie im Fließtext.

Serifen-Schriften, besser als ihr Ruf

Lange galt die Regel: Serifenschriften gehören auf Papier, am Bildschirm sind sie schwer lesbar. Das stimmte zu Zeiten grob auflösender Monitore. Auf heutigen Displays funktionieren gut gemachte Serifenschriften auch im Fließtext, viele Zeitungen setzen sie online ein. Voraussetzung ist eine ausreichende Schriftgröße. Wichtiger als die Frage „Serife oder nicht“ ist eine andere Regel: Kombiniere höchstens zwei Schriften, eine für Überschriften und eine für den Fließtext. Und: Setze den Fließtext mit Serifenschriften nicht zu klein.

Fehler 4

Formatierungen, die das Lesen erschweren

Auf einer Website mit Rezepten musste ich vor einiger Zeit einen Text lesen, der in sechs längeren Absätzen kursiv gesetzt war. Ich habe drei Anläufe gebraucht, um ihn zu erfassen. Natürlich war das Rezept nicht schwer zu verstehen. Aber ich hatte Mühe, den Text lesen zu können. Denn: Im längeren Fließtext ist Kursivschrift das reinste Augenpulver.

Ähnlich anstrengend sind ganze Absätze in Fettschrift oder in Großbuchstaben. Hinzu kommt die Wirkung solcher Formatierungen: Hervorhebungen wirken nur, wenn sie selten sind: Ist alles fett, ist nichts mehr wichtig. Und unterstrichene Wörter halten Leserinnen auf Websites für Links. Hebe nur einzelne Begriffe fett hervor, sparsam und gezielt.

Fehler 5

Zu kleine Schrift und ungünstiger Zeilenabstand

Was nützt das schönste Layout, die besten Bilder und der hilfreichste Inhalt, wenn die Schrift kaum zu lesen ist? Auf vielen Websites ist die Schrift zu klein oder der Zeilenabstand zu eng. Junge Augen kommen damit zurecht, ältere nicht. Gib deine Texte deshalb auch Menschen über 50 zum Testen. Auch wenn du selbst in diesem Alter bist: Du kennst deine Inhalte und kannst deshalb alles lesen. Nicht aber deine Besucher: Sie sind neu auf deinen Texzen und bemerken Probleme, die dir selbst nicht auffallen.

Für den Fließtext gilt als Untergrenze 16 Pixel, angenehmer sind 18 Pixel. Auf dem Smartphone bleibt die Schrift gleich groß, denn du hältst das Handy näher vor die Augen. Beim Zeilenabstand liegt der gute Bereich beim 1,5- bis 1,7-Fachen der Schriftgröße. Ist er zu eng, kleben die Zeilen aneinander und das Auge rutscht in die falsche Zeile. Ist er zu weit, zerfällt der Text in einzelne Streifen, und deine Leserinnen müssen unnötig scrollen. Überschriften brauchen weniger Abstand, dort reicht das 1,1- bis 1,3-Fache.

Fehler 6

Komplizierte Sätze, die die Lesbarkeit vermindern

Zugegeben, dieser Punkt betrifft weniger die Gestaltung als den Inhalt. Trotzdem gehört er hierher: Mit deinen Formulierungen entscheidest du mit darüber, wie gern deine Besucherinnen lesen. Du wirkst nicht schlauer oder professioneller, wenn du Thomas-Mann-Schachtelsätze baust oder Fachbegriffe wie ein Wissenschaftler verwendest. Bei komplizierten Sätzen passiert nur eins: Du wirst nicht verstanden. Worauf es ankommt:

• Einfachheit: kurze Sätze, kurze Wörter, überflüssige Fachbegriffe vermeiden
• Satzbau: ein Gedanke pro Satz, das Wichtigste an den Anfang
• Prägnanz: viele Verben und anschauliche Bilder machen den Text lebendig und verständlich

Lesbarkeit messen: der Flesch Reading Ease

Für die Lesbarkeit von Texten gibt es sogar ein wissenschaftliches Maß, den Flesch Reading Ease. Er berechnet aus Satzlänge und Silbenzahl einen Wert, der zeigt, wie leicht ein Text zu lesen ist. Deinen eigenen Text prüfst du kostenlos auf fleschindex.de. Falls dich das Thema interessiert und du tiefer darin einsteigen möchtest, kann ich dir Bücher zu diesem Thema empfehlen: „Deutsch für junge Profis“ von Wolf Schneider und „Das Leben und das Schreiben“ von Stephen King. Ja, DER Stephen King, der von „Carrie“ und „Shining“. Horrorfilm-Fan bin ich nicht gerade, das Buch empfehle ich trotzdem gern.

Fehler 7

Zu wenig Kontrast

Hellgraue Schrift auf weißem Grund sieht modern aus und ist für viele Augen eine Zumutung. Genauso schwierig sind bestimmte Farbkombinationen, etwa gelbe Schrift auf rotem Grund oder Hellblau auf Dunkelblau. Du weißt nie, wie gut die Augen deiner Leserinnen sind, egal ob deine Zielgruppe junge Eltern sind oder Menschen im Ruhestand.

Als Maßstab gelten die internationalen Richtlinien für Barrierefreiheit (WCAG): Normaler Text braucht einen Kontrast von mindestens 4,5 : 1 zum Hintergrund, große Überschriften mindestens 3 : 1. Deine Farbkombination prüfst du kostenlos mit dem Contrast Checker von WebAIM. Du gibst Schrift- und Hintergrundfarbe ein und siehst sofort, ob der Kontrast reicht.

Barrierefreiheit ist seit Juni 2025 auch ein rechtliches Thema: Das Barrierefreiheitsstärkungsgesetz gilt vor allem für Onlineshops und digitale Dienstleistungen für Verbraucherinnen. Lesbare Kontraste gehören aber auf jede Website. Was du bei Bildern für die Barrierefreiheit tun kannst, liest du in meinem Artikel Website-Bilder optimieren.

Fehler 8

Zu viele unterschiedliche Farben

Wie oft habe ich Websites gesehen, die aussehen wie zugeklebte Litfaßsäulen: hier ein Bild, da eine Grafik, knallbunt und überladen. Die Elemente einer Website haben zwei Aufgaben:

• die Leserinnen informieren
• die Leserinnen beim Lesen führen

Und was haben nun Farben mit der Lesbarkeit zu tun? Form follows function: Die Inhalte sind der Maßstab für die Gestaltung, für Texte, Bilder, Farben, Schriften und Weißraum. Wenn deine Texte umgeben sind von zu vielen farbigen Elementen oder die Schriften selbst viele unterschiedliche Farben haben, werden die Lesenden maximal verwirrt. Die Einordnung der Inhalte fällt schwer, die Lesenden werden abgelenkt.

Zwei bis drei Farben reichen für eine stimmige Website, dazu eine Akzentfarbe für Buttons und Links. Sparsam eingesetzt, strukturieren Farben die Seite und führen das Auge. Zu viele Farben und Bilder ermüden. In Nullkommanix sind deine Leserinnen von der Reizflut übersättigt und verlieren das Wesentliche aus den Augen. Du möchtest, dass sie deine Texte lesen und dein Angebot verstehen. Manchmal ist weniger mehr.

Fehler 9

Blocksatz und zentrierter Fließtext

Blocksatz sieht ordentlich aus: Alle Zeilen enden bündig, links wie rechts. Im Buch funktioniert das, weil dort Silbentrennung und sorgfältiger Satz die Abstände ausgleichen. Eine intensive Arbeit, für die es nicht umsonst Profiprogramme gibt. Auf Websites fehlt das. Der Browser zieht die Wortabstände auseinander, bis die Zeile voll ist, und es entstehen Löcher im Text. Untereinander liegende Lücken bilden sogar senkrechte weiße Bahnen, im Druck heißen sie Gießbäche. Im Beispielbild siehst du einige der Gießbäche mit einem roten Punkt markiert.

Auf dem Smartphone wird es noch schlimmer: Bei schmalen Zeilen mit wenigen Wörtern reißen die Lücken besonders weit auf. Da kann es schon mal passieren, dass in einer Zeile zwei Wörter stehen, links und rechts, dazwischen eine riesige Lücke. Setz deinen Fließtext deshalb linksbündig. Der unregelmäßige rechte Rand stört nicht, er hilft dem Auge sogar, die nächste Zeile zu finden. Dasselbe gilt für zentrierten Fließtext. Für eine Überschrift oder ein kurzes Zitat ist er in Ordnung. Bei mehreren Zeilen muss das Auge an jedem Zeilenanfang neu suchen, wo es weitergeht.

Fazit: Lesbarkeit ist Gestaltung

Lesbare Website-Texte entstehen aus vielen kleinen Entscheidungen: Zeilenlänge, Schrift, Schriftgröße, Zeilenabstand, Kontrast und Satzbau. Jede einzelne wirkt unscheinbar. Zusammen entscheiden sie darüber, ob deine Besucherinnen bleiben und lesen oder nach wenigen Sekunden wieder gehen. Gute Gestaltung beginnt beim Konzept und endet nicht beim Design. Sie zeigt sich darin, wie mühelos deine Besucherinnen deine Texte lesen.

Du möchtest Website und Texte aus einer Hand, lesbar gestaltet und auf deine Zielgruppe abgestimmt? Buch dir ein kostenloses Erstgespräch.

Du willst deine Website selbst bauen und dabei begleitet werden? In meinem 1:1-Website-Mentoring „Website Gold“ zeige ich dir, wie.

FAQ zur Lesbarkeit von Website-Texten