Welk lettertype of font kan ik gebruiken?

Op een website kunnen niet alle lettertypen (in het Engels font genoemd) gebruikt worden die op uw eigen computer staan. De reden is simpel: een website kan alleen worden weergegeven met behulp van de fonts die op de computer staan van de bezoeker van de website. Niet ieder besturingssysteem (zoals Windows, Mac-OS, Linux, IOS, Android) en zelfs niet iedere versie van hetzelfde besturingssysteem beschikken over dezelfde fonts. Vaak zijn wel een aantal ongeveer dezelfde fonts aanwezig, maar hebben deze (wegens auteursrechten) een andere naam.

Het te gebruiken lettertype wordt bij voorkeur vastgelegd in een CSS bestand - vaak „style.css” genoemd - met de definitie: „font-family”. Voor verschillende HTML-elementen kan hiermee een eigen lettertype worden vastgelegd. De definitie geeft meestal meer dan één lettertypenaam: de webbrowser leest deze van links naar rechts en gebruikt het eerste font dat op de betreffende computer aanwezig is. Verstandig is om als laatste naam „altijd” de generieke naam (in het Engels) op te geven. Goede combinaties voor de meest gebruikte browsers zijn, rekening houdend met de naamverschillen, in groepen onderverdeeld.

Soorten fonts

Er zijn 3 soorten fonts: sans-serif (zonder schreef), serif (met schreef) en vaste breedte. Het verschil tussen de twee soorten serif is duidelijk in het onderstaande plaatje.

Als vuistregel geldt het volgende: op gedrukte pagina’s hebben lettertypes met schreef de voorkeur. Schreefloze lettertypes komen het beste over op een beeldscherm. De reden is simpel: het aantal gebruikte pixels op een beeldscherm is (veel) lager.

De diverse lettertypes zijn zoveel mogelijk in de juiste opmaak weergegeven.

  • Met schreef (Engels: serif):
    • font-family: „Times New Roman”, Times, Georgia, „Bitstream Vera Serif”, serif;
    • font-family: Times, „Times New Roman”, Georgia, „Bitstream Vera Serif”, serif;
    • font-family: Georgia, „Times New Roman”, „Bitstream Vera Serif”, serif;
  • Schreefloos (Engels: sans-serif):
    • font-family: Verdana, Tahoma, Arial, Helvetica, „Bitstream Vera Sans”, sans-serif;
    • font-family: Tahoma, Verdana, Arial, Helvetica, „Bitstream Vera Sans”, sans-serif;
    • font-family: Helvetica, Arial, „Bitstream Vera Sans”, sans-serif;
    • font-family: Arial, Helvetica, „Bitstream Vera Sans”, sans-serif;
  • Vaste lettergrootte (Engels: monospace):
    • font-family: „Bitstream Vera Sans Mono”, „Courier New”, monospace;
  • Decoratieve lettertypes (Engels: decorative fonts)
    Soms zien ze vreemd uit; in het algemeen zijn ze niet uitwisselbaar tussen de diverse besturingssystemen / versies. Gebruik ze daarom alleen bij uitzondering! Maak er dan bij voorkeur een afbeelding van.

Meer informatie over overeenkomende lettertypes tussen Windows en de Mac is op deze pagina te vinden. De tekst is in het Engels, maar de tabel is goed leesbaar zonder Engels te kennen.

Attentie: meestal is het niet wenselijk om veel verschillende lettertypes op eenzelfde pagina te gebruiken. Dat is onrustig.

Lees ook: Zeven simpele regels voor het opmaken van tekst op een website en Webtypografie: speciale fonts voor de website.