Fonts in CSS

Die nächsten Lektionen beschäftigen sich mit dem Thema “Schriftarten” und deren Gestaltung in CSS.

Bislang kam der Webdesigner nicht ohne unzählige FONT-Tags aus, beispielsweise muss in jeder Tabellenzelle die Schriftart und -größe sowie weitere Eigenschaften immer wieder explizit angegeben werden, wenn es in allen Browsern identisch aussehen sollte.

Schriftartfamilien (Font Families)

Schriftarten werden in CSS ein wenig anders als in reinem HTML definiert: Es gibt sog. Schriftartfamilien (“Font Families”).

Jede Schriftartfamilie besteht oftmals aus unterschiedlichsten einzelnen Schriftarten. Beispielsweise gehören zur Schriftfamilie Arial die einzelnen Schriftarten Arial Bold, Arial Italic, oder auch Arial Bold Italic. Diese einzelnen Schriftarten finden Sie als Dateien bei Windows im Unterordner “Fonts” des Windows-Installationsverzeichnisses.

Zu jeder dieser Schriftartfamilien gibt es nun in CSS fünf generische Schriftartenfamilien:

Serif Fonts:

Schriftarten, die proportional sind und Serifen haben. Bei proportionalen Schriftarten haben verschiedene Buchstaben unterschiedliche Breiten, ein kleines “i” ist deutlich schmaler als ein “m”. Serifen sind Dekorationen am Ende der einzelnen Striche aus denen Buchstaben bestehen. Serifenschriftarten sind z.B. Times und Garamond.

Sans serif fonts:

Dies sind Schriftarten die proportional sind, aber keine Serifen besitzen. Zum Beispiel Arial, Geneva, Helvetical oder Verdana.

Monospace Fonts:

Nicht proportionale Schriftarten. Diese Schriftarten können Serifen enthalten und sollen ungefähr so aussehen wie das Schriftbild einer alten Schreibmaschine oder eines Nadeldruckers. Das “i” ist bei diesen Schriftarten genauso breit wie das “m”. Beispiel ist Courier.

Cursive Fonts:

Diese Art von Schriftarten enthalten meist viele Rundungen, um ähnlich wie eine menschliche Handschrift auszusehen. Beispiel ist die Schriftart Comic Sans.

Fantasy Fonts:

Fantasy Fonts lassen sich nicht an speziellen Kriterien festmachen, außer dass sie nicht in eine der anderen Kategorien gehören.

Benutzung von Schriftartfamilien (font-family)

Um einem Text eine bestimmte Schriftart/-typ zuzuordnen, benötigen Sie den Befehl font-family.

Dieser komplizierte Befehl wird jetzt näher erläutert:

Wenn Sie auf einer HTML-Seite ausschließlich serifenlose Schriftarten verwenden möchten, genügt folgende Definition:

BODY { font-family: sans-serif; }

Mit diesem Befehl wird der Browser angewiesen für alle Texte serifenlose Schriftarten zu verwenden. Sofern keine anderweitige Definition den Befehl für bestimmte Elemente überschreibt, werden alle Absätze, Überschriften und anderen Texte in einer serifenlosen Schriftart dargestellt. Welche Schriftart letztendlich benutzt wird, bleibt dem Browser überlassen (z.B. Arial).

Umgekehrt kann man alle Textelemente in einer Serifenschriftart darstellen, wobei nur Überschriften keine Serifen enthalten sowie präformatierte Texte nicht proportional sein sollen.

BODY { font-family: serif; }
H1, H2, H3, H4, H5, H6 { font-family: sans-serif; }
CODE, PRE, TT { font-family: monospace; }

Ein ganz normaler Text mit Serifen.
<H2>Eine Überschrift ohne Serifen</H2>
Weiter mit normalem Text (mit Serifen).<BR><BR>
<CODE>Ein Stück präformatierter, nicht-proportionaler Text.</CODE><BR><BR>
Zuletzt noch ein Stück "Standardtext".

Welche Schriftarten der Browser hier wählt, ist vorher nicht bekannt und hängt ein wenig von den auf dem Rechner des Besuchers installierten Schriftarten ab. Meist wird als Serifenschriftart Times benutzt, für die Serifenlose Helvetica und für Monospace Courier.

Genaue Schriftartangaben

Möchten Sie jetzt statt des Schrifttyps die eigentliche Schriftart festlegen, können Sie dies ebenfalls mit dem Befehl font-family machen. Zum Beispiel können alle H3-Überschriften in der Schriftart “Arial” gestaltet werden:

H3 { font-family: Arial; }

<H3>Überschrift in der Schriftart "Arial"</H3>

Wenn Sie jetzt zu ausgefallene Schriftarten für bestimmte Texte festlegen, kann es passieren, dass der Browser des Benutzers diese nicht kennt. In diesem Fall würde er die Definition einfach übergehen und alles in der Standardschriftart darstellen, was manchmal das ganze Design durcheinander bringt.

Sie können aber eine bestimmte Schriftart festlegen und – falls diese nicht vorhanden ist – einen alternativen Schriftarttyp festlegen.

H3 { font-family: Arial, sans-serif; }

Findet der Browser nun nicht die Schriftart Arial, nimmt er stattdessen eine anderen serifenlose Schriftart, wie z.B. Helvetica oder Verdana.

Sie können einen solchen Befehl sogar noch spezieller gestalten, indem Sie dem Browser eine Liste an Schriftarten geben:

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

Diese Liste wird nacheinander geprüft, beginnend mit Arial. Sofern Arial nicht gefunden wurde, wird nach Helvetica gesucht. Ist diese Schriftart auch nicht vorhanden, werden die Überschriften in Verdana dargestellt. Sollte keine der drei speziellen Schriftarten existieren, versucht der Browser eine serifenlose Schriftart zu finden, um damit die Überschriften zu formatieren.

Besonderheiten bei der Definition von Schriftarten

Bei der Definition von Schriftarten gibt es noch ein paar kleine Besonderheiten:

Wenn der Schriftartname aus mehr als einem Wort besteht, sollte er von Hochkommata umschlossen werden, z.B. so:

H3 { font-family: 'Comic Sans', cursive; }

Ebenso von Hochkommata umschlossen sollten Schriftartnamen sein, die eine Raute (#) oder ein Dollarzeichen ($) enthalten.

Generische Angaben wie “serif” sollten nie von Hochkommata umgeben sein, da der Browser diese Angabe sonst für einen Schriftartnamen halten könnte und nach dieser suchen würde (in den meisten Fällen mit wenig Erfolg).

Des Weiteren sollten Sie am Ende einer Schriftartenliste immer den generischen Typ mit auflisten, um wenigstens im Falle des Fehlens der Schriftarten den richtigen Typ zu haben.

Schriftgewicht (font-weight)

Mit Hilfe des Befehls font-weight lässt sich Textteilen ein höheres Schriftgewicht zuordnen, d.h. sie werden fetter dargestellt.

Der Befehl lässt aber mehr Abstufungen zu als der einfache HTML-Tag … und zwar durch die Werte 100 bis 900. 100 ist die leichteste Variante, 400 entspricht dem Wert normal, 700 entspricht bold und 900 ist der schwerste (fetteste) Wert.

Da nicht jede Schriftart so viele Abstufungen enthält, können die Werte 100-300, 400-600 und 700-900 jeweils gleich aussehen.

Die Werte bolder und lighter machen das Schriftgewicht schwerer (fetter) bzw. leichter.

SPAN.wert100 { font-weight: 100; } SPAN.wert200 { font-weight: 200; }
SPAN.wert300 { font-weight: 300; }
SPAN.wert400 { font-weight: 400; }
SPAN.wert500 { font-weight: 500; }
SPAN.wert600 { font-weight: 600; }
SPAN.wert700 { font-weight: 700; }
SPAN.wert800 { font-weight: 800; }
SPAN.wert900 { font-weight: 900; }

<SPAN class="wert100">Dieser </SPAN><SPAN class="wert200">Text </SPAN><SPAN class="wert300">wird </SPAN><SPAN class="wert400">immer </SPAN><SPAN class="wert500">fetter </SPAN><SPAN class="wert600">und </SPAN><SPAN class="wert700">fetter </SPAN><SPAN class="wert800">und </SPAN><SPAN class="wert900">fetter.</SPAN>

Schriftstil (font-style)

Der Befehl font-style verändert die “Schräglage” eines Textes, legt also fest, ob er kursiv dargestellt werden soll oder nicht.

SPAN.kursiv { font-style: italic; }
SPAN.schief { font-style: oblique; }

<SPAN class="kursiv">Ein kursiver und ein</SPAN><BR>
<SPAN class="schief">schiefer Text.</SPAN>

Was ist jetzt der Unterschied zwischen “italic” und “oblique”? Bei einem Text mit dem Befehl “oblique” wird der Text einfach um ein paar Grad geneigt, bei kursivem (“italic”) Text wird oftmals eine eigene Schriftart verwendet (z.B. Arial Italic), die zusätzlich zur Schiefe noch andere Eigenschaften (Rundungen bestimmter Buchstaben o.ä.) enthält.

Schriftvariationen (font-variant)

Folgendes Beispiel zeigt am besten das Resultat des Befehls font-variant:

H2 { font-variant: small-caps; }
P { font-variant: normal; }

<H2>Lorem Ipsum Dolor Sit Amet</H2>
<P>Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P>

Der Befehl macht also das gleiche wie text-transform: uppercase, verändert aber zusätzlich auch noch den jeweils ersten Buchstaben eines großgeschriebenen Wortes.

Schriftgröße (font-size)

Schriftarten und Schrifteigenschaften stellen jetzt für Sie kein Problem mehr dar, lediglich die Schriftgröße ist noch unbekannt.

Die Schriftgröße lässt sich in CSS auf verschiedene Weisen definieren.

Zuerst aber wie immer die Übersicht über den Befehl:

Absolute Angaben

Folgendes Beispiel zeigt die Größenunterschiede zwischen den Schriftgrößen xx-small, x-small, small, medium, large, x-large und xx-large:

P.xxsmall { font-size: xx-small; }
P.xsmall { font-size: x-small; }
P.small { font-size: small; }
P.medium { font-size: medium; }
P.large { font-size: large; }
P.xlarge { font-size: x-large; }
P.xxlarge { font-size: xx-large; }

Ein Problem bei der Angabe der Werte ist, dass der Browser selbst entscheidet wie groß der Text dargestellt wird. Der Wert “medium” entspricht meist 12 Point, manche Browser machen daraus aber auch 10 Point. Ebenso verhält es sich mit den anderen Werten.

Relative Angaben

Die beiden Angaben smaller und larger vergrößern die Schrift.

P { font-size: medium; }
B { font-size: larger; }
I { font-size: smaller; }

<P>Lorem ipsum dolor sit amet, consectetueradipiscing elit, <B>sed diam nonummy nibh</B> euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <I>Ut wisi enim ad minim veniam</I>, quis nostrudexercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</P>

Prozent- und Längenangaben

Prozentangaben sind den relativen Angaben larger und smaller sehr ähnlich, nur lässt sich mit den Prozentwerten eine genauere Verkleinerung bzw. Vergrößerung festlegen.

Bei den Längenangaben können Sie Größen wie z.B. 12 px, 24 pt, 0.5 in oder auch 1.3 em angeben.

P { font-size: 12pt; }
B { font-size: 120%; }
SMALL { font-size: 60%; }

<P>Lorem ipsum dolor sit amet, consectetueradipiscing elit, <B>sed diam nonummy nibh</B> euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <SMALL>Ut wisi enim ad minim veniam</SMALL>, quis nostrudexercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</P>

Kurzversion zur Definition von Schriftstilen (font)

Sobald man anfängt, das Aussehen eines Textes nach den eigenen Bedürfnissen anzupassen, merkt man schnell, dass dies in recht langen CSS-Befehlen ausartet.

Zum Beispiel:

H3 {
font-family: Verdana, Arial, sans-serif;
font-size: 12pt;
font-style: italic;
font-variant: small-caps;
font-weight: bold;
} 

Der Befehl sieht zuerst kompliziert aus, spart dann aber viel Tipparbeit.

H3 { font: italic small-caps bold 12pt Verdana, Arial, sans-serif; }

Die Werte der Befehle font-weight, font-variant und font-style lassen sich in jeder beliebigen Reihenfolge notieren. Wenn ein Wert den Standardwert trägt kann man ihn auch weglassen.

Die beiden letzten Befehle font-size und font-family müssen immer angegeben werden!

Zusätzlich lässt sich der Befehl line-height in dem font-Befehl unterbringen und zwar als Zusatz zu der Schriftgröße. Dem Wert line-height wird dann ein Slash (/) vorangestellt:

H3 { font: italic small-caps bold 12pt/1.4 Verdana, Arial, sans-serif; }

Die Schriftgröße beträgt jetzt 12pt, die Zeilenhöhe ist 1,4.