Fluid typografie met clamp()

Wat is er veranderd?

Voorheen gebruikten sommige koppen op de site een vaste font-size in rem. Op grote schermen zag dat er prima uit, maar op kleinere viewports was de verhouding soms minder ideaal.

We hebben nu alle koppen omgezet naar clamp(), een CSS-functie die een minimum, een voorkeur en een maximum waarde combineert:

font-size: clamp(1.15rem, 2.5vw, 1.4rem);

Dit betekent: gebruik bij voorkeur 2.5vw (viewport-breedte), maar word nooit kleiner dan 1.15rem en nooit groter dan 1.4rem. Het resultaat is een vloeiende schaling zonder dat er aparte media queries nodig zijn.

Welke elementen zijn aangepast?

• Content h2 (.page-content h2): van 1.4rem naar clamp(1.15rem, 2.5vw, 1.4rem)
• Blog card titel (.blog-card__title): van 1.3rem naar clamp(1.1rem, 2.5vw, 1.3rem)
• Blog h2 (.blog-content h2): van 1.4rem naar clamp(1.15rem, 2.5vw, 1.4rem)
• Blog h3 (.blog-content h3): van 1.15rem naar clamp(1rem, 2vw, 1.15rem)

De hero-titel, page-header-titel en hero-lead tekst gebruikten al clamp() en zijn ongewijzigd.

Waarom clamp()?

Fluid typografie met clamp() heeft twee voordelen:

1. Geen sprongen. Media queries veroorzaken een plotselinge verandering bij een breakpoint. Met clamp() schaalt de tekst geleidelijk mee.
2. Minder CSS. Eén regel vervangt meerdere @media-blokken, wat het onderhoud eenvoudiger maakt.

Alle clamp()-waarden zijn nu ook gedocumenteerd in het design-system (docs/design-system.md).