So funktioniert der clamp()-Rechner
Du legst zwei Punkte fest: die Größe auf dem schmalsten und die Größe auf dem breitesten Bildschirm. Der Rechner zieht eine Gerade zwischen beiden und macht daraus einen einzigen CSS-clamp()-Ausdruck mit drei Teilen – Minimum, bevorzugter Wert und Maximum. Unterhalb des minimalen Viewports bleibt der Wert beim Minimum, oberhalb des maximalen beim Maximum, und dazwischen skaliert er stufenlos, ganz ohne Media Query.
Die Steigung gibt an, um wie viele Pixel der Wert pro Pixel Viewport-Breite wächst; sie wird in vw angegeben, wobei 1vw 1 % der Viewport-Breite entspricht. Der Achsenabschnitt ist der Wert, den die Gerade bei einem Bildschirm mit null Breite hätte. Zusammen bilden sie das mittlere Argument, zum Beispiel 0.8333rem + 0.8333vw.
Warum die Ausgabe rem verwendet
Ein rem-Anteil im bevorzugten Wert hält fluiden Text an die Schriftgröße gebunden, die Leser in ihrem Browser eingestellt haben. Eine reine vw-Größe ignoriert diese Einstellung und kann das Zoomen schwächen. Deshalb ist rem die Standardausgabe; px steht bereit, falls deine Design-Tokens in Pixeln definiert sind, und das Feld für die Root-Schriftgröße deckt Projekte ab, die die Schriftgröße von html ändern.
Vorschau, Breakpoints und Barrierefreiheit
Zieh den Viewport-Regler von 320 bis 1920 px, um den Text in der Größe zu sehen, die er bei dieser Breite hätte. Die Tabelle zeigt die berechneten Größen bei 320 und 375 px für Smartphones, 768 und 1024 px für Tablets sowie 1280, 1440 und 1920 px für Desktops. So prüfst du, dass Überschriften weder auf dem Handy gedrängt noch auf großen Monitoren überdimensioniert wirken.
Das WCAG-Erfolgskriterium 1.4.4 verlangt, dass sich Text ohne Inhaltsverlust auf 200 % vergrößern lässt. Browser-Zoom verkleinert zugleich den in CSS-Pixeln gemessenen Viewport, daher wächst sehr aggressive fluide Schrift beim Zoomen weniger als erwartet. Eine verbreitete Faustregel lautet: Das Maximum sollte höchstens das 2,5-Fache des Minimums betragen. Der Rechner warnt dich, wenn du darüber liegst.
Teilen und exportieren
Jede Einstellung wird in der URL gespeichert, sodass du ein Ergebnis als Lesezeichen ablegen oder an Kolleginnen und Kollegen schicken kannst. Kopiere den reinen clamp()-Wert, eine CSS Custom Property für dein :root oder eine Tailwind-Klasse mit beliebigem Wert. Du brauchst einen ganzen Satz Größen? Wechsle in den Modus Typo-Skala und exportiere eine modulare Skala als CSS-Variablen.