Welche Schriftarten kann man im Web einsetzen?

Zunächst ein wenig Theorie. Es gibt folgende Schriftfamilien (englisch: font-family), die in den folgenden Beispielen nur mit ihrem generischen Namen formatiert sind:

  • serif - Eine Schriftart mit Serifen: diese Schriftarten haben sogenannte Serifen, das sind kleine Hilfslinien an den Buchstaben, die den Lesefluß erleichtern sollen. Fast alle Bücher und Zeitungen verwenden deshalb Serifenschriften. Die bekanntesten Vertreter sind Times und Georgia.
  • sans-serif - Eine Schriftart ohne Serifen: die Buchstaben haben keine Serifen und werden in Papiermedien meist für Überschriften verwendet. Bekannte Vertreter dieser Schriftfamilie sind Arial, Verdana und Helvetica.
  • monospace - Eine Schriftart mit dicktengleichen Zeichen: bei diesen Schriften haben alle Buchstaben die gleiche Breite, das kleine i nimmt also genau den gleichen Raum ein wie das große M. Die alten Schreibmaschinen konnten nur solche Zeichen tippen. Ein Vertreter dieser Familie ist Courier.
  • cursive - Eine Schriftart für Schreibschrift: Schräg gestellte Buchstaben können auf dem Computer zwar viele Schriften darstellen, im Web sehen sie aber nur selten gut aus und sind schwer lesbar. Eine Schriftart, die auch für kursiv (italic) designed wurde, ist Comic Sans MS.
  • fantasy - Eine Schriftart für ungewöhnliche Schrift: Diese Schmuckschriften sind höchstens für Überschriften einzusetzen. Diese Schriftart-Familie wird aber im den gängigen Browsern einfach nur als sans-serif angezeigt.

Die Web-Browser haben sich bislang an der Tradition der Printmedien orientiert und verwenden deshalb eine Serifenschrift als Standard, unter Windows ist es Times New Roman. Leider wirkt diese Schrift auf dem Bildschirm völlig anders als auf Papier. Bedingt durch die Pixelstruktur des Mediums (und damit abhängig von der Qualität und Größe des Monitors) können die Serifen nicht deutlich dargestellt werden und den Lesefluss des Betrachters unterstützen. Im Gegenteil, sie erschweren sogar das Lesen, da die Buchstaben nicht sauber voneinander getrennt erscheinen. Überprüfen lässt sich dies an den Beispielen oben.

Deswegen verwenden die meisten Webseiten eine serifenlose Schrift. Unter Windows sind hier vor allem Arial und Verdana verbreitet und auf dem Mac Helvetica. Die Schriftart Arial (die vom Browser wahrscheinlich im obigen Beispiel verwendet wird) hat dabei den Nachteil, dass die Laufweite sehr gering ist, die Buchstaben also dicht bei einander liegen - auch dieses fördert das Lesen nicht unbedingt. Darum geben viele Webdesigner der Verdana den Vorzug gegeben, die speziell für den Bildschirm entworfen wurde.

Da die serifenlosen Schriften auf die Hilfslinien verzichten, haben sie mehr Pixel pro Buchstabe zur Verfügung und nutzen diese zur saubereren Darstellung auf dem Bildschirm - die Schrift wird größer dargestellt als die Serifenfamilie. Deshalb wird bei Einsatz dieser Schriftarten meistens die Schriftgröße verringert (und die Zeilenhöhe vergrößert), da bei zu großen Buchstaben der Überblick in der Satzstruktur verloren geht.

Und damit hat man das nächste Problem: Die verschiedenen Systeme haben eine unterschiedliche Bildschirmauflösung. Während Windows-PC 96 dpi (dots per inch, also Pixel pro Inch) darstellen, sind es bei Mac und Unix/Linux meist nur 72 dpi. Deren Benutzer sehen den Text also kleiner als die "Dosen". Siehe dazu auch den folgenden Abschnitt über das Schriftmaß und vor allem dessen weiterführende Links.

Das Wichtigste beim Einsatz vom Standard abweichender Schriftarten ist jedoch, dass dieser Font auch auf dem Computer des Besuchers dargestellt werden kann, dass er dort überhaupt vorhanden ist. Denn was ein anderer User auf seinem Rechner installiert (oder gelöscht) hat, entzieht sich jeder Kontrolle des Erstellers von Webseiten. Deshalb ist es wichtig, bei der Font-Definition in CSS mehrere Alternativen anzugeben und als letztes den generischen Familiennamen der jeweiligen Schrift, mit dem jeder Browser etwas anzufangen weiß. Also:

font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
oder
font-family: "Times New Roman", Georgia, Times, serif;
oder
font-family: "Courier New", Courier, monospace;

Der Browser geht die Definition von links nach rechts durch, und verwendet im Ernstfall die Default Schrift, wie sans-serif oder monospace.
Für einen Vergleich der Schriften im Lauftext habe ich eine Testseite zu Schriftarten erstellt. Da eine gute und ermüdungsfreie Lesbarkeit jedoch nicht nur vom gewählten Font abhängt sondern auch von der Zeilenlänge, ist im unteren Bereich die Textbreite auf 500px begrenzt. Wer einen großen Monitor besitzt, kontrolliere es einmal im Vollbild-Modus. Hier sollte es wesentlich einfacher sein, vom Ende einer Zeile auf den Anfang der nächsten zu springen. Nicht umsonst sind Zeitungsseiten z.B. in mehreren Spalten angeordnet. Aber die Usability von Webseiten ist wieder ein anderes Thema.