{"id":64040,"date":"2025-12-01T10:31:42","date_gmt":"2025-12-01T09:31:42","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=64040&preview=true&preview_id=64040"},"modified":"2025-12-08T08:34:28","modified_gmt":"2025-12-08T07:34:28","slug":"fluid-typography","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/fluid-typography\/","title":{"rendered":"Elegant schalen van een lettertype met fluid typography"},"content":{"rendered":"

Tekst er op elk scherm goed laten uitzien is niet zo eenvoudig als het klinkt. Lange tijd gebruikten webdesigners media query breakpoints om de grootte van lettertypen aan te passen, maar deze aanpak wordt al snel rommelig naarmate er meer apparaten en schermformaten komen.<\/p>\n

Vanaf WordPress 6.1<\/a> (uitgebracht in november 2022) is er nu een betere manier: vloeiende typografie. Het past automatisch lettergroottes aan die zijn gedefinieerd in je theme.json<\/code> bestand, zodat ze soepel schalen, ongeacht de breedte of hoogte van het scherm.<\/p>\n

Deze functie verandert niet alleen de lettergrootte, maar past ook de regelhoogte, woordafstand en zelfs witruimte aan, waardoor je ontwerp consistenter, leesbaarder en toegankelijker wordt op elk apparaat.<\/p>\n

Dit artikel legt uit hoe fluid typography werkt, wat het verschil is met traditionele breakpoints en hoe je het kunt implementeren in WordPress met theme.json<\/code> en CSS.<\/p>\n

Maar laten we eerst eens kijken hoe we vroeger met typografie omgingen en waarom vloeiende typografie zo’n grote verbetering is.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Breakpoint typografie vs. vloeiende typografie<\/h2>\n

Een goede manier om fluid typography, oftewel vloeiende typografie, te begrijpen is door het te vergelijken met zijn voorganger, breakpoint typografie, die media queries gebruikt die zich richten op specifieke apparaatbreedtes voor de grootte van lettertypen.<\/p>\n

Breakpoint typografie<\/h3>\n

Breakpoints zijn meestal specifieke bereiken van viewportbreedtes, meestal gedefinieerd in pixels. Een veelgebruikte aanpak is om drie belangrijke breekpunten in te stellen voor mobiele, laptop- en desktopschermen.<\/p>\n

Hier zijn typische breakpoint-instellingen voor laptops in een CSS-bestand<\/a>:<\/p>\n

@media (min-width: 48em) and (max-width: 74.9375em) {\n  body {\n    font-size: 1.125rem;\n    line-height: 1.6;\n  }\n  h1 {\n    font-size: 2rem;\n  }\n}<\/code><\/pre>\n
Hoewel dit werkt, heeft het een groot nadeel: naarmate er nieuwe apparaten en schermformaten verschijnen, wordt het beheren van al deze breakpoints al snel onhoudbaar.<\/p>\n
\"Illustratie
Illustratie van hoe typografie soepel schaalt over verschillende breakpoints.<\/figcaption><\/figure>\n
In de voorbeeld-GIF hierboven wordt de tekst met ongelijke sprongen groter als de viewport krimpt. Dit “stappend” gedrag leidt vaak tot onhandig of onvoorspelbaar schalen, wat niet ideaal is voor vloeiende, consistente typografie.<\/p>\n
Vloeiende typografie<\/h3>\n
Met de introductie van de CSS clamp()<\/a><\/code> property in 2019, samen met viewport eenheden (vw<\/code> en vh<\/code>), werd naadloos en automatisch schalen mogelijk.<\/p>\n
Hiermee kun je lettergroottes defini\u00ebren die dynamisch schalen op basis van de afmetingen van de viewport, waardoor je niet langer meerdere breakpoints nodig hebt.<\/p>\n
Hier is een voorbeeld voor een middelgrote lettergrootte met clamp()<\/code>:<\/p>\n
.has-medium-font-size {\n  font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);\n}<\/code><\/pre>\n
We zullen later dieper ingaan op hoe clamp()<\/code> werkt, maar voor nu kun je het zien als een formule die minimale, voorkeurs- en maximale lettergroottes instelt, zodat tekst soepel over schermen wordt geschaald.<\/p>\n
\"Vloeiende
Vloeiende typografie demonstratie.<\/figcaption><\/figure>\n
In deze GIF past de tekst zich vloeiend aan als de viewport kleiner wordt. Er zijn geen sprongen of plotselinge grootteveranderingen.<\/p>\n
Dit soepele gedrag maakt vloeiende typografie zo’n sprong voorwaarts ten opzichte van ontwerpen op basis van breakpoints. In plaats van tekst in stappen aan te passen, zorgt het voor naadloze schaling die op elk apparaat natuurlijk aanvoelt.<\/p>\n
Maar het soepel aanpassen van de grootte is nog maar het begin. Vloeiende typografie biedt verschillende andere voordelen die het makkelijker maken om flexibele, consistente en toegankelijke ontwerpen te maken.<\/p>\n
De argumenten voor vloeiende typografie<\/h2>\n
Als je met vloeiende typografie werkt, zullen de volgende voordelen duidelijk worden.<\/p>\n
Standaard responsief<\/h3>\n
Tekst schaalt automatisch mee met de viewport, waardoor er geen breekpunten nodig zijn. Of je site nu wordt bekeken op een telefoon, tablet of ultrabrede monitor, lettergroottes passen zich op natuurlijke wijze aan zonder extra CSS.<\/p>\n
Gemakkelijker te onderhouden<\/h3>\n
Zonder de noodzaak van meerdere media queries blijft je code eenvoudig en leesbaar. Je kunt lettergroottes defini\u00ebren met behulp van een eenvoudige “T-shirt” schaal, vari\u00ebrend van klein tot extra groot, en deze consistent toepassen in je thema.<\/p>\n
Consistent ontwerp<\/h3>\n
Zorg ervoor dat je lettergroottes consistent blijven over de hele site, zowel globaal als binnen individuele blokken waar nodig. Definieer je schaal \u00e9\u00e9n keer en hij vloeit naadloos door alle blokken, patronen en sjablonen.<\/p>\n
Verbeterde toegankelijkheid en leesbaarheid<\/h3>\n
Omdat vloeiende typografie soepel schaalt, verschijnt tekst altijd op een leesbaar formaat voor elk apparaat. Dit maakt je inhoud toegankelijker, vooral voor gebruikers met visuele voorkeuren of aangepaste zoomniveaus in de browser.<\/p>\n
Toekomstbestendig ontwerp<\/h3>\n
Omdat tekstgrootte niet langer gebonden is aan kunstmatige breakpoints, werkt de schaal van je tekst gegarandeerd met elke toekomstige schermgrootte en viewport.<\/p>\n
Controle over schalingssnelheid<\/h3>\n
De mogelijkheid om de snelheid te bepalen waarmee tekst groeit of krimpt wordt ingesteld door een voorkeurswaarde die verandert met de breedte van de viewport.<\/p>\n
Browserondersteuning<\/h2>\n
De functie clamp()<\/code> wordt goed ondersteund in alle moderne browsers<\/a>, inclusief de huidige versies van Chrome, Edge, Firefox en Safari.<\/p>\n
Als je echter 100% dekking nodig hebt, zul je toch een fallback willen inbouwen voor oudere browsers zoals Internet Explorer 11 en versies van v\u00f3\u00f3r 2020 van Safari en Chrome.<\/p>\n
Zo doe je dat:<\/p>\n
\/* Fallback (for IE11 and other old browsers) *\/\nli {\n  font-size: 1.25rem; \n}\n\n\/* Preferred (modern browsers) *\/\nli {\n  font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);\n}<\/code><\/pre>\n