Rechnerwerk
Alltag

clamp()-Wert berechnen

Tragen Sie die kleinste und größte Schriftgröße, die Viewport-Breiten, zwischen denen skaliert wird, und die Basisschriftgröße ein.

Ihre Typografie
Zeigt die Schriftgröße bei dieser Viewport-Breite.
Ergebnis

Fluide Schriftgrößen mit clamp()

Mit der CSS-Funktion clamp() lässt sich eine Schriftgröße festlegen, die mit der Breite des Bildschirms mitwächst, aber nie unter einen Mindestwert fällt und nie über einen Höchstwert steigt. Statt mehrerer Media Queries genügt eine einzige Zeile. Alle aktuellen Browser unterstützen die Funktion seit Jahren.

Die Funktion hat drei Teile: den Mindestwert, einen bevorzugten Wert und den Höchstwert. Der bevorzugte Wert ist eine Gerade aus einem festen Anteil in rem und einem veränderlichen Anteil in vw. Der Rechner bestimmt die Gerade so, dass die Schrift bei der minimalen Viewport-Breite genau die Mindestgröße und bei der maximalen genau die Höchstgröße hat.

Im Beispiel wächst die Schrift zwischen 360 und 1.280 Pixeln Breite von 16 auf 24 Pixel. Der fertige Wert lautet clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem). Bei einer Breite von 768 Pixeln ergibt das etwa 19,5 Pixel.

Steigung=Gro¨ße max−Gro¨ße minBreite max−Breite min; Achsenabschnitt=Gro¨ße min−Steigung×Breite min; Wert=clamp (min , Achsenabschnitt+Steigung×100 vw , max)\text{Steigung} = \frac{\text{Größe max} - \text{Größe min}}{\text{Breite max} - \text{Breite min}};\ \text{Achsenabschnitt} = \text{Größe min} - \text{Steigung} \times \text{Breite min};\ \text{Wert} = \text{clamp}\,\left(\text{min}\,{,}\ \text{Achsenabschnitt} + \text{Steigung} \times 100\,\text{vw}\,{,}\ \text{max}\right)

Beispiel: 16 bis 24 px zwischen 360 und 1.280 px Breite, 1rem = 16 px: Steigung 0,8696vw, Achsenabschnitt 0,8043rem. CSS: clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem). Bei 768 px Breite beträgt die Schriftgröße 19,55 px.

Gute Praxis für fluide Typografie

Der feste rem-Anteil im bevorzugten Wert ist wichtig für die Barrierefreiheit. Schriften, die nur in vw angegeben sind, wachsen beim Zoomen im Browser nicht mit, weil sich die Viewport-Breite dabei kaum ändert. WCAG verlangt, dass Text auf 200 Prozent vergrößert werden kann. Halten Sie deshalb das Verhältnis von größter zu kleinster Größe moderat, als Faustregel höchstens etwa 2,5.

Verwenden Sie die Werte im CSS mit Punkt als Dezimaltrennzeichen, wie im Ergebnis angegeben. Die Viewport-Breiten wählen Sie passend zu Ihrem Layout, häufig ein typisches Smartphone als untere und die maximale Inhaltsbreite als obere Grenze. Oberhalb und unterhalb bleibt die Schriftgröße konstant.

Für ein ganzes Typografie-System berechnen Sie mehrere Werte, etwa für Fließtext, Zwischenüberschriften und Hauptüberschriften. Überschriften dürfen stärker skalieren als Fließtext. Dasselbe Prinzip funktioniert auch für Abstände, Ränder und Lücken im Layout.

Soll die Schrift auf großen Bildschirmen kleiner werden, tragen Sie eine kleinere Maximalgröße ein; der Rechner setzt dann die Grenzen richtig herum und erzeugt eine negative Steigung. Pixel in rem rechnet der px-rem-Umrechner um, die Lesbarkeit der Farben prüft der Kontrastverhältnis-Rechner.

Tipps und typische Fehler

Typografie skalieren.

  • rem: Für Zoom.
  • Faktor: Höchstens 2,5.
  • Punkt: Als Dezimalzeichen.
  • System: Mehrere Stufen.

Weitere Rechner: Alltag

Alle Rechner dieser Kategorie oder alle Rechner A–Z.

Häufige Fragen

Was macht clamp() in CSS?

Es begrenzt einen Wert zwischen Minimum und Maximum, dazwischen gilt der bevorzugte Wert.

Warum rem und vw kombinieren?

Damit die Schrift mit dem Browser-Zoom mitwächst.

Funktioniert clamp() in allen Browsern?

Ja, alle aktuellen Browser unterstützen es.

Kann ich clamp() auch für Abstände nutzen?

Ja, für jede Länge wie margin, padding oder gap.

Ersetzt clamp() Media Queries?

Für Schriftgrößen oft, für Layoutwechsel nicht.

Auch gesucht als:
  • CSS clamp Rechner
  • Fluid Typography
  • clamp Schriftgröße
  • responsive Schriftgröße CSS
  • clamp rem vw
  • fluide Typografie berechnen

Alle Berechnungen erfolgen direkt in Ihrem Browser, Ihre Eingaben werden nicht übertragen oder gespeichert. Die Ergebnisse sind Orientierungswerte ohne Gewähr und ersetzen keine steuerliche, rechtliche oder finanzielle Beratung. Die Erklärtexte auf dieser Seite wurden mit KI erstellt. Letzte inhaltliche Änderung dieser Seite: . Mehr dazu: So entstehen und prüfen wir die Rechner.