Newsletter 10/2009 – Die richtige Schrift für meine Website

Schriftarten (Fonts) im Web sind ein leidiges Thema. Wer Wert drauf legt, dass eine HTML-Seite in allen Browsern genau so aussieht wie beim Gestalter, der hat es schwer. Und für Schriftarten gilt das ganz besonders.

Welche Schriften sind geeignet?

Die Frage, welche Schriften Sie sinnvollerweise auf Ihrer Site verwenden hat zwei Facetten: Zum einen ist die Frage, welche Schriftarten technisch möglich sind, also beim Nutzer so angezeigt werden wie bei Ihnen.
Und die andere Frage ist die gestalterische: Welche Schriftart ist gut lesbar und sieht gut aus?

Welche Fonts werden angezeigt?

Ich will hier nicht zu tief in HTML einsteigen, daher nur so viel: Sie können für jedes Zeichen eine beliebige Schriftart angeben. Sinnvollerweise erfolgt das in den Stylesheets (CSS).

Auf meinem Rechner ist zum Beispiel die Schriftart Meta installiert. Die kann ich in den Stylesheets als Schriftart für den body-Tag, also den Hauptteil der HTML-Seite angeben. Dieser erscheint dann auch im Font Meta – bei mir und auch bei allen Besuchern, die diese schöne Schrift installiert haben. Bei allen anderen erscheint eine andere Schrift. Das ist entweder die Standardschrift des Browsers, oder, wenn ich ordentlichen Code geschrieben habe, eine alternative Schriftart, die ich vorgesehen habe, falls die Meta eben nicht installiert ist.

Damit das optische Bild nicht zu unterschiedlich ist, das die verschiedenen Nutzer sehen, sollte ich auf Exoten wie Meta verzichten. Es gibt einige Untersuchungen, wie viele Nutzer welche Schriften haben. Die Zahlen sind leicht unterschiedlich, aber klar ist, dass Sie davon ausgehen können, dass die folgenden Fonts über 98 Prozent aller Internetnutzer haben:

• Courier New (PC) bzw. Courier (Mac)
• Times New Roman (PC) bzw. Times (Mac)
• Arial (PC) bzw. Helvetica (Mac)
• Verdana

Des weiteren kommen folgende Schriften hinzu, die auch bei deutlich über 90 Prozent der Nutzer installiert sind:

• Trebuchet MS
• Comic Sans MS
• Georgia

Mit diesen wenigen Schriften sind die Gestaltungsmöglichkeiten stark eingeschränkt. Die Schrift Comic Sans scheidet zudem aus gestalterischen Gründen fast immer aus. Courier passt auch fast nie, es bleiben also Times, Georgia, Arial/Helvetica, Verdana oder Trebuchet. Darum sind Typografen so unzufrieden mit dem Web.

Nun kommt etwas Bewegung in das Thema. Zwar gab es schon 1998 in CSS 2 die Möglichkeit, Schriften in HTML-Seiten einzubinden. Internet Explorer und Netscape, damals die zwei wichtigsten Browser, setzten das aber unterschiedlich um. Durchsetzen konnte sich die Technik nie – und so flog die Möglichkeit wieder aus der CSS-Spezifikation.
Nun ist das Thema wieder auf der Tagesordnung, und es kann sein, dass in den nächsten Monaten Bewegung in die Szene kommt. Mit der @font-face-Regel kann man über CSS Schriften einbinden, und einige Browser unterstützen das mittlerweile auch (Safari ab Version 3.1, Firefox ab Version 3.5, Opera ab Version 10, Chrome ab Version 2 – wobei man in Chrome diese Option über die Kommandozeile aktivieren muss). Der Internet Explorer fehlt in der Liste, weshalb man in jedem Fall dafür sorgen muss, dass jede Seite auch ohne eingebettete Fonts gut aussieht.

Was auch noch nicht gelöst ist, ist die rechtliche Frage. Denn Schriften unterliegen wie Bilder oder andere Inhalte dem Urheberrecht.

Von anderer Seite könnte auch Hilfe kommen: Microsoft hat mit Windows Vista einige hochwertige neue Schriften eingeführt, die auch in Windows 7 enthalten sind: Calibri, Cambria, Candara, Consolas, Constantia und Corbel. Mit zunehmender Verbreitung der neuen Windows-Versionen verbreiten sich dann auch diese neuen Fonts. Ob und wann diese auch auf Macintosh und anderen Plattformen auftauchen, bleibt aber abzuwarten.

Welche Schrift für welchen Zweck?

Nun zum zweiten Teil der Frage, dem gestalterischen.
Courier ist eine klassische Schrift für Schreibmaschinen. Alle Buchstaben haben denselben Abstand voneinander, was heute ungewöhnlich ist, da die meisten Schriften unterschiedlich breite Buchstaben verwenden (Proportionalschriften). Courier hat eine große Laufweite, läuft also relativ breit. Sie wirkt altmodisch, funktional und etwas schwerfällig. Deshalb ist sie nur für besondere Fälle geeignet, in denen Sie einen solchen Eindruck erzielen wollen.

Times hat wie Courier sogenannte Serifen und zählt somit zu den Antiqua-Schriften (vereinfacht gesagt). Die Serifen sind die kleinen Striche an den Buchstabenenden. Sie verstärken den Eindruck von Zeilen, die der Text bildet. Manche Studien sagen, die Serifen würden dem Auge Führung geben, was die Lesbarkeit steigere. Gegenstudien wiederum sagen, Buchstaben seien ohne Serifen leichter zu erkennen. In jedem Fall aber sind die Unterschiede in der Lesbarkeit minimal. Times wirkt seriös, gediegen und erinnert an Printprodukte, da die meisten Bücher, Zeitschriften und Zeitungen mit Serifen-Schriften arbeiten.

Schrift-Vorurteile widerlegt

Ganz wertvolle Arbeit hat auf diesem Gebiet Martin Liebig an der FH Gelsenkirchen geleistet. In einem Test mit über 3000 Teilnehmern hat er gezeigt, dass die Vorurteile, die wir bezüglich Schriften im Web haben, keine Grundlage haben. Es kam in der Untersuchung ganz klar heraus: Die immer wieder behaupteten Unterschiede der Lesbarkeit von Schriftarten gibt es nicht. Der Unterschied in der Lesegeschwindigkeit zwischen den untersuchten Schriftarten betrug maximal 3,9 Prozent.

Das heißt also, eine Website in Times können die Nutzer genauso gut oder schlecht lesen wie eine in Verdana. Vorausgesetzt, die Schriftgröße ist gleich und auch die restliche Gestaltung. Bei Liebigs Untersuchung brauchten die Testpersonen für die Seite in Times im Schnitt 25,01 Sekunden, für die in Verdana 25,00 Sekunden.

Ein kleiner Kritikpunkt: In der Untersuchung wurden Texte mit 120 Wörtern untersucht – in der Standarddarstellung des benutzerfreun.de-Blogs zum Beispiel sind das 11 Zeilen. Das ist ein sehr kurzer Text, und die Übertragbarkeit der Ergebnisse auf längere Texte kann man diskutieren. Ich denke aber, dass es sich bei längeren Texten nicht deutlich anders verhalten wird. Immerhin ist die Studie von Martin Liebig die fundierteste, die ich zu diesem Thema kenne. An dieser Stelle auch vielen Dank an Herrn Liebig, der mir am Telefon noch Einiges zu den Methoden seiner Untersuchung verraten hat. Auf mich wirkt es so, dass die Studie methodisch sehr sauber durchgeführt wurde. (Link zur Studie am Ende des Textes)

Unterschiede bei der Bewertung von Schriften

Es gibt aber durchaus Unterschiede bei der Bewertung der Schriftarten. Fragt man die Benutzer, wie sie die Lesbarkeit empfinden, dann schneiden Schriften ohne Serifen tatsächlich deutlich besser ab als solche mit. Außerdem finden die meisten Nutzer, dass Times oder Georgia gut zum Thema Politik passen – also Schriftarten mit Serifen für klassische Zeitungsthemen. Auch dies ist ein Ergebnis der oben genannten Untersuchung.

Ohne Serifen ist moderner, aber auch alltäglicher

Arial zählt zu den Grotesk-Schriften, weil sie keine Serifen hat. Sie strahlt eine etwas nüchterne Atmosphäre aus und wirkt moderner als Times und andere Serifenschriften. Was sich ebenfalls in der Untersuchung von Martin Liebig bestätigt hat.

Da die Lesbarkeit von Times, Georgia, Arial, Trebuchet und Verdana wie gesagt praktisch gleichwertig ist, können Sie danach gehen, welcher Stil besser zu Ihrer Site passt.
Wenn Sie jedoch kleinen Text verwenden wollen, etwa für Bildunterschriften, dann sollten Sie auf serifenlose Fonts zurückgreifen. Denn Serifenschriften sind bei kleinen Punktgrößen tatsächlich schlecht lesbar. Die klareren Grotesk-Schriften sind hier im Vorteil. Sie sollten aber auch mit serifenlosen Schriften Text nicht zu klein setzen, er soll ja immer noch gelesen werden, und das ist bei winzigem Text auch ohne Serifen anstrengend.

Kombination und Größe

Beschränken Sie sich immer auf wenige Schriftarten. Eine Schrift für die Überschriften, eine für den Fließtext und eine für die Menüs sollten reichen. Setzen Sie mehr ein, entsteht Unruhe.
Für die Kombination von Schriftarten gibt es strenge typografische Regeln. Diese hier aufzuführen, würde den Rahmen des Beitrags sprengen. Dabei geht es ganz vereinfacht gesprochen darum, dass weder Schriften kombiniert werden sollten, die einander zu ähnlich sind, noch solche, die sich zu stark unterscheiden. Generell liegen Sie mit der Kombination einer Grotesk- mit einer Antiquaschrift meist richtig, wenn Sie darauf achten, dass sie in der Anmutung ähnlich sind. Das heißt, eine sehr dynamisch und modern wirkende Schrift sollten Sie nicht mit einer statisch und altertümlich wirkenden Schriftart kombinieren.

Legen Sie früh in der Designphase fest, welche Punktgröße die einzelnen Textbestandteile haben. Auch hier sollten Sie sich auf etwa drei Größen beschränken. Achten Sie darauf, den Text weder zu klein (schlecht lesbar) noch zu groß darzustellen (wirkt übertrieben, im Extremfall auch schlecht lesbar).
Arbeiten Sie aber immer mit relativen Größenangaben. Nur so kann jeder Nutzer die Schrift in seinem Browser so anpassen, dass sie seinen eigenen Augen und seinem aktuellen Ausgabegerät am besten entsprechen.

Jeder Browser stellt jede Schrift etwas unterschiedlich dar, sogar von Version zu Version gibt es Unterschiede. Testen Sie also unbedingt mindestens unter Windows und auf dem Macintosh jeweils die Darstellung im Internet Explorer, in Firefox und in Safari.

Links

Ausführliche Beschreibung der Studie zur Lesbarkeit von Schrift im Web
benutzerfreun.de-Blogeintrag Ikea und die neue Schrift im Katalog
Welche Schriften haben die Nutzer? Gute Zusammenstellung bei Codestyle.org
Interview mit dem Schriftdesigner David Berlow bei A List Apart
Für alle Coder: @font-face im Einsatz im Blog von Tobias Otte (tolle Anleitung!)