Tekst is veruit het grootste deel van vrijwel elke website, en toch krijgt typografie vaak de minste aandacht. Een willekeurig lettertype, hier en daar een afwijkende grootte, en het geheel oogt rommelig zonder dat je precies kunt aanwijzen waarom. Een typografisch systeem lost dat op: door lettertypes te kiezen, schaalverhoudingen te bepalen en regels voor koppen, tekst en bijschriften vast te leggen, krijgt elke pagina vanzelf ritme en samenhang. Deze gids laat zien hoe je zo'n systeem opzet, zodat leesbaarheid en herkenbaarheid hand in hand gaan.
Waarom een systeem in plaats van losse keuzes
Veel sites kiezen typografie per pagina of zelfs per onderdeel: hier een grotere kop, daar een ander lettertype omdat het zo uitkwam. Het resultaat is een site die nergens echt fout is maar overal net niet klopt. Een systeem keert dat om: je legt eenmaal de regels vast en past ze overal toe.
Dat geeft niet alleen rust in het beeld, maar ook in het werk: nieuwe pagina's volgen vanzelf het patroon. Het sluit aan op de gedachte uit de gids over een visuele identiteit opbouwen, waar consistentie de lijm is die alles bij elkaar houdt.
Lettertypes kiezen
De basis van het systeem is de keuze van een of twee lettertypes. Meer is zelden nodig en maakt het beeld onrustig. Vaak werkt een combinatie van een karaktervol lettertype voor koppen en een rustig, goed leesbaar lettertype voor lopende tekst, of zelfs een enkele familie met verschillende diktes.
- Karakter voor koppen. Een lettertype dat sfeer draagt en je merk versterkt.
- Rust voor tekst. Een letter die comfortabel leest in lange stukken.
- Een duidelijke rol per lettertype. Niet door elkaar gebruiken, maar elk op zijn plek.
Hoe je lettertypes kiest die op het scherm goed werken, behandel ik in typografie op het web. Let daarbij ook op snelheid: elk extra lettertype is een bestand dat geladen moet worden, zie snelheid en design.
Een schaal bepalen
Het kloppende ritme van een pagina komt uit een typografische schaal: een vaste reeks groottes met onderlinge verhoudingen. Een H1, een H2, lopende tekst en een bijschrift krijgen elk een vaste grootte, en die verhoudingen herhaal je overal. Zo ontstaat een duidelijke hierarchie zonder dat je per pagina hoeft na te denken.
Een schaal voorkomt willekeur: niet zomaar een grootte die toevallig mooi leek, maar een waarde uit je systeem. Die ordening hangt nauw samen met visuele hierarchie, het sturen van de aandacht via grootte en contrast, behandeld in visuele hierarchie.
Ritme en regelafstand
Typografie gaat niet alleen over de letters zelf, maar net zo goed over de ruimte eromheen. De regelafstand, de afstand tussen alinea's en de ruimte boven en onder koppen bepalen of een pagina ademt of verstikt. Te krappe regels lezen vermoeiend; te veel ruimte maakt de samenhang los.
Een goed systeem legt ook die afstanden vast, zodat het ritme over de hele site gelijk blijft. Die rust door consistente ruimte werk ik verder uit in ritme door spacing en in de gids over een conversiegerichte website ontwerpen, waar leesbaarheid de bezoeker op de pagina houdt.
Leesbaarheid bewaken
Hoe mooi je systeem ook is, het faalt als de tekst niet prettig leest. Leesbaarheid hangt af van lettergrootte, regellengte, contrast en de letter zelf. Een regel die op een breed scherm eindeloos doorloopt, is lastig te volgen; lichtgrijze tekst op wit oogt strak maar leest slecht.
Een typografisch systeem houdt daar rekening mee door grenzen te stellen: een maximale tekstbreedte, een minimale grootte, voldoende contrast. Die eisen overlappen met toegankelijkheid, behandeld in de gids over toegankelijkheid en WCAG in de praktijk. Wat leesbaar is voor wie slecht ziet, is comfortabel voor iedereen.
Het systeem vastleggen
Een typografisch systeem is pas waardevol als het is vastgelegd en overal wordt toegepast. Door je lettertypes, groottes, gewichten en afstanden te documenteren, blijft je site samenhangend, ook als hij groeit of als anderen content toevoegen. Dat hoeft geen ingewikkeld document te zijn: een heldere set regels volstaat.
Voor een groeiende site loont het om die regels onderdeel te maken van een breder geheel. Hoe je typografie, kleur en componenten samenbrengt tot een herbruikbaar systeem, lees je in een designsysteem voor een klein bedrijf.
Zelf doen of uitbesteden?
Een eenvoudig typografisch systeem kun je met aandacht zelf opzetten, zeker met de gratis lettertypes die er zijn. De kunst zit in het uitbalanceren: lettertypes die bij elkaar passen, een schaal met het juiste ritme en leesbaarheid die overal klopt. Wie dat uitbesteedt, koopt vooral dat geoefende oog en een systeem dat meegroeit. Bekijk de dienst webdesign of een designsysteem en stijlgids, of neem vrijblijvend contact op.
Veelgestelde vragen
Voor de meeste sites zijn een of twee lettertypes ideaal: een voor koppen en een voor lopende tekst, of zelfs een enkele familie met verschillende diktes. Meer maakt het beeld onrustig en vertraagt de site. Beperking geeft juist een herkenbaar, professioneel ritme.
Een typografische schaal is een vaste reeks tekstgroottes met onderlinge verhoudingen: bijvoorbeeld de grootte van een H1, H2, lopende tekst en bijschrift. Door die verhoudingen vast te leggen, krijgt je site ritme en hierarchie, en oogt elke pagina vanzelf samenhangend.
Het kan, als je veel lettertypes of veel diktes laadt. Elk extra lettertype is een bestand dat geladen moet worden. Door je tot een of twee families en alleen de gebruikte diktes te beperken, houd je de site snel zonder in te leveren op uitstraling.
Niet per se. Er zijn uitstekende gratis lettertypes die professioneel ogen en goed leesbaar zijn. Een betaald lettertype kan onderscheidend zijn, maar de keuze hangt af van je merk en budget. Belangrijker dan de prijs is dat het lettertype past en consistent wordt toegepast.
Verder in de kennisbank: Een kleurpalet samenstellen voor het web · Een visuele identiteit opbouwen · Webdesign: de complete gids