§ 15

Flydende skriftstørrelse med clamp()

Hvilke tal skal stå i min clamp()?

Svar: En overskrift skal være fx 28 px på en telefon og 48 px på en stor skærm og vokse jævnt imellem. Det gør clamp(min, fast del + hældning·vw, maks). Indtast skriftstørrelsen og viewport-bredden i begge ender, så regner beregneren den faste del i rem og hældningen i vw, og hvad skriften bliver ved en bredde, du vil teste.

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, fast del rem + hældning vw, maks rem)

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

Symboler og enheder i formlen
Symbol	Betydning	Enhed
min_px	Skriftstørrelse på den smalle skærm	px
maks_px	Skriftstørrelse på den brede skærm	px
min_vw_px	Smal viewport-bredde	px
maks_vw_px	Bred viewport-bredde	px
rod_px	Rod-skriftstørrelse (1 rem)	px
test_vw_px	Test ved viewport-bredde	px
=	Hældning (midterled i vw)	vw
=	Fast del (midterled i rem)	rem
=	Minimum i rem	rem
=	Maksimum i rem	rem
=	Skriftstørrelse ved testbredden	px

Gyldighed og kilde

Kilde: CSS Values 4 · clamp() og vw-enheden (W3C/MDN) · metoden fra Utopia.fyi

Gælder ikke når

Brug rem i den faste del, ikke kun vw. Tekst der kun skalerer med vw, vokser ikke når brugeren zoomer, og så kan siden fejle WCAG 1.4.4 (Ændring af tekststørrelse). Hold maks. højst ca. 2,5 × min., så 200 % zoom stadig gør teksten større.

Regneeksempel

Beregnerens egne standardværdier sat ind. Tallene er regnet med præcis den formel værktøjet bruger.

Sat ind

Skriftstørrelse på den smalle skærm28 px
Skriftstørrelse på den brede skærm48 px
Smal viewport-bredde360 px
Bred viewport-bredde1.440 px
Rod-skriftstørrelse (1 rem)16 px
Test ved viewport-bredde768 px

Giver

Hældning (midterled i vw)1,852 vw
Fast del (midterled i rem)1,3333 rem
Minimum i rem1,7500 rem
Maksimum i rem3,0000 rem
Skriftstørrelse ved testbredden35,6 px

Kun for medlemmer

Selve beregneren er låst

Opret en gratis bruger for at låse op for alle artikler, beregnere, skabeloner og sortiment — og få adgang til quizzer og klasser. Det tager under et minut: navn, email og en adgangskode. Intet betalingskort.

Opret gratis bruger →Log ind

Vil du prøve noget først? Se hvad du kan bruge uden konto — junior-zonen, leksikonet, videoerne og mere.

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.

Trin for trin

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 %.

Typiske fejl

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.

Eksempler fra hverdagen

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.

Skriftstørrelse på den smalle skærm: 28 px
Skriftstørrelse på den brede skærm: 48 px
Smal viewport-bredde: 360 px
Bred viewport-bredde: 1.440 px
Rod-skriftstørrelse (1 rem): 16 px
Test ved viewport-bredde: 768 px

Det betyder: Midterleddet er 1,3333 rem + 1,852 vw, så værdien bliver clamp(1,75 rem, 1,3333 rem + 1,852 vw, 3 rem). 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.

Skriftstørrelse på den smalle skærm: 16 px
Skriftstørrelse på den brede skærm: 20 px
Smal viewport-bredde: 360 px
Bred viewport-bredde: 1.280 px
Rod-skriftstørrelse (1 rem): 16 px
Test ved viewport-bredde: 1.024 px

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

Tommelfingerregel

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

Sådan tjekker du svaret

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.