Web safe fonts – computer fonts voor jouw site

Creative Director

Wat betekenen web safe fonts nog in deze tijden van web fonts en Mobile First responsive webdesign? Met welke lettertypes kun je veilig een website ontwerpen zodat het er op elke computer hetzelfde uitziet? Is dit überhaupt nog nodig?

Inhoudsopgave van dit blog

Wat zijn web safe fonts?
Beschikbare standaard fonts
Veel meer dan ‘web safe’
Web safe fonts op iOS
Geen web safe fonts op Android
Embed fonts in je website

Wat zijn web safe fonts?

Web safe fonts zijn standaard lettertypes die op alle MacOS en Windows computers voorgeïnstalleerd zijn en die iedereen zowel online als offline kan gebruiken. Iedereen ziet dezelfde opmaak en kan documenten bewerken zonder dat de opmaak breekt. Enkele voorbeelden zijn Arial, Verdana en Times New Roman.

Beschikbare standaard fonts

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
Trebuchet MS	Ja	Ja
Tahoma	Ja	Ja
Verdana	Ja	Ja

Serif

Font	MacOS	Windows
Georgia	Ja	Ja
Palatino	Ja	Ja
Times New Roman	Ja	Ja

Monospace

Font	MacOS	Windows
Courier New	Ja	Ja

Let op: Alhoewel dit een lijst van web safe fonts is betekent dit niet dat álle fonts op álle computers en besturingssystemen beschikbaar zijn. Oudere besturingssystemen worden wellicht niet ondersteund. Apple TV ondersteund ook nog niet alle fonts. Dit kan mogelijk in de toekomst wel veranderen.

Veel meer dan ‘web safe’

Hoewel de naam ‘web safe’ doet vermoeden dat het alleen om internet gebaseerde toepassingen gaat, gaat het verder dan dat. Het omvat alle digitaal gemaakte office bestanden en nieuwsbrieven.
De meeste computer gebruikers werken dagelijks met Microsoft Office of de vergelijkbare Apple software. Voor die mensen is het belangrijk dat ze onderling bestanden kunnen uitwisselen en bewerken zonder dat de opmaak breekt. Daar zijn deze web safe lettertypes uiterst geschikt voor.

Voorzichtig met nieuwsbrieven

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.

Web safe fonts op iOS

Alle lettertypes van MacOS en Windows bevinden zich ook in iOS, behalve Lucida Grande en Tahoma. Natuurlijk zijn er nog veel meer lettertypes die je voor iOS kunt gebruiken. Op iOS Fonts vind je een uitgebreide lijst met 58 lettertypes die voorgeïnstalleerd zijn.

Geen web safe fonts op Android

De tijden van web safe fonts op Android zijn voorbij. Op dat besturingssysteem bevinden zich geen van de bovenstaande fonts meer. Zij gebruiken tegenwoordig Roboto, Noto Serif en Droid Sans Mono.

Embed fonts in je website

Het is balen dat er maar zo weinig web safe fonts beschikbaar zijn. Daarbij komt dat het niet de mooiste fonts zijn. Als bedrijf wil je een consistente uitstraling in alle uitingen en kanalen. Websites zijn daarbij een extreem belangrijk onderdeel.

Wil je meer weten over hoe je lettertypes goed inzet in je huisstijl? Lees dan ons blog ‘Tips voor een goede huisstijl‘.

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.

In ons blog ‘@font-face – embed fonts in jouw website‘ vind je gedetailleerde informatie over het gebruik van de @font-face techniek.

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:

Wil je meer weten over web safe fonts?

Ben je toch niet helemaal zeker of je het goed doet? Of wil je advies over een lettertype toepassing? Neem contact met ons op voor vragen.

Help me met web safe fonts