Typografische hiërarchie: titel en bodytekst in balans

Een goede typografische hiërarchie stuurt het oog van de lezer moeiteloos over de pagina: eerst de titel, dan de tussenkop en ten slotte de bodytekst. Wat die volgorde bepaalt, is zelden kleur of versiering; meestal komt het neer op verschillen in grootte en gewicht. In dit artikel laat ik stap voor stap zien hoe je titel en body in balans brengt, welke verhoudingen je kiest en hoe je dat in CSS onderhoudbaar opschrijft.

Waarom hiërarchie op grootte en gewicht steunt

Wanneer je een stuk tekst opent, vangt je oog eerst het grootste en donkerste element. Het brein markeert dat als "belangrijk" en begint daar te lezen. Hiërarchie is dus eigenlijk een prioriteitskaart: als ontwerper zeg je tegen de lezer "kijk hier, dan daar." Dat doe je met drie kerngereedschappen:

• Grootte (font-size): het grootste wordt eerst gelezen. Het is het sterkste en snelst waargenomen signaal.
• Gewicht (font-weight): zelfs bij dezelfde grootte komt vette tekst naar voren. Zo voeg je nadruk toe zonder de grootte te veranderen.
• Witruimte: de ruimte boven een kop scheidt hem van het vorige blok en geeft het signaal "nieuwe sectie."

Kleur en cursief helpen ook, maar grootte en gewicht dragen het skelet. Een goede hiërarchie blijft werken, zelfs als je de pagina in grijswaarden afdrukt.

Een schaal kiezen: gebruik een typografische verhouding

Kies kopgroottes niet willekeurig, maar gebruik een modulaire schaal. Je stelt een basisgrootte in (meestal 16px / 1rem voor de body) en vermenigvuldigt elk hoger niveau met een vaste verhouding. Gangbare verhoudingen zijn 1,2 (kleine terts), 1,25 (grote terts) en 1,333 (reine kwart). Grotere verhoudingen voelen dramatischer, kleinere kalmer.

:root {
  --text-base: 1rem;     /* 16px body */
  --ratio: 1.25;
  --text-sm:  calc(var(--text-base) / var(--ratio));
  --text-lg:  calc(var(--text-base) * var(--ratio));
  --text-xl:  calc(var(--text-lg)  * var(--ratio));
  --text-2xl: calc(var(--text-xl)  * var(--ratio));
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p  { font-size: var(--text-base); }

De winst is consistentie: omdat alle groottes wiskundig samenhangen, oogt de pagina "gestemd." Je verandert de verhouding op één plek en schaalt de hele hiërarchie in één keer opnieuw.

Vloeiende typografie: meeschalen met het scherm

Op mobiel kan een kop van 48px het scherm overspoelen, terwijl dezelfde kop op desktop klein kan ogen. In plaats van vaste media queries stapelen, is een vloeiende schaal met clamp() veel schoner:

h1 {
  /* min, voorkeur (viewport-afhankelijk), max */
  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
  line-height: 1.1;
}

clamp() houdt de kop op 2rem op kleine schermen, laat hem op grote schermen nooit boven 3,5rem komen en interpoleert daartussen soepel op basis van de viewportbreedte. Voor bodytekst is een vloeiende schaal meestal overbodig; een vaste basis van 16–18px is op de meeste apparaten het prettigste leesbereik.

Bodytekst leesbaar houden

Als de helft van de hiërarchie de koppen zijn, is de andere helft de body. Hoe opvallend de kop ook is, bodytekst die niet gelezen wordt, laat het ontwerp instorten. Een paar stevige regels:

• Regellengte: 50–75 tekens per regel is het prettigste bereik. In CSS begrens je dat praktisch met max-width: 65ch;.
• Regelhoogte: line-height: 1.5–1.6 is ideaal voor de body. Koppen mogen strakker (1,1–1,25), want ruime regelafstand oogt rommelig bij grote groottes.
• Contrast: bodytekst in zeer donkergrijs (bijv. #1a1a1a) in plaats van puur zwart vermindert oogvermoeidheid, maar houd de WCAG-contrastdrempel aan (minstens 4,5:1).
• Consistent ritme: koppel de ruimte tussen alinea's aan de regelhoogte; willekeurige margin-waarden breken het verticale ritme.

Gewicht en contrast: de balans vinden

Grootte draagt niet als enige de balans tussen kop en body; gewicht telt evenzeer. Een klassieke fout is een kop die zowel groot als heel zwaar is (bijv. 800) combineren met een zeer dunne body (300) — dat contrast voelt onevenwichtig en "schreeuwerig." Een veiliger recept:

• Gebruik 400 (regular) voor de body; 300 oogt te bleek in lange tekst.
• 600–700 is genoeg nadruk voor koppen; het grootteverschil trekt al de aandacht.
• Gebruik <strong> en <em> voor nadruk; alles vet maken benadrukt niets.

Meng je twee lettertypes (bijv. serif voor koppen, sans-serif voor body), beperk het tot twee en zorg dat hun x-hoogtes op elkaar aansluiten. In de meeste gevallen geven verschillende gewichten van één familie het strakste resultaat.

De hiërarchie testen

Je kunt de hiërarchie van een ontwerp met twee snelle tests valideren. Eerst de knijptest: knijp je ogen samen naar het scherm; als de tekst vervaagt, zouden alleen de grote/donkere elementen onderscheidbaar moeten blijven, en de leesvolgorde moet nog steeds logisch zijn. Daarna de grijswaardentest: zet de kleur uit; werkt de hiërarchie nog op grootte en gewicht alleen, dan is ze solide. Voor toegankelijkheid: gebruik kopniveaus (h1 → h2 → h3) volgens de semantische volgorde, niet de visuele grootte; schermlezers navigeren door deze structuur.

Veelgestelde vragen

Hoeveel verschillende groottes moet ik op een pagina gebruiken?

Meestal is 4–6 genoeg: één hoofdtitel, twee of drie tussenkopniveaus, body en een kleine/hulptekst. Meer dan dat vervaagt de hiërarchie in plaats van haar te verhelderen; elk extra niveau vraagt de lezer om nóg een beslissing.

Moet ik px of rem gebruiken?

Geef de voorkeur aan rem voor lettergroottes: het respecteert de lettervoorkeur in de browser van de gebruiker en verbetert de toegankelijkheid. px kun je gebruiken voor kleine details die echt vast moeten blijven, zoals een rand.

Is het een probleem om hetzelfde lettertype voor kop en body te gebruiken?

Nee — het is zelfs vaak de veiligste keuze. Met verschillende groottes en gewichten van één familie bouw je een sterke hiërarchie. Twee lettertypes mengen vergt vakmanschap, en een slechte combinatie oogt amateuristisch.

Typografische hiërarchie is de stille maar meest bepalende laag van het ontwerp. Wil je dat grootte, gewicht en witruimte samen als één systeem voor je merk werken, neem dan contact op — dan bouwen we samen een leesbaar, gebalanceerd en schaalbaar typografisch systeem.