CSS-Clamp()-Rechner 🔒 Läuft lokal in Ihrem Browser — nichts wird hochgeladen.

Generieren Sie einen fließenden clamp()-Wert für sanft skalierende Schriftgrößen.

Ändern Sie dies nur, wenn Ihre Website html { font-size } abweichend vom Browser-Standard von 16px setzt.

CSS-Ausgabe

 
 
 
Vorschau
 
Echte fließende Skalierung sieht man nur, wenn das Browserfenster tatsächlich in der Größe geändert wird. Diese drei Darstellungen nähern den Bereich bei min., mittlerer und max. Viewport-Breite an.
 
 Bei min. Viewport  
Der schnelle braune Fuchs springt über den faulen Hund
 
 
 Mittelpunkt (ca.)  
Der schnelle braune Fuchs springt über den faulen Hund
 
 
 Bei max. Viewport  
Der schnelle braune Fuchs springt über den faulen Hund
 
 
 
   
 
Über dieses Tool
 
Traditionelle responsive Typografie springt an jedem Media-Query-Breakpoint zwischen festen Größen — 16px auf Mobilgeräten, dann ein abrupter Sprung auf 20px ab einer bestimmten Breite. Das CSS-`clamp(MIN, BEVORZUGT, MAX)` ersetzt diesen Sprung durch kontinuierliche Skalierung: Die Schriftgröße wächst gleichmäßig, im Gleichschritt mit dem Viewport, zwischen Ihrem gewählten Minimum und Maximum. Unterhalb der min. Viewport-Breite bleibt sie auf dem Minimum "eingerastet"; oberhalb der max. Breite auf dem Maximum. Nur dazwischen ist sie flexibel.
Dieser Rechner übernimmt die Interpolationsmathematik für Sie: Er ermittelt die lineare Steigung zwischen Ihrer min. und max. Schriftgröße über den gewählten Viewport-Bereich, drückt sie als `vw`-basierten bevorzugten Wert aus und verpackt alles in einen fertigen `clamp()`-String. Fügen Sie das Ergebnis direkt in `font-size` (oder eine andere numerische Eigenschaft) ein — keine breakpoint-spezifischen Overrides für die Schriftskala mehr nötig.
  
Häufige Fragen
 
 
Warum clamp() statt nur einer Media Query verwenden?
 
Media Queries springen an Breakpoints zwischen festen Größen, während clamp() sich beim Ändern der Viewport-Größe sanft und kontinuierlich zwischen Ihrem Min- und Max-Wert skaliert — kein sichtbarer "Sprung" bei irgendeiner Breite.
 
 
Funktioniert clamp() in allen Browsern?
 
Ja — CSS clamp() wird seit 2020 von allen wichtigen Browsern (Chrome, Firefox, Safari, Edge) unterstützt, sodass es heute für praktisch alle Zielgruppen sicher ohne Fallback in der Produktion verwendet werden kann.