font-size
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
- Ja
- Animierbar
- Ja
- Kategorie
- Typografie
- Werte
- 10
- Beispiele
- 5
- Browser
- 5 von 5
- 4 von 5
- Stand
- 15.02.2026
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
10 WerteBeispiele
5 BeispieleDie drei häufigsten Einheiten im direkten Vergleich. px ist absolut, rem relativ zum Root und em relativ zum Elternelement.
.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>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.
.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>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.
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>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.
/* 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
6 Fehler 01 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. 02 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. 03 Zu kleine Schrift für Fließtext
14px (besser: unter 16px) wird Text auf Bildschirmen schwer lesbar. Besonders auf Mobilgeräten ist 16px das empfohlene Minimum. 04 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. 05 vw allein ohne clamp()
font-size: 3vw wird bei 320px Viewport nur 9.6px groß und damit unlesbar. clamp() setzt ein sicheres Minimum. 06 Vergessen dass font-size vererbt wird
font-size auf einem Container-Element beeinflusst alle Kindelemente, auch wenn du es nur für den Container gemeint hast. Browser-Kompatibilität
5 von 5font-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.
-
Chrome
Komplett
-
Firefox
Komplett
-
Safari
Komplett
-
Edge
Komplett
-
Opera
Komplett
Email-Kompatibilität
4 von 5font-size funktioniert in HTML-Emails zuverlässig. Verwende px-Werte für maximale Kompatibilität, da relative Einheiten inkonsistent interpretiert werden.
-
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
Newsletter
einmal die Woche, kostenlosNeue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.
Zuletzt verschickt · KW 40
Einmal alles neu, und die Lernplattform ist da