Lesbarkeit auf der Website verbessern: Texte, Abstaende und Struktur richtig nutzen

Wer zum ersten Mal eine eigene Website aufbaut, denkt meistens zuerst an Inhalte: Was soll draufstehen? Was biete ich an, was unterscheidet mich vom Wettbewerb? Die Frage, wie dieser Text auf dem Bildschirm aussieht und ob ihn jemand ueberhaupt liest, kommt oft erst viel spaeter - wenn ueberhaupt. Dabei entscheidet genau das darueber, ob ein Besucher bleibt oder nach wenigen Sekunden wieder geht.

Nach ueber einem Jahrzehnt als WordPress-Entwickler und nach mehr als 100 Projekten fuer kleine und mittlere Unternehmen in Deutschland und Polen sehe ich dasselbe Muster immer wieder: gute Inhalte, die niemand liest, weil sie nicht lesbar aufbereitet sind. In diesem Artikel erklaere ich, warum das so ist und was Sie konkret dagegen tun koennen - unabhaengig davon, welches CMS oder Design-Tool Sie nutzen.

Wie Besucher Websites wirklich lesen

Die kurze Antwort lautet: gar nicht. Zumindest nicht so, wie man ein Buch liest.

Forschungen zum Leseverhalten im Web zeigen seit Jahren dasselbe: Der Grossteil der Besucher ueberfliegt eine Seite, statt sie zu lesen. Das Auge bewegt sich entlang der linken Seite des Bildschirms, springt zu Ueberschriften, zu fett gedruckten Woertern, zu kurzen Aufzaehlungen. Wer interessiert ist, liest einzelne Abschnitte genauer - aber eben nur die, die auf Anhieb relevant wirken.

Das ist kein Zeichen von Faulheit oder mangelndem Interesse. Es ist schlicht das Ergebnis von Jahrzehnten Medienkonsum: Das Gehirn lernt schnell, welche Seiten brauchbare Informationen liefern und welche nicht, und es entscheidet das innerhalb von Sekunden. Wenn Ihr Text wie eine Wand aussieht, laeuft dieses Urteil schon ab, bevor jemand auch nur den ersten Satz gelesen hat.

Der Unterschied zwischen Print und Web

Stellen Sie sich vor, Sie drucken einen Artikel aus Ihrer Unternehmensbroschure aus und kleben ihn 1:1 auf Ihre Website. Das Ergebnis sieht seltsam aus - zu dicht, zu kompakt, schwer zu navigieren. Genauso ergeht es tatsaechlich vielen Firmenseiten: Texte, die fuer Print geschrieben wurden oder die aus Word-Dokumenten stammen, landen unveraendert im CMS.

Print und Web haben grundlegend verschiedene Leseumgebungen. Im Druck ist Weissraum teuer, deshalb wird er sparend eingesetzt. Im Web ist er kostenlos und wirkt umso staerker. Im Druck blaettert der Leser, wenn er an Grenzen stoesst. Im Web verlaesst er die Seite. Im Druck wird ein langer Fliesstext als serioees empfunden. Im Web wirkt er abschreckend.

Das bedeutet nicht, dass Ihre Texte inhaltsarm sein sollen. Es bedeutet, dass dieselbe Information anders aufbereitet werden muss - aufgeteilt, gegliedert, mit Orientierungspunkten durchzogen.

Absaetze: kurz, kuerzer, lesbar

Der einfachste und wirkungsvollste Schritt zur besseren Lesbarkeit ist dieser: Brechen Sie lange Textbloecke auf.

Wenn ein Absatz laenger als vier Saetze wird, pruefen Sie, ob er sich sinnvoll teilen laesst. Oft ist das moeglich, ohne auch nur ein Wort zu aendern - ein Gedanke endet, ein neuer beginnt, und genau dort kommt der Absatzumbruch. Der Effekt auf dem Bildschirm ist verbluffend: Derselbe Text wirkt sofort zugaenglicher, leichter, einladender.

Bei einem Kundenprojekt - eine Steuerberatungskanzlei aus Hamburg - hatte die Leistungsseite fuenf lange Absaetze ohne eine einzige Zwischenueberschrift. Wir haben den Text in zwoelf kuerzere Abschnitte aufgeteilt, drei Zwischenueberschriften eingefuegt und zwei Aufzaehlungen ergaenzt. Der Inhalt war derselbe. Die Verweildauer auf der Seite stieg deutlich, und die Anfragen ueber das Kontaktformular nahmen zu. Aufwand: knapp eine Stunde.

Zwischenueberschriften als Orientierungskarte

Zwischenueberschriften (H2, H3) sind keine Dekoration. Sie sind die Landkarte Ihres Textes.

Ein Besucher, der Ihren Text ueberfliegt, liest zuerst nur die Ueberschriften. Wenn diese klar und inhaltlich aussagekraeftig sind, entscheidet er, welche Abschnitte er genauer liest. Wenn sie nichtssagend sind - zum Beispiel Mehr ueber uns, Unsere Leistungen oder Kontakt - gibt er auf.

Gute Zwischenueberschriften fassen zusammen, was der Abschnitt bringt. Sie beantworten eine Frage oder benennen ein Problem. Welche Kosten fallen an ist besser als Kosten allein. So laeuft die Zusammenarbeit ab ist besser als Prozess.

Fuer Unternehmenswebsites gilt: Eine Seite mit mehr als 400-500 Woertern sollte mindestens zwei bis drei Zwischenueberschriften haben. Nicht als Pflicht, sondern weil der Text ohne sie fuer den Scanner unbrauchbar ist.

Aufzaehlungen: wann sie helfen und wann nicht

Aufzaehlungen eignen sich hervorragend fuer Merkmale, Schritte und Vergleiche. Sie brechen den Textfluss auf, erlauben das schnelle Scannen und helfen dem Leser, Informationen zu behalten.

Sie eignen sich nicht als Ersatz fuer jeden Fliesstext. Wenn drei Punkte in einer Liste eigentlich zusammenhaengen und aufeinander aufbauen, verliert man durch die Aufzaehlung den Zusammenhang. Und wenn jede Seite Ihrer Website aus nichts als Listen besteht, verliert der Besucher das Gefuehl, mit einem echten Unternehmen zu sprechen.

Eine gute Faustregel: Alles, was vier oder mehr gleichwertige Punkte hat, darf eine Liste werden. Alles darunter kann auch als Satz formuliert werden.

Weissraum: der unsichtbare Helfer

Weissraum ist der Raum zwischen Elementen: zwischen Absaetzen, neben dem Text, ueber und unter Ueberschriften, um Bilder herum. Viele Website-Betreiber behandeln ihn als verschwendeten Platz und versuchen, ihn mit Inhalten zu fuellen. Das ist ein Fehler.

Weissraum reduziert, was Typografen als kognitive Last bezeichnen: die Anstrengung, die das Gehirn aufwenden muss, um Informationen zu verarbeiten. Eine dicht bepackte Seite signalisiert dem Gehirn unbewusst: Das ist viel Arbeit. Eine luftige Seite mit grosszuegigen Abstaenden sagt: Das ist leicht zu lesen.

Das bedeutet nicht, dass Ihre Seite halb leer aussehen soll. Es bedeutet, dass Abstaende zwischen Elementen bewusst und grosszuegig gesetzt werden sollten. Wenn Ihnen Ihre Seite beim Bearbeiten schon fast zu luftig vorkommt, ist sie wahrscheinlich genau richtig.

Fuer alle, die eine professionelle Website erstellen lassen: Dieses Thema sollte beim ersten Briefing auftauchen. Ein gutes Design plant Weissraum von Anfang an ein, statt ihn nachtraeglich zu ergaenzen.

Zeilenlaenge und Zeilenabstand: die unterschaetzten Parameter

Zwei typografische Werte haben einen enormen Einfluss auf die Lesbarkeit, werden aber auf den meisten Unternehmenswebsites nicht bewusst gesteuert: Zeilenlaenge und Zeilenabstand.

Zeilenlaenge: Das Auge braucht beim Lesen Orientierung. Ist eine Zeile zu lang, verliert es beim Sprung zur naechsten Zeile leicht den Anfang. Ist sie zu kurz, hetzt das Auge staendig hin und her. Der optimale Bereich liegt bei etwa 55 bis 70 Zeichen pro Zeile auf dem Desktop, was in der Praxis einer Textbreite von rund 650 bis 750 px entspricht. Viele Themes setzen den Inhalt von Rand zu Rand, was auf breiten Bildschirmen zu Zeilen mit 100 oder mehr Zeichen fuehrt. Das laesst sich in CSS einfach begrenzen.

Zeilenabstand: Der Abstand zwischen zwei Zeilen (in CSS: line-height) sollte mindestens das 1,5-fache der Schriftgroesse betragen. Bei einer Schriftgroesse von 17 px sind das mindestens 25-26 px Zeilenabstand. Viele Standard-Einstellungen liegen bei 1,2 oder sogar darunter - das reicht fuer Ueberschriften, macht aber Fliesstext anstrengend zu lesen.

Beide Parameter lassen sich in WordPress ueber das Theme-Stylesheet oder ueber den Customizer anpassen, ohne den Inhalt anzutasten. Wenn Sie sich fuer verschiedene Arten von Websites interessieren, werden Sie feststellen: Blogs und Content-Seiten halten diese Werte meistens besser ein als klassische Firmen-Homepages.

Schriftgroesse und Kontrast: Grundvoraussetzungen

Vor allem anderen braucht ein Text zwei Dinge: Er muss gross genug sein, und er muss sich deutlich vom Hintergrund abheben.

Schriftgroessen unter 16 px fuer Fliesstext gelten auf modernen Bildschirmen als zu klein. Wer eine Zielgruppe ab 45 Jahren anspricht - was bei vielen deutschen KMU der Fall ist - sollte eher 17 bis 18 px waehlen. Das klingt nach einem kleinen Unterschied, macht aber gerade auf Smartphones einen grossen Unterschied in der Lesbarkeit.

Kontrast ist genauso wichtig. Hellgrauer Text auf weissem Hintergrund sieht elegant aus, ist aber fuer viele Menschen schwer lesbar - insbesondere bei direktem Lichteinfall auf dem Bildschirm oder bei eingeschraenkter Sehkraft. Dunkler Text auf hellem Hintergrund (oder heller Text auf dunklem Hintergrund, konsequent durchgezogen) funktioniert besser.

Ein einfacher Test: Fotografieren Sie Ihre Website in einem hellen Raum oder im Sonnenlicht. Was Sie dann noch lesen koennen, ist lesbar. Was Sie nicht mehr lesen koennen, sollte ueberarbeitet werden.

Typische Fehler auf Unternehmenswebsites - und was zu tun ist

Nach Dutzenden Website-Audits fuer Unternehmen unterschiedlichster Branchen begegnen mir immer wieder dieselben Probleme. Hier die haeufigsten - mit direkten Loesungen.

Die Textwueste: Eine Seite voller langer Absaetze ohne Unterbrechung. Loesung: Absaetze aufteilen, Zwischenueberschriften ergaenzen, mindestens eine Aufzaehlung einbauen.

Der Brochuerentext: Texte, die aus dem Printbereich stammen und unveraendert uebernommen wurden. Loesung: fuer das Web kuerzen, in Abschnitte gliedern, wichtige Aussagen fett hervorheben.

Die Schrift zu klein: Fliesstext unter 15 px, haeufig kombiniert mit schwachem Kontrast. Loesung: Schriftgroesse auf mindestens 16 px anheben, Textfarbe auf Kontrast pruefen.

Die volle Breite: Text laeuft von Rand zu Rand des Browsers, bei breiten Bildschirmen deutlich ueber 80 Zeichen pro Zeile. Loesung: maximale Textbreite im CSS setzen, zum Beispiel max-width: 720px fuer den Inhaltsbereich.

Kein Fettdruck: Alle Woerter haben dasselbe visuelle Gewicht, der Scanner findet keine Ankerpunkte. Loesung: Zwei bis drei Schluesselwoerter oder -saetze pro Abschnitt fett setzen.

Wenn Sie verstehen wollen, was eine Website grundsaetzlich ausmacht, bevor Sie diese Optimierungen angehen, empfehle ich den Einstieg mit diesem Grundlagenartikel.

Die genannten Punkte lassen sich in den meisten Faellen ohne Programmierkenntnisse direkt im WordPress-Editor beheben. Fuer die technischen Parameter - Schriftgroesse, Zeilenabstand, Textbreite - hilft entweder ein Plugin wie Additional CSS im Customizer oder der direkte Weg ueber das Stylesheet des Themes. Wer dabei Unterstuetzung sucht, findet auf der Kontaktseite einen direkten Draht zu mir.

Lesbarkeit als fortlaufende Aufgabe

Die meisten Optimierungen, die ich in diesem Artikel beschrieben habe, kosten nicht viel Zeit. Eine Stunde pro Seite ist oft genug, um die Lesbarkeit deutlich zu verbessern. Und der Effekt ist nicht nur eine angenehmere Leseerfahrung: Eine gut lesbare Seite haelt Besucher laenger, reduziert die Absprungrate und erhoeht die Wahrscheinlichkeit, dass jemand tatsaechlich eine Anfrage stellt oder einen Kauf abschliesst.

Gut lesbare Texte sind auch eine Grundvoraussetzung fuer gutes SEO. Suchmaschinen werten Signale wie Verweildauer und Absprungrate als Qualitaetsmerkmale. Eine Seite, die niemand liest, rangiert schlechter als eine Seite, auf der Besucher bleiben.

Fangen Sie mit einer Seite an - am besten der, die am meisten Traffic bekommt oder auf der Sie am meisten Anfragen erwarten. Ueberarbeiten Sie sie nach den Regeln aus diesem Artikel. Dann schauen Sie, was sich veraendert. In den meisten Faellen sind die Ergebnisse schnell sichtbar.

Häufige Fragen

Wie lang sollte ein Absatz auf einer Website sein?

Als Faustregel gilt: zwei bis vier Saetze pro Absatz, nicht mehr. Im Web liest das Auge keine langen Bloecke durch - es sucht nach einem naechsten Orientierungspunkt. Kurze Absaetze geben dem Leser diesen Atemraum und machen den Text auf dem Smartphone besonders angenehm zu lesen.

Welche Schriftgroesse ist fuer Websites empfehlenswert?

Fuer Fliesstext sollte die Schriftgroesse mindestens 16 px betragen. Wer Kunden ab 45 Jahren ansprechen moechte, ist mit 17-18 px gut beraten. Ueberschriften der ersten Ebene beginnen sinnvoll bei 28-32 px. Aeltere Standardwerte von 12-14 px stammen aus einer Zeit, als Bildschirme deutlich grobkoerniger waren.

Was ist der Unterschied zwischen einem Webtext und einem Printtext?

Im Druck wird linear gelesen - Seite fuer Seite, Absatz fuer Absatz. Im Web scannen Besucher den Bildschirm entlang der linken Seite und ueberfliegen Zwischenueberschriften. Das bedeutet: Webtexte muessen kuerzer, klarer strukturiert und mit mehr Orientierungshilfen versehen sein als vergleichbare Printtexte. Ein Flyer-Text laesst sich nicht 1:1 auf eine Website uebertragen.

Wie viel Weissraum braucht eine Website?

Es gibt keine fixe Pixel-Zahl, aber die Faustregel lautet: Wenn Ihnen Ihre Seite schon fast zu luftig vorkommt, ist sie wahrscheinlich genau richtig. Weissraum zwischen Absaetzen, um Bilder herum und neben dem Text reduziert die kognitive Last erheblich. Die Versuchung, jeden freien Fleck zu fuellen, fuehrt auf Websites fast immer zu einem unleserlichen Ergebnis.

Helfen Zwischenueberschriften wirklich oder stoeren sie den Lesefluss?

Sie helfen - und zwar doppelt. Fuer den Leser sind sie Orientierungsmarken beim Scannen; er entscheidet anhand der Ueberschriften, welche Abschnitte er genauer liest. Fuer Suchmaschinen sind gut gewaehlte Ueberschriften (H2, H3) ein strukturiertes Inhaltsverzeichnis. Der Lesefluss wird nicht gestoert, solange die Ueberschriften inhaltlich korrekt sind und nicht rein dekorativ gesetzt werden.

Muss ich fuer bessere Lesbarkeit meinen Website-Text komplett neu schreiben?

Meistens nicht. Haeufig reicht es, bestehende Textbloecke in kleinere Absaetze aufzuteilen, Aufzaehlungen einzufuegen und Zwischenueberschriften zu ergaenzen. Der Inhalt bleibt derselbe - aber die Aufbereitung macht ihn zugaenglich. Komplettes Neuschreiben ist nur noetig, wenn der Text selbst unklar oder zu lang ist.

Ab welcher Textbreite wird es unleserlich?

Ueber 70-75 Zeichen pro Zeile verliert das Auge leicht den Anfang der naechsten Zeile - das ermueedet schnell. Unter 40 Zeichen wirkt der Text gehetzt und fragmentiert. Der ideale Bereich liegt bei 55-70 Zeichen fuer Desktop-Ansichten. In der Praxis laesst sich das durch eine maximale Textbreite von 680-750 px steuern, auch wenn die Seite breiter ist.