Welche Schriftarten (Fonts) für Webseiten?

Eine der großen Fragen in Blogs oder Foren ist "Welche Schriftarten soll ich verwenden?". Auch auf meiner eigenen Webseite haben sich im Laufe der Zeit die Schriftarten geändert. Nachdem ich mir vorgenommen habe meine bestehende Webseite komplett zu erneuern, tauchte die Frage nach den Schriftarten für mich selber auf.

Also habe ich mir die Zeit genommen und unterschiedliche deutschsprachige, sowie internationale Webseiten verschiedener Branchen untersucht. Dabei fanden sich einige Übereinstimmungen, allerdings auch gravierende Abweichungen der verwendeten Schriftarten, die nachfolgenden aufgelistet sind:

Verdana
Arial
Sans-serif
Trebuchet MS
Bitstream Vera Sans
Tahoma
Georgia
Helvetica
Courier

Testseite: Web/HTML Schriftarten Demo

Im etwas älteren Artikel www.einfach-fuer-alle.de - Visuelle Barrierefreiheit von Text werden folgende Schriften empfohlen:

Verdana
Georgia
Tahoma
Trebuchet MS

Interessant ist der Hinweis zur Schrift "Comic Sans", der direkt unter der Übersicht im oben genannten Artikel "Visuelle Barrierefreiheit von Text" zu finden ist.

Ebenfalls sehr interessant ist der Artikel von Gerrit van Aaken - HTML-Schriften unter der Lupe, auch schon etwas älter, aber sehr ausführlich.

Jetzt tauchte die Frage auf, wie sich diese Schriften verhalten, wenn man mit unterschiedlichen Browsern auf unterschiedlichen Betriebssystemen unterwegs ist. Ein wichtiger Punkt hierbei ist die Schriftgrößeneinstellung des Betriebssystems, mein Haupt PC unter Windows nutzt den großen Font mit 120dpi und als Zweitsystem Fedora Core mit 96dpi, also kleiner Schriftgröße. Bei einem Test in einem Forum wurde festgestellt, das je nach Systemeinstellung (96dpi/120dpi) Abweichungen von bis zu 15 Zeichen pro Zeile auftauchen können. Als Ergänzungen sollte man erwähnen, dass man die Fontgrößen in DPI unter mehreren Linux Derivaten und in Mac OS über die Desktop Einstellungen genau wie unter Windows anpassen kann.

Ein ebenfalls wichtiger Punkt sind die vorinstallierten Schriften auf älteren Windows Systemen, neueren Windows Systemen, Linux Derivaten oder Mac OS. Konqueror 4.8 (KDE 4.8 - Januar 2012) unter Linux kennt zum Beispiel viele Windows Schriften überhaupt nicht. Sie sind nicht im Betriebssystem vorhanden und werden daher mit einer Schriftart dargestellt, die unter den verwendeten Linux Derivaten verfügbar ist.

Zur Schriftart (Font) Courier möchte ich noch hinzufügen, das ich diesen Font für meine Code-Beispiele verwende. Deshalb taucht er in der Liste oben mit auf. Um hier noch ein passendes Schlusswort zu finden, zeige ich meine Schriftarten, die ich auf dieser Webseite zur Zeit verwende:

  font-family: Verdana, Arial, sans-serif;
  font-size: 86%;

Mit diesen Einstellungen habe ich bisher sehr gute Erfahrungen gesammelt.

Ergänzungen:

Inzwischen gibt es Möglichkeiten Webseiten mit anderen Fonts zu nutzen. Ohne näher auf alle Möglichkeiten direkt einzugehen, hier eine Liste mit den bekanntesten Varianten.

CSS Fonts Module Level 3 - @font-face
Google Web Fonts API
cufón - fonts for the people
Scalable Inman Flash Replacement (kurz sIFR)
Facelift Image Replacement
typeface.js OpenSource

Die Methoden werden unterschiedlich von aktuellen Browsern unterstützt, auch gibt es noch einige wenige nicht so gebräuchliche Internet Browser, die Schwierigkeiten mit solchen Lösungen haben (Stand: Januar 2012).

CSS Fonts Module Level 3 - @font-face

Eine sehr interessante Lösung ist CSS Fonts Module Level 3 - @font-face. In dem englischsprachigen Artikel von Paul Irish wird eine sehr stabile Lösung für den Einsatz mit @font-face beschrieben.

Paul Irish | Bulletproof @font-face syntax

Welcher Internet Browser welches @font-face Fontformat zur korrekten Darstellung im Browserfenster benötigt, kann man hier in deutscher Sprache testen:

Testseite: @font-face Test

Google Web Fonts API

Die Google Web Fonts API stellt eine Schnittstelle zur Verfügung, um schnell und unkompliziert vorgefertigte Google Web Fonts in eine Webseite zu integrieren. Diese Schnittstelle basiert auf der oben genannten @font-face Lösung.

Testseite: Google Web Fonts API