7 Schritte zu besserer Typografie im Web

Qualitativ hochwertige Texte sind nach wie vor die beste Möglichkeit sich im Web eine dauerhafte Leserschaft aufzubauen. Doch was helfen gute Inhalte, wenn die Optik nicht stimmt? Mit diesen 7 einfachen Tipps kannst Du die Typografie Deiner Website verbessern.

1. Visuelle Hierarchie

Wer viel Text im Internet veröffentlicht, der sollte seinen Lesern die Möglichkeit geben, zwischen verschiedenen Textelementen zu unterscheiden, um die Bedeutung eines Textes besser und schneller erfassen zu können. Die Bedeutung eines Textelements kann zum Beispiel durch seine Größe oder Gewichtung verdeutlicht werden. Ein Webdesigner, der seinen Job besonders ernst nimmt, legt für diese Zwecke eine »Schriftgrößen-Skala« an. Diese könnte etwa so aussehen, dass normaler Fließtext die Schriftgröße 12 erhält, Zwischenüberschriften 18 und Hauptüberschriften die Schriftgröße 24. Wenn man sich nicht gerade für »Comic Sans« oder »Impact« als Schriftart entscheidet, ist auf diese Weise ein harmonisches Schriftbild schon fast garantiert.

Ein Fehler, der leider auf sehr vielen Websites gemacht wird, ist der, alle Textelemente in derselben Schriftgröße zu präsentieren. Dies mag aus Sicht des Entwicklers einfach und wartungsarm sein, für viele Leser stellt es jedoch eine Barriere dar und hält sie davon ab, den Sinn eines Textes überhaupt zu erfassen.

2. Zwischenüberschriften

Insbesondere längere Texte sollten unbedingt durch Zwischenüberschriften aufgelockert werden, und zwar unter Zuhilfenahme einer Schriftgrößen-Skala (siehe Punkt 1). Zwischenüberschriften sorgen dafür, dass Leser die Kernaussagen eines Textes viel schneller erfassen können, ohne gleich den gesamten Text durchlesen zu müssen. Sie können dem Leser auch helfen, einen Einstieg irgendwo mitten im Text zu finden. Es ist ein Mythos zu glauben, dass jeder Leser einen Text immer vom ersten bis zum letzten Wort durchliest. Viele möchten an einer anderen Stelle einsteigen. Geschickt gesetzte Zwischenüberschriften können dies erheblich erleichtern.

3. Optimale Zeilenlänge

Insbesondere bei der Desktop-Ansicht der eigenen Website läuft man schnell Gefahr, den Leser mit zu langen Zeilen zu überfordern. Eine Faustregel (die ursprünglich aus dem Buchdruck stammt) besagt, dass eine Zeile nie mehr als 12 Wörter enthalten sollte, um eine gute Lesbarkeit zu gewährleisten. Mit jedem Wort, das darüber hinausgeht, wird es für das menschliche Auge schwieriger, den Anfang der nächsten Zeile zu finden.

Besonders wichtig ist diese Regel bei langen Fließtexten, zum Beispiel Fach- oder Blog-Artikeln. Um dem Leser hier optimalen Lesekomfort zu bieten, sollte man die Schriftgröße so weit erhöhen bis die Regel erfüllt ist. (Natürlich sollte dabei auch die Zeilenhöhe entsprechend angepasst werden.)

Ein Fließtext in Schriftgröße 24 mit maximal 12 Wörtern pro Zeile ist wesentlich lesbarer als einer in Schriftgröße 12 mit 24 Wörtern pro Zeile. Für einen Webdesigner gibt es keinen Grund sich für große, gut lesbare Schrift zu schämen!

4. Anzahl und Auswahl von Schriftarten

Man sollte weder zu viele Schriftarten verwenden (was schnell unübersichtlich wirkt) noch sich störrisch an nur eine einzige klammern (was schnell einfallslos wirkt). In der Praxis hat sich ein Mix aus zwei, maximal drei, Schriftarten bewährt. Auch bei sehr großen Websites mit vielen redaktionellen Inhalten reicht dies in der Regel völlig aus.

Was immer gut funktioniert, ist die Paarung einer Serifenschrift mit einer Nichtserifenschrift. Schöne Kombinationen gibt es bei Font Pair zu bewundern.

Zum Glück sind die Zeiten vorbei, in denen man auf »browser-sichere« Schriftarten zurückgreifen musste. Heutzutage findet man bei Google Web Fonts, Typekit oder FontSquirrel ein überwältigendes Angebot an Schriften.

Bei den beiden erstgenannten werden die Schriften via Javascript in die Website eingebettet, weswegen es sich sowieso empfiehlt, die Anzahl der Schriftarten auf zwei zu begrenzen. Alles andere wäre gerade auf mobilen Endgeräten nicht mehr zu vertreten, weil die Wartezeiten bis zum Laden des Javascripts zu lang wären.

Weitere Quellen für kostenlose Web-Schriften finden sich im Artikel @font-face kompatible Schriften gratis im Netz. Außerdem zeigt Lars Ebert in diesem Artikel, welche Möglichkeiten @font-face darüber hinaus noch bietet.

5. Design folgt Funktion

Im Gegensatz zu Druckerzeugnissen nimmt Typografie im Web deutlich mehr Funktionen wahr. Die Benutzer interagieren mit Links, Buttons, Hauptmenüs, Untermenüs etc. Diese unterschiedlichen Funktionen kann und sollte ein Webdesigner mit Hilfe von Typografie hervorheben und verdeutlichen.

Ein Link zum Beispiel sollte farblich vom umgebenden Fließtext abgesetzt sein. Ist er das nicht, dann sollte er zumindest unterstrichen sein, um dem Benutzer seine Funktion zu verdeutlichen. Mittels CSS lassen sich auch explizit externe Links hervorheben, um dem Nutzer einen weiteren Mehrwert zu bieten.

Ähnlich verhält es sich mit anderen Elementen auf der Website. Das Hauptmenü etwa sollte zwar eine der beiden unter Punkt 4 definierten Schriftarten aufweisen. Es spricht aber nichts dagegen, die einzigartige Funktion, die das Hauptmenü erfüllt, mit anderen optischen Mitteln zu verdeutlichen. So könnte man es zum Beispiel auf einer farblich hinterlegten Leiste platzieren, die Buchstaben mittels CSS als Großbuchstaben ausgeben oder den horizontalen Abstand zwischen den Buchstaben leicht erhöhen.

6. Ausreichend Weißraum

Weißraum ist eigentlich etwas ziemlich banales. Es ist die Fläche einer Website, die leer ist und keinen Text oder andere Inhalte enthält. Der Weißraum kann auch vergrößert werden, indem man einfach nur die Zeilenhöhe eines Fließtextes oder die Abstände zwischen zwei Absätzen erhöht.

Websites mit viel geschickt eingesetztem Weißraum wirken großzügiger und edler. Der Effekt ist so ähnlich wie beim Betreten eines Wohnhauses. Ein großer Salon wirkt wesentlich edler, prächtiger und einladender als ein mit Kartons zugestellter Flur in einer 1-Zimmer-Wohnung.

Gerade im Web gibt es eigentlich keinen Grund, sich diesen Effekt nicht zunutze zu machen. Zumal es ja im Gegensatz zum genannten Beispiel aus der Immobilienbranche keinerlei Mehrkosten verursacht.

Es ist auffallend und schade, dass bei vielen Websites Platz scheinbar als etwas kostbares gesehen wird. Dort wird dann oft versucht, möglichst viel winzigen Text mit geringer Zeilenhöhe auf eine Seite zu stopfen.

Hier gilt es anzusetzen und den eigenen Besuchern eine Website zu präsentieren, die mit viel luftigem Weißraum glänzt und zum Lesen einlädt.

7. Kurze Wörter bevorzugen

Im Gegensatz zu vielen andere Sprachen bietet die deutsche Sprache die Möglichkeit unendlich viele Hauptwörter miteinander zu verbinden und somit jeweils ein neues Wort zu erschaffen. Manchmal entstehen dabei regelrechte Wortungetüme.

Die Browser sind auch im Jahre 2016 leider noch nicht in der Lage, die Silben eines solchen Wortes automatisch und an den richtigen Stellen zu trennen. Damit es keine hässlichen Überlappungen gibt (gerade auch bei der mobilen Ansicht einer Website), sollte man solche Wörter tendenziell vermeiden und wenn das nicht möglich ist, einen Notbindestrich setzen, wo eigentlich keiner hingehört.

Auf diese Weise wird das Wort auch in der mobilen Ansicht einer Website einigermaßen korrekt umgebrochen und läuft nicht über den Bildschirmrand.

Alternativ kann auch mit der HTML-Entity ­ ein so genannter weicher Bindestrich angezeigt werden. Damit wird dem Browser mitgeteilt, dass an dieser Stelle mit einem Bindestrich bei Bedarf umgebrochen werden darf.

Fazit: Es sind die kleinen Dinge…

Bei Typografie gibt es viele Kleinigkeiten zu beachten, aber auch die Grundlagen müssen stimmen. Mit einer guten Kombination aus Schriftkombinationen, Schriftgrößen, Farben und Textfluss kann dem Leser das Lesen so einfach wie möglich gemacht werden. Je weiter man ins Detail geht, desto besser ist meistens auch das Ergebnis. Der Rest hängt dann nur noch von der Textqualität ab.