Design Tool

CSS clamp() Generator

Berechne die perfekte CSS clamp() Formel für flüssige Typografie. Erstelle Schriften, die auf jedem Screen perfekt aussehen.

Fluid Typography Generator

Mobile Viewport (px) Desktop Viewport (px)

Min Schriftgröße (px) Max Schriftgröße (px)

Dein CSS Code

font-size: clamp(1rem, 0.3478rem + 3.2609vw, 3rem);

Live Vorschau

Größe anpassen um die Skalierung zu testen

Nie wieder Media Queries für Schriftgrößen

Mit der CSS clamp() Funktion passt sich deine Typografie stufenlos zwischen dem minimalen und maximalen Viewport an. Das spart unzählige Breakpoints und sorgt für ein flüssiges Leseerlebnis auf jedem Gerät.

So funktioniert clamp()

Die clamp() Funktion nimmt drei Werte: Ein Minimum, einen bevorzugten Wert (meist eine Kombination aus Viewport-Breite und fixen Werten) und ein Maximum.

Minimalwert: Verhindert, dass die Schrift auf kleinen Screens zu klein wird.
Bevorzugter Wert: Die komplexe Mathematik, die den Skalierungsfaktor berechnet.
Maximalwert: Deckelt die Größe auf großen Bildschirmen.