Design / Responsiv
CSS-clamp()-Generator für fließende Typografie und Abstände
Gib die kleinste und größte Größe sowie die Viewport-Breiten ein, bei denen sie jeweils gelten sollen. Du erhältst einen clamp()-Ausdruck in rem, der dazwischen gleichmäßig skaliert, sowie eine Tabelle mit der Größe bei gängigen Bildschirmbreiten.
CSS-clamp()-Generator für fließende Typografie und Abstände: Das Tool legt eine gerade Linie durch die beiden Punkte: Von 16 px bei einem 320 px breiten Viewport bis 24 px bei 1280 px wächst die Größe pro 100 px Breite um 0,8333 px. Die Linie wird als fester rem-Anteil plus vw-Anteil geschrieben: 0.8333rem + 0.8333vw. Außerhalb dieses Bereichs hält clamp() den Wert zwischen 1rem und 1.5rem. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.
- Kategorie
- Entwicklerwerkzeuge
- Ausführungen
- In deinem Browser
- Kosten
- Kostenlos · ohne Anmeldung
- Verfügbarkeit
- Einsatzbereit
Läuft vollständig in deinem Browser
CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
| Ansichtsfensterbreite | Größe |
|---|---|
| 320 px | 16 px |
| 375 px | 16,46 px |
| 768 px | 19,73 px |
| 800 px | 20 px |
| 1024 px | 21,87 px |
| 1280 px | 24 px |
| 1440 px | 24 px |
| 1920 px | 24 px |
Der mittlere Wert von clamp() ist eine Gerade durch die beiden von dir angegebenen Punkte: Er addiert einen festen rem-Betrag zu einem Anteil der Ansichtsfensterbreite. Dadurch skaliert die Größe zwischen den beiden Breiten gleichmäßig und wird außerhalb davon durch die Grenzwerte begrenzt. Durch die Verwendung von rem für den festen Anteil bleibt die Größe an die eigene Schriftgrößeneinstellung der lesenden Person angepasst. Das funktioniert für jede Längeneinheit: Schriftgrößen, Innenabstände, Abstände oder Außenabstände.
Beispielrechnung
Für eine Überschrift mit 32 px auf einem 375 px großen Smartphone und 48 px auf einem 1440 px großen Desktop beträgt die Steigung 16 ÷ 1065 = 1,5023 px pro 100 px. Der Ausdruck lautet clamp(2rem, 1.6479rem + 1.5023vw, 3rem). Auf einem 800 px großen Tablet ist die Überschrift 38,38 px groß.
Barrierefreiheit
Die WCAG fordert, dass Text auf 200 % vergrößert werden kann. Da ein Teil einer flexiblen Größe vom Viewport abhängt, kann eine sehr steile Steigung dazu führen, dass der Text beim Zoomen kaum größer wird. Halte die größte Größe bei höchstens etwa dem 2,5-Fachen der kleinsten und nutze den Typoskalen-Generator, um einheitliche Schritte auszuwählen.
So benutzt du es
- Gib die kleinste und größte Größe in px ein.
- Gib die Viewport-Breiten ein, bei denen sie jeweils gelten sollen.
- Kopiere den clamp()-Wert und prüfe die Größen in der Tabelle.
Datenschutz & Einschränkungen
Wird in deinem Browser berechnet.
Ähnliche Tools
Häufige Fragen
Warum nicht einfach vw verwenden?
Eine Größe ausschließlich in vw ignoriert die Schriftgrößeneinstellung der lesenden Person und kann auf Smartphones winzig oder auf breiten Bildschirmen riesig werden. Der rem-Anteil und die Grenzen in clamp() beheben beides.
Funktioniert clamp() überall?
Ja: Jeder aktuelle Browser unterstützt clamp() seit 2020.
Kann die Größe auf breiteren Bildschirmen kleiner werden?
Ja: Gib eine größere kleinste Größe für den kleineren Viewport ein. Dann zieht der Ausdruck stattdessen den vw-Anteil ab.
Kostenloses Tool · läuft in deinem browser · kein Konto nötig