typografie op het web

Typografie op het web: wat kun je er mee?

Door gebruik te maken van de kracht van typografie kan een website een heel andere stijl krijgen en met kleine aanpassingen kun je grote resultaten boeken!


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.

Een stukje geschiedenis over typografie

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

Netscape introduceerde in 1995 het <font> tag en daarmee kon je voor het eerst 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.

Tekst moet leesbaar zijn

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:

Contrast

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 (17 december 2015: deze test bestaat helaas niet meer op de eerder genoemde link). Is de website dan nog goed te lezen, dan is het contrast voldoende. Kleurcontrasten kun je bijvoorbeeld checken op www.snook.ca.

Typografie op het web - contrast

Grootte

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.

Typografie op het web - grootte

Hiërarchie

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.

Typografie op het web - hierarchie

Witruimte

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.

Typografie op het web - witruimte

Lettertype kiezen

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.

Webfonts

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.

Typografie op het web - voorbeeld

Geïnspireerd door het artikel A guide to Web typography van John Boardley.

2 reacties
    • Monique
      Monique zegt:

      Hoe je typografie op jouw website gebruikt, hangt uiteraard af van wat bij jou en je doelgroep past en wat je met je website wilt bereiken. Als je eens wat hulp wilt, kun je me dat natuurlijk laten weten.

      Beantwoorden

Plaats een Reactie

Wil je op dit artikel reageren?
Hieronder kun je jouw reactie achterlaten!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *