§ 15

Flüssige Schriftgröße mit clamp()

Welche Zahlen sollten in meiner Klemme() stehen?

Antwort: Eine Überschrift soll z.B. 28 px auf einem Telefon und 48 px auf einem großen Bildschirm sein und dazwischen gleichmäßig wachsen. Das macht clamp(min, fest + Neigung·vw, max). Gib die Schriftgröße und die Viewport-Breite an beiden Enden ein, dann rechnet der Rechner den festen Teil in rem und die Neigung in vw, und was die Schrift bei einer Breite wird, die du testen willst.

Formel

Hældning = (maks. skrift − min. skrift) ÷ (bred viewport − smal viewport). I vw: × 100, fordi 1vw = 1 % af viewport-bredden.

Fast del = min. skrift − hældning × smal viewport, omregnet til rem: ÷ rod-størrelsen

CSS: font-size: clamp(min rem, fester Teil rem + Steigung vw, max rem)

Skrift ved bredden x = min. skrift + hældning × (x − smal viewport), holdt mellem min og maks

Symbole und Einheiten in der Formel
Symbol	Bedeutung	Einheit
min_px	Schrifttypengröße auf der schmalen Schirmgröße	px
maks_px	Schrifttypengröße auf der breiten Schirmgröße	px
min_vw_px	Schmale Viewport-Breite	px
maks_vw_px	Breite des Viewports	px
rod_px	Stiftgröße (1 Rem)	px
test_vw_px	Test bei Viewport-Breite	px
=	Neigung (mittelfeinste Gleitwelle)	vw
=	Fester Teil (Mittelteil im Riemen)	rem
=	Minimum in Riemen	rem
=	Maximum in Riemen	rem
=	Schrifttypengröße bei Testbreite	px

Gültigkeit und Quelle

Quelle: CSS Values 4 · clamp() und vw-Einheit (W3C/MDN) · Methode von Utopia.fyi

Gilt nicht, wenn

Verwende Riemen im festen Teil, nicht nur vw. Text, der nur mit vw skaliert, wächst nicht, wenn der Benutzer zoomt, daher könnte die Seite WCAG 1.4.4 (Textgrößenänderung) nicht bestehen. Halte das Maximum auf etwa 2,5 × Minimum, daher 200 % Zoom macht Text trotzdem größer.

Rechenbeispiel

Die eigenen Standardwerte des Rechners sind eingesetzt. Die Zahlen sind mit genau der Formel berechnet, die das Werkzeug verwendet.

Sat ind

Schrifttypengröße auf der schmalen Schirmgröße28 px
Schrifttypengröße auf der breiten Schirmgröße48 px
Schmale Viewport-Breite360 px
Breite des Viewports1.440 px
Stiftgröße (1 Rem)16 px
Test bei Viewport-Breite768 px

Geber

Neigung (mittelfeinste Gleitwelle)1,852 vw
Fester Teil (Mittelteil im Riemen)1,3333 rem
Minimum in Riemen1,7500 rem
Maximum in Riemen3,0000 rem
Schrifttypengröße bei Testbreite35,6 px

Nur für Mitglieder

Der Rechner selbst ist gesperrt

Lege einen kostenlosen Zugang an, um alle Artikel, Rechner, Vorlagen und das Sortiment freizuschalten — und Zugriff auf Quizze und Klassen zu erhalten. Es dauert unter einer Minute: Name, E-Mail und ein Passwort. Keine Zahlungskarte.

Kostenlosen Benutzer erstellen →Anmelden

Willst du zuerst etwas ausprobieren? Sieh, was du ohne Konto nutzen kannst — der Junior-Bereich, das Lexikon, die Videos und mehr.

Sådan bruger du den

Flydende typografi lader overskrifter vokse jævnt fra mobil til desktop i stedet for at hoppe ved hvert breakpoint. Det gør du med clamp(), men midterleddet skal regnes ud. Beregneren giver den faste del i rem og hældningen i vw, så du kan skrive værdien direkte i CSS.

Schritt für Schritt

Find skriftstørrelsen på den smalle skærm og på den brede skærm i designet.
Vælg de to viewport-bredder, hvor størrelserne skal gælde, fx 360 og 1440 px.
Hældningen er forskellen i skrift delt med forskellen i viewport. Gang med 100 for at få vw.
Den faste del er skriften på den smalle skærm minus hældningen gange den smalle bredde, delt med rod-størrelsen.
Skriv font-size: clamp(min rem, fast del rem + hældning vw, maks rem), og test med zoom på 200 %.

Typische Fehler

At skrive midterleddet kun i vw. Så vokser teksten ikke med browserens zoom, og siden kan fejle WCAG 1.4.4.
At bytte om på min og maks i clamp(). Det første tal skal være det mindste.
At glemme at regne den faste del om til rem. En fast del i px følger ikke brugerens skriftindstilling.
At skrive kommaet fra beregneren med i CSS. CSS bruger punktum: 1.3333rem.

Beispiele aus dem Alltag

h1 på en kampagneside

En kampagneside for et fitnesscenter har h1 på 28 px på mobil (360 px) og 48 px på desktop (1440 px). Du vil se størrelsen på en iPad på 768 px.

Schrifttypengröße auf der schmalen Schirmgröße: 28 px
Schrifttypengröße auf der breiten Schirmgröße: 48 px
Schmale Viewport-Breite: 360 px
Breite des Viewports: 1.440 px
Stiftgröße (1 Rem): 16 px
Test bei Viewport-Breite: 768 px

Es bedeutet: Midterleddet er 1,3333 Riemen + 1,852 vw, så værdien bliver clamp(1,75 Riemen, 1,3333 Riemen + 1,852 vw, 3 Riemen). På iPad'en bliver overskriften 35,6 px.

Brødtekst der vokser en smule

Brødteksten skal gå fra 16 px på 360 px til 20 px på 1280 px. Du tester på en bærbar på 1024 px.

Schrifttypengröße auf der schmalen Schirmgröße: 16 px
Schrifttypengröße auf der breiten Schirmgröße: 20 px
Schmale Viewport-Breite: 360 px
Breite des Viewports: 1.280 px
Stiftgröße (1 Rem): 16 px
Test bei Viewport-Breite: 1.024 px

Es bedeutet: Værdien bliver clamp(1 Riemen, 0,9022 Riemen + 0,435 vw, 1,25 Riemen). Ved 1024 px er teksten 18,9 px.

Faustregel

Hold maks højst ca. 2,5 gange min, så 200 % zoom stadig gør teksten dobbelt så stor.

So überprüfst du die Antwort

Sæt viewport-bredden i DevTools til den smalle og den brede værdi. Den beregnede font-size skal være præcis min og maks.