Skip to content
Discebo.dk

§ 15

Fluid font size with clamp()

Which figures should go in my clamp()?

Answer: A heading should be eg 28 px on a mobile phone and 48 px on a large screen and grow evenly in between. That's what clamp(min, fixed part + slope·vw, max) does. Enter the font size and viewport width at both ends, then the calculator works out the fixed part in rem and the slope in vw, and what the font will be at a width you want to test.

Formula

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, fixed part rem + slope vw, max rem)

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

Symbols and units in the formula
SymbolMeaningUnit
min_pxFont size on narrow screenpx
maks_pxFont size on wide screenpx
min_vw_pxNarrow viewport widthpx
maks_vw_pxWide viewport widthpx
rod_pxRoot font size (1 rem)px
test_vw_pxTest at viewport widthpx
=Gradient (middle link in VW)vw
=Fixed part (middle link in belt)rem
=Minimum in beltrem
=Maximum in beltrem
=Font size at test widthpx

Validity and source

Source
CSS Values 4 · clamp() and vw unit (W3C/MDN) · method from Utopia.fyi

Does not apply when

  • Use rem in the fixed part, not just vw. Text that only scales with vw does not grow when the user zooms, and then the page may fail WCAG 1.4.4 (Resize text). Keep max at most approx. 2.5 × min, so 200% zoom still makes text larger.

Worked example

The calculator's own default values inserted. The figures are calculated with exactly the formula the tool uses.

Substituted

  • Font size on narrow screen28 px
  • Font size on wide screen48 px
  • Narrow viewport width360 px
  • Wide viewport width1,440 px
  • Root font size (1 rem)16 px
  • Test at viewport width768 px

Giver

  • Gradient (middle link in VW)1.852 vw
  • Fixed part (middle link in belt)1.3333 rem
  • Minimum in belt1.7500 rem
  • Maximum in belt3.0000 rem
  • Font size at test width35.6 px

Members only

The calculator itself is locked

Create a free user account to unlock all articles, calculators, templates and range — and get access to quizzes and classes. It takes less than a minute: name, email and a password. No payment card.

Create free user →Log in

Want to try something first? See what you can use without an account — the junior zone, the encyclopedia, the videos and more.

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.

Step by step

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

Typical errors

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

Examples from everyday life

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.

Font size on narrow screen
28 px
Font size on wide screen
48 px
Narrow viewport width
360 px
Wide viewport width
1,440 px
Root font size (1 rem)
16 px
Test at viewport width
768 px

It means: Midterleddet er 1.3333 plate + 1.852 vw, så værdien bliver clamp(1.75 plate, 1.3333 plate + 1.852 vw, 3 plate). 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.

Font size on narrow screen
16 px
Font size on wide screen
20 px
Narrow viewport width
360 px
Wide viewport width
1,280 px
Root font size (1 rem)
16 px
Test at viewport width
1,024 px

It means: Værdien bliver clamp(1 plate, 0.9022 plate + 0.435 vw, 1.25 plate). Ved 1024 px er teksten 18.9 px.

Rule of thumb

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

How to check the answer

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.