Menu Menu

Websichere Schriftarten bzw. Schriften

Wie bindet man Schriftarten im Web richtig ein

Woher bezieht ein Browser für die Darstellung eigentlich eine Schriftart? Wenn im Stysheet der besuchten Website nicht anders angegeben, dann immer vom PC des Client. Welches System (Linux, Windows, Mac) auch immer ein Websitebesucher hat, ein paar Schriftarten sind nahezu immer als Standard auf dessen Rechner installiert. Um sicher zu gehen das eure Website im gleichen Stil ausgeliefert wird gibt es zwei Wege. Entweder bindet man eine Schriftart aus dem Web ein (z.B. Google Fonts). Die Quelle würde dann als Style-Anweisung mit @font-face eingebunden. Eine weitere Möglichkeit ist die Benutzung von websicheren Schriftarten. Das sind Schriftarten die auf vielen Endgeräten installiert sind, und somit als sicher gelten. Eine Garantie hat man allerdings nicht. Daher gibt es bei der Verwendung einiges zu beachten. Um die korrekte Anwendung dieser Methode soll es hier kurz gehen.

websichere schriftarten

Welche Arten von Schriften unterscheidet man

Im Web unterscheidet man hauptsächlich zwischen drei Typen:

  • Serif
  • Sans-Serif
  • Monospace

Stützt man sich vorrangig auf die Verwendung von Sans-Serif, also serifenlosen Schriftarten, so kann man im Web kaum etwas falsch machen. Genereller Unterschied zwischen serifenlosen uns serifen Schriftarten ist der zierende Abschluss einer Linie am Buchstaben. Eben diese Verzierung kann auf Bildschirmen zu einer schlechteren Lesbarkeit führen. Sei noch Monospace als Schriftart erwähnt. Hier haben alle Zeichen eine feste Breite. Meist spricht man hier auch von nichtproportionalen Schriftarten. Im Web finden diese häufig für die Kennzeichnung von Code Verwendung.

Serif Fonts - serife Schriftarten

Style Serif
font-family: Ergebnis bzw. Ausgabe
Georgia, "Times New Roman", Times, serif Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
"Times New Roman", Times, serif Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
"Palatino Linotype", "Book Antiqua", Palatino, serif Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
"MS Serif", "New York", serif Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Sans-Serif - serifenlose Schriftarten

Style Sans-Serif
font-family: Ergebnis bzw. Ausgabe
Arial, Helvetica, sans-serif Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Verdana, Geneva, sans-serif Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
"Trebuchet MS", Arial, Helvetica, sans-serif Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Tahoma, Geneva, sans-serif Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
"Lucida Sans Unicode", "Lucida Grande", sans-serif Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
"Arial Black", Gadget, sans-serif Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Impact, Charcoal, sans-serif Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
"Comic Sans MS", cursive Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Monospace - nichtproportionalen Schriftarten

Style Monospace
font-family: Ergebnis bzw. Ausgabe
Courier Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Fazit

Bindet man die "font-family" in der beschriebenen Form ein, so kann eigentlich nichts schief gehen. Wenn auf einem System tasächlich einmal die angeforderte Schriftart nicht installiert ist, so wählt es automatisch die Nächste angegebene. Falls auch die nicht existiert, so wird der Text in irgend einer installierten serifen bzw. serifenlosen Schriftart dargestellt. Bei meinem Test auf einem Windows PC und einem Mac musste ich feststellen, das tatsächlich alle Ausgaben korrekt angezeigt worden. Man hat also selbst mit den standardmäßig installierten Schriftarten ein kleines, brauchbares Sortiment um einen Text zu gestalten.

Nachtrag: heute bin ich dazu gekommen die Ausgabe der Scriftarten auf mobilen Endgeräten zu testen. Hier kam ein iPhone, iPad und ein Samsung Galaxy zum Einsatz. Die Darstellung der Schriftarten war jedoch relativ ernüchternd. Die auf einem PC als sicher geltende Schriftarten waren zum Großteil nicht installiert. Somit hatte ich ein unterschiedliches Schriftbild. Das könnte sich störend auf manches Design auswirken. Daher empfehle ich bei einer responsiven Darstellung eher auf Google Fonts zu setzen.