Vor kurzem haben wir uns einen Einblick in die Usability-Welt im Webdesign gegönnt. Typografie spielt eben auch hier eine große Rolle. Der schönst geschrieben Text bringt eben nicht sonderlich viel, wenn er nicht “gut” gelesen werden kann. Content ist zwar King – aber erst gute Typografie sorgt dafür, dass dieser überhaupt aufgenommen wird. Worauf kannst du also achten?

Typografie und ihre Emotionen

Bevor du dich bei einem neuen Projekt für eine Schrift entscheidest, wirst du dich wohl fragen, welcher Schrifttyp am besten passen wird. Entscheidend für die richtige Wahl ist auch die Tonalität der Webseite. Welcher Ausdruck soll vermittelt und welche Gefühle hervorgerufen werden? Auch hier ist die Vorüberlegung wieder hilfreich. Dein Projekt braucht vielleicht eher eine romantische, klassische und elegante oder doch lieber eine klare, moderne Schrift. Entsprechend der Idee wirst du dich zum Beispiel zwischen einer Serifenlosen (Sans Serif) oder Serifenschrift entscheiden. Bei lustigen oder coolen Anwendungen verwendest du eher eine spielerische und bewegte Schrift. Typografie macht Sprache eben nicht nur sichtbar, sondern wirkt auch emotional.

Die Schriftwahl

Neben dem Ausdruck trägt die Schriftform einen großen Teil zur guten Lesbarkeit bei. Früher galt die Überzeugung, serifenbetonte Schriftarten eignen sich im Web weniger als Serifenlose. Das geht aus den Zeiten der niedrig aufgelösten Bildschirmen hervor und hält sich auch noch heute hartnäckig in den Köpfen. Sicherlich spielt die Bildschirmauflösung noch immer eine Rolle, schließlich sind hochauflösende Monitore noch nicht überall Gang und Gebe. Lange Zeit war man auf die vorinstallierten Systemschriften angewiesen, dank den Webfonts wird die Auswahl nun aber endlich auch vielfältiger.

Es gibt insgesamt elf Schriftgruppen, die teilweise, vor allem bei den serifenbetonten Schriften, nur schwer zu klassifizieren sind. Hier ein kleiner Ausschnitt der Unterschiede:

Im Gezeigten beschränken wir uns hier allgemein auf die Eignung von Serifenlosen und Serifenschriften.

Technische Bedingungen

Schriften werden als Vektordaten erstellt, Bildschirme arbeiten mit Pixeln – eine kleine rechteckige Anzeigeeinheit. Die feinen Vektorkurven müssen in diese Screendarstellung eingepasst werden. Die Schriften werden gerastert. Diese Raster sind von Bildschirm zu Bildschirm unterschiedlich und bergen entsprechende Herausforderungen für manch eine Schrift. Der bekannte Treppeneffekt wird durch Kantenglättung optisch angepasst. Diese Optimierung ist auch abhängig von den Betriebssystemen und den Browsern selbst. Dank der Verbreitung hochauflösender Displays (die Pixeleinheiten sind kleiner geworden) – gerade auch durch Smartphones – wird die Darstellung immer weniger zum Problem – und natürlich durch die optimierten Webfonts.

Was groß funktionieren kann führt bei kleiner Anwendung häufig zu Schwierigkeiten.

Serife vs. Serifenlos

Was sind Serifen? Ein Charakterzug von Serifenschriften ist z. B. die unterschiedliche Strichstärke. Ist diese sehr stark ausgeprägt, wird es deutlich schwieriger im Netz gut gelesen zu werden. Dies war zum Beispiel ein Grund, weshalb Serifenschriften im Web – zumindest in kleinen Schriftgrößen – verpönt waren, denn die Darstellung war einfach schlechter. Umso kleiner die Schriftgröße, um so schlechter wird sie dann lesbar, aber in Headlines können sie dennoch ihre Wirkung entfalten. Vorallem wo Aufmerksamkeit erzeugt werden soll, eignen sich stark Serifenbetonte Schriften wegen des mutigen, markanten Aussehens.

Positivbeispiel – Serifenschrift: Yrsa
Obwohl diese Schrift serifenbetont ist, ist sie wunderbar geeignet für Headlines und bleibt auch im Fließtext gut lesbar. Hier gibt es nämlich kaum einen Kontrast zwischen den dicken und dünnen Linien.

Negativbeispiel – Serifenschrift: Butler black / regular
Die starken Unterschiede in der Strichstärke machen das Lesen des Fließtextes fast unmöglich und in der Headline hat sie dennoch einen charmanten Charakter.

Und Serifenlose Schriften? Klar, die sind ohne die feinen, manchmal dicken, häkchenartigen Erweiterungen am Buchstabenende.

Positivbeispiel – Serifenlose Schrift: Libre Franklin
Diese Schrift ist sowohl als Headline als auch im Fließtext verwendet sehr leserlich, ob Kapitälchen (Großbuchstaben) oder kleingeschrieben.

Negativbeispiel – Serifenlose Schrift: Oswald
Die Buchstaben dieser Schrift sind sehr gestaucht, das führt zur schlechten Lesbarkeit im Fließtext, aber als Headline wirkt sie sehr modern und ist auffallend.

Do's & Don'ts

Achte auf die Breite der Buchstaben und der daraus resultierenden Wortbreite. Ist diese zu schmal oder zu breit eignet sie sich nicht für den Fließtext.
Achte auch darauf, dass deine Wahl unterschiedliche Schriftschnitte (light, regular, bold, italic etc.) hat, um flexibler arbeiten zu können.
Im Webmedien kursieren viele Standard-Schriften. Das sind keine schlechten Schriften, nur zu häufig genutzt. Denk an die unterschiedlichen Persönlichkeiten einer Schrift und zeige Vielfalt.
Bringe Spannung ins Projekt und nutze nicht nur eine Schrift. Gerade mit makanten Headlines kannst du punkten, sei hier mutiger. Achte dabei unbedingt darauf, dass du unterschiedliche Schriftfamilien nutzt.
Verwende keine Schrift, nur weil du sie verwenden kannst. Nutze – vorallem im Fließtext – Sans Serif und Serifenschriften.
Orientiere dich bei Fließtexten an die empfohlene Schriftgröße (etwas größer oder kleiner ist erlaubt) und sorge für Highlights durch deutlich größere Headlines.
Ein anhaltender Trend sind durchgehend großgeschriebene Headlines und Zwischenüberschriften, doch für Fließtexte ist dieser Trend auf Dauer absolut unleserlich.
Ziehe die Zeilenlänge nicht unnötig ins Unendliche. Denke daran, dass du deinen Text so lesefreundlich wie möglich gestalten möchtest.
Für bessere Lesbarkeit vermeide auch Wortumbrüche am Zeilenende.
Highlighte wichtige Passagen oder Wörter mit coloriertem Text oder bold. Das erleichtert das Scannen des Textes.
Bringe deine Inhalte auf den Punkt. Kurze, klare Überschriften dienen der Orientierung und wecken Interesse.

Einige dieser Tipps werde zukünftig noch näher behandelt.

Fazit:

Typografie bietet jede Menge Möglichkeiten zur Formation, aber nicht alles was geht, sollte man machen. Das heißt, dass sich nicht jede Schrift für jede Verwendung im Internet als nützlich erweist. Manchmal sind Schriften wunderbar für Headlines einsetzbar, aber absolut ungeeignet für Fließtexte.