CSS-Eigenschaft: font-family, Kategorien: Schrift (allgemein), Fonts (CSS 2.1)

Bestimmt die Schriftart, wie zum Beispiel Arial, Verdana, etc..

Folgendes ist beim Einsatz von font-family zu beachten:

• Es können eine oder mehrere Schriften definiert werden, die durch Komma getrennt angegeben werden. Welche Schrift dargestellt wird, hängt von den Schriften ab, die auf dem Rechner des Webseitenbesuchers installiert sind. Ist die zuerst angegebene Schrift vorhanden, wird diese verwendet, falls nicht die jeweils nächste, bis eine Schrift gefunden wurde. Ist keine der definierten Schriften vorhanden, wird die im Browser konfigurierte Standardschrift dargestellt. Die Angabe einer nicht vorhandenen Schriftart erzeugt keinen Fehler.
• Bei der Angabe von Schriftarten muss eine Case-Sensitivität nicht berücksichtig werden. Es spielt also keine Rolle, ob man sie in großen oder kleinen Buchstaben angibt.
• Das W3C spricht die Empfehlung aus, Schriften mit Leerzeichen im Schriftname in einfache oder doppelte Anführungszeichen (Quotes) zu setzen (was bei Inline-Styles eine Fehlerquelle sein kann, wenn die gleichen Anführungszeichen wie im HTML-Element verwendet werden). Die Schriftart Tw Cen MT Condensed Extra Bold beispielsweise wird von aktuellen Browsern auch ohne "Quotes" fehlerfrei dargestellt, die Empfehlung scheint also vernachlässigbar zu sein.
• Neben konkreten Schriftarten können auch generische Schriftangaben gemacht werden. Die einzelnen Schlüsselworte serif, sans-serif, monospace, cursive und fantasy sind für folgende Darstellungsvarianten vorgesehen:
  • serif ist eine Schrift mit Serifen. "Serifen" bezeichnet die kleinen Endstriche oben und unten an den einzelnen Buchstaben, wie zum Beispiel bei "Times New Roman". Allgemeine Informationen zu Serifen findet man unter http://de.wikipedia.org/wiki/Serife.
  • sans-serif sind Schriftarten ohne jene Endstriche wie zum Beispiel "Verdana" oder "Arial".
  • monospace ist das Schlüsselwort für eine Schrift, die als Nichtproportionale Schriftart bezeichnet wird. Das sind Schriften, die buchstabenübergreifend eine einheitliche Zeichenbreite haben. Im Gegensatz zu "Arial" oder "Times New Roman", bei denen ein i wesentlich schmaler als ein m oder w ist, ist bei der Monospace-Schriftart jeder Buchstabe gleich breit. Auch Leerzeichen haben die gleiche Breite. Was dazu führt, dass Buchtstaben in mehreren Zeilen genau untereinander stehen und immer dieselbe Anzahl von Buchstaben in eine Zeile passt. monospace wird gerne eingesetzt, um Codeabschnitte darzustellen.
  • cursive soll laut Standard eine "italic" oder "kursive" Schriftart wählen, SELFTHML spricht in seiner Beschreibung von cursive von einer "Schreibschrift".
  • fantasy soll laut Standard eine eher dekorative Schrift verwenden, SELFHTML spricht bei diesem Schlüsselwort von einer "ungewöhnlichen Schrift".
  Die Implementierung von sans-serif, serif und monospace ist in aktuellen Browsern zuverlässig. Die Werte cursive und fantasy werden hingegen sehr unterschiedlich dargestellt: Firefox, Safari und Opera setzen für beides "Comic Sans MS" ein, der Internet Explorer verwendet für fantasy eher eine Schreibschrift. Nur der Chrome (obwohl ein Webkit-Browser wie der Safari) setzt als fantasy eine Schriftart ein, die wie Impact aussieht. Die Angaben von cursive und fantasy sind von daher nicht zuverlässig und browserübergreifend einsetzbar. Was ein Grund dafür sein mag, dass ich in der Praxis diese Schlüsselworte bislang noch nicht gesehen habe.
• Beim Einsatz von font-family sollte man neben der eigentlichen Schriftart auch immer ein Schlüsselwort für eine generische Schrift angeben, damit im Falle des Nicht-Vorhandenseins der definierten Schrift eine Schrift vom gleichen Typ dargestellt wird.
• Seltene oder extrem gestaltete Schriften sollten nur mit Vorsicht eingesetzt werden. Es sollte eine Schrift gewählt werden, die eine hohe Verbreitung hat, damit die Webseite browser- und betriebssystemübergreifend einheitlich aussieht. Ein anderes Problem ist, dass Schriften mitunter stark in der Größe variieren, gerade wenn sie extrem gestaltet sind. So kann es passieren, dass im Falle der Ersatzschrift die Schriftgröße bis zu 150% abweicht, was sowohl zu Lasten der Wiedererkennbarkeit als auch der Lesbarkeit der Webseite gehen kann.
• Über gute Lesbarkeit ist vieles im Internet zu finden. Vor ein paar Jahren wurde für eine gut lesbare Seite eine sans-serif Schriftart empfohlen. Mitunter wurde Verdana als "die" Internet-Standardschrift propagiert. Schaut man heute große Seiten an (zum Beispiel die New York Times), werden serif-Schriften als gezieltes Gestaltungselement eingesetzt, was nicht zwingend eine schlechte Lesbarkeit bedeutet.
  Was eine gute Lesbarkeit ausmacht, unterliegt einem ständigem Wandel. Einerseits ist über die Jahre hinweg und mit immer vielfältiger werdenden Internetangeboten die Kompetenz der Internetbenutzer gestiegen. Der Einsatz einer nicht ganz gewöhnlichen Schriftart führt nicht zwangsläufig zur Verwirrung. Andererseits ist das, was als gut lesbar empfunden stark von der Gewohnheit als auch vom Kulturkreis abhängig.
  Ein Beispiel einer Studie findet man hier: http://www.mlive.com/business/index.ssf/2008/06/study_by_university_of_michiga.html
• Als Standardwert vermerkt das W3C depends on user agent, bei den aktuell relevanten Browser ist das "Times New Roman".
• An dieser Stelle sei angemerkt, dass Web-Fonts über CSS definiert und dann bestimmten Bereichen zugewiesen werden können. Die Möglichkeiten bzw. Darstellung werden mit jeder neuen Version der verschiedenen Browser besser. Eine ausführliche Beschreibung folgt.