Bevor es CSS clamp gab, hieß es: Was sind die Best-Practice-Werte für Schriftgrößen für Desktop, Tablet, Smartphone?
Wir haben die Schriftgrößen mit festen Werten in px, em, rem und Media Queries definiert. Mit dem Ergebnis, dass die Schriftgröße „springt“, wenn die Grenze eines Media Queries erreicht ist. Und für den Bildschirmgrößenbereich um die Grenzen herum hat es meistens nicht wirklich gut gepasst.
Mit der CSS-Funktion clamp() können wir fließende Schriftgrößen erreichen, die sich nahtlos an die Bildschirmbreite anpassen.
Wie funktioniert clamp()?
clamp() sagt dem Browser:
„Scaliere die Schriftgröße fließend je nach Bildschirmbreite, aber bitte nur innerhalb der festgelegten Grenzen.“
Die Funktion kann als Wert für font-size in CSS verwendet werden. Damit sie die Schriftgröße nicht endlos nach oben oder unten skaliert, was auf sehr kleinen oder sehr großen Bildschirmen zu schlechten Ergebnissen führen würde, benötigt sie drei Parameter:
- Minimum: Die kleinste erlaubte Schriftgröße (z. B. für Smartphones).
- Idealer Wert (Preferred): Ein dynamischer Wert (meist in vw – Viewport Width), der die Skalierung steuert.
- Maximum: Die größte erlaubte Schriftgröße (z. B. für große Desktop-Monitore).
Meine Best-Practice-Werte
body {font-size: 16px} /*Root Text:*/
.text-smaller {font-size: clamp(0.878rem, 0.9055rem + -0.0879vw, 0.8rem);}
.text-bigger {font-size: clamp(1rem, 0.8018rem + 0.6344vw, 1.563rem);}
.accent, .subhead {font-size: clamp(1.067rem, 1.0026rem + 0.2062vw, 1.25rem))}
.button a, .navi a {font-size: clamp(0.937rem, 0.9148rem + 0.071vw, 1rem)}
h1 {font-size: clamp(1.476rem, 0.4992rem + 3.1256vw, 4.25rem)}
h2 {font-size: clamp(1.383rem, 0.7953rem + 1.8806vw, 3.052rem)}
h3 {font-size: clamp(1.296rem, 0.8928rem + 1.2901vw, 2.441rem)}
h4 {font-size: clamp(1.215rem, 0.9551rem + 0.8315vw, 1.953rem)}
h5 {font-size: clamp(1.138rem, 0.9884rem + 0.4789vw, 1.563rem)}
h6 {font-size: clamp(1.067rem, 1.0026rem + 0.2062vw, 1.25rem)}
Kopiere dir einfach meine clamp-Werte und verwende sie auf deiner Website.
Eigenes Font-Size-Preset erstellen
1. Harmonische Best-Practice-Werte für die Grenz-Schriftgrößen
Wenn du dir ein eigenes Pre-Set erstellen willst oder doch nach Best-Practice-Werten für Überschriften in REM oder EM suchst, dann gehe auf die Website typsecale.com. Hier findest du harmonische Angaben für deine Schriftgrößen.
Oben links kannst du unter Scale verschiedene Pre-Sets auswählen. Ich habe mich für mein clamp-Pre-Set an „Minor Second“ und „Major Third“ für die kleinste und größte Bildschirmgröße orientiert.
Font-size Clamp Generator verwenden
Danach gehst du auf die Website clamp.font-size.app und gibst deinen minimalen und maximalen Wert in die Maske ein. Die Viewport-Einstellungen kannst du so verwenden wie sie voreingestellt sind. Dann erhältst du darunter die font-size-Angabe als clmap()-Funktion.
clamp() in Elementor verwenden
Wenn du Elementor verwendest, kannst du die clamp()-Funktion als Schriftgröße in deine globalen Schriften (1.) eingeben. Du musst dazu nur rechts für die Maßeinheit das Stift-Symbol auswählen. Dann kannst du die clamp-Funktion in das Feld kopieren.
Den Root-Text mit 16px gibst du als Wert für die „Text“ Schriftgröße ein.
Wenn du alle Schriftgrößen als globale Schriftarten angelegt hast, weist du sie unter Typographie (2.) dem Body-Text und den entsprechenden Titel-Elementen zu.
