web / design / redactie / communicatie / advies

Lettertypes voor het web

Afbeelding van My Darling Clementine (1946), met Henry Fonda, een western gebaseerd op het leven van revolverheld Wyatt Earp. Zoals je ziet wordt er aardig geëxperimenteerd met lettertypes. Bron: 20th Century Fox

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, sans-serif

Dit is een kop

Dit is platte tekst

“Arial Black”, Gadget, sans-serif

Dit is een kop

Dit is platte tekst

“Comic Sans MS”, cursive, sans-serif

Dit is een kop

Dit is platte tekst

Impact, Charcoal, 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 er eerst Trebuchet MS bij te pakken. 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. Zoals in het geval van mijn handtekening hieronder.

Over de openingsfoto: Afbeelding van My Darling Clementine (1946), met Henry Fonda, een western gebaseerd op het leven van revolverheld Wyatt Earp. Zoals je ziet wordt er aardig geëxperimenteerd met lettertypes. Bron: 20th Century Fox

Alexander is werkzaam voor onder andere:

Logo mountainbikemagazine Up/Down

Logo mountainbikemagazine Up/Down

Cafe Lokaal Heemskerk

Cafe Lokaal Heemskerk

Wielrenblad, eindredactie

Logo Wielrenblad, eindredactie

Logo Soul Media

Logo Soul Media

Psychologisch.nu, psychologieblog

Psychologisch.nu, psychologieblog