font-size

Die Eigenschaft font-size gibt die Größe oder Höhe der Schriftart an. font-size wirkt sich nicht nur auf die Schriftart aus, auf die sie angewendet wird, sondern wird auch zur Berechnung des Werts von em, rem und ex Längeneinheiten verwendet.

p {
  font-size: 20px;
}

font-size kann Schlüsselwörter, Längeneinheiten oder Prozentsätze als Werte akzeptieren. Es ist jedoch wichtig zu beachten, dass font-size ein obligatorischer Wert ist, wenn er als Teil der font Kurzschreibweise deklariert wird. Wenn er nicht in der Kurzschreibweise enthalten ist, wird die gesamte Zeile ignoriert.

Längenwerte (z. B. px, em, rem, ex usw.), die auf font-size angewendet werden, dürfen nicht negativ sein.

Absolute Schlüsselwörter und Werte

.element {
  font-size: small;
}

Es akzeptiert die folgenden absoluten Schlüsselwortwerte

• xx-small
• x-small
• klein
• mittel
• groß
• x-large
• xx-large

Diese absoluten Werte werden auf spezifische Schriftgrößen abgebildet, die vom Browser berechnet werden. Sie können jedoch auch zwei Schlüsselwortwerte verwenden, die sich auf die Schriftgröße des übergeordneten Elements beziehen.

Andere absolute Werte umfassen mm (Millimeter), cm (Zentimeter), in (Zoll), pt (Punkte) und pc (Pica). Ein Punkt entspricht 1/72 Zoll, 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

Wenn beispielsweise das übergeordnete Element eine Schriftgröße von small hat, führt ein untergeordnetes Element mit einer definierten relativen Größe von larger dazu, dass die Schriftgröße für das untergeordnete Element gleich medium ist.

Prozentwerte

.element {
  font-size: 110%;
}

Prozentwerte, wie z. B. das Festlegen einer Schriftgröße von 110 %, beziehen sich ebenfalls auf die Schriftgröße des übergeordneten Elements, wie in der folgenden Demo gezeigt.

Sehen Sie 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 übergeordneten Elements basiert. Das bedeutet, dass untergeordnete Elemente immer von ihrem Elternteil abhängig sind, um ihre Schriftgröße festzulegen. Zum 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 16 Pixel, da 1 x 16 = 16 Pixel, während die Überschrift 32 Pixel beträgt, da 2 x 16 = 32 Pixel. Es gibt viele Vorteile beim Skalieren von Typografie basierend auf der Schriftgröße des übergeordneten Elements, nämlich dass wir Elemente innerhalb eines Containers verpacken können und wissen, dass alle Kinder immer zueinander relativ sind.

Sehen Sie den Pen Herausfinden, wie die em-Einheit funktioniert von CSS-Tricks (@css-tricks) auf CodePen.

Die rem-Einheit

Bei rem-Einheiten hängt die Schriftgröße jedoch vom Wert des Wurzelelements (oder des html-Elements) ab.

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem;
}

Im obigen Beispiel entspricht die rem-Einheit 16 Pixel (da sie vom html/Wurzelelement geerbt wird) und somit berechnet sich die Schriftgröße für alle Paragraphenelemente auf 24 Pixel (1,5 x 16 = 24). Im Gegensatz zu em-Einheiten ignoriert der Paragraph die Formatierung all seiner Eltern, außer des Wurzelelements.

Diese Einheit wird von den folgenden Browsern unterstützt

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

Die ex-Einheit

.element {
  font-size: 20ex;
}

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

Sehen Sie den Pen Herausfinden, wie die ex-Einheit funktioniert von CSS-Tricks (@css-tricks) auf CodePen.

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

Viewport-Einheiten

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

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

Viewport-Einheiten wie vw und vh legen die Schriftgröße eines Elements relativ zu den Abmessungen des Viewports fest.

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

Nehmen wir also das folgende Beispiel:

.element {
  font-size: 100vh;
}

Dann besagt dies, dass die Schriftgröße des Elements jederzeit 100 % der Höhe des Viewports betragen soll (50vh wären 50 %, 15vh wären 15 % und so weiter). Probieren Sie im folgenden Demo die Größenänderung der Höhe des Beispiels aus, um die Typografie strecken zu sehen.

Sehen Sie den Pen Größenanpassung von Typografie mit vh-Einheiten von CSS-Tricks (@css-tricks) auf CodePen.

vw-Einheiten unterscheiden sich dadurch, dass sie die Höhe der Schriftzeichen durch die Breite des Viewports festlegen. Sie müssen daher im folgenden Demo das Browserfenster horizontal skalieren, um diese Änderungen zu sehen.

Sehen Sie den Pen Größenanpassung von Typografie 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. Die erste findet die Werte von vh und vw und setzt die Schriftgröße auf den kleinsten der beiden, 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 darin, dass sie die Schriftgröße eines Elements in Bezug auf die Breite des 0 (Null)-Glyphen der Schriftart festlegt.

Sehen Sie den Pen Größenanpassung von Typografie mit ch-Einheiten von CSS-Tricks (@css-tricks) auf CodePen.

Diese Einheit wird unterstützt von

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

Verwandte Eigenschaften

• font
• font-family
• font-stretch
• font-style
• font-variant
• font-weight

Weitere Ressourcen

• font-size bei W3C
• font-size bei MDN
• Idee für Schriftgröße: px am Root, rem für Komponenten, em für Textelemente
• Die Längen von CSS
• Warum Ems?
• Viewport-basierte Typografie
• Präzise Kontrolle über responsive Typografie