CSS 2.1: font-size

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'font-size' <absolute-size> | <relative-size> | <length> | <percentage> | inherit

<absolute-size>

Schlüsselwort, mit dem feste Schriftgrößen im Verhältnis zum Ausgangswert angesprochen werden. Möglich sind hier die Werte xx-small, x-small, small, medium, large, x-large, xx-large. Jede dieser Größen stand bis CSS 2 im Verhältnis von 1 : 1,2 zur vorhergehenden Größe. Im Vorblick auf CSS 3 sind diese Verhältnisse von CSS 2.1 an individuell vorgegeben, ebenso wie die Zuordnung zu den Elementen H1 ... H6 und den veralteten HTML-Schriftgrößen (font size Attribute).

CSS absolute-size Werte	Größenverhältnis	Größen der Elemente H1 ... H6	HTML font sizes
xx-small	3/5 = 0.6em	H6	1
x-small	3/4 = 0.75em
small	8/9 = 0.89em	H5	2
medium (Ausgangswert)	1	H4	3
large	6/5 = 1.2em	H3	4
x-large	3/2 = 1.5em	H2	5
xx-large	2/1 = 2em	H1	6
	3/1		7

Tipp:

Überlassen Sie dem Anwender die Schriftgröße.

Wenn Sie relative Längenwerte verwenden, ermöglichen Sie dem Anwender, sich die Schriftgröße Ihrer Website nach seinen Bedarf anzupassen. Verwenden Sie absolute Längenwerte, hat er diese Möglichkeit nicht und Ihre Seiten sind für ihn vielleicht nicht zugänglich.

Um die Lesbarkeit sicherzustellen, halten alle modernen Browser mindestens eine Schriftgröße von 8 oder 9 Pixel per EM ein, auch dann, wenn sich rechnerisch eine kleinere Schrift ergibt, z. B. durch den Wert xx-small.

<relative-size>

Kann die Werte larger und smaller annehmen. Die Schrift wird entsprechend der obenstehenden Tabelle um eine Stufe größer oder kleiner als die Schrift des Elternelementes dargestellt. Entspricht diese Schriftgröße nicht genau einer der in der Tabelle genannten Stufen, kann das Anwenderprogramm interpolieren oder einfach auf den nächstliegenden Wert runden.

<length>

Absolute oder relative Längenangabe. Negative Werte sind nicht erlaubt. font-size ist die einzige Eigenschaft, bei der em- und ex-Angaben sich auf die Schriftgröße des Elternelementes beziehen.

Mehr Informationen über Längenwerte in CSS finden Sie im Grundlagenartikel Längenwerte.

<percentage>

Prozentwert werden im Verhältnis zum Elternelement angegeben. Sie haben damit die gleiche Wirkungsweise wie die Einheit em.

inherit

Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

BODY { font-size: 1em; } P { font-size: 0.92em; }

Wechselwirkungen:

font, font-style, font-variant, font-weight, line-height, font-family, vertical-align

Besonderheiten im Medientyp handheld:

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1.

Der Einsatz unterschiedlicher Schriftgrößen in Mobilgeräten ist nur sehr eingeschränkt möglich. Systeme wie Palm OS oder Windows CE haben noch eine, wenn auch eingeschränkte, aber dennoch relativ 'große' Auswahl an Schriftgrößen zur Auswahl. Dadurch werden Titelzeilen und Absätze in PDAs zumindest ähnlich den Sollvorstellungen ausgegeben. Ganz anders sieht es dagegen bei Webhandies aus: viele bieten nur drei Schriftgrößen an: eine normale für einfachen Text, eine große für Überschriften und ein Mittelding zwischen beiden für Untertitel. Diese Schriftgrößen sind von Gerät zu Gerät verschieden und variieren in einem weiten Bereich. Die Elemente h1 bis h6, p usw. werden in dieses Schema eingepasst.

Diese Vorgehensweise macht auch die Verwendung relativer Textgrößen schwierig: die Werte von large bis xx-large werden umgerechnet und können sowohl als mittlere wie auch als größere Zeichen ausgegeben werden.

Andere Small-Screen-Browser, unter ihnen Opera-Handheld, sehen von derartigen Zwangsschriftgrößen ab, wenn ein Stylesheet für handheld vorhanden ist. Leider besteht tatsächlich die Gefahr, dass ein Webdokument durch selbst deklarierte Schriftgrößen schlechter lesbar ist als mit automatisch generierten Schriftgrößen.

Weitere Charakteristika:

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.