Web safe fonts in tijden van responsive webdesign (update)

Creative Director

Wat betekenen web safe fonts nog in deze tijden van webfonts 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?

Wat zijn web safe fonts?

Web safe fonts zijn standaard lettertypen 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 lettertypen die aanwezig zijn in MacOS 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

FontMacOSWindows
ArialJaJa
Arial BlackJaJa
Arial NarrowJaJa
Comic Sans MSJaJa
Lucida Sans UnicodeNeeJa
Lucida GrandeJaNee
Trebuchet MSJaJa
TahomaJaJa
VerdanaJaJa

Serif

FontMacOSWindows
GeorgiaJaJa
PalatinoJaJa
Times New RomanJaJa

Monospace

FontMacOSWindows
Courier NewJaJa

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.

Web safe fonts

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 lettertypen 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 lettertypen van MacOS en Windows bevinden zich ook in iOS, behalve Lucida Grande en Tahoma. Natuurlijk zijn er nog veel meer lettertypen die je voor iOS kunt gebruiken. Op iOS Fonts vind je een uitgebreide lijst met 58 lettertypen 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.

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) lettertypen 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:

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