Wat zijn web-safe fonts?
Lettertypen zijn een belangrijk onderdeel van webdesign. Lettertypes kunnen het uiterlijk en de functionaliteit van een website maken of breken. Het kiezen van een lettertype is veel meer dan alleen tekst op een webpagina plaatsen of om je verhaal te vertellen. Een lettertype is bepalend voor de sfeer van een pagina, geeft een onuitgesproken boodschap mee aan de inhoud, maakt verbinding met de lezer- of niet, en ondersteunt het imago van je bedrijf of organisatie en je merk.
Praktisch en snelheid
Het lettertype dat je kiest voor een kop- of paragraaf tekst , moet een bepaalde stijl, spatiëring, leesbaarheid, textuur, laadtijd, enzovoort hebben. Hier gaan we het over de snelheid hebben. Snelheid van de site? ja, echt. Je keuze qua lettertypes voor je website bepaalt voor een groot deel hoe snel deze laadt, wat de bezoekerservaring is en beïnvloedt direct de Google zoekmachine score.
3 lettertype (font) toepassingen
lettertypes kun je op deze die manieren gebruiken op een website.
- Websafe fonts (deze zijn al aanwezig op elk apparaat)
- Google fonts (die worden opgeroepen op het moment van lezen)
- Fonts installeren op je website server
De 3 soorten lettertype toepassingen in het kort
Websafe fonts
Als je een lettertype gebruikt hebt dat valt onder de ‘websafe’ fonts, en de bezoeker roept jouw website, of een bepaalde pagina, op in de browser, hoeft de browser eigenlijk niets te doen om de pagina te tonen; de code van de pagina vertelt de browser dat het gebruikte lettertype al geïnstalleerd is op het apparaat. Of het nu gaat om Apple, Windows, een iPhone of een Android device.
Google fonts
De meeste moderne pagina builders stellen je in staat lettertypes te kiezen uit een gigantische collectie van tussen de 900 en 1500 Google fonts. Dit heeft twee nadelen. De eerste is dat elke website bezoeker een tragere website zal ervaren, omdat de browser het lettertype moet ‘ophalen’ bij Google en dan pas de pagina kan vertonen. Het tweede nadeel is dat Google dit in theorie zou kunnen gebruiken om te bepalen wie de bezoeker is, en waar diens interesses liggen. Google belooft overigens dat ze dit niet doen bij gebruik van hun font collectie.
Fonts installeren op je server
De betere pagebuilders of WordPress themes hebben de optie om lettertypes te installeren. Dat betekent dat deze worden geüpload naar jouw eigen hosting account. Een geïnstalleerd font kan overigens ook een Google font zijn. De bezoeker zal bij een geïnstalleerd font ook dan een tragere website ervaren, omdat de browser het lettertype moet ‘ophalen’ bij jouw hosting, en dan pas de pagina kan tonen. Het privacy nadeel is echter niet meer van toepassing! Dus wat dat betreft een groot voordeel. In sommige landen, waaronder Duitsland, heeft de website-eigenaar de plicht ervoor te zorgen dat de bezoeker niet via de lettertypes getracet kan worden.
Websafe fonts hebben alleen voordelen?
Websafe fonts maken een website dus een stuk sneller, hebben niet de tragere website van de Google fonts en respecteren ieders privacy. Ze hebben echter ook een nadeel; ze geven je minder mogelijkheden om de website of pagina een unieke uitstraling te geven, die bij de identiteit van het bedrijf of organisatie past.
Als je besluit om toch een Google font of een geïnstalleerd font te gebruiken, naast de websave lettertypes, is het aan te raden om dit te beperken tot één of hooguit twee fonts en zorg dat je niet alle variaties installeert (behalve als het een variabel font is).
Websafe fonts in detail
Web-safe fonts zijn lettertypes die op computers of apparaten zijn opgenomen, ongeacht het besturingssysteem of de machine. Web-safe fonts zijn vooraf geïnstalleerde lettertypes, ze worden meegeleverd met computers en zijn beschikbaar op een breed scala aan apparaten.
Webveilige lettertypen zijn, in tegenstelling tot webfonts (lettertypen die speciaal voor websites worden gemaakt door een externe leverancier zoals Google Fonts of de webhosting van een site ), niet zo uniek qua stijl en minder artistiek, maar ze zijn betrouwbaar en laden snel omdat ze beschikbaar zijn op de meeste computers en gangbaar zijn op de meeste apparaten.
Websafe fonts komen deels overeen, maar niet 100%
Dit betekent dat de meeste systemen met vooraf geïnstalleerde lettertypen er maar een handvol gemeen hebben. Bijvoorbeeld, MacOS en Windows hebben beide lettertypen zoals Times New Roman, Georgia, Arial en Verdana, maar ze hebben ook enkele vooraf geïnstalleerde lettertypen die niet gemeenschappelijk worden gedeeld. De Mac heeft bijvoorbeeld lettertypen zoals Futura, Monaco en Didot, terwijl Windows werkt met enkele extra vooraf geïnstalleerde lettertypen zoals Cambria en Consola.
Het is dus belangrijk als webbouwer, om te werken met fonts die op alle platforms voorkomen, als je een snelle website wilt behouden.
Niet elk font is beschikbaar op jouw thema
De meeste thema’s die ik ken stellen je in staat enkele lettertypes te kiezen, voor paragraaf tekst, de headings, etc. daarmee bepaal je de keuze voor het maken van de verdere website. Aks je daarbij een keuze maakt uit de ‘websafe, fonts ben je al op de goede weg.
Overzicht websafe fonts
1 Georgia and Trebuchet MS are bundled with Windows 2000/XP and they are also included in the IE font pack (and bundled with other MS applications), so they are quite common in Windows 98 systems.
2 Symbolic fonts are only displayed in Internet Explorer, in other browsers a font substitute is used instead (although the Symbol font does work in Opera and the Webdings works in Safari).
3 Book Antiqua is almost exactly the same font as Palatino Linotype, Palatino Linotype is included in Windows 2000/XP while Book Antiqua was bundled with Windows 98.
4 These fonts are not TrueType fonts but bitmap fonts, so they won’t look well when using some font sizes (they are designed for 8, 10, 12, 14, 18 and 24 point sizes at 96 DPI).
5 These fonts work in Safari but only when using the normal font style, and not with bold or italic styles. Comic Sans MS works in bold but not in italic. Other Mac browsers seems to emulate properly the styles not provided by the font.
6 These fonts are present in Mac OS X only if Classic is installed.
De meeste browsers (alle moderne) kennen dit schema ook… Ook de substituten kennen ze. Dus als je een lettertype hebt gekozen dat bijvoorbeeld op een Windows computer aanwezig is en de bezoeker heeft een Mac, dan zal de browser op de Mac een substituut uitzoeken om de pagina te tonen. Het lettertype Verdana wordt op een Mac dan getoond als Geneva, en Lucida Sans als Lucida Grande.
Aanwezig op Microsoft en Mac?
Hiernaast (of onder op mobiel) staan voorbeelden van de meeste Web-safe fonts, met de % waarop je deze aantreft op verschillende systemen.
Font Stack
Niet elk Websafe lettertype is aanwezig op elk apparaat. We hebben het hier wel over een soort universele lettertypes, maar gebruikers verwijderen of hernoemen lettertypes, sommigen computers zijn heel oud… er zijn diverse redenen waarom lettertypes missen. Daarom is er een ‘Font-Stack’ ontwikkeld. Dat is een code met een lijst van veelgebruikte (websave)fonts en geschikte alternatieven die vaak wel aanwezig zijn. De list staat in JSON-code hieronder, en is geplaatst in een accordeon omdat de code andere veel plek inneemt op de pagina. Er staat steds een lettertype in de lijst, gevolgd door geschikte alternatieven en er wordt vaak een ‘soort;’ genoemd, zoals sans-serif (zonder pootjes, zoals Arial) of serif (met pootjes, zoals Times).
body {
font-family: Georgia, “Times New Roman”, serif;
}
Dat betekent: Toon de tekst in lettertype Georgia. Als die niet aanwezig is Times New Roman en als die er ook niet is, elk ander Serif lettertype.
Controleren welke fonts gebruikt zijn
Als je wilt checken welke fonts aanwezig zijn op een pagina, kun je de gratis Chrome extensie ‘What font’ installeren.
Websafe fonts
Arial
Arial is een schreefloos lettertype dat Robin Nicholas en Patricia Saunders in 1982 creëerden. Het is een lettertype dat kan worden gebruikt voor zowel Mac- als Windows publicaties. Arial is leesbaar in zowel kleine als grote formaten. Ook beschikbaar in italic, narrow, narrow italic en condensed stijlen.
- Microsoft: 99,84%
- Apple: 99,74%
Trebuchet MS
Trebuchet, een sans serif-lettertype ontworpen door Vincent Connare voor Microsoft, werd voor het eerst uitgebracht in 1996. Microsoft maakte het beschikbaar als onderdeel van hun kernwebfontspakket. Trebuchet is verkrijgbaar in verschillende formaten en diktes.
- Microsoft: 99,67%
- Apple: 97,12%
Verdana
Matthew Carter creëerde het schreefloze lettertype Verdana voor Microsoft, en Thomas Rickner voegde er hand-hinting aan toe. Het is gemaakt met een brede breedte en voldoende spaties om leesbaar te zijn op schermen. Het kan worden gelezen in kleine letters en op computerschermen met lage kwaliteit.
- Microsoft: 99,84%
- Apple: 99,1%
Georgia
Georgia is een schreeflettertype dat in 1993 door Matthew Carter werd gecreëerd met hints van Tom Rickner. Het is ontworpen om er chique en leesbaar uit te zien op kleine of lage-resolutieschermen. De lettervormen en spaties geven het een opgeruimd uiterlijk waardoor het leesbaar is in kleine formaten en op computerschermen met lage kwaliteit.
- Microsoft: 99,4%
- Apple: 97,48%
Times New Roman
Times New Roman is een schreeflettertype dat tegenwoordig op veel verschillende platforms wordt gebruikt. In 1932 introduceerde de Londense krant “The Times” Times New Roman. Victor Hardent creëerde het ontwerp onder leiding van Stanley Morrison. Het is een uiterst leesbaar lettertype.
- Microsoft: 99,67%
- Apple: 97,48%
Tahoma
Matthew Carter creëerde het lettertype Tahoma voor Microsoft, dat in 1994 openbaar werd gemaakt. Het is een geschikte optie voor gebruikersinterfaces en informatieweergave op schermen vanwege de compacte, smalle constructie.
- Microsoft: 99,95%
- Apple: 91,71%
Lucida (grande)
Lucinda is een Monospace-lettertype ontworpen door Charles Bigelow en Kris Holmes en werd uitgebracht in 1984. Het is zeer leesbaar, zelfs wanneer het in een heel klein formaat of op een scherm met een lage resolutie wordt afgedrukt.
- Microsoft: 0%
- Apple: 100%
Impact
Impact is een schreefloos lettertype ontwikkeld door Geoffrey Lee. Het lettertype maakt een sterke indruk.
- Microsoft: 0%
- Apple: 95,14%
Helvetica
- Microsoft: 7,34%
- Apple: 100%
Arial Narrow
- Microsoft: 88,39%
- Apple: 94,77%
Lucida Bright
- Microsoft: 76,12%
- Apple: 99,64%
Palatino
- Microsoft: 99,29%
- Apple: 86,13%
Courier New
- Microsoft: 99,73%
- Apple: 95,68%
Brush script MT
- Microsoft: 59,64%
- Apple: 90,99%