TL;DR
Hör auf, Pixel für Schriftgrößen zu verwenden. Nutze stattdessen rem und clamp() in deinem CSS. rem macht deine Seite barrierefrei, weil es die Browsereinstellungen des Nutzers respektiert. clamp() sorgt dafür, dass die Schriftgröße automatisch und fließend auf allen Geräten – von Handy bis Desktop – perfekt aussieht. Die passenden clamp()-Werte für alle Überschriften (H1-H6) und den Body-Text findest du in diesem Artikel. Einmal in den globalen Einstellungen deines Themes einfügen, für immer Ruhe haben.
Suchst du nach dem Geheimnis für die perfekte Schriftgröße im Webdesign? Die Antwort liegt nicht in festen Pixel-Werten, sondern in einem flexiblen Ansatz. In diesem Artikel zeigen wir dir, wie du mit relativen Einheiten wie rem und der CSS-Funktion clamp() deine Webseiten einen Schritt vor deine Konkurrenten setzt und dabei für optimale Lesbarkeit auf jedem Gerät sorgst.
Warum responsive Typografie entscheidend ist
Eine moderne Website muss mehr können als nur gut auszusehen. Sie muss zugänglich und für jeden Nutzer komfortabel bedienbar sein – Stichwort Barrierefreiheit.
Dazu gehört auch die Schriftgröße (Typografie). Stell dir folgende Fragen:
- Können auch Menschen mit Sehschwäche die Inhalte problemlos lesen?
- Passt sich die Schrift an, wenn jemand im Browser eine größere Darstellung bevorzugt?
Wenn du hier unsicher bist, ist dieser Artikel genau richtig für dich.
Das Problem mit starren Pixel-Werten
Lange Zeit war es üblich, Schriftgrößen in Pixeln (px) zu definieren.
Das Problem: Pixel-Werte sind absolut.
16px sind immer 16px, egal welche Voreinstellungen der Nutzer im Browser trifft.
Erhöht ein Besucher die globale Schriftgröße für bessere Lesbarkeit, hat das auf deine Website keine Auswirkung.
Das Ergebnis:
- schlechte Nutzererfahrung
- geringere Zugänglichkeit
- potenzieller Verlust von Besuchern
Startpunkt: Die Grundlage mit rem schaffen
Die Lösung beginnt mit rem – kurz für Root EM.
Dabei handelt es sich um eine relative Einheit, die sich an der Schriftgröße des Root-Elements (<html>) orientiert.
Standardmäßig gilt in den meisten Browsern:
1rem = 16px
Beispiele:
2rem = 32px1.5rem = 24px
Der entscheidende Vorteil:
Ändert ein Nutzer die globale Schriftgröße im Browser, passt sich deine gesamte Website automatisch an.
Deine Seite wird dadurch sofort zugänglicher und barriereärmer.
Die nächste Stufe: Flexible Typografie mit clamp()
rem ist eine solide Basis – clamp() ist die Kür.
Mit clamp() definierst du drei Werte gleichzeitig:
- Minimalwert
- Bevorzugter (flexibler) Wert
- Maximalwert
Der bevorzugte Wert wird häufig mit vw (Viewport Width) kombiniert.
Dadurch skaliert die Schriftgröße fließend mit der Bildschirmbreite:
- kleiner auf Smartphones
- größer auf Desktop
- ganz ohne Media Queries
Manuelles Nachjustieren für Mobile, Tablet und Desktop gehört damit der Vergangenheit an.
Best Practices: Empfohlene Werte für Überschriften und Text
Die folgenden Werte sind praxiserprobt und sorgen für eine harmonische, responsive Typografie:
H1 – Hauptüberschrift (ca. 52px → 34px)
- Schriftgröße:
clamp(2.1rem, 1.6rem + 2.2vw, 3.25rem) - Zeilenhöhe:
1.1em
H2 – Unterüberschrift (ca. 42px → 29px)
- Schriftgröße:
clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem) - Zeilenhöhe:
1.15em
H3 – Abschnittsüberschrift (ca. 34px → 24px)
- Schriftgröße:
clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem) - Zeilenhöhe:
1.2em
H4 (ca. 26px → 24px)
- Schriftgröße:
clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem) - Zeilenhöhe:
1.25em
H5 (ca. 21px → 18px)
- Schriftgröße:
clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem) - Zeilenhöhe:
1.3em
H6 (ca. 18px → 16px)
- Schriftgröße:
clamp(1rem, 0.98rem + 0.2vw, 1.125rem) - Zeilenhöhe:
1.35em
Body-Text (Fließtext)
- Schriftgröße:
clamp(1rem, 0.95rem + 0.25vw, 1.125rem) - Zeilenhöhe:
1.8em
Tipp:
Eine großzügige Zeilenhöhe (z. B. 1.8em) verbessert die Lesbarkeit langer Texte deutlich.
So implementierst du die Werte in deinem System
Die Umsetzung ist einfacher, als es klingt.
In modernen Page-Buildern und Themes kannst du diese Werte global hinterlegen.
Anleitung in 5 Schritten
- Öffne die globalen Typografie-Einstellungen deines Themes oder Builders
- Wähle für die Schriftgröße eine benutzerdefinierte Einheit („Custom“)
- Kopiere den passenden
clamp()-Wert und füge ihn ein - Setze die empfohlene
line-height(Einheit:em) - Wiederhole den Vorgang für H1–H6 und den Fließtext
Einmal eingerichtet, funktioniert das System dauerhaft auf deiner gesamten Website.
Fazit
Die optimale Schriftgröße im modernen Webdesign ist keine feste Zahl, sondern ein flexibles System.
Die Kombination aus:
remfür Barrierefreiheitclamp()für fließende Skalierung
macht deine Website nicht nur optisch sauber, sondern vor allem nutzerfreundlich, zugänglich und zukunftssicher – auf jedem Gerät.
Wenn du Unterstützung beim Webdesign brauchst oder ein neues Projekt planst und einen starken Partner suchst, melde dich gerne bei uns.
FAQ
Pixel sind eine feste Einheit und passen sich nicht an die Browsereinstellungen des Nutzers an. Das schränkt die Barrierefreiheit deiner Website ein und führt zu einer schlechteren Nutzererfahrung auf verschiedenen Geräten.
rem ist eine relative Einheit, die sich an der Basisschriftgröße des Browsers orientiert. Wenn ein Nutzer eine größere Schrift für sich einstellt, skaliert deine Website automatisch mit. Das ist ein großer Gewinn für die Barrierefreiheit.
clamp() sorgt für eine fließende Skalierung der Schrift zwischen einem definierten Minimum und Maximum. Die Schriftgröße passt sich dynamisch an die Bildschirmbreite an. Du legst die Regeln einmal fest und musst dich nicht mehr um manuelle Anpassungen für verschiedene Endgeräte kümmern.
Ja, absolut. Du kannst rem und clamp() problemlos nachträglich einführen – idealerweise zuerst in den globalen Typografie-Einstellungen deines Themes oder Page-Builders. Wichtig ist nur, Pixelwerte konsequent zu ersetzen, um ein sauberes und einheitliches Schriftbild zu erhalten.
rem wird seit vielen Jahren von allen modernen Browsern unterstützt. clamp() wird ebenfalls von allen aktuellen Browsern (Chrome, Firefox, Safari, Edge) zuverlässig unterstützt. Nur sehr alte Browser-Versionen könnten Probleme haben – für den normalen Website-Betrieb ist das heute praktisch irrelevant.
