Webtypografie – 3 Tipps, um die Lesbarkeit von Webtexten zu verbessern

typographie-webdesign

Derzeit wird viel über Responsive Webdesign, mobile Geräte oder das beste Framework diskutiert. Bilder müssen verkleinert und Spalten vergrößert/verkleinert oder verschoben werden. Viel zu kurz kommt dabei oftmals aber der Inhalt, sprich der Text.

In den letzten Jahren hat sich viel im Bereich der Webtypografie getan. Deutlich größere und besser lesbare Schriften, Webfonts und Silbentrennung sind nur 3 Beispiele. Gerrit van Aaken hat sogar ein Buch darüber geschrieben. Und auch t3n berichtet immer häufiger über Typografie im Webdesign, wie zuletzt im Artikel von Sébastien Bonset über Typografie für mobile Geräten. Und doch wird das Web vor allen Dingen von Webentwicklern vorangetrieben, für die Texte meist nur Beiwerk sind und denen deswegen keine besondere Aufmerksamkeit geschenkt wird (bspw. line-height in px in Bootstrap). Ein paar Designer wiederum lassen den Text zwar besser aussehen, tragen aber auch nur begrenzt zur besseren Lesbarkeit bei. Aber werden über 90% der Websites nicht eigentlich mit dem Gedanken erstellt, dass man sich durch Texte über ein Thema informieren kann?

Die richtige Schriftauswahl und -verwendung

Die Vielzahl der Webfonts hat die Auswahl der richtigen Schrift ein wenig schwieriger gemacht. Statt einer Hand voll können wir nun aus Millionen von Schriften wählen. Während Schreib- und Handschriften generell nur sparsam und eher für dekorative Zwecke eingesetzt werden sollten, sollte man gerade für Überschriften und Fließtexte genau hinsehen. Hier spielt die x-Höhe, also die Höhe eines kleinen x im Vergleich zu Großbuchstaben genauso eine Rolle wie die Strichstärke. In den meisten Fällen ist die Lesbarkeit von Schriften mit einer höheren x-Höhe besser.

typekit-fonts

Ebenso sollten Schriften nicht zu fett aber auch nicht zu dünn sein. Denn durch die Strichstärke ändert sich auch der Kontrast einer Schrift. Hier ist ein wenig Augenmaß gefragt. Prinzipiell lässt sich aber sagen:

dünne Schriften = stärkerer Kontrast, dicke Schriften = weniger Kontrast

Der Webfont-Anbieter Typekit gibt in seinem Font-Browser klare Empfehlungen, welche Schriften sich für beispielsweise Überschriften oder Fließtexte besonders eignen.

Selbst wenn man die perfekte Schriftart gefunden hat, kann man es dennoch schaffen, diese schlechter lesbar zu verwenden. Überschriften in Versalien sind so ein Beispiel. Sie sind deutlich schlechter zu lesen ist, als eine normale Überschrift mit einem Wechsel aus Groß- und Kleinbuchstaben. Das Gleiche gilt für Condensed-Schriftschnitte, die nur in ausreichender Größe gut lesbar sind. Es hat schon seine Gründe, warum man sie früher vor allen Dingen für das Kleingedruckte verwendet hat.

Empfehlungen für Zeilenlänge und Zeilenabstand

Seit den frühen Anfängen des Webdesigns wurden Websites mehrspaltig angelegt. Denn schon damals wusste man, dass Texte sich — gerade am Monitor — nicht gut lesen lassen, wenn sie eine gewisse Anzahl von Zeichen pro Zeile überschreiten. Bis heute liegt die optimale Zeilenlänge bei 50-80 Zeichen. Will oder muss man diese Zeilenlänge überschreiten, sollte man auf jeden Fall auch den Zeilenabstand zu erhöhen (line-height zwischen 1.4 und 1.6). Dadurch findet das Auge besser den Anfang der nächsten Zeile. Bei weniger als 50 Zeichen sorgt ein geringerer Zeilenabstand (line-height 1.1 bis 1.3) für angenehmes Lesen.

line-height-typograpie

Diese Regeln sind zunächst allgemein gültig. Allerdings haben auch Displaygröße, der Abstand zum Display und die Umgebung, in der wir uns befinden Auswirkungen auf die Lesbarkeit von Texten. Im Büro sitze ich vor einem 24″ Monitor in ca. 80 cm Entfernung, während mein Macbook mit 11″ zu Hause eher in vielleicht 50 cm auf meinem Schoß liegt. Smartphones und Tablets werden, je nach Situation, z.B. zu Hause oder im Bus auf dem Weg zur Arbeit, in 20 bis 60 cm Entfernung gehalten. Deswegen kann es durchaus sinnvoll sein, die Schriftgröße anzuheben, so dass die Zeilenlänge vielleicht nur 40 Zeichen lang ist, die Lesbarkeit dennoch insgesamt verbessert wird.

Die Hierarchie von Texten

Ob ein Text lesefreundlich ist, hängt nicht zuletzt auch von seiner Struktur ab. Ohne zu sehr auf den Inhalt eingehen zu wollen, sollten Texte so angelegt sein, dass man durch kürzere Absätze und Zwischenüberschriften als Leser immer wieder die Chance bekommt, einzusteigen. Damit dies klappt, sollten der Inhalt auch visuell so aufbereitet sein, dass eine Zugehörigkeit von Überschrift und Text eindeutig ist. Es kommt also auf die richtigen Abstände an.

semantik-in-bloecken

Ob man seinen Job gut gemacht hat, lässt sich herausfinden, indem man seine Texte als Blöcke betrachtet. Alternativ könntet Ihr auch die Schriftart BLOCKK benutzen.

Weiterführende Links

Ich bin Steuermann bei Erdmann & Freunde, einem Netzwerk für Contao-Webworker, und schreibe hier über Themen aus dem Bereich Webdesign und Webentwicklung.

2 Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.