Aparte lettertypes op je website
Op je website kunt je 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 je die hebt bedoeld.
Web-safe fonts
De onderstaande ‘standaard’ fonts kunt 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 koppen 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 koppen 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
Via de Google font directory kunt je een aantal fonts inladen op je website. De lijst met beschikbare fonts is nog wel klein (momenteel 19). De Google font directory is heel gebruiksvriendelijk: met slechts één regel HTML code voegt je één of meerdere fonts toe aan een webpagina.
CSS @font-face
Met @font-face kunt je elk gewenst font direct in je website embedden. Met de handige @font-face generator maakt 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 staan veel lettertypen die gratis commercieel mogen worden gebruikt.
Voorbeelden
Op mijn website http://www.alva-design.com/tips/aparte-lettertypes-op-uw-website/ staan voorbeelden van Google font directory, CSS @font-face en Typekit.