CSS Clamp Generator
Dieser Generator erstellt eine klassische CSS clamp()-Formel mit einem definierten Minimum und Maximum.
Der Wert skaliert fluid zwischen zwei frei definierbaren Viewport-Breiten und stoppt danach automatisch am festgelegten Maximalwert.
Beispiel:
Ein Wert kann von 2rem bei 480px bis auf 4rem bei 1440px wachsen — und bleibt danach konstant.
Basierend auf einem 62.5%-Root-System (1rem = 10px statt 16px).
Browser verwenden standardmässig eine Root Font Size von 16px.Viele moderne Design-Systeme setzen jedoch auf ein sogenanntes 62.5%-System.
Dabei wird im HTML-Element folgende Basis gesetzt:
html {font-size: 62.5%;}
Da 62.5% von 16px genau 10px entsprechen, gilt anschliessend 1rem = 10px.
Dadurch lassen sich rem-Werte deutlich einfacher berechnen:
Was ist Fluid Typography mit CSS clamp()?
Fluid Typography beschreibt einen Ansatz, bei dem sich Schriftgrössen automatisch an die Bildschirmbreite anpassen. Dadurch bleibt Text auf Smartphones, Tablets und Desktop-Bildschirmen stets gut lesbar und optisch ausgewogen.
Statt für jedes Gerät feste Schriftgrössen über Media Queries zu definieren, wird die Skalierung direkt im CSS gesteuert. Das reduziert Komplexität und sorgt für konsistente Design-Systeme über alle Viewports hinweg.
Die CSS-Funktion clamp() ist dabei das zentrale Werkzeug: Sie erlaubt es, eine minimale, eine flexible und eine maximale Schriftgrösse in einer einzigen Regel zu definieren.
Wie funktioniert clamp() für Schriftgrössen?
Mit clamp(min, preferred, max) wird die Schriftgrösse dynamisch zwischen einem unteren und oberen Grenzwert skaliert. Innerhalb dieses Bereichs passt sich die Grösse flüssig an die Viewport-Breite an.
Das Ergebnis ist eine kontinuierliche Skalierung ohne harte Sprünge, ideal für moderne responsive Interfaces.
Warum clamp() in Design-Systemen eingesetzt wird
Moderne Design-Systeme setzen zunehmend auf fluid skalierende Werte statt statischer Breakpoints. clamp() bietet dabei mehrere Vorteile:
- Keine komplexen Media Queries notwendig
- Flüssige Skalierung zwischen definierten Grenzen
- Klare Kontrolle über minimale und maximale Werte
- Konsistente Typografie über alle Geräte hinweg
- Reduzierter CSS-Aufwand und bessere Wartbarkeit