Texte besser darstellen

Vor geraumer Zeit habe ich für meine Webseite nach einem WordPress Theme geguckt. Ich habe hier gar kein WordPress laufen, aber die Idee war, sich ein Template zu schnappen und daraus ein Template für mein CMS zu bauen, um damit Zeit zu sparen. Dabei ist mir eine Sache aufgefallen, die besonders mich als Blogger gestört hat.

Während viele Themes extrem viel Wert auf zahlreiche Funktionen, Baukästen, Start- und Landingpages legen, fiel ein Bereich meist unten durch: Textseiten. Wenn man nicht gerade ein Foto-Blog betreibt, dann besteht so ein Blog nun mal maßgeblich aus Text. Leider machen die meisten Theme-Entwickler es sich an dieser Stelle sehr einfach. Sie nehmen ihr Standard-Layout und füllen dieses Mit Text und Bildern.

Das führt dann meist dazu, dass die Landingpages sehr gut aussehen und auch gut lesbar sind, die Beitragsseiten aber nicht. Während auf den Landingpages immer nur kleine Textblöcke zu sehen sind, die auch in der Breite nur eingeschränkt Platz haben, erstrecken sich die Texte im Blog über die gesamte Breite. Die Zeilen sind sehr lang und die Schriftgrößen oftmals viel zu klein für diese Zeilenweite.

Der Grundsatz

Natürlich hängt die Lesbarkeit von Texten von vielen Faktoren ab. Es lässt sich aber einer grober Grundsatz festlegen: Zeilenlänge und Frontgröße müssen gut aufeinander abgestimmt sein.

Eine Zeile sollte etwa 45 bis 75 Zeichen enthalten. Wie breit genau sie damit sein muss, hängt von der gewählten Schrift ab. Nimmt eine Zeile mehr Zeichen auf, so führt das dazu, dass das Auge beim Wechsel in die neue Zeile quasi den Überblick verliert. Ist man am Ende einer Zeile angekommen, muss man zu weit zurückspringen, verliert den Context und muss erstmal wieder schauen, in welcher Zeile es denn weitergeht. Bei sehr langen Zeilen kann man das selber sehr gut feststellen, meist geschieht das aber unbewusst. Man bemerkt es dann nur, wenn die Augen langsam müde werden.

Abstände

Im Zuge dessen sollte man übrigens auch auf den Zeilenabstand achten, der etwas Ähnliches bewirkt. Ist er zu groß oder zu klein, fällt es dem Auge schwer, die nächste Zeile zu finden.

Neben der Zeilenlänge spielt auch die Struktur des Dokuments eine Rolle. Dies hängt natürlich maßgeblich von der Autorin ab. Schließlich gliedert sie ihr Dokument. Aber auch ein gut gegliedertes Dokument kann schwer lesbar sein. Wichtig ist, dass Überschriften und Absätze im Dokument gut erkennbar sind. Der Hierarchie des Dokuments sollte gut erkennbar sein. Hauptüberschriften also groß und die Unter-Überschriften immer kleiner werdend.

Der Abstand von Überschrift zu Text sollte nicht zu groß und nicht zu klein sein. Das spielt auch bei Absätzen eine große Rolle. Der Abstand zwischen einzelnen Absätzen sollte stets so groß sein, dass er sich merklich vom Zeilenabstand abgrenzt. Aber nicht so groß, dass das Auge den nächsten Absatz verliert.

Whitespace

Schließlich sollte man dem Text noch Raum zum Atmen geben. Achte darauf, dass der Text genug Abstand zu anderen Elementen der Seite hat. Er sollte zum Beispiel nicht direkt an deiner Sidebar kleben. Whitespace lautet hier das Zauberwort. Klebt der Text zu sehr an anderen Elementen, macht es ihn schwer lesbar, unbewusst muss der Leser immer prüfen, was noch zum Text gehört und was nicht. Vielleicht lenken zu nahe liegende Elemente sogar vom Text ab und ziehen den Blick auf sich und damit weg vom Inhalt.

Natürlich ist es schwer in einem Audiopodcast etwas über gut lesbare Texte zu bringen, aber ich glaube hiermit hast du einen guten Überblick und kannst vielleicht bei der nächsten Theme-Auswahl mal die Texte im Auge behalten.

Zeilen nicht zu lang, kein zu großer oder kleiner Zeilenabstand, ordentliche Abstände zu anderen Elementen, zwischen Absätzen und Überschriften.

Das Thema ist ein Wissenschaft für sich, ich will das hier nicht runterspielen und ich bin auch wahrlich kein Experte. Es gibt Bücher über Bücher und etliche Beiträge dazu. Wer sich wirklich für das Thema interessiert, braucht zumindest keine Sorgen haben, dass ihr in den nächsten Jahren langweilig wird.

Wer Themes oder ganz allgemein Webseiten selber baut, der kann sich mal nach fertigen Systemen umschauen, die einem dabei helfen einen einheitlichen Rhythmus zu schaffen. Das betrifft dann Schriftgrößen, Abstände und Zeilenhöhen. Da gibt es fertige Sachen für Sass und Less. Aber auch CSS-Vorlagen.

Ich arbeite momentan mit so einem System und versuche es in den kommenden Wochen in meine Seite einzubauen. Auf das die Texte noch besser lesbar sind.

Mehr zum Nachlesen

https://www.smashingmagazine.com/2016/05/fluid-typography
https://www.invisionapp.com/blog/how-to-write-engaging-content
https://www.smashingmagazine.com/2009/03/10-principles-for-readable-web-typography