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-{{cssxref("<length>")}}-Einheiten zu berechnen.

<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;
}

Syntax

Werte

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

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:

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:

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.

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

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

Beispiel 2

Live-Test

Bemerkungen

Em- und ex-Einheiten in der {{Cssxref("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 {{Cssxref("font-size")}} bewirken.

Spezifikation	Status	Kommentar
{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}	{{Spec2('CSS3 Fonts')}}	Keine Veränderung
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}	{{Spec2('CSS3 Transitions')}}	Definiert `font-size` als animierbar.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}	{{Spec2('CSS2.1')}}	Keine Veränderung
{{SpecName('CSS1', '#font-size', 'font-size')}}	{{Spec2('CSS1')}}	Ursprüngliche Definition