Op je website kunt u niet altijd het lettertype toepassen dat je gebruikt voor drukwerk. Je kunt alleen lettertypes gebruiken die op de computer van je bezoekers geïnstalleerd zijn. Je kunt voor je website wel andere lettertypes gebruiken, maar dan zien bezoekers die dat lettertype niet op hun computer hebben geïnstalleerd de website niet zoals jij die hebt bedoeld.
Web-safe fonts
De onderstaande ‘standaard’ fonts kun je altijd gebruiken, want die zijn op elk platform (Windows, Mac en Linux) beschikbaar. Ze worden ook wel ‘web safe’ fonts genoemd.
- Arial, Helvetica, sans-serif
- Arial Black, Gadget, sans-serif
- Comic Sans MS, Textile, sans-serif
- Courier New, Courier, monospace
- Georgia, Times, Times New Roman, serif
- Impact, Charcoal, sans-serif
- Lucida Console, Monaco, monospace
- Lucida Sans Unicode, Lucida Grande, sans-serif
- MS Sans Serif, Geneva, sans-serif
- MS Serif, New York, serif
- Palatino Linotype, Book Antiqua, Palatino, serif
- Tahoma, Geneva, sans-serif
- Times New Roman, Times, serif
- Trebuchet MS, Helvetica, sans-serif
- Verdana, Geneva, sans-serif
Koppen in het lettertype van je huisstijl
Plaatjes
De beperking in het gebruik van lettertypes geldt alleen voor de hoofdtekst in je website, de tekst die je kunt selecteren met de muis. Voor logo’s, plaatjes en knoppen kunt je elk willekeurig lettertype gebruiken, zolang je er maar een plaatje van maakt. Nadeel van het gebruik van plaatjes is dat ze niet leesbaar zijn voor zoekmachines. Beperk daarom het gebruik van plaatjes voor de knoppen en de menu’s zo veel mogelijk.
Flash Replacement
sIFR (Scalable Inman Flash Replacement) is een techniek waarbij de teksten van een website door middel van Flash worden omgezet naar het gewenste lettertype, ongeacht of het op de computer van de bezoeker aanwezig is. De kopjes worden bij het gebruik van sIFR opgebouwd uit tekst, maar na het laden van de pagina worden ze met JavaScript vervangen door een Flash-object, waarin wel andere fonts gebruikt kunnen worden dan de ‘web safe’-lettertypes. Een nadeel is dat het standaard font na het laden vervangen wordt door het Flash-object, waardoor de tekst soms flikkert.
Google font directory
Op Google fonts kunt je een groot aantal fonts inladen op je website. De lijst met beschikbare fonts is groot. De Google font directory is heel gebruiksvriendelijk: met slechts één regel code voeg je één of meerdere fonts toe aan een webpagina.
CSS @font-face
Met @font-face kun je elk gewenst font direct in je website embedden. Met de handige @font-face generator maak je in één muisklik een kit met alle nodige formaten van een lettertype. Hier staat een uitgebreide handleiding: Nice Web Type/How to use CSS @font-face.
Typekit
Voor dit artikel heb ik bij Typekit een gratis trial account aangemaakt. Je mag dan op één website 2 (van de 134) fonts gebruiken en moet een reclame button voor lief nemen. Na aanmelding volg je stap voor stap de instructies op de website. Het werkt heel makkelijk. Betaalde accounts zijn zeer redelijk geprijsd. Typekit werkt met javascript en op alle browsers.
Gratis?
Niet ieder lettertype mag je zomaar vrij gebruiken als embedded font op een website. Kijk hiervoor dus eerst de licentie van het font na. Op Font Squirrel en Google fonts staan veel lettertypen die gratis commercieel mogen worden gebruikt. Of kijk eens hier: 70+ beste, gratis Nederlandse lettertypen voor designers – vrij commercieel gebruik in 2020.