Über dieses Tool
Mit der CSS-Funktion clamp(min, bevorzugt, max) wächst eine Schriftgröße oder ein Abstand stufenlos mit der Breite des Browserfensters, bleibt aber zwischen einem Minimum und einem Maximum. So brauchst du keine Media Queries für jede Bildschirmgröße: Überschriften sind auf dem Handy kleiner und auf dem Desktop größer, mit fließendem Übergang dazwischen.
Der Generator rechnet die Formel für dich aus: Du gibst die gewünschte Größe beim kleinsten und beim größten Viewport an, das Tool berechnet Steigung (vw) und Achsenabschnitt (rem oder px). Im Modus „Typo-Skala“ erzeugt es eine ganze Reihe von Schriftgrößen nach einer modularen Skala, z. B. kleine Terz auf dem Handy und große Terz auf dem Desktop, als fertige CSS-Variablen.
Mit dem Vorschau-Regler siehst du, wie groß die Schrift bei einer bestimmten Fensterbreite tatsächlich wird.
So funktioniert’s
- Wähle „Einzelwert“ für eine einzelne Größe oder „Typo-Skala“ für eine ganze Schriftgrößen-Reihe.
- Gib die Größen in px für den kleinsten und den größten Viewport ein und lege die beiden Viewport-Breiten fest.
- Wähle die Einheit (rem empfohlen) und prüfe das Ergebnis mit dem Vorschau-Regler.
- Kopiere den CSS-Code, z. B. als font-size: clamp(…) oder die Variablen als var(--step-1).
Häufige Fragen
Warum rem statt px?
rem-Werte richten sich nach der im Browser eingestellten Schriftgröße. Wer dort eine größere Schrift wählt, bekommt auch mit clamp() größere Texte. Mit px würde diese Einstellung ignoriert.
Ist fluide Typografie barrierefrei?
Ja, solange die Schrift beim Zoomen noch genug wächst. Der vw-Anteil reagiert nicht auf Browser-Zoom. Liegt das Maximum bei höchstens dem 2,5-Fachen des Minimums und ist der Rest in rem angegeben, bleibt eine 200-%-Vergrößerung nach WCAG 1.4.4 möglich. Das Tool weist dich darauf hin, wenn dein Verhältnis größer ist.
Was ist eine modulare Typo-Skala?
Jede Schriftgröße ist die vorherige mal einem festen Verhältnis, z. B. 1,25. Das ergibt harmonische Abstufungen für Fließtext, Zwischenüberschriften und Überschriften. Bei einer fluiden Skala darf das Verhältnis auf kleinen Bildschirmen kleiner sein, damit große Überschriften auf dem Handy nicht zu wuchtig werden.
Kann ich clamp() auch für Abstände verwenden?
Ja, clamp() funktioniert mit jeder Längenangabe, z. B. für padding, margin, gap oder width. Gib einfach die gewünschten Abstände statt Schriftgrößen ein.