Fluide Größen mit clamp()
Die CSS-Funktion clamp(MIN, BEVORZUGT, MAX) begrenzt einen Wert nach unten und oben. Kombiniert man den bevorzugten Wert mit der Viewport-Breite (vw), entsteht fluide Typografie: Die Schrift wächst stufenlos von einer Mindestgröße auf kleinen Bildschirmen bis zu einer Maximalgröße auf großen, ohne Media Queries und ohne Sprünge.
Sie geben vier Werte ein: die minimale und maximale Größe sowie die Viewport-Breiten, bei denen diese erreicht werden sollen, etwa 16px bei 360px Breite und 32px bei 1280px. Der Generator berechnet daraus die Steigung (wie stark der Wert pro Pixel Viewport-Breite wächst) und den Achsenabschnitt und schreibt beides als bevorzugten Wert, zum Beispiel clamp(1rem, 0.5rem + 2.5vw, 2rem). Wie die Zahlen zustande kommen, wird direkt im Werkzeug erklärt.
Sie können in px oder rem arbeiten. rem ist empfehlenswert, weil die Schrift dann die Schriftgrößen-Einstellung des Nutzers respektiert; die Basisgröße ist mit 16px voreingestellt und lässt sich ändern. Mit dem Viewport-Regler sehen Sie die berechnete Größe bei jeder Bildschirmbreite. Das Ganze funktioniert nicht nur für font-size, sondern auch für padding, margin und gap. Achten Sie bei fluider Typografie auf ein sinnvolles Verhältnis zwischen Minimum und Maximum. Ist der Unterschied sehr groß, wächst die Schrift auf mittleren Bildschirmen schneller als erwartet. Für Fließtext genügt meist eine kleine Spanne, etwa 16 bis 18 Pixel; Überschriften dürfen stärker wachsen. Unterhalb der minimalen Viewport-Breite bleibt der Wert auf dem Minimum stehen, oberhalb der maximalen auf dem Maximum, sodass sehr kleine und sehr große Bildschirme sicher abgedeckt sind.
Der Generator läuft in Ihrem Browser und ist kostenlos ohne Begrenzung nutzbar: Live-Vorschau und Kopieren des CSS stehen ohne Pro zur Verfügung.
So erstellen Sie einen clamp()-Wert
- Einheit wählen (px oder rem) und bei Bedarf die Basis-Schriftgröße anpassen.
- Minimal- und Maximalwert eingeben.
- Minimale und maximale Viewport-Breite festlegen.
- Mit dem Viewport-Regler die Größe bei verschiedenen Breiten prüfen.
- Den clamp()-Ausdruck kopieren.
Wofür Sie clamp() nutzen
- Überschriften, die auf dem Smartphone klein und auf dem Desktop groß sind.
- Fließtext, der leicht mit der Bildschirmbreite skaliert.
- Fluide Innenabstände für Sektionen und Karten.
- Gap in Grid- und Flex-Layouts, der mit dem Viewport wächst.
- Eine typografische Skala ohne Media Queries.
Die Formel hinter clamp()
Steigung = (Max-Größe minus Min-Größe) / (Max-Viewport minus Min-Viewport). Achsenabschnitt = Min-Größe minus Steigung mal Min-Viewport. Der bevorzugte Wert lautet dann Achsenabschnitt + Steigung mal 100 vw.
Beispiel: 16px bei 320px und 32px bei 960px. Steigung = 16 / 640 = 0,025, also 2.5vw. Achsenabschnitt = 16 minus 0,025 mal 320 = 8px, also 0.5rem. Ergebnis: clamp(1rem, 0.5rem + 2.5vw, 2rem).
Der rem-Anteil im bevorzugten Wert sorgt dafür, dass Zoomen im Browser weiterhin wirkt. Ein reiner vw-Wert würde beim Zoomen nicht mitwachsen.
Häufig gestellte Fragen
Ist der Clamp Generator kostenlos?
Ja, ohne Begrenzung. Vorschau und Kopieren des CSS sind frei, Pro wird nicht benötigt.
px oder rem?
rem ist empfehlenswert, weil die Größen dann die Schriftgrößen-Einstellung des Nutzers berücksichtigen.
Brauche ich noch Media Queries?
Für die Größe selbst nicht. clamp() sorgt für einen stufenlosen Übergang zwischen Minimum und Maximum.
Funktioniert clamp() auch für Abstände?
Ja, für padding, margin, gap und andere Längenangaben.
Wird clamp() von allen Browsern unterstützt?
Ja, alle aktuellen Browser unterstützen clamp().