Stil mit {stil}

Jan 2009

font-size – CSS-Eigenschaften für die Schriftgröße

Kleiner geht es nicht: Neun Pixel brauchen wir, damit der Text lesbar ist.

Die Schriftgröße kann entweder über Schlüsselwörter wie xx-large, durch numerische Werte oder relativ durch eine Prozentangabe oder em festgelegt werden.

Dennoch müssen wir die Angabe der Schriftgröße eher als Empfehlung sehen, denn die tatsächliche Schriftgröße hängt am Ende von der Auflösung und Größe des Monitors, von den Einstellungen des Benutzers und auch noch vom Browser ab. Internet ist kein Papier hinter Glas …

font-size

IE4+ M1 N4+ O5+ S1 CSS1 Erblich: Ja

font-size

regelt die Größe der Schrift mit absoluten oder relativen Werten, durch numerische Werte oder Prozentangaben.

Absolute Schriftgrößen

• xx-small
• x-small
• small
• medium (Voreinstellung)
• large
• x-large
• xx-large

Die effektive Schriftgröße wird durch die Kombination von Monitor, Benutzervorlieben und Browser bestimmt.

Relative Schriftgrößen

• larger
• smaller

Die effektive Schriftgröße wird durch die Kombination von Monitor, Benutzervorlieben und Browser bestimmt.

Numerische Angabe der Schriftgröße

cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).

Schriftgröße in Prozent angeben

vergrößert oder verkleinert die Schriftgröße. Werte, die kleiner als 100% sind, reduzieren die Größe, größere Werte vergrößern die Schriftgröße. Bei 100% bleibt die Schrift unbeeinflusst.

Schriftgröße einer Webseite verkleinern

Eine relative Schriftgröße für body regelt die Schriftgröße für alle Elemente einer Webseite, da alle Elemente innerhalb von body diese Eigenschaft erben. Diese Option wird auf vielen Webseiten genutzt, denn auf den meisten Webseiten wird die »normale« Schriftgröße ein wenig reduziert, um die Inhalte übersichtlicher darzustellen.

body { font-size: 0.9em; } oder
body { font-size: 90%; }

Wer also generell kleinere Schriften wünscht, spart durch diese Technik Schreibarbeit im Stylesheet.

Die Technik gilt natürlich nicht nur für das BODY-Element, sondern wird auch gezielt für bestimmte Elemente eingesetzt. Doch der Effekt kann auch zurückschlagen – wer z.B. für das ul-Element eine Verkleinerung auf diesem Wege durchsetzen will, dem schlägt die Vererbung ein Schnippchen: Jedes tiefer verschachtelte Element erbt die CSS-Eigenschaft und die Listenelemente werden von Ebene zu Ebene immer kleiner.

zurück zum Seitenanfang