font-size

Die font-size-CSS-Eigenschaft spezifiziert die Schriftgöße. Eine Änderung der Schriftgröße kann die Größe anderer Partien beeinflussen, da sie dazu benutzt wird, den Wert der em- und ex-<length>-Einheiten zu berechnen.

/* <absolute-size>-Werte */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* <relative-size>-Werte */
font-size: smaller;
font-size: larger;

/* <length>-Werte */
font-size: 12px;
font-size: 0.8em;

/* <percentage>-Werte */
font-size: 80%;

/* Globale Werte */
font-size: inherit;
font-size: initial;
font-size: unset;

<div id="container">
  <p id="xx-small">xx-small</p>
  <p id="x-small">x-small</p>
  <p id="small">small</p>
  <p id="medium">medium</p>
  <p id="large">large</p>
  <p id="x-large">x-large</p>
  <p id="xx-large">xx-large</p>
  <p id="twelve-px">12px</p>
  <div id="parent-twelve-px">
    12px
    <p id="smaller">smaller</p>
    <p id="larger">larger</p>
    <p id="zero-dot-eight-em">0.8em</p>
  </div>
  <div id="parent-twenty-four-px">
    24px
    <p id="smaller">smaller</p>
    <p id="larger">larger</p>
    <p id="zero-dot-eight-em">0.8em</p>
  </div>
</div>

#container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

div > p {
  border: 1px solid black;
  display: flex;
  align-items: center;
  margin: 8px;
  padding: 8px;
}

#parent-twelve-px,
#parent-twenty-four-px {
  display: flex;
  border: 1px solid black;
  padding: 8px;
  margin: 8px;
}

#parent-twelve-px {
  font-size: 12px;
}

#parent-twenty-four-px {
  font-size: 24px;
}

#xx-small {
  font-size: xx-small;
}

#x-small {
  font-size: x-small;
}

#small {
  font-size: small;
}

#medium {
  font-size: medium;
}

#large {
  font-size: large;
}

#x-large {
  font-size: x-large;
}

#xx-large {
  font-size: xx-large;
}

#smaller {
  font-size: smaller;
}

#larger {
  font-size: larger;
}

#twelve-px {
  font-size: 12px;
}

#zero-dot-eight-em {
  font-size: 0.8em;
}

Initialwert	`medium`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Ja
Prozentwerte	bezieht sich auf die Schriftgröße des Elternelements
Medien	visuell
Berechneter Wert	relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
Animationstyp	Längenangabe
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

Die font-size-Eigenschaft kann auf zwei Weisen spezifiziert werden:

durch ein einzelnes Schlüsselwort, das entweder eine absolute oder relative Größe darstellt
durch einen <length-percentage>-Wert

Werte

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

Ein Satz von Schlüsselwörtern absoluter Größe, basierend auf der vom Benutzer festgelegten Schriftgröße (welche medium entspricht). Ähnlich der HTML-Tags <font size="1"> bis <font size="7">, bei denen die benutzerdefinierte Größe <font size="3"> entspricht.

larger, smaller

Größer oder kleiner als die Schriftgröße des Elternelements; grob das Verhältnis, das benutzt wird, um die obigen absoluten Schlüsselwörter zu unterscheiden.

<length-percentage>

Ein positiver <length>- oder <percentage>-Wert. Werden die Einheiten der <length>-Werte durch em oder ex spezifiziert, ist die Größe relativ definiert zur Schriftgröße des Elternelements des gefragten Elements. Zum Beispiel entspricht 0.5em der Hälfte der Schriftgröße des aktuellen Elternelements. Werden die Einheiten in rem spezifiziert, ist die Größe relativ definiert zur Schriftgröße des <html>-(Wurzel-)Elements.

<percentage>-Werte beziehen sich auf die Schriftgröße des Elternelements.

Am Besten werden Werte benutzt, die relativ zur benutzerdefinierten Schriftgröße stehen. Absolute Werte in Form von Längen mit Einheiten, außer em oder ex, sollten vermieden werden. Müssen trotzdem solche absoluten Werte benutzt werden, ist px anderen Einheiten vorzuziehen, weil seine Bedeutung nicht abhängig davon, was das Betriebssystem (meist fälschlicherweise) für die Bildschirmauflösung hält, variiert.

Formale Syntax

<absolute-size> | <relative-size> | <length-percentage>wobei 
<absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large
<relative-size> = larger | smaller
<length-percentage> = <length> | <percentage>

Mögliche Ansätze

Es gibt einige verschiedene Arten, die Schriftgröße zu spezifizieren, in Form von Schlüsselwörtern oder numerischen Werten für Pixel oder ems. Je nachdem, was die Ansprüche einer Webseite sind, kann die richtige Methode gewählt werden.

Schlüsselwörter

Schlüsselwörter sind eine gute Möglichkeit die Größe von Schriften im Web festzulegen. Indem ein Schlüsselwort für die Schriftgröße des body-Elements festgelegt wird, ist es möglich überall auf der restlichen Webseite relative Schriftgrößen zu benutzen, was einen befähigt, auf einfache Weise die Schrift auf der ganzen Seite entsprechend zu vergrößern oder zu verkleinern.

Pixel

Das Festlegen der Schriftgröße in Pixel-Werten (px) ist eine gute Wahl, wenn Pixel-Genauigkeit gefordert ist. Ein px-Wert ist statisch und stellt eine Möglichkeit dar, die unabhängig von Betriebssystem und Browser ist und dem Browser unveränderlich mitteilt, die Buchstaben in genau der spezifizierten Höhe an Pixeln darzustellen. Das Ergebnis kann sich je nach Browser leicht unterscheiden, da diese eventuell verschiedene Algorithmen verwenden, um den selben Effekt zu erzielen.

Verschiedene Schriftgrößeneinstellungen können auch kombiniert werden. Zum Beispiel, wenn ein Elternelement 16px festlegt und sein Kindelement larger spezifiziert, dann wird das Kindelement größer dargestellt als das Elternelement auf der Seite.

Anmerkung: Die Schriftgröße in Pixeln festzulegen, ist nicht barrierefrei, weil der Benutzer infolge dessen die Schriftgröße nicht über den Browser ändern kann. Zum Beispiel möchten Benutzer mit Sehschwäche die Schriftgröße vielleicht viel größer einstellen als vom Web-Designer ausgewählt. Die Benutzung von Pixeln für Schriftgrößen sollte vermieden werden, wenn ein allumfassendes Design gefordert ist.

Ems

Eine weitere Möglichkeit, die Schriftgröße festzulegen, ist die Verwendung von em-Werten. Die Größe eines em-Wertes ist dynamisch. Beim Spezifizieren der font-size-Eigenschaft entspricht ein em der für das gefragte Elternelement festgelegten Schriftgröße. Wird die Schriftgröße nirgendwo anders auf der Seite festgelegt, dann gilt die vom Browser definierte Größe, die oft 16px entspricht. Demnach gilt im Normalfall 1em = 16px, also 2em = 32px. Wenn dem body-Element eine Schriftgröße von 20px zugewiesen wird, dann gilt 1em = 20px und 2em = 40px. Es ist zu beachten, dass der Wert 2 notwendigerweise ein Multiplikator der aktuellen em-Größe ist.

Um das em-Äquivalent für einen beliebigen benötigten Pixel-Wert zu berechnen, kann die folgende Formel benutzt werden:

em = gewünschter Pixel-Wert des Elements / Elternelementschriftgröße in Pixeln

Angenommen die Schriftgröße des Body der Seite entspricht 16px. Wenn die gewünschte Schriftgröße 12px ist, dann sollten 0.75em spezifiziert werden (da 12/16 = 0,75). Es verhält sich ähnlich, wenn eine Schriftgröße von 10px gewollt ist; dann sollte 0.625em spezifiziert werden (10/16 = 0,625) und für 22px sollten es 1.375em (22/16) sein.

Em ist eine sehr nützliche CSS-Einheit, da es seine Länge automatisch relativ zur vom Leser gewählten Schrift anpasst.

Ein wichtiger Hinweis: em-Werte können zu bisweilen auch extremen Steigerungen führen wie das folgende HTML und CSS zeigen:

html { 
  font-size: 62.5%; /* font-size 1em = 10px bei normaler Browser-Einstellung */ 
} 
span { 
  font-size: 1.6em; 
}

<div>
<span>Outer <span>inner</span> outer</span>
</div>

Das Ergebnis ist:

Angenommen, dass font-size vom Browser als 16px festgelegt wird, dann würden die Wörter "outer" mit 16px dargestellt, das Wort "inner" aber mit 25.6px. Das liegt daran, dass die Schriftgröße des inneren Spans 1.6em entspricht, was relativ zum Elternelement gilt, welches wiederum relativ zu dessen Elternelement steht. Dieses Verhalten wird auch compounding (Steigerung/Aufzinsung) genannt.

Rems

Rem-Werte wurden eingeführt, um das compunding-Problem zu umgehen. Rem-Werte sind relativ zum html-Wurzelelement, nicht zum Elternelement. Mit anderen Worten ermöglicht es, eine Schriftgröße in einer relativen Weise zu spezifizieren ohne durch das Elternelement beeinflusst zu werden und so das Compunding zu verhindern.

Das folgende CSS ist nahezu identisch mit dem vorherigen Beispiel. Die einzige Ausnahme ist, dass die Einheit nun rem ist.

html {
  font-size: 62.5%; /* font-size 1em = 10px bei normaler Browser-Einstellung */
}
span {
  font-size: 1.6rem;
}

Anschließend wird dieses CSS auf das selbe HTML angewandt, das wie folgt aussieht:

<span>Outer <span>inner</span> outer</span>

Bei diesem Beispiel erscheinen die Worte "outer inner outer" alle mit 16px (angenommen, dass die Schriftgröße des Browsers beim Standardwert von 16px verblieben ist).

Beispiele

Beispiel 1

/* Paragrafentext auf sehr groß setzen */
p { font-size: xx-large }

/* h1-(level 1 heading)-Text auf 2,5 mal die Größe
 * des umliegenden Textes setzen */
h1 { font-size: 250% }

/* setzt in span-Tags eingeschlossenen Text auf 16px */
span { font-size: 16px; }

Beispiel 2

.small {
	font-size: xx-small;
}
.larger {
	font-size: larger;
}
.point {
	font-size: 24pt;
}
.percent {
	font-size: 200%;
}

<h1 class="small">small-H1</h1>
<h1 class="larger">larger-H1</h1>
<h1 class="point">24pt-H1</h1>
<h1 class="percent">200%-H1</h1>

Live-Test

Bemerkungen

Em- und ex-Einheiten in der font-size-Eigenschaft verhalten sich relativ zur Schriftgröße des Elternelements (im Gegensatz zu allen anderen Einheiten, die relativ zur Schriftgröße des Elements sind). Das bedeutet, dass em-Einheiten und Prozentangaben das selbe als Wert für font-size bewirken.

Spezifikationen

Spezifikation	Status	Kommentar
CSS Fonts Module Level 3 Die Definition von 'font-size' in dieser Spezifikation.	Anwärter Empfehlung	Keine Veränderung
CSS Transitions Die Definition von 'font-size' in dieser Spezifikation.	Arbeitsentwurf	Definiert `font-size` als animierbar.
CSS Level 2 (Revision 1) Die Definition von 'font-size' in dieser Spezifikation.	Empfehlung	Keine Veränderung
CSS Level 1 Die Definition von 'font-size' in dieser Spezifikation.	Empfehlung	Ursprüngliche Definition

Browser-Kompatibilität

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
`font-size`	Chrome Vollständige Unterstützung 1	Edge Vollständige Unterstützung 12	Firefox Vollständige Unterstützung 1	IE Vollständige Unterstützung 5.5	Opera Vollständige Unterstützung 7	Safari Vollständige Unterstützung 1	WebView Android Vollständige Unterstützung 1	Chrome Android Vollständige Unterstützung 18	Firefox Android Vollständige Unterstützung 4	Opera Android Vollständige Unterstützung 10.1	Safari iOS Vollständige Unterstützung 1	Samsung Internet Android Vollständige Unterstützung Ja
`rem` values	Chrome Vollständige Unterstützung 31	Edge Vollständige Unterstützung 12	Firefox Vollständige Unterstützung 31 Hinweise Vollständige Unterstützung 31 Hinweise Hinweise Before Firefox 57, animations using em units are not affected by changes to the `font-size` of the animated element's parent (bug 1254424). Hinweise Before Firefox 57, some language settings' inherited `font-size` is smaller than expected (bug 1391341).	IE Vollständige Unterstützung 11 Vollständige Unterstützung 11 Keine Unterstützung 9 — 10	Opera Vollständige Unterstützung 28	Safari Vollständige Unterstützung 7	WebView Android Vollständige Unterstützung 4.1	Chrome Android Vollständige Unterstützung 42	Firefox Android Vollständige Unterstützung 31	Opera Android Vollständige Unterstützung 28	Safari iOS Vollständige Unterstützung 7	Samsung Internet Android Vollständige Unterstützung 4.0
`xxx-large` keyword	Chrome Vollständige Unterstützung 79	Edge Keine Unterstützung Nein	Firefox Vollständige Unterstützung 70	IE Keine Unterstützung Nein	Opera Keine Unterstützung Nein	Safari Keine Unterstützung Nein	WebView Android Vollständige Unterstützung 79	Chrome Android Vollständige Unterstützung 79	Firefox Android Keine Unterstützung Nein	Opera Android Keine Unterstützung Nein	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Keine Unterstützung: Keine Unterstützung
Siehe Implementierungshinweise.: Siehe Implementierungshinweise.