Je hebt geen duizenden lettertypen nodig om een mooie website te bouwen. Maar je moet er wel voor zorgen dat de lettertypen die je gebruikt zichtbaar en leesbaar zijn voor al je bezoekers. Web safe fonts helpen je daarbij.
Kan je een web safe font vinden dat a) 100% gratis te gebruiken is en b) niet ergens anders gehost hoeft te worden, dan ben je helemaal binnen.
Dat is precies waar dit artikel voor geschreven is: we zullen het hebben over de 31 mooiste web safe fonts en laten je precies zien hoe je die implementeert op je WordPress website.
Gebruik de links aan de zijkant om direct naar het deel te navigeren dat je het meest interessant vindt, of ga meteen door naar onze lijst met web safe fonts.
Welke lettertypen zijn web safe?
Online zijn meer dan 650,000 verschillende lettertypen te vinden, inclusief variaties binnen lettertypen. Lettertypen die ondersteund worden door de meeste webbrowsers en besturingssystemen, noemen we web safe en staan bekend als “web safe fonts”. Elk besturingssysteem bevat van zichzelf bestanden voor bepaalde lettertypen, waardoor bezoekers dus geen lettertypen meer van je server hoeven te downloaden.
Een voorbeeld hiervan is het welbekende Arial lettertype, dat inmiddels duizenden “spin-offs” heeft.
Zijn web safe fonts nog nodig in 2024?
De meeste gebruikers hebben tegenwoordig Google Chrome, zowel op mobiel als desktop. Maar dat betekent nog niet dat web safe fonts nu tot het verleden behoren.
Ondersteunde lettertypen variëren in feite per besturingssysteem, inclusief de specifieke versie van een besturingssysteem dat een gebruiker gebruikt. Als je dus een website ontwerpt met een lettertype dat alleen ondersteund wordt door de nieuwste versie van Windows 10, zullen veel van je gebruikers iets anders te zien krijgen dan je wil.
Daarnaast, als je ervoor kiest om je eigen lokale lettertype te gebruiken en te hosten, of één die extern gehost wordt, kan dit je website trager maken. Overstappen naar web safe fonts maakt je website sneller. En dat is natuurlijk altijd goed. Zeker als je bedenkt dat bijna 70% van de consumenten zegt dat paginasnelheid hun aankoopbeslissingen beïnvloedt.
Zijn Google Fonts web safe?
Google Fonts worden niet per se ondersteund door je besturingssysteem, en zijn dus per definitie niet web safe. Omdat Google ze als externe partij host, worden Google Fonts wel web fonts genoemd. Dat klinkt misschien ingewikkeld, maar het verschil is dat je browser meestal eerst een bestand moet laden voordat Google Fonts getoond kunnen worden.
Bij web safe fonts staan de benodigde bestanden dus al op de meeste apparaten. Dat het woord ‘safe’ mist is nog niet meteen reden tot zorg. Google Fonts zijn namelijk helemaal veilig om te gebruiken als ze bij het ontwerp van je website passen. Het nadeel is alleen dat de extra HTTP verzoeken naar een externe server je laadsnelheid iets kan vertragen.
De 31+ beste web safe fonts
We hebben een lijst gemaakt met meer dan dertig verschillende, mooie web safe fonts die je in je volgende ontwerp kan gebruiken.
Laten we er meteen mee beginnen:
1. Arial
Arial is een klassiek sans serif (ook wel: schreefloos) lettertype, geschikt voor zowel paragrafen met tekst als koppen. Dit is al langer een bekende optie binnen webdesign. De laatste jaren wordt het wel steeds vaker als reserveoptie gebruikt, in plaats van als de belangrijkste font-family.
Aangeraden font stack
Font-family: Arial, Helvetica Neue, Helvetica, sans-serif.
2. Baskerville
Baskerville is een vrij dik serif lettertype, ooit ontwikkeld als typeface door John Baskerville, in 1750. Het ontwerp is mooi gebalanceerd, met een mix van dikke en dunne streken om de harde randen van normale serif lettertypen wat te verzachten. Het wordt breed ondersteund door alle nieuwere Apple en Microsoft versies.
Aangeraden font stack
Font-family: Baskerville, Baskerville Old Face, Garamond, Times New Roman, serif.
3. Bodoni MT / Bodoni 72
Bodoni is een serif lettertype net als Times New Roman, dat bij de meeste websites geschikter is voor langere teksten dan voor de titels. Bodoni MT is standaard beschikbaar in Microsoft 10 en sommige oudere versies. Bodoni 72 zit bij macOS Sierra en nieuwere versies.
Aangeraden font stack
Font-family: Bodoni MT, Bodoni 72, Didot, Didot LT STD, Hoefler Text, Garamond, Times New Roman, serif.
4. Calibri
Calibri is het standaard sans serif lettertype van Microsoft en is dat al sinds de release bij Microsoft Office 2007. Het heeft een zachte, moderne look, met ronde randen om de typische sans serif hardheid wat te verzachten, waardoor het wat warmer aanvoelt.
Aangeraden font stack
Font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif.
5. Calisto MT
Calisto MT is een serif lettertype met wat zachtere en minder uitgesproken serifs dan de meeste soortgelijke lettertypen. Het is een standaard Microsoft lettertype, dat meegeleverd wordt bij de meeste moderne versies. Het equivalent voor macOS of iOS is Bookman Old Style.
Aangeraden font stack
Font-family: Calisto MT, Bookman Old Style, Bookman, Goudy Old Style, Garamond, Hoefler Text, Bitstream Charter, Georgia, serif.
6. Cambria
Cambria is een nog zachter serif lettertype, met bijna niet zichtbare schreven, zelfs bij de hoofdletters. Hierdoor voelt het wat moderner en houdt het ook een goede leesbaarheid op schermen.
Aangeraden font stack
Font-family: Cambria, Georgia, serif.
7. Candara
Candara is een sans serif lettertype. Het hoort bij de ClearType Font Collection van Microsoft. Het equivalent bij macOS en iOS is Optima Regular. De ongelijke streekdikte maakt het wat minder modern en zakelijk dan andere sans serif lettertypen.
Aangeraden font stack
Font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif.
8. Century Gothic
Century Gothic is een geometrisch sans serif lettertype, met een erg strakke en gebalanceerde look. Het is een ideaal lettertype voor het web, vooral voor koppen en subkoppen. Van origine was het bedoeld als concurrentie van Futura. Het zit bij de meeste besturingssystemen van Microsoft en Apple.
Aangeraden font stack
Font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif.
9. Consolas
Consolas is een sans serif lettertype met een unieke kijk op ontwerp. Alle tekens hebben dezelfde breedte, en daarom gebruiken ze serifs bij de letter “I” en de kleine “l”. Het hoort bij de ClearType Font Collection.
Aangeraden font stack
Font-family: Consolas, monaco, monospace.
10. Copperplate Gothic
Zoals de naam doet vermoeden is Copperplate Gothic geïnspireerd op een Gotische stijl, met lichte hiëroglief-achtige schreven op bepaalde letters. Door de inspiratie van Gotische runen is er geen lowercase beschikbaar.
Aangeraden font stack
Font-family: Copperplate, Copperplate Gothic Light, fantasy.
11. Courier New
Courier New is een slab serif lettertype met enkele afstand, met veel dunnere tekst dan de meeste andere serif en sans serif lettertypen. Het wordt bijna volledig gedekt door zowel Microsoft als Apple op zowel computers als mobiele apparaten.
Aangeraden font stack
Font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace.
12. Dejavu Sans
Dejavu Sans is een sans serif lettertype met strakke, rechte lijnen, en doet veel denken aan de klassieke sans lettertypen zoals Arial en Verdana.
Aangeraden font stack
Font-family: Dejavu Sans, Arial, Verdana, sans-serif.
13. Didot
Didot is een lettertype dat geïnspireerd is op de originele Didot drukletters zoals die werden gebruikt in de 19e eeuwse Franse drukkerij van de Didot familie. Het is een belangrijk Apple lettertype en wordt ondersteund door hun meeste besturingssystemen en apparaten.
Aangeraden font stack
Font-family: Didot, Didot LT STD, Hoefler Text, Garamond, Calisto MT, Times New Roman, serif.
14. Franklin Gothic
Franklin Gothic is een sans serif lettertype met ongebruikelijk dikke letters, haast zoals de dikgedrukte versies van andere lettertypen. Het originele type is ontwikkeld vroeg in de 20e eeuw door American Type Founders. Het is een goede keuze voor titels, maar misschien minder ideaal voor de hoofdtekst.
Aangeraden font stack
Font-family: Franklin Gothic, Arial Bold.
15. Garamond
Garamond is een serif lettertype, geïnspireerd op lettertypen van de 16e eeuwse Parijse graveur Claude Garamond. Het heeft wat zachtere, rondere randen dan de meeste standaard serif lettertypen, zoals Times New Roman. Moderne versies van Microsoft en Apple OS bevatten een versie van het Garamond lettertype.
Aangeraden font stack
Font-family: Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif.
16. Georgia
Georgia lijkt sterk op Garamond, en is ook een serif lettertype met afgeronde randen en een warm uiterlijk. Het is ontwikkeld in 1996 voor Microsoft en is nog altijd een wijdverbreid MS lettertype. Het wordt ondersteund door nagenoeg alle versies van zowel Windows als macOS.
Aangeraden font stack
Font-family: Georgia, Times, Times New Roman, serif.
17. Gill Sans
Gill Sans is een sans serif lettertype, met scherpe, strakke lijnen waardoor het er modern uitziet. Het is niet direct handig voor hoofdteksten, vanwege het beperkte contrast tussen letters en de korte afstanden. Maar zoals je in het voorbeeld kan zien, is het wel mooi in titels. De meeste apparaten met iOS, macOS en Windows ondersteunen het.
Aangeraden font stack
Font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif.
18. Goudy Old Style
Goudy Old Style is een zacht, ouderwets serif lettertype, met sterke schreven en een klassieke look en feel. De punten zijn eerder diamantvormig dan de normale perfecte rondjes van de meeste serif lettertypen. Het zit bij de meeste nieuwere versies van Windows.
Aangeraden font stack
Font-family: Goudy Old Style, Garamond, Big Caslon, Times New Roman, serif.
19. Helvetica
Helvetica is misschien wel het bekendste lettertype ooit, en is zeker één van de weinige lettertype met een eigen documentaire. Het is een modern sans serif lettertype, gebaseerd op andere moderne Zwitserse en Duitse lettertypes uit de late 19e en vroege 20e eeuw.
Het is gebalanceerd met een focus op strake lijnen en vormen, en minder op zacht en afgerond. Hierdoor is het één van de weinige lettertype die je zowel voor stukken tekst als titels kan gebruiken. Alle Apple apparaten bevatten Helvetica, terwijl Microsoft overgaat naar Arial, de MS versie ervan.
Aangeraden font stackv
Font-family: Helvetica Neue, Helvetica, Arial, sans-serif.
20. Impact
Impact is een realistisch sans serif lettertype, met erg dikke letters voor zowel standaardtekst, hoofdletters en kleine letters. Dat het zo dikgedrukt is maakt het opvallender en zorgt voor goede titels of Calls to Action (CTA’s), maar maakt het ook meteen minder handig voor langere teksten.
Het was ooit onderdeel van het pakket met kernlettertypen voor het web in 1998. Daardoor wordt het ook nog altijd breed ondersteund door zowel Apple als Microsoft, ook op nieuwe apparaten.
Aangeraden font stack
Font-family: Impact, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, Arial Black, sans serif.
21. Lucida Bright
Lucida Bright is het serif lettertype in de serie van Lucida lettertype, zoals die ontwikkeld is voor Microsoft in 1991. Het valt op door het gebruik van rechte, stevige schreven, bijvoorbeeld op de hoofdletters “T” en “L”. Standaard wordt het meegeleverd op de nieuwere versies van Windows, maar macOS bevat meestal alleen de sans serif variant Lucida Grande, waardoor Georgia een logische reserveoptie wordt.
Aangeraden font stack
Font-family: Lucida Bright, Georgia, serif.
22. Lucida Sans
Lucida Sans is een strak, humanistisch sans serif lettertype, dat ontwikkeld is als aanvulling op de serif lettertypen in de Lucida serie. Er zit meer variatie in de zwaarte van de streken dan bij de strakkere sans lettertypen zoals Helvetica en Arial. Hierdoor wordt het wat minder futuristisch en meer speels. Standaard is het een mooi lettertype voor titels en CTA’s.
Aangeraden font stack
Font-family: Lucida Sans, Helvetica, Arial, sans-serif.
23. Microsoft Sans Serif
Microsoft Sans Serif is een sans serif lettertype dat in Windows 2000 werd geïntroduceerd. Het is de opvolger van MS Sans Serif, dat ook wel bekend staat als Helv (van Helvetica). Het is gebaseerd op Helvetica, momenteel het meeste populaire sans serif lettertype.
Als lettertype is het strak en regelmatig, waardoor het er helder en professioneel uitziet. Ideaal voor titels en zakelijke websites. Het was onderdeel van de originele weblettertypen en is nog altijd de standaard op Microsoft apparaten.
Aangeraden font stack
Font-family: MS Sans Serif, sans-serif.
24. Optima
Optima is ook een humanistisch sans serif lettertype met variërende schreefdikte en symmetrie. Hierdoor lijkt het haast handgeschreven, wat ingaat tegen de meestal nogal fabrieksmatige feel van een sans serif lettertype. Het is één van de standaard Apple sans serif lettertype en wordt dan ook ondersteund op de meeste iOS en macOS apparaten. Het Microsoft equivalent is Segoe.
Aangeraden font stack
Font-family: Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif.
25. Palatino
Palatino is nog een andere voorbeeld van een ouderwets serif lettertype, en zou perfect passen bij een online krant of tijdschrift. Het is wel minder uniform dan bijvoorbeeld Georgia of Times New Roman, doordat de vormen en diktes van de schreven variëren.
Door de manier van ontwerpen worden scherpe letters, zoals de k, l, x, y en z wat zachter. Dit lettertype is ook wat dikker dan de andere serif lettertypen. Door de combinatie van deze factoren voelt het wat warmer. Palatino zit bij de meeste Windows en Apple apparaten.
Aangeraden font stack
Font-family: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif.
26. Perpetua
Perpetua is een serif lettertype met uniek ontwerp, ooit gemaakt door de Engelse beeldhouwer Eric Gill. Er is een scherp contrast in de diktes, kijk maar eens naar bijvoorbeeld de kleine “e” of het nummer “3”. Hierdoor wordt het lettertype creatiever, op het speelse af. Het is een typisch Windows lettertype, maar Baskerville, dat er erg op lijkt, is de standaard voor Apple apparaten.
Aangeraden font stack
Font-family: Perpetua, Baskerville, Big Caslon, Palatino Linotype, Palatino, serif.
27. Rockwell
Rockwell is een hoekig of slab serif lettertype met erg dikke letters. Het is geschikt voor titels en CTA’s, maar door de extra dikte is het niet zo handig voor de hoofdtekst. Het zit bij de meeste nieuwere versies van Windows.
Aangeraden font stack
Font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif.
28. Segoe UI
Segoe UI is het leidende sans serif lettertype in de Segoe font family. Microsoft gebruikt het in veel toepassingen maar bijvoorbeeld ook in diverse marketingmaterialen van hun producten.
Het is een modern lettertype met symmetrische letters en weinig variatie in de schreven. Het lettertype zit niet bij Apple computers, maar het equivalent Helvetica Neue lijkt er erg op.
Aangeraden font stack
Font-family: Segoe UI, Frutiger, Dejavu Sans, Helvetica Neue, Arial, sans-serif.
29. Tahoma
Ook Tahoma is een sans serif lettertype dat ontwikkeld is door Microsoft. Het heeft wat dikkere letters dan Segoe UI en gebruikte vierkante punten voor kleine letters, punten en andere leestekens.
Het lettertype is uniform en strak, en zou prima op z’n plek zijn in content of titels. Het zit standaard bij Microsoft apparaten, en ook bij bijna alle Apple apparaten.
Aangeraden font stack
Font-family: Tahoma, Verdana, Segoe, sans-serif.
30. Trebuchet MS
En ook Trebuchet MS is als sans serif lettertype ontwikkeld door Microsoft. Het is één van de originele lettertypen die in het basispakket voor internet zat. Zodoende wordt het nog altijd ondersteund door nagenoeg alle Microsoft en Apple apparaten. De letters zijn wat dunner dan de meeste sans serifs, waardoor het een goede keuze kan zijn voor paragrafen en hoofdteksten.
Aangeraden font stack
Font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, sans-serif.
31. Verdana
Verdana is een strak sans serif lettertype en ook een klassieker binnen Microsoft, sinds 1996. De dikte is vrij beperkt voor een sans serif, waardoor het dunne, makkelijk leesbare letters heeft. Je kan het zowel voor titels als hoofdtekst gebruiken. Nagenoeg alle Apple en Windows apparaten ondersteunen Verdana.
Aangeraden font stack
Font-family: Verdana, Geneva, sans-serif.
Web Safe cursieve lettertypen
Als je op zoek bent naar een web safe cursief, oftewel handgeschreven, lettertype, heb je niet heel veel keuze. Specifiek zijn er:
- Segoe script
- Rage
- Script MT
- Snell Roundhand
- Lucida Handwriting
Er zijn geen cursieve lettertypen die algemeen ondersteund worden door zowel Apple als Microsoft apparaten. Hou hierbij in je hoofd dat een handgeschreven lettertype meestal een slecht idee is voor je hoofdteksten, aangezien leesbaarheid een belangrijk aspect van de bruikbaarheid van je website is.
Je moet altijd leesbare tekst gebruiken voor je paragrafen, anders zullen bezoekers met leesproblemen je website slecht kunnen gebruiken. Hierdoor krijg je een hogere bouncerate en zal je weinig engagement met je content zien.
Web safe sans serif lettertypen
Sans betekent “zonder” in het Frans, dus “sans serif” betekent letterlijk, “zonder serif” of “zonder schreef”. Een schreef of serif is een lijn of streek die toegevoegd wordt aan het einde van een hoofdlijn in een letter. Zo heb je bijvoorbeeld kleine verticale lijntjes onder de bovenste lijn van een hoofdletter “T”, zoals je veel ziet in koppen van kranten en tijdschriften. Sans serif lettertypen zijn het meeste populair op het web, dus je hebt veel keuze:
- Arial
- Calibri
- Candara
- Century Gothic
- Consolas
- Dejavu Sans
- Franklin Gothic
- Gill Sans
- Helvetica
- Lucida Sans
- MS Sans Serif
- Neue Helvetica
- Optima
- Segoe UI
- Tahoma
- Trebuchet MS
- Verdana
Waar kan je web safe fonts downloaden?
Het mooie aan web safe fonts is dat je ze niet hoeft te downloaden. Ze worden namelijk al ondersteund door het besturingssysteem van je bezoekers, dus je hoeft ze alleen maar te implementeren via CSS. Mocht je weinig weten over HTML en CSS of algemeen programmeren op het web, dan klinkt dit misschien wat heftig.
Maar geloof ons, het is niet heel ingewikkeld. We zullen je stapsgewijs uitleggen hoe je dit doet in het volgende deel.
Zo voeg je web safe fonts toe aan je WordPress website
Als je een WordPress website hebt met het nieuwste Twenty Twenty thema, dan kan je HTML-lettertypen bewerken door custom CSS toe te voegen in de WordPress customizer.
Je vindt deze onder de link Weergave > Customizer in het menu, en vervolgens onder het CSS tabblad te kijken.
Vervolgens moet je de Chrome Dev Tools (of iets soortgelijks) gebruiken om de selectors te identificeren in de tekst die je wilt veranderen.
Zo kan je bijvoorbeeld de titel van je artikel inspecteren:
We zien dat het thema de standaard “entry-title” selector gebruikt voor de titel. Je kan ook op het “font-family” attribute zoeken om te zien hoe het thema tekst stylet en op welk niveau.
Aangezien Twenty Twenty geen specifiek lettertype voor titels gebruikt, kan je eenvoudig het lettertype van je titels veranderen door je te richten op de “font-family” selector.
Wil je bijvoorbeeld de titel veranderen naar het Impact lettertype, dan zouden we deze code gebruiken:
h1.entry-title { font-family: Impact, Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; }Voeg dit gewoon toe aan de Extra CSS en klik op “Publiceren”.
We behandelen dit en nog veel meer in onze gids over hoe je lettertypen kan veranderen in WordPress. Als je je website hebt gebouwd op basis van HTML en CSS, dan kan je het lettertype direct in de broncode aanpassen.
Als je bijvoorbeeld de style tag gebruikt in HTML documenten, dan gebruik je de CSS code op elke pagina, om zo het font-family attribute aan te passen.
Wil je het lettertype voor alle tekst op een pagina veranderen, dan moet je je richten op de “body” selector. Wil je alleen het lettertype van een specifiek stuk tekst aanpassen, dan heb je een specifieke selector nodig.
Gebruik je een template voor het bouwen van je website, dan heb je de CSS waarschijnlijk in een apart stylesheet opgeslagen. Dat is ideaal, want dat betekent dat je het lettertype van je hele website kan veranderen door gewoon één bestand te bewerken.
In dat geval hoef je alleen maar je stylesheet bestand te vinden (dit heet meestal style.css of iets dergelijks). Vervolgens zoek je het deel dat over de lettertypen op je website gaat.
Dit wordt meestal ergens bovenaan gedaan. Je kan ook even op “font-family” zoeken via je code editor.
Samenvatting
Net als bij thema’s en plugins is er geen gebrek aan keuze als je op zoek bent naar een lettertype.
Er zijn veel serif, sans serif, monospace of zelfs handgeschreven lettertypes gratis beschikbaar, maar web safe fonts zijn een goede plek om te beginnen als je een website aan het maken bent.
De ideale lettertypen helpen je merk om op te vallen, maar zorgen ook voor een goede leesbaarheid en ondersteunen je boodschap. Een belangrijke keuze dus!
Als je dit artikel interessant vond, bekijk dan ook onze gids met de top 50 Retro lettertypes om je website of grafisch design project een nostalgisch tintje te geven.
Hoofdredacteur bij Kinsta en content marketing consultant voor WordPress plugin-ontwikkelaars. Verbind met <a href="">Matteo op Twitter.
Waarom staat Open sans hier niet bij?