CSS clamp Rechner für fluide Schriftgrößen

Fluide Schriftgröße mit clamp() berechnen

Der CSS clamp Rechner berechnet eine fluide Schriftgröße, die mit der Fensterbreite stufenlos wächst und dabei zwei Grenzen nie über- oder unterschreitet. Die CSS-Funktion clamp() nimmt drei Werte: Minimum, bevorzugter Wert und Maximum. Der bevorzugte Wert kombiniert eine feste Größe in rem mit einem Anteil der Viewport-Breite in vw, zum Beispiel clamp(1rem, 0.6667rem + 1.6667vw, 2rem). Bei 320 px Fensterbreite ergibt das 16 px, bei 1280 px 32 px und dazwischen eine Gerade. Diese Technik heißt Fluid Typography.

Die Rechnung: Steigung = (Maximum − Minimum) ÷ (größte − kleinste Viewport-Breite); der vw-Anteil ist Steigung × 100, der feste Anteil Minimum − Steigung × kleinste Breite. Der Rechner gibt alle Werte in rem aus, damit die responsive Schriftgröße auch die im Browser eingestellte Grundschrift berücksichtigt. Die Tabelle zeigt die Größe bei typischen Breiten, der Schieberegler eine Vorschau. Statt font-size können Sie jede Eigenschaft mit einer Länge eintragen, etwa padding oder gap.

Barrierefreiheit: Weil vw beim Zoomen nicht mitwächst, kann zu starkes Skalieren die WCAG-Anforderung verletzen, Text auf 200 Prozent vergrößern zu können. Als Faustregel gilt: Ist die größte Schriftgröße höchstens das 2,5-Fache der kleinsten, bleibt Zoomen in der Regel ausreichend wirksam; der Rechner weist auf Überschreitungen hin. Zum Umrechnen einzelner Werte eignet sich px in rem.