CSS - Textformatierung über CSS, Schriftart, Schriftgröße, Zeilenhöhe
Am häufigsten wird CSS zur Formatierung von Zeichen und Absätzen eingesetzt. Hier ist auch die Unterstützung durch die Browser sehr gut und die Vorteile gegenüber dem schwerfälligen und wenig flexiblen font-Element aus (X)HMTL sind sehr deutlich.
Schriftart
Zur Definition der Schriftart existiert die Eigenschaft font-family. Dahinter geben wir die gewünschte Schrift an. Wir sollten aber nur Standardschriftarten verwenden, da die Schrift auf dem Computer des Besucher installiert sein muss, damit diese verwendet werden kann.
Besteht der Schriftname aus mehreren Wörtern, so müssen wir den Schriftnamen in Anführungszeichen setzen. Außerdem empfiehlt sich eine Schriftenliste anzugeben, sprich mehrere Schriften durch Kommata getrennt:
body { font-family: "Courier New", Courier, monospace; }
Ist die erste Schrift im System des Besuchers nicht vorhanden, nutzt der Browser die zweite und so weiter. Als letztes sollten wir den Namen einer generischen Schriftfamilie einsetzen. Diese bezeichnen keine konkrete Schriftrealisierung, sondern nur Schrifttypen, welche je nach Browser und Betriebssystem anderes umgesetzt werden können.
| Name der generischen Schriftfamilie | Erläuterung |
|---|---|
| serif | Schrift mit Serifen. Serifen sind kleine Verzierungen, die einen Buchstaben am Ende abschließen. Eine typische Serifenschrift ist Times oder Times New Roman. |
| sans-serif | Serifenlose Schrift. Typisch Vertreter sind Arial, Verdana, oder Helvetica. |
| cursive | Verbundene Buchstaben, die an eine Handschrift erinnern. Ein Vertreter z.B. Zapf-Chancery. |
| fantasy | Eine Schrift mit dekorativen Elementen, z.B. Cotton Wood. |
| monospace | Diktengleiche Schrift. Alle Buchstaben nehmen gleich viel Platz ein, erinnert an Schreibmaschinenschrift. Vertreter unter anderem hier Courier oder Courier New. |
Schriftgröße
Die Schriftgröße bestimmen wir über font-size. Als Wert können wir eins von neun Schlüsselwörtern nutzen.
xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger
Außerdem können wir die Schriftgröße über die eben vorgestellten in CSS möglichen Einheiten festlegen.
p { font-size: 0.8em; }
Empfehlenswert sind für den Bildschirm relative Angaben, d.h. insbesondere em und Prozent oder Pixel. Punkt und Zentimeter sind nur für Stylesheetes für den Druck sinnvoll.
Pixel werden häufig bei Schriftgrößen verwendet, da sie auch bei anderen Elementen von Webseiten, z.B. bei Bildern, benutzt werden. Einen Nachteil haben jedoch Pixelangaben bei der Schriftgröße. Der Surfer kann die Schriftgröße im Internet-Explorer nicht vergrößern, was hinsichtlich der Zugänglichkeit von Webseiten ein großes Manko ist.
Die Angabe em ist anfangs etwas gewöhnungsbedürftig. Wenn wir für body eine Schriftgröße von 1em festlegen, ist die absolute Größe jeweils eine andere, abhängig davon, wie die Standardgröße im Browser festgelegt ist. Ist es 16px, so entspricht 1em = 16px. Wenn der Nutzer eine größere Schrift einstellt, so verändert sich die Größe von 1em entsprechend. Standardmäßig ist aber meistens 16px voreingestellt.
Durch den Einsatz von em kann gewährleistet werden, dass das Verhältnis der Schriftgrößen untereinander immer gleich ist.
Relative Schriftgrößen bei verschachtelten Elementen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>em-vererbung</title>
<style type="text/css">
/* <![CDATA[ */
body {
font-size: 30px;
font-family:sans-serif;
}
/* ]] */
</style>
</head>
<body>
<p style="font-size: 0.6em;">Größe des Absatzes 0.6em und <strong style="font-size: 0.6em;">hier ebenfalls 0.6em als Schriftgrößenangabe im Element
strong</strong></p>
<p style="font-size: 0.6em;">Größe des Absatzes 0.6em und jetzt <strong>ohne extra Schriftgrößenangabe für das Element strong.</strong></p>
</body>
</html>
Im Beispiel erhält sowohl der Absatz p als auch das darin stehende Element strong eine Schriftgröße von 0.6em. Da sich em immer auf die Schriftgröße des aktuellen Elements bezieht, ergibt die gleiche Angabe unterschiedliche Werte. Da für das Dokument eine Standardgröße von 30px im body festgelegt wird, hat der Absatz eine Schriftgröße von 30px * 0.6, also 18px. Der Text innerhalb von strong erhält 0.6 von 18px, d.h. 10.8px aufgrund der Vererbung.
Zeilenhöhe
Die Zeilenhöhe lässt sich in CSS komfortabel über line-height bestimmen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>line-height</title>
</head>
<body>
<p style="font-size: 1em; line-height: 1.5"><strong>font-size: 1em; line-height: 1.5:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. ....</p>
<p><strong>Standardwerter des Browsers:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. ....</p>
</body>
</html>
Als Einheit kann neben den in CSS üblichen Maßeinheiten auch eine Zahl ohne Maßangabe geschrieben werden. Damit wird der Skalierungsfaktor angegeben. Im obigen Beispiel ist mit line-height: 1.5 der Zeilenabstand anderthalb msl do groß wie der Standardzeilenabstand.