Zurück: Farben und Hintergründe
Weiter: Textformatierung

Schriftformatierung

font-family

Mit der Eigenschaft font-family bestimmen Sie die Schriftart bzw. die Schriftfamilie.

<Schriftname>
Bezeichnet den exakten Namen der Schriftfamilie, zum Beispiel Courier, Trebuchet MS, Symbol oder Times New Roman. Namen, die Leerzeichen beinhalten, müssen in einfachen oder doppelten Anführungszeichen notiert werden.
<Generische Familie>
Es gibt insgesamt fünf generische Familien:
  • serif: Schriftarten mit Serifen, also kleinen Häkchen am Fuß oder an den Abschlüssen der Schriftzeichen.
  • sans-serif: Schriftarten ohne Serifen.
  • cursive: Schriftarten für Schreibschrift.
  • fantasy: Schriftarten für dekorative oder außergewöhnliche Schrift.
  • monospace: Festbreitenschriftarten, also Schriftarten, bei denen alle Zeichen die gleiche Laufweite und sehr ausgeprägte Serifen aufweisen.
inherit

Der Initialwert ist browserabhängig.

CSS bietet uns die schöne Möglichkeit, auf das in aktuellen XHTML-Versionen missbilligte (und daher in dieser Einführung auch nicht vorgestellte) Element font zu verzichten, aber die grundlegenden Fragen bleiben natürlich: Welche Schriftfamilie soll ich für welches Element wählen? Welche Schriftfamilie ist am besten zu lesen?

Grundsätzlich gilt zu sagen, dass Sie jede Schriftfamilie angeben können, die Sie möchten. Sie können sogar eine beliebig große Anzahl von Schriftfamilien angeben. Schauen Sie sich bitte folgende drei Beispiele an:

p { font-family: Verdana, Helvetica, sans-serif; }

p { font-family: "Times New Roman", Times, serif; }

p { font-family: "Courier New", Courier, monospace; }

Im ersten Beispiel würde ein CSS-fähiger Browser versuchen, den Elementinhalt von Paragraphen in der Schriftfamilie Verdana darzustellen. Sollte Verdana auf dem System nicht installiert sein, sucht er nach Helvetica, findet er auch diese Schriftfamilie nicht, wählt er die Schriftfamilie, die der Benutzer auf seinem System standardmäßig für die generische Familie sans-serif angegeben hat. Bei mir ist dies zur Zeit Trebuchet MS.

  • Sie sollten sich beim Layouten Ihrer Seite genau überlegen, ob es wirklich notwendig ist, eine Schriftfamilie zu definieren. Gehen Sie davon aus, dass der Browser Text entweder in einer gut lesbaren Standardschriftfamilie (bei Windows ist es Times New Roman) oder in der vom Benutzer gewählten Schriftfamilie darstellt. Sie sollten sich fragen, ob die von Ihnen gewünschte Schriftfamilie beim Lesen nicht mehr behindert, als dass sie das Gesamtbild Ihrer Seite oder die Lesbarkeit verbessert.

    Ob man für Fließtext auf Webseiten eher eine Schriftfamilie mit oder ohne Serifen wählen sollte, wird in einschlägigen Foren ständig heiß diskutiert. Im Buchdruck zum Beispiel ist diese Frage leicht zu beantworten: dort werden Schriften mit Serifen gewählt, da diese das Auge führen und somit das Lesen erleichtern. Auf einem flackernden Monitor kann man davon jedoch nicht mehr ausgehen, da die Schrift nicht mehr so klar und deutlich dargestellt wird wie auf dem Papier und dieser Effekt daher verloren gehen kann. Ich persönlich bevorzuge serifenlose Schriftarten, aber das ist wohl Geschmackssache.
font-style
normal
oblique
Bestimmt eine Schrift aus der angegebenen Schriftfamilie, die als oblique gekennzeichnet ist.
italic
Bestimmt eine Schrift aus der angegebenen Schriftfamilie, die als italic gekennzeichnet ist.
inherit
  • Schriften der Art oblique und italic unterscheiden sich innerhalb einer Schriftfamilie zumeist nicht. Für gewöhnlich erscheinen beide Schriften kursiv in einfacher Schriftdicke.
font-variant
normal
small-caps
Der gesamte Text wird als »Kapitälchen« dargestellt. Kleinbuchstaben werden zu skalierten Großbuchstaben.
inherit
font-weight

Mit der Eigenschaft font-weight bestimmen Sie die Schriftdicke.

normal
100, 200, 300, 400, 500, 600, 700, 800, 900
Diese Werte bilden eine Sequenz von »sehr dünn« bis »sehr dick«. Es kommt auf den User-Agent an, wie diese Werte dargestellt werden.
bold
Entspricht dem Wert 700.
bolder, lighter
Der Wert bolder verschiebt die Schriftdicke relativ zum Elternelement (bzw. zum vererbten Wert) um einen Wert nach oben, lighter analog einen Wert nach unten.
  • Die meisten Schriften enthalten nur die Gewichte »regular« und »bold«, manchmal noch »thin«. Wenn Sie eine Schriftdicke angeben, die in der entsprechenden Schriftfamilie nicht enthalten ist, hat der Browser zwei Möglichkeiten: Entweder er ignoriert die Angabe und nimmt einfach das nächstliegende oder er versucht, selbst etwas zu simulieren. Bevor Sie für font-weight also etwas andres als normal oder bold angeben, vergewissern Sie sich, dass die vorgeschlagenen Schriften diese Schnitte auch enthalten und einigermaßen häufig sind.
font-size

Mit der Eigenschaft font-size bestimmen Sie die Schriftgröße.

<Länge>
<Prozent>
inherit

Der Initialwert ist medium.

  • Die »richtige« Schriftgröße
    Im WWW gibt es bisher keinen aktuelleren und gleichzeitig besseren oder zumindest gleich guten Text über Schriftgrößen als diesen im Rahmen der <dciwam/>-FAQ erschienene Artikel von Björn Höhrmann. Dort werden alle Möglichkeiten, absolute sowie relative Schriftgrößen anzugeben, aufgeführt und erläutert. Leider ist der Text etwas veraltet, das sehen Sie unter anderem daran, dass stellenweise noch mit Browsern der dritten Generation argumentiert wird. Man kann dem zu Anfang vorgestellten Fazit »Benutze Pixel oder gib gar nichts an« in dieser Form natürlich nicht (mehr) zustimmen. Ansonsten ist der Text natürlich weiterhin sehr lesenswert.
  • Dynamische Schriftgröße mit PHP und CSS
    In diesem Artikel, der in gekürzter Form in der Internet Professional 12/2003 erschienen ist, zeigt Mario Müller eine flexible Möglichkeit, mit der Ihre Besucher die Schriftgröße selber für die Webseite ändern können.
  • Die Frage nach der besten Schriftgröße ist eine der am meisten diskutierten im Webauthoring. Wenn Sie sich nicht wirklich sicher sein, was Sie tun, sollten Sie für den Fließtext keine Schriftgrößenveränderung vornehmen.

Folgendes Dokument stellt die einzelnen Eigenschaften vor:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Schriftformatierung</title>
<style type="text/css">
.eins {
   font-family: "Myriad Web", "Times New Roman", Times, serif;
   font-size: 1.5em;
}
.zwei {
   font-family: "Trebuchet MS", Verdana, sans-serif;
   font-style: italic;
}
.drei {
   font-family: "Courier New", Courier, monospace;
}
.vier {
   font-weight: bold;
   font-variant: small-caps;
   font-size: 300%;
}
</style>
</head>

<body>

<p class="eins">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.</p>

<p class="zwei">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.</p>

<p class="drei">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.</p>

<p class="vier">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.</p>

</body>
</html>

Beispieldokument ansehen

Zurück: Farben und Hintergründe
Weiter: Textformatierung
Zum Seitenanfang