Über dieses Tool
Der CSS Clamp()- & Responsive-Type-Rechner verwandelt eine minimale und maximale Schriftgröße — jeweils an eine Viewport-Breite gekoppelt — in einen einzigen, produktionsreifen clamp()-Wert, der dazwischen sanft skaliert und einen ganzen Satz Media Queries durch eine einzige CSS-Zeile ersetzt. Min-/Max-Größen und Viewport-Bereich festlegen, Ergebnis live in der Vorschau sehen und das fertige CSS kopieren.
So funktioniert's
- 1
Größen festlegen
Minimale und maximale Schriftgröße eingeben, jeweils an eine Viewport-Breite gekoppelt.
- 2
Live-Vorschau
Am Viewport-Regler ziehen, um die Skalierung in Echtzeit zu sehen.
- 3
Formel wird berechnet
Das Tool wandelt die zwei Punkte in einen clamp()-Ausdruck um.
- 4
CSS kopieren
Die fertige Zeile direkt ins Stylesheet einfügen.
HÄUFIG GESTELLTE FRAGEN
Es ist eine lineare Interpolation zwischen deinen zwei Größe/Viewport-Paaren, ausgedrückt als vw-basierte Steigung plus einem festen rem-Offset — dieselbe Mathematik wie bei Tools wie Utopia, nur in einem einzigen Formular.
Für Schriftgrößen in den meisten Fällen ja — eine clamp()-Zeile skaliert sanft über den gesamten Bereich. Für Layout-Änderungen, bei denen es nicht nur um das Skalieren einer Zahl geht, brauchst du weiterhin Media Queries.
rem berücksichtigt die Standard-Schriftgröße, die im Browser eingestellt ist — wichtig für Barrierefreiheit, da jemand mit größerer Standardschrift auch proportional größeren Text bekommt. Du kannst bei Bedarf auf px umschalten.
Die Schriftgröße bleibt auf deinem Minimal- bzw. Maximalwert stehen — clamp() interpoliert nur zwischen den beiden Breakpoints, nie kleiner oder größer als das, was du festgelegt hast.