Typografie op het web

Typografie voor het web is heel wat anders dan typografie voor gedrukte media. Als drukwerk eenmaal af is geldt: "What you see is what you get". Voor het web geldt dat iedere computer, browser, besturingssysteem en beeldscherm een website anders kan weergeven. Dat geldt ook voor de tekst.

In 1991 ontstond het World Wide Web. In de eerste versie van HTML was er geen sprake van web typografie.

In 1995 introduceerde Netscape het <font> tag en kon je voor het eerste kiezen welk lettertype je op je website wilde gebruiken. Echter moest dit lettertype dan wel op de computer van de bezoeker geïnstalleerd zijn, anders werd er een alternatief weergegeven. De mogelijkheden waren nog steeds erg beperkt, want je kon alleen de zogenaamde websafe fonts gebruiken, als Arial en Verdana. Als je al een apart lettertype wilde gebruiken, werd dat vaak gedaan met afbeeldingen, maar dat was slecht voor de vindbaarheid, zeer bewerkelijk en totaal niet onderhoudsvriendelijk.

Tegenwoordig is dat iets anders. De browsers van nu ondersteunen namelijk - vooral met de opkomst van CSS3 - meer mogelijkheden om onze webpagina's tot leven te laten komen met geweldige typografie.

Bezoekers komen op je website voor informatie, om er iets te doen. Daarvoor moeten zij wel kunnen lezen wat hen aangeboden wordt. Zo niet, dan verlaten ze je site weer snel. Om ervoor te zorgen dat de tekst goed leesbaar is, kun je rekening houden met de volgende vier aspecten:

Zorg voor voldoende contrast tussen letters en achtergrondkleur. Er zijn bepaalde richtlijnen die aangeven wanneer het contrast voldoende groot is.

Een goede test is om de pagina om te zetten naar grijswaarden, zie bijvoorbeeld de test op www.graybit.com. Is de website dan nog goed te lezen, dan is het contrast voldoende. Kleurcontrasten kun je bijvoorbeeld checken op www.snook.ca.

Vanuit het vormgeven van kranten, folders, brochures en dergelijke werd altijd de voorkeur gegeven aan een wat kleinere letter. Iedere centimeter papier kostte namelijk meer. Voor het web geldt niet dat een centimeter meer ruimte meer geld kost. Ook lees je op een beeldscherm heel anders en heb je een grotere letter nodig. Daarnaast worden letters op verschillende apparaten anders weergegeven omdat de pixelgrootte van een beeldscherm niet altijd even groot is.

Door te variëren in grootte van lettertype en het gebruik van verschillende stijlen kan een zekere hiërarchie in de pagina ontstaan. Je kunt dan bijvoorbeeld denken aan alles in hoofdletters, het gebruik van cursief, het combineren van een serif font met een sans serif font.

Als je dit consequent toepast, wordt het relatieve belang van bepaalde elementen op je webpagina's aan je bezoekers duidelijk.

Ben niet bang voor wat witruimte op je webpagina. Witruimtes als rustpunten op de site zijn essentieel voor de leesbaarheid. Voldoende ruimte tussen de regels maakt dat een site lekker leest en geeft tevens rust. Geadviseerd wordt om een regelafstand van 140% van je tekstgrootte te gebruiken.

Voor webtypografie kan men zich het beste beperken tot lettertypes die op een beeldscherm het beste gelezen kunnen worden.

Schreefloze (sans-serif) lettertypes lenen zich het beste voor langere teksten. Zo is Verdana speciaal voor het beeldscherm ontworpen.

Schreven (serif, zoals Times) zijn op papier heel goed te lezen, maar op een beeldscherm verliest deze typische krantenletter al gauw zijn specifieke kenmerken. Door pixelomzetting op een beeldscherm kunnen de subtiele verschillen in dik en dun van de schreef niet goed worden weergegeven. Georgia is een schreefletter die speciaal voor het beeldscherm ontworpen is en wel goed leesbaar is.

De laatste jaren worden steeds meer speciale fonts ontworpen die geschikt zijn (of worden gemaakt) voor het beeldscherm. De kunst is om op een paar pixels een consistent letterbeeld te creëren waarbij het onderscheid tussen de afzonderlijke karakters nog duidelijk waarneembaar is.

Door het opnieuw oppakken van een techniek als @font-face in CSS3 en webfontdiensten als Google Web Fonts wordt het voor webbouwers steeds gemakkelijker om speciale lettertypes op websites toe te passen.

Tegenwoordig kunnen we kiezen uit honderden fonts die je zonder problemen en helemaal legaal kunt gebruiken op je website en die getoond kunnen worden op welk beeldscherm dan ook.

Geïnspireerd door het artikel A Guide to Webtypography.