Je landt op een pagina waar elk tekstblok schreeuwt om aandacht: titels in felle lettertypes, paragrafen in een te kleine serif, en tussentitels die nergens op aansluiten. Vermoeiend, toch? Dat kun je voorkomen met een doordachte typografische hiërarchie: een samenhangend samenspel van lettertypes, groottes en weergaves, waarmee je je content niet alleen leesbaar, maar ook visueel aantrekkelijk maakt.

Stel: je kiest voor een vriendelijk, modern schreefloos lettertype voor je hoofdtitels—bijvoorbeeld Montserrat—en een rustige, goed leesbare serif zoals Merriweather voor je alinea’s. Zodra bezoekers je site openen, vallen ze meteen op de juiste plekken: de grote koppen vertellen hen waar elke sectie over gaat, tussentitels breken de tekst in hapklare brokken, en de bodytekst nodigt uit om te lezen.

Om de hiërarchie strak te houden, gebruik je in je CSS variabelen of een schaalmethode zoals de modular scale. Kies een basislettergrootte (bijv. 16px) en definieer je koppen op basis van vaste ratio’s: H1 op 2,5×, H2 op 2×, H3 op 1,5×, enzovoort. Zo blijft het contrast consistent en hoeven bezoekers niet te gokken welke tekst primair is.

Naast grootte zorg je met font-weight en letter-spacing voor extra nuance. Een iets zwaardere H2-bank (bijv. 600) en subtiele tracking op de H1 trekken de aandacht zonder te overheersen. Combineer dit met voldoende witruimte rondom koppen en paragrafen, zodat tekstblokken rust krijgen en de ogen van je lezers moeiteloos van de ene naar de andere sectie glijden.

Typografie is echter niet alleen styling—het is ook performance. Webfonts kunnen laadtijden vertragen als je er te veel kiest. Gebruik daarom een beperkt aantal varianten en laad ze slim in via font-display: swap. Zo zien bezoekers direct systeemfonts terwijl je custom fonts laden, zonder dat je layout dreigt te verschuiven.

Voor kant-en-klare typografietemplates en inspiratie voor lettertype-combinaties kun je terecht op WebsiteCompleet, waar je praktische voorbeelden vindt die je direct kunt toepassen.