Web-safe fonts
What are web-safe fonts?
Fonts play a crucial role in web design. They can significantly impact both the visual appeal and functionality of a website. Choosing the right font involves much more than simply placing text on a webpage or conveying your message. A font sets the mood of the page, communicates an unspoken message about the content, connects with the reader—or fails to—and supports the identity of your company, organization, and brand.
Practical and speed
The font you choose for headers and paragraphs plays a crucial role in style, spacing, readability, texture, and loading speed, among other factors. Today, let’s focus on speed. Site speed? Yes, it’s essential. The fonts selected for your website significantly impact loading times, shaping the visitor experience and directly affecting your Google search ranking.
Three font applications
There are several ways you can use fonts on a website:
- Websafe fonts (these are already present on every device)
- Google fonts (which are called up at the time of reading)
- Install fonts on your website server
The 3 types of font applications
Websafe fonts
If you use a font that falls under the category of ‘web-safe’ fonts, when a visitor accesses your website or a specific page in their browser, the browser doesn’t need to take any extra steps to display the page. The page’s code informs the browser that the font being used is already installed on the device, whether it be an Apple computer, a Windows PC, an iPhone, or an Android device.
Google fonts
Most modern page builders allow you to choose fonts from a massive collection of between 900 and 1500 Google Fonts. However, this comes with two major downsides. First, every visitor to your website may experience slower loading times because the browser needs to fetch the font from Google before displaying the page. Second, there is a concern that Google could theoretically use this data to determine who the visitor is and what their interests might be. Google assures users that they do not engage in this practice when their font collection is used.
Install fonts on your server
The better page builders and WordPress themes offer the option to install custom fonts. This means that the fonts are uploaded to your own hosting account. An installed font can also be a Google font. However, when using an installed font, visitors may experience slower loading times since the browser needs to fetch the font from your hosting before displaying the page. On the plus side, the privacy concerns associated with this are no longer applicable, which is a significant benefit. In some countries, including Germany, website owners are required to ensure that visitors cannot be tracked through the fonts.
Web Safe fonts have only advantages?
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).
Web-safe fonts significantly enhance website speed, avoiding the slower performance associated with Google Fonts while also protecting users’ privacy. However, they do come with a drawback: they offer fewer options for creating a unique look that aligns with a company or organization’s identity. If you decide to use a Google font or a locally installed font alongside web-safe fonts, it’s advisable to limit your selection to one or at most two fonts, and make sure not to install all variations unless it is a variable font.
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%