Kostenloses Tool
clamp() berechnen
Sagen Sie, wie groß die Schrift auf dem schmalsten und auf dem breitesten Schirm sein soll. Dazwischen wächst sie stufenlos mit – ohne Sprünge, ohne Media Queries, ohne Umbruch mitten im Wort.
Der clamp-Rechner
Läuft auf Ihrem Gerät. Reine Rechnung im Browser, nichts wird gesendet. Die Vorschau unten zeigt die Größe, die in Ihrem Fenster gerade gilt.
Die zwei Eckpunkte
Fast überall 16. Nur ändern, wenn Sie am html-Element etwas anderes
gesetzt haben – wovon wir abraten, weil es die Einstellung der Besucherin
überschreibt.
Die größte Fensterbreite muss über der kleinsten liegen.
Ergebnis
—
Der Anteil, der von der Fensterbreite abhängt, überwiegt hier stark. Dadurch reagiert die Schrift kaum noch darauf, wenn jemand die Schriftgröße im Browser hochsetzt – das kann Erfolgskriterium 1.4.4 der WCAG verletzen. Rücken Sie die beiden Eckwerte näher zusammen.
Wie es sich auswirkt
| Fensterbreite | Schriftgröße |
|---|---|
| 320 px | — |
| 375 px | — |
| 768 px | — |
| 1024 px | — |
| 1440 px | — |
| 1920 px | — |
In Ihrem Fenster (—) ergibt das gerade —.
Schnelle Websites aus Düren
Zum Hintergrund
Warum Schrift mitwachsen sollte
Die übliche Lösung für Schriftgrößen sind Media Queries: 48 Pixel am Rechner, 32 am Tablet, 28 am Handy. Das Ergebnis ist eine Schrift, die in Stufen springt. Zieht man das Fenster langsam breiter, passiert lange nichts und dann alles auf einmal. Dazwischen gibt es immer Breiten, bei denen es unpassend aussieht – und genau dort bricht dann ein langes Wort um oder ragt hinaus.
clamp() löst das mit drei Werten: kleinster, gewünschter, größter. Der
gewünschte Wert hängt an der Fensterbreite und wird von den beiden anderen begrenzt.
Das Ergebnis skaliert stufenlos und ist nach unten wie nach oben abgesichert.
Der Teil, den die meisten Rechner verschweigen
Ein clamp(), dessen mittlerer Wert nur aus vw besteht –
etwa clamp(1rem, 4vw, 3rem) –, ignoriert die Schriftgröße, die jemand in
seinem Browser eingestellt hat. Wer schlecht sieht und deshalb alles auf 150 Prozent
stellt, bekommt dieselbe Schrift wie alle anderen. Das ist genau der Fall, den
Erfolgskriterium 1.4.4 der WCAG verhindern soll.
Deshalb enthält der mittlere Wert hier immer einen rem-Anteil. Er sorgt
dafür, dass die Schrift auf die Einstellung der Besucherin reagiert, während der
vw-Anteil für das Mitwachsen mit dem Fenster zuständig bleibt. Liegen
Ihre beiden Eckwerte sehr weit auseinander, wird der vw-Anteil
übermächtig – dann warnt der Rechner oben.
Wofür sich clamp() noch lohnt
Nicht nur für Schrift. Innenabstände, Abstände zwischen Abschnitten, Spaltenbreiten, Eckenradien – überall dort, wo sonst eine feste Pixelzahl steht und irgendwann eine Media Query nachgeschoben werden muss. Auf dieser Website ist praktisch jeder Abstand so gebaut:
padding-block: clamp(3rem, 8vw, 5.5rem);Media Queries bleiben trotzdem richtig – aber für Struktur statt für Größen: wenn aus einer Spalte zwei werden, wenn eine Navigation vom Menüknopf zur Leiste wechselt. Dafür gibt es den Media-Query-Generator.