Werk met één typografische schaal voor harmonie

In deze stap leg je een vaste schaal van vier of vijf tekstgroottes vast die je consequent toepast, zodat alle teksten op je site harmoniëren.

Een typografische schaal is een vaste ladder van lettergroottes die je over je hele site gebruikt, net als een muzikale toonladder zorgt het voor harmonie tussen koppen, ondertitels en lopende tekst. In plaats van willekeurige groottes (16px, 22px, 31px) werk je met een ratio die de overgangen logisch maakt. In deze les leer je hoe je een schaal kiest en bewaakt over alle pagina's.

Leren: schaal als ritme tussen tekstniveaus

In deze video leg ik uit welke ratio's werken voor websites en hoe je voorkomt dat een ontwerper of CMS-gebruiker er onbewust van afwijkt.

Begrijpen: wat is een typografische schaal?

Een schaal is gebaseerd op één basisgrootte (meestal 16 of 18 pixels voor body-tekst) en een ratio die elke volgende grootte bepaalt. Veelgebruikte ratio's zijn 1,2 (rustig), 1,25 (gangbaar) en 1,333 (expressief). Vermenigvuldig je basis met de ratio en je hebt h3, dan opnieuw voor h2, dan h1. Je krijgt zo vier of vijf groottes die in verhouding tot elkaar staan en visueel harmoniëren in plaats van te concurreren.

Jan Rajtoral van Gonzo Design wijst op de meest gemaakte fout: vrij groottes kiezen per pagina. Een h2 op de homepage van 30 pixels en op een dienstpagina van 26 pixels voelt willekeurig en breekt consistentie. Cursus WP voegt daar een mobiel-regel aan toe: gebruik een aparte schaal voor mobiel met dezelfde ratio maar een kleinere basis. Wat op desktop als h1 werkt, kan op mobiel te dominant worden als je dezelfde absolute waarden aanhoudt.

De zes onderdelen van een werkbare typografische schaal:

1. Basisgrootte. 16 of 18 pixels voor body op desktop; 18 pixels op mobiel.
2. Ratio. 1,2, 1,25 of 1,333, gekozen op basis van de gewenste expressiviteit.
3. Vier tot vijf groottes. Body, h3, h2, h1 (en eventueel klein); niet meer.
4. Aparte mobiele schaal. Dezelfde ratio, kleinere basis voor balans op smalle schermen.
5. Vaste regelhoogte. 1,5 tot 1,7 voor body, 1,1 tot 1,3 voor koppen.
6. Vastlegging in design-systeem. CSS-variabelen of design-tokens, niet ergens in een Figma-bestand vergeten.

Bloomsite herinnert eraan dat de schaal pas werkt als hij overal wordt aangehouden, ook in CMS-velden waar contentredacteuren tekst typen. Leg de groottes vast in vooraf ingestelde stijlen, niet als instelbare waardes per blok, anders ontstaat alsnog willekeur in de praktijk.

Toepassen: de blueprint

Vul de Schaal Blueprint in: één A4 met je basisgrootte, ratio en de daaruit volgende vier of vijf groottes voor desktop en mobiel. Eén pagina, in tien minuten klaar.

De eerste actie kost vijf minuten: kies een basisgrootte van 16 of 18 en een ratio van 1,25, en bereken de vier groottes hardop. Vergelijk met je huidige h1, h2 en h3. Wijken ze af, dan weet je dat je vandaag je CSS-variabelen aanpast en de pagina visueel kalmer wordt.