MultiOS Browser Test Blog

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

Also habe ich mir die Zeit genommen und mal unterschiedliche deutschsprachige, sowie internationale, Webseiten zu untersuchen. Dabei fanden sich einige Übereinstimmungen, allerdings auch gravierende Abweichungen. Hier eine Liste mit den am häufigsten angetroffenen Schriftarten (Fonts):

1. Verdana
2. Arial
3. Sans-serif
4. Trebuchet MS
5. Bitstream Vera Sans
6. Tahoma
7. Georgia
8. Helvetica
9. Courier

Link zu einer Testseite, um die Fonts im Einsatz zu sehen:
» Test: Schriftarten (Fonts) für Webseiten

Im etwas älteren Artikel "Lernbehinderung und Barrierefreiheit" auf www.einfach-fuer-alle.de werden unter der Überschrift "Visuelle Barrierefreiheit von Text" folgende Schriften empfohlen:

• Verdana
• Georgia
• Tahoma
• Trebuchet MS

Interessant sind die Hinweise zur Schrift "Comic Sans", die direkt im Anschluss der Übersicht im Artikel zu finden sind.

Ebenfalls sehr interessant ist der Artikel "HTML-Schriften unter der Lupe" von Gerrit van Aaken, 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 Betriebssystemes, 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 ebenfalls über Desktop Einstellungen anpassen kann.

Ohne hier näher auf Firefox einzugehen, aber Firefox hat die Angewohnheit, das per default eine Schriftgröße von 16px eingestellt ist. Somit sieht in Firefox die Seite immer gleich groß aus, egal ob 96dpi ("normaler Font" Windows, default Einstellung) oder 120dpi ("großer Font" in Windows) verwendet wird. Man kann das natürlich auch in Firefox ändern. Das gleiche gilt auch für Safari ab der Version 3.x.

Setzt man einen Browser ein, der die Systemeinstellungen nutzt, wie MS IE oder Opera, werden die Schriftarten teilweise unterschiedlicher dargestellt als unter Fedora Core. Ein Liquid Layout, also ein flexibles skalierbares Layout, mit einer Schriftbreite von empfohlenden 80 Zeichen pro Zeile, sieht je nach verwendeten Browser, Betriebssystem und der eingestellten Schriftgröße im Betriebssystem, doch stark verändert aus.

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 diese direkt einzugehen, hier eine Liste mit den vier bekanntesten Methoden.

• Scalable Inman Flash Replacement (kurz sIFR)
• Facelift Image Replacement
• typeface.js OpenSource
• cufón – fonts for the people

Teilweise werden diese vier Methoden von aktuellen Browsern unterstützt (Stand: Dezember 2009). Der Einsatz in der Praxis sollte zur Zeit denoch genau überlegt werden. Ein Einsatzbeispiel mit Cufón kann man auf dem Flatpress Notizblock einsehen. Dort werden die Überschriften der Seitennavigation mittels Cufón beim Laden durch einen OpenSource Font ersetzt.

» Cufón Einsatz am Beispiel des Flatpress Notizblock

Einen sehr ausführlichen englischsprachigen Artikel zu Cufón hat Cameron Moll in seinem Blog geschrieben.

» Cameron Moll | Exploring Cufón, a sIFR alternative for font embedding

Eine ebenfalls sehr interessante Lösung ist das CSS3 Element "@font-face". In dem englischsprachigen Artikel von Paul Irish wird eine sehr stabile Lösung mit @font-face beschrieben.

» Paul Irish | Bulletproof @font-face syntax

Danke

Vielen Dank an alle, die mir über Screenshots oder E-Mail, diese Information zukommen lassen, beziehungsweise die Testumgebungen zur Verfügung gestellt haben

Als weitere Ergänzung zum Artikel hier die gesammelten Betriebssysteme, mit denen seit der Erstellung des Artikels weiterhin getestet wurde:

• Windows 98/ME/NT/2000/XP/Vista und Windows 7
• Fedora Core und Red Hat Linux
• SuSE Linux (openSuSE/Novell)
• Mac OS X
• Ubuntu/Kubuntu
• OpenSolaris
• AmigaOS, Debian und FreeBSD

Sowie mit diversen mobilen Systemen:

• Windows CE
• Palm OS
• Symbian OS

wie auch iPhone, Samsung und Nokia Mobile Phones. Leider fehlen hier noch Google Android und Blackberry Geräte, die hoffentlich irgendwann nachgereicht werden.

Der Beitrag wurde am Sonntag, den 14. Oktober 2007 um 14:15 Uhr veröffentlicht und wurde unter Layout abgelegt. Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.