Design

Schrift im Webdesign - die Sache mit der Lesbarkeit

22. September 2009 von Mario

Oftmals hört man bei Fragen nach Schriftarten für Webseiten in Foren schon das Gros schreien: "Nimm Verdana, alles andere kann man eh nicht lesen!" Das ist schlichtweg und einfach falsch. Sicher gibt es im Webbereich weitaus weniger Möglichkeiten Schriften zu gestalten, als im Printbereich. Doch ganz ohne Typographie muss auch der Webdesigner nicht auskommen. Doch woher kommt dieses Klischee eigentlich? In diesem Artikel versuche ich eine Antwort auf diese Frage zu formulieren.

Lesbar sind sie alle

Es gibt für das Internet ja leider nur einige wenige Schriftarten, die wirklich interessant für die Nutzung sind. Sicher gibt es Mittel und Wege, auch andere Schriftarten ins Web einzubinden, doch die wenigsten Möglichkeiten eignen sich hier für lange Texte und sind problemfrei.
Für die Standardschriftarten gilt: Lesbar sind sie wirklich alle. Es spricht also nichts gegen die Verwendung aus Sicht der generellen Lesbarkeit. Unterschiede gibt es allerdings, wenn es um die Art der Verwendung geht. Handelt es sich um eine Überschrift oder um einen Volltext? In welcher Größe steht der Text? Hierbei ist auch ein besonderes Phänomen zu beobachten. Der Eindruck der Schriftart hängt stark vom gewählten Hintergrund und der Schriftfarbe ab.

Die kleinen Unterschiede

Nehmen wir uns zum Vergleich die Serifenlose Typo Verdana und Times New Roman als rundere Schriftart mit Serifen.
Hier heißt es gleich eines vorweg klarzustellen. Irrtümlicher Weise werden abgerundete, feinere Schriftarten oft als Serifen Typos bezeichnet. Das ist nicht richtig. Die Serifen sind lediglich die kleinen Füßchen, die einen Buchstaben an seinem Ende abschließen. Im nebenstehenden Bild, sind die Serifen in Rot eingefärbt.
Diese Füßchen verändern die Lesbarkeit nur gering bis gar nicht. Allerdings sind Schriftarten mit Serifen oft in ihrer Strichbreite dynamisch und nicht einheitlich breit. So entsteht der Eindruck, dass die Schrift in sich etwas geschwungener und edler wirkt.
Serifenlose Schriften haben dagegen oft eine einheitliche Strichbreite. Doch auch hier gibt es Ausnahmen.

In diesem Bild wird deutlich, was ich oben bereits angedeutet habe. Man sieht, dass der Text in Schwarz auf Weiß, wesentlich schlanker wirkt. Dabei ist es absolut der gleiche Text, mit den gleichen Formatierungen. Lediglich der Hintergrund unterscheidet sich. Der 12px Text ist Schwarz auf Weiß noch relativ gut lesbar in Weiß auf Schwarz beginnen die Buchstaben aber bereits ineinander zu verschwimmen. Davon ist zwar auch der Verdana Text betroffen, doch der Times Text ist wesentlich schlechter zu lesen.
Beim großen 25px Text sieht es da schon anders aus. Hier wirkt der Weiß auf Schwarz Schriftzug zwar auch dicker, dennoch ist er aufgrund der Größe sehr gut zu lesen. Der Times Text fällt hier sogar besser ins Auge als der Verdana Text.
Doch warum kommt es zu dieser verschwimmenden und dicken Wirkung? Um das zu klären, müssen wir uns die Buchstaben näher ansehen.
Auf dem Bild ist es eigentlich schon recht gut zu erkennen. Noch besser ist es zu sehen, wenn man den Versuch einfach selbst durchführt. Die Vergrößerung kann mit einem Bildbearbeitungsprogramm oder im Browser mit der Tastenkombination "Strg" und "+" auf dem PC oder "Apfel" und "+" auf dem Mac durchgeführt werden.
Aber was ist hier eigentlich zu sehen? In der Vergrößerung sieht man die einzelnen Pixel, aus denen die Buchstaben zusammengesetzt sind. In der Serifenschrift ist es offensichtlich, dass der Anteil der richtig weißen, bzw. schwarzen Pixel wesentlich geringer ist, als in der Sans Serif Schriftart. Hier liegt schon der erste Grund, für die bessere Lesbarkeit der Verdana Schrift. Dieser Effekt ist nur bei Schriftgrößen um die 12 Pixel oder kleiner so gut sichtbar. Bei höheren Größen, ist der Kern des Buchstaben auf jeden Fall in der eigentlichen Schriftfarbe und somit ist der ganze Buchstabe kontrastreicher. Bei Schriften mit vielen Rundungen verschwimmen daher die Pixel mit dem Hintergrund, da die Rundung durch kontrastärmere Pixel simuliert wird. Auf die gleiche Weise werden außerdem die dünneren Strichbreiten simuliert.
Bleibt noch zu klären, warum die weiße Schrift auf schwarzem Grund dicker wirkt.
Das ist ebenfalls schnell erklärt: Der Kontrast vom verwendeten Grau im auslaufenden Buchstaben ist zum Schwarz einfach stärker, als der zum Weiß. Darum wirkt der Buchstabe breiter.

Fazit

Wie man sieht, gibt es einige Gründe für das Klischee, dass Verdana, als Stellvertreter für die Schriftarten mit nicht dynamischer Strichbreite, die beste Schriftart für das Web ist. Dennoch kann man ab einer Schriftgröße von etwa 13-14 Pixel auf weißem Hintergrund sehr gut mit dynamischen Schriftarten arbeiten. Auf dunklen Webseiten ist davon eher abzuraten. Hier setze ich die Schriftarten eher als Überschrift ein, da hier die Schriftgröße höher ist und, wie oben schon erwähnt, der Eyecatcher Effekt greift.
Los gehts also! Scheut euch nicht, auch mal das Sans Verdana Experiment zu starten.