Webdesign mit (X)HTML und CSS

Ein Kurs für Einsteiger

Sie sind hier

Startseite › CSS › Textformatierung › Schriftart
aktualisiert:
21.01.2012
erstellt:
07.02.2007

Schriftart

Schriftart(en) werden mit der Eigenschaft font-family angegeben.

  1. p {
  2. font-family:arial, helvetica, sans-serif;
  3. }

Es werden zunächst nur Schriftarten angezeigt, die auf dem System des Besuchers installiert sind. Es sollten immer mehrere ähnliche Schriftarten angegeben werden, am Ende die »generische Schriftfamilie« (sans-serif, serif, cursive, monospace, fantasy). Mehrere Angaben werden durch Kommata getrennt.

Die Beschränkung auf Schriften, die im System des Besuchers vorhanden sind, ist in modernen Browsern nicht mehr notwendig. Mit der ursprünglich von Microsoft »erfundenen« @font-face-Regel können Schriften verwendet werden, die der Browser herunterlädt. Diese Schriften kann man entweder auf dem eigenen Server hosten oder einen Dienst nutzen. Es gibt eine Reihe von kostenlosen (z.B. Google Web Fonts) und kostenpflichtigen Anbietern, die die Schriften in den diversen Formaten zur Verfügung stellen, die für die browserübergreifende Einbindung notwendig sind –, und die meist auch gleich den für die Einbindung nötigen Code generieren.

Schriften unterliegen dem Urheberrecht; achten Sie daher stets darauf, dass Sie die gewünschte Schrift auch tatsächlich einsetzen dürfen.

Eine browserübergreifend zuverlässige Methode finden Sie bei fontspring.

Schriftartnamen mit Leerzeichen müssen in einfache oder doppelte Anführungszeichen gesetzt werden font-family:"Times New Roman", Times, serif;

Angaben zur Schrift werden vererbt, d.h. wenn für das body-Element eine Schriftart festgelegt wird, so wird diese auf die Nachkommen vererbt, bis ein Element eine eigene Angabe erhält.

Verbreitete Schriften:

  • Serifenlose Schriften (sans-serif):
    • Arial,
    • Helvetica (Mac),
    • Verdana,
    • Tahoma,
    • "Trebuchet MS",
    • "Lucida Sans Unicode" (PC), "Lucida Grande" (Mac)
  • Schriften mit Serifen (serif):
    • "Times New Roman",
    • Georgia
  • Nicht-proportionale Schriften (monospace):
    • "Courier New",
    • Monaco (Mac)

Windows Vista bringt neue – für Bildschirmdarstellung optimierte, sehr gelungene – Schriften mit, die sich (auch mit den aktuellen Office-Produkten) verbreiten. Mit einer passenden »konservativen« Alternativangabe sind auch folgende Schriften zukünftig gut einsetzbar:

  • Serifenlose Schriften (sans-serif):
    • Calibri,
    • Candara,
    • Corbel
  • Schriften mit Serifen (serif):
    • Cambria,
    • Constantia
  • Nicht-proportionale Schriften (monospace):
    • Consolas