Beperk custom fonts tot een minimum
Custom fonts verbruiken meer energie. Kiezen voor een ander lettertype helpt de planeet én versnelt je website!
Waarom is het belangrijk?
Waar webdesigners lange tijd de keuze hadden tussen een heel beperkt aantal lettertypes (Arial, Helvetica, Times New Roman & Verdana), kwam daar vooral in de jaren 2010 verandering in. De vier grote browsers van dat moment (Internet Explorer, Google Chrome, Safari en Firefox) gingen custom fonts ondersteunen. En dat bracht een ware revolutie teweeg, want zowat alle webbouwers gingen aan de slag met custom fonts om een website bijvoorbeeld in lijn te brengen met de (offline) branding van bedrijven, om eruit te springen... Alleen, waar we met z’n allen niet bij stilstonden: zo’n custom fonts zitten niet standaard in je besturingssysteem, en moeten dus worden ‘meegestuurd’ met de website. En zo’n custom fonts zitten in soms vrij grote bestanden, tot honderden kilobytes. En dat zorgt ervoor dat ze trager laden dan de standaard aanwezige lettertypes, en dat ze dus meer energie verbruiken.
Waarom is het makkelijk?
De kans is groot dat je tekst zal gaan gebruiken op je website, toch? Het lettertype — of font — dat je daarvoor zal gaan gebruiken is een van de designkeuzes die je moet maken. Bovendien kan je (ook als je je keuze hebt gemaakt) nog een aantal ingrepen doen om het gewicht dat je lettertypes hebben op het geheel te verminderen.
Wat kan je doen?
- Beperk het aantal lettertypes dat je gebruikt.
- Kies zorgvuldig: heb je een web lettertype nodig? Of volstaat een systeemlettertype, dat niet hoeft ingeladen te worden?
- Zorg dat je het meest efficiënte format van het lettertype gebruikt, nl. WOFF2. Da’s, kort gezegd, een vorm van compressie zonder kwaliteitsverlies. Je kan hiervoor een tool als fontplop of Fontsquirrel gebruiken.
- Maak een subset van je lettertype zodat enkel de karakters die je ook echt gebruikt overblijven. Lettertypebestanden zijn erg uitgebreid, en bevatten vaak tekens die specifiek zijn voor bepaalde talen. Met een tool als Fontdrop kan je nagaan hoeveel tekens het lettertype van jouw keuze bevat, en dat zullen er door de band genomen een stuk meer zijn dan je nodig hebt. Subsetting wil zeggen dat je dan tekens uit het lettertype verwijdert, en enkel die tekens overhoudt die je nodig hebt. Is dat de moeite waard? Zeker, lees bijvoorbeeld in dit artikel hoe Wholegrain Digital via subsetten en compressie tot een lettertype-bestand kwam dat 2,3% was van de grootte van het oorspronkelijke TTF bestand.
- Zorg voor een fallback optie. Wanneer het gekozen lettertype traag laadt, om wat voor reden dan ook, kan je instellen dat je website terugvalt op een standaard lettertype. Zo krijgt je bezoeker toch iéts te zien als het laden lang duurt.
Lees meer Bronnen
Ook interessant
Bekijk alle voorstellenHoeveel CO₂ stoot jouw website uit?
Ook websites verbruiken energie, en hebben dus een impact op het klimaat. Hoe kan je een inschatting krijgen van die impact? En hoe kan je je impact verlagen?