font-size

Zuletzt aktualisiert am 15. Februar 2026

font-size bestimmt die Größe der Schrift eines Elements. Der Browser-Standard liegt bei 16px, und von diesem Wert leiten sich relative Einheiten wie rem und em ab. Die Eigenschaft wird vererbt, sodass ein auf body gesetzter Wert für alle Textelemente gilt. Für zugängliche und responsive Typografie sind rem und clamp() die besten Werkzeuge: Sie respektieren die Browser-Einstellungen des Nutzers und passen sich an verschiedene Bildschirmgrößen an.

Syntax

font-size: <absolute-size> | <relative-size> | <length-percentage>

Initialwert

medium (browserabhängig, meist 16px)

Vererbt

Animierbar

Grundlagen

Der Browser setzt die Standard-Schriftgröße auf medium, was in der Regel 16px entspricht. Nutzer können diesen Wert in ihren Browser-Einstellungen anpassen, und genau das ist der Grund, warum du relative Einheiten wie rem statt feste px-Werte verwenden solltest. 1rem entspricht immer der Schriftgröße des Root-Elements (<html>), also dem Browser-Standard oder dem vom Nutzer gewählten Wert.

em bezieht sich auf die Schriftgröße des Elternelements. Das klingt praktisch, hat aber einen Haken: In verschachtelten Elementen multiplizieren sich die Werte. Wenn ein <div> mit font-size: 1.2em ein weiteres <div> mit font-size: 1.2em enthält, ist die effektive Größe bereits 1.44em, der sogenannte Compounding-Effekt. rem hat dieses Problem nicht, weil es sich immer auf das Root-Element bezieht.

Für responsive Typografie bietet clamp() die eleganteste Lösung. Mit clamp(min, preferred, max) definierst du eine flexible Größe, die zwischen einem Minimum und Maximum skaliert. Der bevorzugte Wert kann eine Viewport-Einheit enthalten, sodass die Schrift mit der Fensterbreite wächst, aber nie zu klein oder zu groß wird.

Syntax & Werte

Wert	Beschreibung	Beispiel
`<length>`	Fester Wert in einer CSS-Einheit wie px, rem, em oder ch.	`font-size: 1.125rem`
`<percentage>`	Prozent der font-size des Elternelements.	`font-size: 120%`
`small`	Absolute Größe, kleiner als medium (ca. 13px).	`font-size: small`
`medium`	Absolute Standardgröße (ca. 16px).	`font-size: medium`
`large`	Absolute Größe, größer als medium (ca. 18px).	`font-size: large`
`x-large / xx-large`	Noch größere absolute Stufen.	`font-size: x-large`
`smaller`	Eine Stufe kleiner als das Elternelement.	`font-size: smaller`
`larger`	Eine Stufe größer als das Elternelement.	`font-size: larger`
`clamp(min, pref, max)`	Responsive Größe mit Minimum und Maximum.	`font-size: clamp(1rem, 2.5vw, 2rem)`
`inherit`	Erbt den Wert explizit vom Elternelement.	`font-size: inherit`

Beispiele

px vs. rem vs. em

Die drei häufigsten Einheiten im direkten Vergleich. px ist absolut, rem relativ zum Root und em relativ zum Elternelement.

px vs. rem vs. em

.px  { font-size: 18px; }      /* Absolut: immer 18px */
.rem { font-size: 1.125rem; }  /* 18px bei 16px Root */
.em  { font-size: 1.125em; }   /* 18px bei 16px Eltern */

<div class="units-demo">
<div class="u-px">18px: Feste Pixelgröße<div class="label">Ignoriert Browser-Zoom-Einstellungen</div></div>
<div class="u-rem">1.125rem: Relativ zum Root (18px bei 16px-Basis)<div class="label">Respektiert Browser-Einstellungen</div></div>
<div class="u-em">1.125em: Relativ zum Elternelement<div class="label">Kann sich in verschachtelten Elementen aufschaukeln</div></div>
</div>

em-Kaskade: Der Multiplikator-Effekt

Wenn du em in verschachtelten Elementen verwendest, multiplizieren sich die Werte. Jede Ebene bezieht sich auf die font-size ihres Elternelements, nicht auf den Root.

em-Kaskade: Compounding-Effekt

.level {
  font-size: 1.2em;
  /* Ebene 1: 16px × 1.2 = 19.2px */
  /* Ebene 2: 19.2px × 1.2 = 23px */
  /* Ebene 3: 23px × 1.2 = 27.6px */
}

/* Lösung: rem statt em verwenden */
.level {
  font-size: 1.2rem; /* Immer 19.2px */
}

<div class="cascade-demo">
<div class="level">
  Ebene 1: 1.2em = 19.2px
  <div class="info">16px × 1.2 = 19.2px</div>
  <div class="level">
    Ebene 2: 1.2em = 23px
    <div class="info">19.2px × 1.2 = 23px</div>
    <div class="level">
      Ebene 3: 1.2em = 27.6px
      <div class="info">23px × 1.2 = 27.6px</div>
    </div>
  </div>
</div>
</div>

Responsive Typografie mit clamp()

clamp() definiert eine Schriftgröße, die sich mit der Viewport-Breite skaliert, aber nie unter ein Minimum fällt oder über ein Maximum wächst.

Responsive Typografie mit clamp()

h1 {
  /* Min: 1.25rem, Preferred: 4vw, Max: 2.5rem */
  font-size: clamp(1.25rem, 4vw, 2.5rem);
}

p {
  /* Min: 0.875rem, Preferred: 1.5vw, Max: 1.125rem */
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
}

<div class="clamp-demo">
<h3>Responsive Überschrift</h3>
<p>Dieser Text skaliert sanft zwischen Minimum und Maximum. Verkleinere das Browserfenster, um den Effekt zu sehen.</p>
</div>

Zugängliche Basis: rem auf html

Der 62.5%-Trick setzt die Basis auf 10px, damit rem-Rechnungen einfacher werden. Allerdings hat dieser Ansatz Nachteile für die Barrierefreiheit, weil er die tatsächliche Browser-Einstellung überschreibt. Die bessere Variante: Lass die Basis bei 100% und rechne in rem.

Zugängliche rem-Basis

/* Nicht empfohlen: Überschreibt Browser-Einstellungen */
html { font-size: 62.5%; } /* 1rem = 10px */
body { font-size: 1.6rem; } /* 16px */

/* Empfohlen: Respektiert Browser-Standard */
html { font-size: 100%; } /* 1rem = 16px (Standard) */
body { font-size: 1rem; }
h1   { font-size: 2rem; }  /* 32px */
h2   { font-size: 1.5rem; } /* 24px */

<div class="base-demo">
<div class="base-trick">
  <div class="label">Nicht empfohlen: 62.5%-Trick</div>
  html { font-size: 62.5%; } → 1rem = 10px, aber überschreibt Browser-Einstellungen
</div>
<div class="base-good">
  <div class="label">Empfohlen: 100% Basis</div>
  html { font-size: 100%; } → 1rem = 16px (oder Nutzer-Einstellung), respektiert Barrierefreiheit
</div>
</div>

Barrierefreiheit

Die WCAG-Richtlinie 1.4.4 verlangt, dass Text auf 200% vergrößert werden kann, ohne dass Inhalte verloren gehen oder die Bedienbarkeit leidet. Verwende rem statt px für Schriftgrößen, denn rem-Werte skalieren mit der Browser-Einstellung des Nutzers. Wenn ein Nutzer in seinen Browser-Einstellungen die Standardschriftgröße auf 20px stellt, skaliert 1.5rem auf 30px. Bei 24px in Pixeln bleibt die Schrift bei 24px.

Setze keine feste font-size in px auf das html- oder body-Element, weil das die Zoom-Einstellungen des Nutzers überschreibt. Der Browser-Standard von 16px ist ein guter Ausgangspunkt für Fließtext. Schrift unter 16px ist für viele Nutzer schwer lesbar, besonders auf mobilen Geräten.

Wenn du clamp() verwendest, achte darauf, dass der Minimum-Wert in rem angegeben ist, nicht in px. So skaliert auch die untere Grenze mit der Browser-Einstellung. Vermeide vw als alleinige Einheit, weil die Schrift bei schmalen Viewports unlesbar klein werden kann und bei der Zoom-Funktion nicht skaliert.

Häufige Fehler

font-size in px auf html setzen: html { font-size: 16px; } überschreibt die Browser-Einstellung des Nutzers. Nutzer, die eine größere Standardschrift eingestellt haben, werden ignoriert. Verwende font-size: 100% oder lass die Deklaration ganz weg.
em verschachteln und Compounding-Effekt nicht bedenken: font-size: 1.2em in drei verschachtelten Ebenen ergibt nicht 1.2 × 16px, sondern 1.728 × 16px. Verwende rem für konsistente Größen.
Zu kleine Schrift für Fließtext: Unter 14px (besser: unter 16px) wird Text auf Bildschirmen schwer lesbar. Besonders auf Mobilgeräten ist 16px das empfohlene Minimum.
clamp() ohne rem-Einheiten: font-size: clamp(14px, 2.5vw, 24px) respektiert keine Browser-Zoom-Einstellungen. Verwende clamp(0.875rem, 2.5vw, 1.5rem) stattdessen.
vw allein ohne clamp(): font-size: 3vw wird bei 320px Viewport nur 9.6px groß und damit unlesbar. clamp() setzt ein sicheres Minimum.
Vergessen dass font-size vererbt wird: Eine font-size auf einem Container-Element beeinflusst alle Kindelemente, auch wenn du es nur für den Container gemeint hast.

Browser-Kompatibilität

font-size wird von allen Browsern vollständig unterstützt. Die Einheiten px, em, rem und Prozent funktionieren überall. clamp() wird seit 2020 von allen modernen Browsern unterstützt.

Client	Unterstützung	Hinweise
Chrome	Komplett	—
Firefox	Komplett	—
Safari	Komplett	—
Edge	Komplett	—
Opera	Komplett	—

Email-Kompatibilität

font-size funktioniert in HTML-Emails zuverlässig. Verwende px-Werte für maximale Kompatibilität, da relative Einheiten inkonsistent interpretiert werden.

Client	Unterstützung	Hinweise
Apple Mail	Komplett	—
Gmail	Komplett	px und em funktionieren. rem wird ignoriert
Outlook	Teilweise	px zuverlässig. em teilweise. rem und clamp() nicht unterstützt
Thunderbird	Komplett	—
Yahoo Mail	Komplett	px und em funktionieren

font-size

Grundlagen

Syntax & Werte

Beispiele

px vs. rem vs. em

em-Kaskade: Der Multiplikator-Effekt

Responsive Typografie mit clamp()

Zugängliche Basis: rem auf html

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Verwandte Eigenschaften

Was erwartet dich?

Neue Artikel & Videos

Plattform & Kurs-Updates

Einmal die Woche in deinem Postfach

font-size

Grundlagen

Syntax & Werte

Beispiele

px vs. rem vs. em

em-Kaskade: Der Multiplikator-Effekt

Responsive Typografie mit clamp()

Zugängliche Basis: rem auf html

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Verwandte Eigenschaften

Bleib auf dem Laufenden

Was erwartet dich?

Neue Artikel & Videos

Plattform & Kurs-Updates

Einmal die Woche in deinem Postfach