Contact
Contact

14 augustus 2025
Elegante typografie op elk scherm met Utopia Font Scaling

Bij TwelveBricks besteden we veel aandacht aan de details die websites écht laten opvallen. Eén van die details is typografie. Goede typografie ziet er niet alleen goed uit, maar maakt de inhoud ook prettiger leesbaar en zorgt voor een duidelijke hiërarchie en ritme. Een van de nieuwste toevoegingen aan ons design-systeem is de ondersteuning voor Utopia Font Scaling.

A pen with beautiful text on a piece of paper.

Wat is Utopia?

Utopia is een ontwerpframework van James Gilyead en Trys Mudford. Het maakt gebruik van flexibele tekstgroottes (en optioneel ook witruimte), gebaseerd op een wiskundige verhouding tussen een minimale en maximale schermbreedte.

In plaats van vaste fontgroottes per scherm (zoals 16px, 18px of 20px), gebruikt Utopia een formule waarmee tekstgroottes vloeiend meebewegen met het schermformaat. Zo groeien de tekst en koppen geleidelijk mee, waardoor alles perfect leesbaar blijft. Op elk apparaat.

Inhoud geblokkeerd

De externe inhoud is verborgen omdat je nog geen toestemming hebt gegeven om social media cookies te plaatsen.
https://www.youtube.com/watch?v=DDuGtN-GakA

Waarom wij er fan van zijn

1. Vloeiend, zonder breakpoints
Traditionele responsive typografie gebruikt vaste breekpunten, waardoor tekst ‘springt’ bij het aanpassen van het scherm. Utopia schaalt daarentegen soepel en natuurlijk, van mobiel tot breedbeeld, zonder abrupte overgangen.

2. Wiskundig uitgebalanceerde typografische schaal
Utopia definieert een typografische schaal: een reeks groottes die in verhouding staan tot elkaar. Elke stap voelt visueel logisch aan. Zo ontstaat een consistente hiërarchie waar ontwerpers blij van worden, en bezoekers onbewust ook.

3. Altijd goed leesbaar
Utopia zorgt ervoor dat tekstgrootte, regelafstand en witruimte in balans blijven, ongeacht het apparaat. Teksten blijven netjes uitgelijnd zoals bedoeld, wat niet alleen mooier is, maar ook de toegankelijkheid verbetert.

Hoe we het gebruiken bij TwelveBricks

Ons design-systeem maakt gebruik van Sass om de CSS voor elk ontwerp te genereren. Om alles flexibel te houden voor verschillende designs en klanten, werken we met Sass- en CSS-variabelen in al onze componenten. 

Gelukkig biedt Utopia een perfecte integratie met Sass. Zo kunnen we eenvoudig de juiste instellingen gebruiken in onze componenten. We stellen een minimale en maximale tekstgrootte in, definiëren de schaal voor kopteksten, en het design-systeem regelt de rest. Alle componenten maken hier direct gebruik van.

Dat maakt het niet alleen super eenvoudig om de typografie per design af te stemmen, maar zorgt er ook voor dat elk ontwerp er consistent en in balans uitziet. Het resultaat voelt als één geheel, niet als een verzameling losse stijlen.

Typografie valt niet altijd op, maar als het goed is, voel je het verschil. Met Utopia zorgen we ervoor dat elk ontwerp er verzorgd uitziet, beter presteert en op elk scherm optimaal tot zijn recht komt. Precies zoals we het bij TwelveBricks graag zien.