Je kunt nog zo’n mooi lettertype voor je site uitzoeken, maar als je een wat meer exotische variant kiest, dan kan het zijn dat je ontwerp bij anderen veel minder smoelt. De reden: browsers laden een lettertype dat op een computer of smartphone is geïnstalleerd. En op jouw computer staan vast andere lettertypes (of fonts) dan bij mij. Kortom, ik zie jouw site mogelijk anders dan jij. Maar niet getreurd, er zijn enkele font-families die redelijk veilig zijn om te gebruiken, de zogeheten websafe fonts. Een overzicht.
Eerst even een klein uitstapje om in het achterhoofd te houden bij je keuze. Je zou lettertypes grofweg in de volgende categorieën kunnen onderverdelen:
- – Serif, ofwel de schreefletter, te herkennen aan de lijntjes (schreven) aan de uiteinden van letters. Een voorbeeld is Times New Roman. Een dergelijk lettertype zie je van oudsher veel bij langere stukken tekst. Sla maar eens een krant open. Woorden en letters lijken meer afgebakend, de karakters meer onderscheidend van elkaar, waardoor een dergelijke tekst makkelijker moet zijn te lezen. Hoewel niet iedereen fan is van schreefletters op een beeldscherm.
- – Sans-serif, ofwel de schreefloze letter, de wat ronder lopende letters. Voorbeelden zij Helvetica en Arial. Of de letters die je nu leest. Schreefloze letters worden vaak toegepast in titels en logo’s, maar denk ook aan bewegwijzering. Tegenwoordig worden ook langere teksten opgemaakt in sans-serif lettertypen.
- – Monospace, lettertypes waarbij elk karakter een zelfde breedte heeft. Aan de ene kant heb je de typemachine-achtige Egyptienne (zoals Courier), aan de andere kant heb je ook schreefloze fonts. Met name geschikt voor situaties waarin een vaste breedte wordt verlangd, zoals programmeertalen. Maar ook chocoladeletters zijn vaak monospace (de egyptienne-variant). Uiteraard, want hoe beteuterd zou Ilse zijn als ze ziet dat haar broer Wouter een veel bredere letter krijgt!
- – Display, de vrije en creatieve lettertypes. Bedoeld voor kreten en koppen.
- – Schrift, de handgeschreven lettertypes, bedoeld voor creatieve uitspattingen. Maar niet voor lange teksten.
Tot zover het theorie-uitstapje. Onderstaand een overzicht van lettertypefamilies die websafe zijn te noemen:
Serif Fonts
Georgia, serif
Dit is een kop
Dit is platte tekst
‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif
Dit is een kop
Dit is platte tekst
‘Times New Roman’, Times, serif
Dit is een kop
Dit is platte tekst
Sans-serif Fonts
Arial, ‘Helvetica Neue’, Helvetica, sans-serif
Dit is een kop
Dit is platte tekst
‘Arial Black’, Gadget, sans-serif
Dit is een kop
Dit is platte tekst
Impact, Charcoal, ‘Helvetica Inserat’, ‘Bitstream Vera Sans Bold’, ‘Arial Black’, sans-serif
Dit is een kop
Dit is platte tekst
‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif
Dit is een kop
Dit is platte tekst
Tahoma, Geneva, sans-serif
Dit is een kop
Dit is platte tekst
‘Trebuchet MS’, Helvetica, sans-serif
Dit is een kop
Dit is platte tekst
Verdana, Geneva, sans-serif
Dit is een kop
Dit is platte tekst
Monospace Fonts
‘Courier New’, Courier, monospace
Dit is een kop
Dit is platte tekst
‘Lucida Console’, Monaco, monospace
Dit is een kop
Dit is platte tekst
Even ter verduidelijking, je kiest dus niet een enkel lettertype, maar een reeks gelijkende lettertypes. De css-code ziet er bijvoorbeeld als volgt uit:
font-family: 'Trebuchet MS', Helvetica, sans-serif;
Je browser probeert eerst Trebuchet MS op je systeem te vinden. Mocht deze font niet worden aangetroffen, dan wordt Helvetica opgehaald. Heb je ook dit lettertype niet, dan pakt je browser een sans-serif lettertype dat wel op jouw systeem staat.
Nu denk je misschien: leuk Lex, maar ’t is hierboven allemaal net niet wat ik zoek. Je hebt mazzel, er zijn online allerlei oplossingen voorhanden. Voorbeelden zijn diensten als Google Fonts en Font Squirrel. Hier vind je vele prachtige lettertypes. Vooral Google Fonts maakt het je makkelijk. Je importeert met een stukje code het lettertype van jouw keuze en iedereen die jouw site bezoekt laadt ditzelfde scriptje.
Recente reacties