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.
Vanaf WordPress 6.1 (uitgebracht in november 2022) is er nu een betere manier: vloeiende typografie. Het past automatisch lettergroottes aan die zijn gedefinieerd in je theme.json bestand, zodat ze soepel schalen, ongeacht de breedte of hoogte van het scherm.
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.
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 en CSS.
Maar laten we eerst eens kijken hoe we vroeger met typografie omgingen en waarom vloeiende typografie zo’n grote verbetering is.
Breakpoint typografie vs. vloeiende typografie
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.
Breakpoint typografie
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.
Hier zijn typische breakpoint-instellingen voor laptops in een CSS-bestand:
@media (min-width: 48em) and (max-width: 74.9375em) {
body {
font-size: 1.125rem;
line-height: 1.6;
}
h1 {
font-size: 2rem;
}
}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.
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.
Vloeiende typografie
Met de introductie van de CSS clamp() property in 2019, samen met viewport eenheden (vw en vh), werd naadloos en automatisch schalen mogelijk.
Hiermee kun je lettergroottes definiëren die dynamisch schalen op basis van de afmetingen van de viewport, waardoor je niet langer meerdere breakpoints nodig hebt.
Hier is een voorbeeld voor een middelgrote lettergrootte met clamp():
.has-medium-font-size {
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
}We zullen later dieper ingaan op hoe clamp() 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.
In deze GIF past de tekst zich vloeiend aan als de viewport kleiner wordt. Er zijn geen sprongen of plotselinge grootteveranderingen.
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.
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.
De argumenten voor vloeiende typografie
Als je met vloeiende typografie werkt, zullen de volgende voordelen duidelijk worden.
Standaard responsief
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.
Gemakkelijker te onderhouden
Zonder de noodzaak van meerdere media queries blijft je code eenvoudig en leesbaar. Je kunt lettergroottes definiëren met behulp van een eenvoudige “T-shirt” schaal, variërend van klein tot extra groot, en deze consistent toepassen in je thema.
Consistent ontwerp
Zorg ervoor dat je lettergroottes consistent blijven over de hele site, zowel globaal als binnen individuele blokken waar nodig. Definieer je schaal één keer en hij vloeit naadloos door alle blokken, patronen en sjablonen.
Verbeterde toegankelijkheid en leesbaarheid
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.
Toekomstbestendig ontwerp
Omdat tekstgrootte niet langer gebonden is aan kunstmatige breakpoints, werkt de schaal van je tekst gegarandeerd met elke toekomstige schermgrootte en viewport.
Controle over schalingssnelheid
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.
Browserondersteuning
De functie clamp() wordt goed ondersteund in alle moderne browsers, inclusief de huidige versies van Chrome, Edge, Firefox en Safari.
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óór 2020 van Safari en Chrome.
Zo doe je dat:
/* Fallback (for IE11 and other old browsers) */
li {
font-size: 1.25rem;
}
/* Preferred (modern browsers) */
li {
font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);
}Hoe vloeiende typografie werkt
Het hart van vloeiende typografie wordt gevormd door drie instellingen: minimale grootte, maximale grootte en een voorkeursgrootte, een glijdende schaal tussen de minimale en maximale waarden, bepaald door de breedte van de viewport.
De functie clamp() gebruikt deze drie waarden in één enkele declaratie:
font-size: clamp(min, preferred, max);Dit zorgt ervoor dat tekst nooit te klein wordt op kleine schermen of te groot op brede schermen. Bijvoorbeeld:
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);In dit voorbeeld begint de lettergrootte op 1rem, groeit vloeiend naarmate de viewport groter wordt, en stopt met toenemen bij 1,25rem.
Hoe WordPress het aanpakt
WordPress doet het zware werk voor je. In plaats van deze waarden handmatig te berekenen, kun je je lettergroottes rechtstreeks in theme.json definiëren.
Hier is een vereenvoudigd voorbeeld van hoe WordPress een lettergrootte weergeeft in JSON:
{
"fluid": {
"min": "1rem",
"max": "1.25rem"
},
"name": "Medium",
"size": "1.125rem",
"slug": "medium"
}Hieruit genereert WordPress automatisch de CSS:
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);Dit maakt het implementeren van vloeiende typografie snel, consistent en foutloos. Je hoeft alleen maar je waarden te definiëren in theme.json en WordPress doet de rest.
Algemene termen
Laten we, voordat we verder gaan, een paar belangrijke eenheden bekijken die gebruikt worden in vloeiende typografie. Elke eenheid heeft een relatieve schaal ten opzichte van iets anders.
| Eenheid | Definitie | Opmerkingen |
| em | Relatief aan de lettergrootte van het bovenliggende element. | Maten worden samengesteld door nesting. |
| rem | Relatief aan de lettergrootte van het root (html) element. | Schaalt consistent over de hele site. |
| vw | 1% van de viewport breedte. | Wordt gebruikt voor schalen op basis van breedte. |
| vh | 1% van de viewport hoogte. | Wordt gebruikt voor schalen op basis van hoogte. |
Een paar woorden over theme.json
theme.json is datagestuurd, dus het genereert automatisch CSS in plaats van dat het handmatig moet worden geschreven.
Zoals je zou verwachten, bevat WordPress core een theme.json bestand dat basis properties instelt die worden gebruikt door het eigen theme.json bestand van een blokthema. Dit is het geval met hoe WordPress vloeiende typografie implementeert.
Zoals met vrijwel elke stijl properties, kunnen deze globaal of per blok worden gewijzigd met behulp van een child thema, wat we aanraden voor alle aanpassingen.
Als je niet bekend bent met theme.json, raden we je aan om ons artikel “Werken met properties en key-value paren in theme.json” te lezen
Hoe WordPress vloeiende typografie gebruikt in TT5 (Twenty Twenty Five)
Wanneer het theme.json bestand van een blokthema de instelling "fluid": true bevat, genereert WordPress automatisch vloeiende typografie regels met behulp van de CSS clamp() functie. Dit wordt gedaan door middel van een ingebouwd algoritme dat soepele schaling berekent voor elke lettergrootte.
{
"settings": {
"typography": {
"fluid": true
}
}
}Als "fluid" is weggelaten, gebruikt WordPress standaard false, wat betekent dat tekstgroottes vast blijven en niet vloeiend worden geschaald.
Met vloeiende typografie ingeschakeld, definieert TT5 vijf vooraf ingestelde lettergroottes. Elke bevat minimum en maximum waarden die WordPress gebruikt om de uiteindelijke CSS te genereren met behulp van de clamp() functie.
| Grootte Naam | Thema.json waarden | Gegenereerde CSS clamp waarden |
| small | size:0.875rem | clamp(0.875rem, 0.8125rem + 0.2vw, 1rem) |
| medium | min:1rem max: 1,125rem |
clamp(1rem, 0,9375rem + 0,25vw, 1,125rem) |
| large | min:1.125rem max: 1.375rem |
clamp(1,25rem, 1,125rem + 0,5vw, 1,5rem) |
| x-large | min:1.75rem max: 2rem |
clamp(2.25rem, 1.75rem + 1.5vw, 3rem) |
| xx-large | min:2.15rem max: 3rem |
clamp(3rem, 2.25rem + 2vw, 4rem) |
Praktische voorbeelden
Nu we weten hoe TT5 standaard omgaat met fluid type, laten we eens kijken naar een paar praktijkscenario’s waarin je het misschien wilt aanpassen of uitbreiden.
Voor deze voorbeelden gebruiken we een TT5 child thema, en zoals altijd, zorg ervoor dat je scripts op de juiste manier enqueued zijn.
Vergroot alle lettergroottes met 25%
Als je publiek de voorkeur geeft aan grotere tekst (bijvoorbeeld op sites die gericht zijn op toegankelijkheid of op senioren), wil je misschien alle lettergroottes globaal vergroten.
Optie 1 – Thema.json gebruiken
Hoewel er niet één knop is om alle lettertypen te schalen, kun je handmatig elke lettergrootte met 25% vergroten. Hier is een voorbeeldconfiguratie:
"typography": {
"fontSizes": [
{
"fluid": false,
"name": "Small",
"size": "1.09375rem",
"slug": "small"
},
{
"fluid": { "max": "1.40625rem", "min": "1.25rem" },
"name": "Medium",
"size": "1.25rem",
"slug": "medium"
},
{
"fluid": { "max": "1.71875rem", "min": "1.40625rem" },
"name": "Large",
"size": "1.725rem",
"slug": "large"
},
{
"fluid": { "max": "2.5rem", "min": "2.1875rem" },
"name": "Extra Large",
"size": "2.1875rem",
"slug": "x-large"
},
{
"fluid": { "max": "3.75rem", "min": "2.6875rem" },
"name": "Extra Extra Large",
"size": "2.6875rem",
"slug": "xx-large"
}
]
}Dit volgt het patroon van TT5: de kleine lettergrootte blijft vast, terwijl de andere lettergroottes soepel meeschalen.
Achter de schermen berekent WordPress nog steeds de gewenste (vloeiende) waarde tussen elke min en max.
Optie 2 – style.css gebruiken
Als alternatief kun je alles globaal schalen met een enkele regel in je stylesheet:
:root {
font-size: 125%;
}Dit verhoogt de hoofdlettergrootte met 25% en schaalt effectief alle elementen die rem eenheden gebruiken.
Aangepast vloeiend lettertype voor een enkel blok
Je kunt vloeibare grootte ook selectief toepassen.
Om bijvoorbeeld alle lijstitems (core/list) de medium grootte te laten gebruiken in plaats van de standaard grote, voeg je het volgende toe aan je theme.json:
"styles": {
"blocks": {
"core/list": {
"typography": {
"fontSize": "var:preset|font-size|medium"
}
}
}
}Het resultaat is een schonere hiërarchie, waarbij lijstitems iets kleinere tekst weergeven dan alinea’s.
Vloeibare typografie instellen in style.css
Als je met een klassiek thema werkt, definieer je je eigen clamp() waarden rechtstreeks in style.css.
Zo kun je bijvoorbeeld lijstitems vergroten met 125 % van de grote lettergrootte:
li {
font-size: clamp(1.725rem, 1.725rem + 0.17vw, 1.71875rem) !important;
}
Dit geeft een groter lettertype weer voor lijstitems die zijn ingesteld in het CSS bestand. Zoals je zou verwachten, als je met een klassiek thema werkt, moet je de property clamp() gebruiken in je styles.css bestand.
Vloeiende spacing
Het lettertype is slechts één factor om rekening mee te houden bij het gebruik van vloeiende typografie.
De afmetingen van opvulling, marge en blokopeningen (de ruimte binnen een groepsblok) kunnen ook vloeiend worden geschaald door dezelfde concepten te gebruiken als bij vloeiend lettertype.
TT5 gebruikt deze instellingen om de grootte van de ruimte te bepalen.
"spacing": {
"defaultSpacingSizes": false,
"spacingSizes": [
{ "name": "Tiny", "size": "10px", "slug": "20" },
{ "name": "X-Small", "size": "20px", "slug": "30" },
{ "name": "Small", "size": "30px", "slug": "40" },
{ "name": "Regular", "size": "clamp(30px, 5vw, 50px)", "slug": "50" },
{ "name": "Large", "size": "clamp(30px, 7vw, 70px)", "slug": "60" },
{ "name": "X-Large", "size": "clamp(50px, 7vw, 90px)", "slug": "70" },
{ "name": "XX-Large", "size": "clamp(70px, 10vw, 140px)", "slug": "80" }
]
}De eerste drie maten (tiny, x-small, small) zijn vast, terwijl de grotere maten vloeiend meeschalen met clamp().
Dit zorgt ervoor dat niet alleen je tekst, maar ook de spacing van je layout zich elegant aanpast aan verschillende schermformaten.
Samenvatting
Breakpoint en vloeiende typografie dienen verschillende doelen. Als ze samen worden gebruikt, creëren ze voorwaarts compatibele layouts die zich soepel aanpassen aan verschillende schermen, wat voor iedereen een consistente en leesbare ervaring oplevert.
Als je het rekenwerk liever niet met de hand doet, zijn er verschillende gratis tools die je kunnen helpen bij het afstemmen en visualiseren van je waarden:
Hiermee kun je eenvoudig clamp() waarden genereren die passen bij je ontwerpschaal, vooral handig voor het ontwikkelen van klassieke thema’s.
Klaar om het in productie te zien? Host je WordPress site op Kinsta voor snelle TTFB, ingebouwde CDN en Edge Caching, zodat je vloeiende typografie er overal geweldig uitziet (en laadt). Begin de eerste maand gratis.
Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.
