Web safe fonts – computer fonts voor jouw site

Wat zijn web safe fonts?

Web safe fonts garanderen leesbare tekst voor iedere bezoeker, omdat ze standaard aanwezig zijn op Windows, MacOS, Linux en mobiele systemen. Kies je bijvoorbeeld Arial, Verdana of Times New Roman? Dan weet je zeker dat je site overal goed zichtbaar blijft — zelfs als het custom font hapert.

Beschikbare standaard fonts die écht altijd werken

Wil je met standaard fonts een website ontwikkelen, dan is de keuze beperkt tot de standaard lettertypes in MacOS Catalina en Windows. Standaard voorziet MacOS in meer fonts dan Windows.
De volgende fonts zijn beschikbaar op vrijwel alle versies van beide besturingssystemen en zijn dus web safe fonts te noemen. We gaan daarbij uit van 90%+ zekerheid dat het font op dat besturingssysteem aanwezig is:

Sans-serif

Font	MacOS	Windows
Arial	Ja	Ja
Arial Black	Ja	Ja
Arial Narrow	Ja	Ja
Comic Sans MS	Ja	Ja
Lucida Sans Unicode	Nee	Ja
Lucida Grande	Ja	Nee
Segoe UI	Nee	Ja
Trebuchet MS	Ja	Ja
Tahoma	Ja	Ja
Verdana	Ja	Ja

Serif

Font	MacOS	Windows
Garamond	Deels	Deels
Georgia	Ja	Ja
Palatino	Ja	Ja
Palatino Linotype	Nee	Deels
Times New Roman	Ja	Ja

Monospace

Font	MacOS	Windows
Courier New	Ja	Ja

Welke lettertypes worden met Microsoft en MacOS meegeleverd?

• Microsoft Windows lettertypes: Dit is een complete lijst van de lettertypes die met Microsoft Windows (en de verschillende versies) meegeleverd worden.
• MacOS lettertypes: Dit is een complete lijst van de lettertypes die met Microsoft Windows (en de verschillende versies) meegeleverd worden.

Web safe fonts voor email en documenten

Voor email zijn veilige fonts extra belangrijk. Emailprogramma’s ondersteunen alleen gangbare keuzes zoals Arial, Georgia, Times New Roman en Verdana. Gebruik deze fonts altijd als primair font in nieuwsbrieven, zodat je tekst overal goed leesbaar verschijnt.

Voorzichtig met email newsletters

Voor nieuwsbrieven is er een kleine kanttekening. Niet elke mailclient kan even goed met standaard fonts omgaan. Ondersteuning wordt wel met elke update beter, maar hou er voor de zekerheid rekening mee dat sommige fonts nog niet (optimaal) werken.

CSS-fallbacks

Een CSS-fallback zorgt ervoor dat je website altijd een goed leesbaar lettertype toont, zelfs als het gewenste (custom) font niet beschikbaar is op het device van de bezoeker. In CSS geef je daarom een reeks alternatieve fonts op in je font-family, waarbij het systeem automatisch door de lijst heen gaat tot een ondersteund font gevonden wordt. Het is verstandig om altijd te eindigen met een generiek font (zoals ‘sans-serif’ of ‘serif’), zodat je ontwerp overal betrouwbaar blijft verschijnen.
Zo ziet de fallback-code er in html uit:

Web safe fonts op iOS

Op iOS is “San Francisco” (SF Pro) tegenwoordig het standaard systeemfont, geoptimaliseerd voor schermen en toegankelijkheid. Klassieke web safe fonts zoals Arial, Times New Roman en Georgia zijn echter nog steeds breed beschikbaar voor web gebruik.
Check iOS Fonts voor de meest actuele lijst.

Geen web safe fonts op Android

Android zet sinds enkele jaren in op “Roboto” als standaard lettertype voor de interface en webweergave. Noto Serif is populair voor lange teksten en Droid Sans Mono voor code of terminaloutput. Klassieke web safe fonts zijn hier minder vaak standaard geïnstalleerd; zet daarom altijd een fallback in je CSS: ‘Roboto, Arial, sans-serif’ werkt op vrijwel elk Android-device.
Bron: Figma

Webfonts en font embedding: de moderne standaard

Bij branding en typografie zijn webfonts de norm: ze geven je website een unieke uitstraling. Gebruik services als Google Fonts, Adobe Fonts of Fontstand voor extra variatie. Let goed op de licentievoorwaarden en voeg altijd een web safe font toe als fallback. Zo blijft je tekst altijd leesbaar en toegankelijk – ook bij langzame verbindingen of beperkingen door privacy-instellingen.

Met de onderstaande twee technieken kun je, als je meer dan de standaard web safe fonts, fonts in je website insluiten, ook wel ‘embedden’ genoemd.

@font-face

De eerste techniek om andere (of zelfs custom) lettertypes in een website te gebruiken is @font-face. De meeste browsers ondersteunen het en grote bedrijven zetten het al in.
Let wel op dat je met deze techniek problemen kunt krijgen als je lettertype niet in een website ingesloten mag worden. Check dus heel goed je font licentie. In ons blog ‘Gouden regels voor font licenties‘ lees je hier alles over.

Webfonts

De tweede techniek zijn webfonts, de toekomst van internet typografie. Deze online services zijn echte vervangers van de standaard fonts. Ze bieden de mogelijkheid voor rijke en creatieve typografie in het internet.
Dit is een lijst van een aantal webfont aanbieders die wij bij Stoere Binken Design zelf ook gebruiken:

• Google Fonts (aanbevolen)
• MyFonts
• Adobe Fonts (voorheen Typekit)
• Fontstand
• FontShop
• Fonts.com
• Typography
• FontSquirrel
• Fontspring

Samenvatting

Web safe fonts vormen de basis voor snelle, betrouwbare en consistente typografie voor elke website en nieuwsbrief. Door slimme CSS-fallbacks en heldere keuzes voorkom je technische verrassingen, verhoog je je conversie en houd je jouw merk overal herkenbaar. Of je nu werkt met custom fonts, emailcampagnes of mobiele platforms: met een future-proof font strategie zet je altijd een professioneel en toegankelijk resultaat neer.
Het gebruik van web safe font instellingen op je website is ook met de moderne webtechnieken nog steeds een must!