font-size

Die font-size-Eigenschaft gibt die Größe bzw. Höhe der Schrift an. font-size wirkt sich nicht nur auf die Schrift aus, auf die sie angewendet wird, sondern wird auch verwendet, um den Wert der Längeneinheiten em, rem und ex zu berechnen.

p { font-size: 20px;}

font-size kann Schlüsselwörter, Längeneinheiten oder Prozentwerte als Werte akzeptieren. Es ist jedoch wichtig zu beachten, dass font-size ein obligatorischer Wert ist, wenn er als Teil der Shorthand-Eigenschaft font deklariert wird. Wenn es nicht im Kürzel enthalten ist, wird die gesamte Zeile ignoriert.

Längenwerte (z.B. px, em, rem, ex, etc.), die auf font-size angewendet werden, können nicht negativ sein.

Absolute Schlüsselwörter und Werte

.element { font-size: small;}

Es werden die folgenden absoluten Schlüsselwortwerte akzeptiert:

xx-small
x-small
small
medium
large
x-large
xx-large

Diese absoluten Werte werden auf bestimmte Schriftgrößen abgebildet, die vom Browser berechnet werden. Sie können aber auch zwei Schlüsselwortwerte verwenden, die relativ zur Schriftgröße des Elternelements sind.

Andere absolute Werte sind mm (Millimeter), cm (Zentimeter), in (Zoll), pt (Punkte) und pc (Pica). Ein Punkt entspricht 1/72 eines Zolls, während ein Pica 12 Punkten entspricht – diese Werte werden typischerweise für gedruckte Dokumente verwendet.

Relative Schlüsselwörter

.element { font-size: larger;}

larger
smaller

Beispielsweise, wenn das übergeordnete Element eine Schriftgröße von small hat, wird ein untergeordnetes Element mit einer definierten relativen Größe von larger die Schriftgröße für das untergeordnete Element gleich medium machen.

Prozentwerte

.element { font-size: 110%;}

Prozentwerte, wie z. B. das Setzen einer Schriftgröße von 110 %, sind ebenfalls relativ zur Schriftgröße des Elternelements, wie in der folgenden Demo zu sehen ist:

Siehe den Pen qdbELL von CSS-Tricks (@css-tricks) auf CodePen.

Die em-Einheit

.element { font-size: 2em;}

Die em-Einheit ist eine relative Einheit, die auf dem berechneten Wert der Schriftgröße des Elternelements basiert. Das bedeutet, dass untergeordnete Elemente immer von ihrem übergeordneten Element abhängig sind, um ihre Schriftgröße festzulegen. Ein Beispiel:

<div class="container"> <h2>This is a heading</h2> <p>This is some text.</p></div>

.container { font-size: 16px;}p { font-size: 1em;}h2 { font-size: 2em;}

Im obigen Beispiel hat der Absatz eine Schriftgröße von 16px, weil 1 x 16 = 16px, während die Überschrift 32px hat, weil 2 x 16 = 32px. Es hat viele Vorteile, die Schriftgröße in Abhängigkeit von der Schriftgröße des Elternelements zu skalieren, nämlich dass wir Elemente innerhalb eines Containers einpacken können und wissen, dass alle Kinder immer relativ zueinander sind:

See the Pen Figuring out how the em unit works by CSS-Tricks (@css-tricks) on CodePen.

Die rem-Unit

Bei der rem-Unit ist die Schriftgröße jedoch abhängig vom Wert des Root-Elements (bzw. des html-Elements).

html { font-size: 16px;}p { font-size: 1.5rem;}

Im obigen Beispiel ist die rem-Einheit gleich 16px (weil sie vom html/Wurzelelement geerbt wird) und somit wird die Schriftgröße für alle Absatzelemente auf 24px (1,5 x 16 = 24) berechnet. Im Gegensatz zu em-Einheiten ignoriert der Absatz das Styling aller seiner Eltern außer dem Wurzelelement.

Diese Einheit wird von den folgenden Browsern unterstützt:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Werke	Werke	Werke	Werke	10+	Werke

Die Ex-Einheit

.element { font-size: 20ex;}

Für Ex-Einheiten, 1ex wäre gleich der berechneten Höhe des Kleinbuchstabens x des Wurzelelements. Im folgenden Beispiel wird also das html-Element auf 20px gesetzt und alle anderen Schriftgrößen werden durch die x-Höhe der jeweiligen Schriftart bestimmt.

Sehen Sie sich den Pen Figuring out how the ex unit works by CSS-Tricks (@css-tricks) auf CodePen an.

Experimentieren Sie mit der obigen Demo, indem Sie das font-family auf dem html-Element ersetzen, um zu sehen, wie sich die anderen Schriftgrößen ändern.

Ansichtsfenster-Einheiten

.element-one { font-size: 100vh;}.element-two { font-size: 100vw;}

Ansichtsfenster-Einheiten, wie vw und vh, setzen die Schriftgröße eines Elements relativ zu den Abmessungen des Ansichtsfensters:

1vw = 1% der Viewport-Breite
1vh = 1% der Viewport-Höhe

Wenn wir also das folgende Beispiel nehmen:

.element { font-size: 100vh;}

Dann heißt es, dass die Schriftgröße des Elements immer 100% der Höhe des Viewports betragen sollte (50vh wären 50%, 15vh wären 15% und so weiter). In der folgenden Demo versuchen Sie, die Höhe des Beispiels zu verändern, um zu sehen, wie sich die Schrift streckt:

Siehe Pen Sizing type with vh units von CSS-Tricks (@css-tricks) auf CodePen.

vwEinheiten unterscheiden sich insofern, als dass die Höhe der Buchstabenformen durch die Breite des Ansichtsfensters festgelegt wird, so dass Sie in der folgenden Demo die Größe des Browserfensters horizontal ändern müssen, um diese Änderungen zu sehen:

Siehe den Pen Sizing-Typ mit vw-Einheiten von CSS-Tricks (@css-tricks) auf CodePen.

Diese Einheiten werden von den folgenden Browsern unterstützt:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
31+	7+	31+	27+	9+	4.4+	7.1+

Es ist wichtig zu beachten, dass es zwei weitere Viewport-Einheiten gibt: vmin und vmax. Ersteres findet die Werte von vh und vw und setzt die Schriftgröße auf den kleinsten der beiden Werte, während vmax die Schriftgröße auf den größten dieser beiden Werte setzt.

Die ch-Einheit

.element { font-size: 24ch;}

Die ch-Einheit ähnelt der ex-Einheit, indem sie die Schriftgröße eines Elements in Relation zur Breite der 0 (Null) Glyphe des Fonts setzt:

Siehe den Typ Pen Sizing with ch units von CSS-Tricks (@css-tricks) auf CodePen.

Diese Einheit wird unterstützt von:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
27+	Werke	10+	Werke	9+	Werke