De CSS-functie clamp()

Met clamp() kan je een CSS-waarde flexibel laten meegroeien, maar tegelijk ook een minimum en een maximum bepalen. Dat is heel handig voor responsieve typografie, marges, padding en hoogtes.

Belangrijk: clamp() heeft altijd drie waarden: clamp(minimum, flexibele waarde, maximum).

De basisstructuur van clamp()

De browser kiest een waarde die mee schaalt met het scherm, maar nooit kleiner wordt dan het minimum en nooit groter wordt dan het maximum.

font-size: clamp(2rem, 5vw, 4rem);

In dit voorbeeld is 2rem de ondergrens, 5vw de flexibele waarde en 4rem de bovengrens.

Waarom is clamp() nuttig?

Zonder clamp() kan tekst op kleine schermen te groot worden, of op grote schermen te klein lijken. Met clamp() hou je meer controle over de leesbaarheid en de verhoudingen.

Voorbeeld 1: tekstgrootte met clamp()

Dit voorbeeld toont een titel die groter wordt wanneer het scherm breder wordt, maar toch binnen duidelijke grenzen blijft.

.titel {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
}

Verklein of vergroot je browservenster om het effect te zien.

Voorbeeld 2: werken met rem als minimum en maximum

In de praktijk is het vaak slim om voor het minimum en maximum met rem te werken. Dat sluit goed aan bij typografie en zorgt voor consistente verhoudingen.

.grote-titel {
  font-size: clamp(2.5rem, 8vw, 6rem);
}

Hier betekent dat:

• de tekst wordt nooit kleiner dan 2.5rem
• de tekst schaalt mee met de schermbreedte via 8vw
• de tekst wordt nooit groter dan 6rem

Voorbeeld 3: marge of ruimte met clamp()

Je kan clamp() niet alleen voor tekst gebruiken, maar ook voor spacing. Bijvoorbeeld voor een margin-bottom die mee schaalt met de schermhoogte.

.vak {
  margin-bottom: clamp(1rem, 5vh, 4rem);
}

Hier zie je dat de ruimte tussen beide elementen groter of kleiner kan worden, maar altijd binnen duidelijke grenzen blijft.

Voorbeeld 4: clamp() in een hero

In een hero-sectie wordt clamp() vaak gebruikt voor de hoogte van de hero, de titelgrootte en de afstand van de tekst tot de onderrand.

<header class="clamp-hero-demo">
  <h1 class="clamp-hero-text">
    <span class="clamp-hero-first-line">Beeld</span>
    <span class="clamp-hero-second-line">
      Twijfel &amp; <span class="clamp-italic">Constructie</span>
    </span>
  </h1>
</header>

.clamp-hero-demo {
  height: clamp(18rem, 50vh, 32rem);
}

.clamp-hero-text {
  margin-bottom: clamp(2rem, 6vh, 5rem);
}

.clamp-hero-first-line {
  font-size: clamp(2.5rem, 8vw, 6rem);
}

.clamp-hero-second-line {
  font-size: clamp(1.8rem, 5vw, 4rem);
}

Hoe kies je goede waarden?

Een goede werkwijze is:

1. bepaal eerst een minimum in rem
2. kies dan een flexibele waarde in vw of vh
3. eindig met een maximum in rem

Bijvoorbeeld:

font-size: clamp(2rem, 5vw, 4rem);

Dat lees je als:

• minimaal 2rem
• liefst 5vw
• maximaal 4rem

Besluit

Met clamp() maak je CSS-waarden responsief zonder dat ze oncontroleerbaar worden. Vooral voor typografie, spacing en hero-layouts is dit een heel bruikbare techniek.

Werk bij minimum en maximum bij voorkeur met rem. Zo hou je de verhoudingen van je ontwerp beter onder controle.