Fluid responsive : laat in Divi 5 je fontgrootte perfect meeschalen
Naast presets en variabelen maakt Divi 5 het supermakkelijk om vloeibare tekst (responsive typography) te maken met CSS clamp().
Het probleem met traditionele fontgroottes
Vroeger stelde je drie verschillende lettergroottes in:
- Desktop: 48px
- Tablet: 36px
- Mobiel: 24px
Het nadeel? Zodra een scherm tussen mobiel en tablet in zat, sprong de tekst plotseling over naar een andere grootte. Dit voelt schokkerig aan.
De oplossing: clamp()
Met de CSS-functie clamp() geef je de tekst de vrijheid om vloeiend mee te schalen met het scherm van de bezoeker, maar mét een veiligheidsgrens.
De formule van clamp() heeft altijd 3 waarden:
$$\text{clamp}(\text{MIN}, \text{IDEAL}, \text{MAX})$$
- MIN (Minimale grootte): Hoe klein de tekst maximaal mag worden op een klein mobieltje (bijv. 18px).
- IDEAL (Ideale grootte): Een relatieve waarde die meebeweegt met de schermbreedte (bijv. 4vw — 4% van de schermbreedte).
- MAX (Maximale grootte): Hoe groot de tekst maximaal mag worden op een reusachtige monitor (bijv. 48px).
Praktijkvoorbeeld
CSS
font-size: clamp(1.25rem, 3vw + 1rem, 2.5rem);
Hoe dit aanvoelt voor de bezoeker:
Op een kleine iPhone is de tekst netjes 1.25rem (ca. 20px). Zodra de bezoeker zijn browser venster breder sleept, groeit de tekst vloeiend mee. Zodra de tekst op een 4K scherm 2.5rem (ca. 40px) bereikt, stopt hij met groeien zodat het niet belachelijk groot wordt.
In Divi 5 kun je deze clamp() formules direct opslaan als een Variabele (bijvoorbeeld --font-titel-xl), en die vervolgens koppelen aan de Preset van je Kopteksten!
Tip: Maak een Brand Guide in Divi 5 om je eigen styling op te slaan en aan te passen in de Visual Builder - je kunt hiervandaan ook je Presets aanpassen en opslaan. Stapsgewijs vervang ik zo de elementen op deze website voor de nieuwe presets en globale settings.
