Op het moment dat dit artikel wordt geschreven, zijn er 884 verschillende Google Fonts-families gratis beschikbaar. Keus genoeg! Misschien dat je daarom op zoek bent naar iemand die je bij deze bijna onmogelijke missie kan helpen, wellicht met een handige en informatieve lijst van de beste Google Fonts.

Goed nieuws, want die lijst die hebben wij! Daarnaast zullen we ook een aantal praktische tips met je delen voor het gebruik van Google Fonts op WordPress.

Bij het kiezen van een lettertype draait het niet alleen om de esthetische keuze – het kan namelijk een grote invloed hebben op de bounce rate en conversieratio van je site, vooral als je een lettertype kiest dat moeilijk leesbaar is voor de bezoekers.

Kortom, het loont om even de tijd te nemen om de beste Google Fonts-familie voor je website te zoeken, in plaats van te kiezen voor het eerste het beste lettertype die je tegenkomt!

De 10 beste Google Fonts in 2019 – Volgens de statistieken

Lettertypes zijn toch vooral een subjectieve kwestie? Je vindt de een nou eenmaal mooier dan de ander. Gezien de persoonlijke aarde van dit onderwerp kun je jezelf terecht afvragen hoe je dan toch aan een lijst van de beste Google Fonts kunt komen. Om dat voor elkaar te krijgen – we willen namelijk niet dat deze hele lijst subjectief is – kijken we naar al bestaande data om een lijst met de beste Google Fonts te maken.

In principe gebruiken we de Google Fonts analytics om de “wijsheid der menigten” te vertrouwen. Met meer dan 23 biljoen totale lettertypeweergaven heeft Google wel de nodige data om tot een gedegen conclusie te komen. 😉

Vervolgens kijken we verder dan de onbewerkte populariteitsgegevens en kiezen we een aantal opkomende lettertypen die snel groeien. Klaar? Aan de slag dan…

1. Roboto

Roboto Google web font

Roboto Google font

Roboto is een sans-serif van Christian Robertson dat door Google is ontwikkeld als het systeemlettertype voor Android. Het is nu enorm populair, komt in 12 verschillende stijlen en maakt meerdere verschijningen in de Google Fonts-analyse. Roboto is het populairste lettertype, Roboto Condensed is het zesde populaire lettertype en Roboto Slab verschijnt op nummer 13!

2. Open Sans

Open Sans Google Font

Open Sans Google Font

Open Sans is een sans-serif-lettertype, ontwikkeld door Steve Matteson. Google gebruikt Open Sans op sommige van haar websites, maar ook in print- en webadvertenties.

3. Lato

Lato Google font

Lato Google font

Lato is een andere populaire sans-serif, ditmaal van Łukasz Dziedzic.

4. Slabo 27px/13px

Slabo Google font

Slabo Google font

Slabo is een serif-lettertype ontwikkeld door John Hudson van Tiro Typeworks. Het unieke aan dit lettertype is dat het specifiek is ontworpen voor gebruik op een bepaalde grootte, hetzij 27px of 13px, afhankelijk van de behoeften.

5. Oswald

Oswald Google font

Oswald Google font

Oswald is een sans-serif-lettertype, oorspronkelijk ontwikkeld door Vernon Adams.

6. Source Sans Pro

Source Sans Pro Google font

Source Sans Pro Google font

Source Sans Pro is een sans-serif-lettertype van Paul Hunt dat is gemaakt voor Adobe en ook het eerste opensource-lettertype van Adobe.

7. Montserrat

Montserrat Google font

Montserrat Google font

Montserrat is een sans-serif-lettertype van Julieta Ulanovsky, die in de gelijknamige wijk Montserrat in Buenos Aires woont. Met 18 verschillende stijlen heb je nogal wat keuzes.

8. Raleway

Raleway Google font

Raleway Google Font

Met 18 verschillende stijlen is Raleway een ander groot sans-serif-lettertype, oorspronkelijk gemaakt door Matt McInerney. Als je van Raleway houdt en op zoek bent naar iets unieks, biedt Raleway Dots een vergelijkbare stijl met een gestippelde opzet die goed zou staan bij grote krantenkoppen.

9. PT Sans

PT Sans Google font

PT Sans Google font

PT Sans is ontwikkeld voor de Public Types van de Russische Federatie en omvat daarom zowel Latijnse als Cyrillische karakters. Er zijn ook verschillende andere lettertypen in de PT-familie, inclusief enkele serif-opties.

10. Lora

Lora Google font

Lora Google font

Lora is een populair serif-lettertype dat is ontworpen om, zowel op het scherm als in print, er mooi uit te zien.

Bonuslettertypen + nieuwkomers

Op basis van de cijfers zijn de tien bovenstaande lettertypen de populairste Google Fonts. Maar door enkel de meest populaire opties te laten zien, zouden we een slechte dienst bewijzen aan de geweldige, veelbelovende lettertypen die niet de zichtbaarheid hebben gekregen om in de analyses te verschijnen.

Hier zijn enkele van onze favorieten die niet bovenaan de analyse zijn verschenen.

11. Noto Sans / Serif

Noto Sans Google font

Noto Sans Google font

Noto is een door Google in opdracht verstrekt lettertype dat zowel in de serif- als in de sans-serif-versie voorkomt. Het ontvangt regelmatig updates en er zijn inmiddels al meer dan 100 Noto-lettertypen, en er komen er steeds meer bij!

12. Nunito Sans

Nunito Sans Google font

Nunito Sans Google font

Nunito Sans is een sans-serif-optie die snel in populariteit toeneemt (het gebruik ervan is sinds vorig jaar verdrievoudigd).

13. Concert One

Concert One Google font

Concert One Google font

Concert One is een bol, grotesk lettertype dat een geweldige optie is voor krantenkoppen.

14. Prompt

Prompt Google font

Prompt Google font

Prompt is een sans-serif-aanbod van het Thaise communicatie-ontwerpbureau Cadson Demak.

15. Work Sans

Work Sans Google font

Work Sans Google font

Work Sans is een sans-serif-lettertype dat is geoptimaliseerd voor gebruik op schermen. De ontwerpers raden aan om de middengewicht-stijlen te gebruiken vanaf 14px-48px.

Hoe maak je de beste combinaties van Google Fonts?

Mocht je denken dat het kiezen van een lettertype uit Google Fonts moeilijk was, wacht dan totdat je ze op je site probeert te combineren! Gelukkig is dit niet een probleem dat je zelf moet oplossen (tenzij je dat natuurlijk wil). Wees gerust, er zijn enkele manieren om de beste combinaties van Google Fonts te bedenken.

Ten eerste zal de Google Fonts-website zelf populaire combinaties voorstellen als je in de pagina naar beneden scrolt:

Hier vindt je koppels met Google Fonts

Hier vindt je koppels met Google Fonts

Voor meer voorbeelden kun je ook gebruik maken van een site als Font Pair.

Praktische tips voor het gebruik van Google Fonts op WordPress

Zodra je de perfecte lettertypen uit Google Fonts hebt gevonden, geven we je hier enkele praktische tips voor het gebruik van Google Fonts op WordPress.

Beperk het tekengewicht op jouw site

Sommige van deze lettertypen — zoals Montserrat en Raleway — worden geleverd met 18 verschillende lettertypen. Dit zijn vooral variaties in dikte, wat in het Engels font weight wordt genoemd, maar ook weer variaties hierop, zoals cursief en vetgedrukt. Het is altijd fijn om keuzes te hebben, maar het is niet verstandig om alle 18 op je WordPress-site te laden. Dit zou namelijk aanzienlijk je laadtijden vertragen. En we weten inmiddels dat laadtijden een cruciale factor is in het succes van je site!

Een goede vuistregel voor het gebruik lettertypen is om maximaal 3 gewichten te gebruiken.

  • Standaard
  • Cursief
  • Vet

Tegenwoordig komen we veel WordPress-sites tegen die de cursieve vorm zelfs overslaan en enkel twee verschillende lettertypen hanteren. Als je Google Fonts zelf besluit te gebruiken, kun je precies kiezen welke gewichten je wilt opnemen in het tabblad Customize bij Google Fonts:

Hoe kies je Google Fonts-stijlen uit

Hoe kies je Google Fonts-stijlen uit

Vandaag de dag bevatten de meeste WordPress-thema’s eenvoudige manieren om te kiezen welke Google Fonts en tekengewichten je wilt gebruiken. Maar niet alle thema-ontwikkelaars zijn gefocust op prestaties. In sommige gevallen is het misschien beter om Google Fonts uit te schakelen in je thema en deze vervolgens handmatig weer toe te voegen.

Variabele lettertypen worden ook populair en worden ondersteund door alle moderne browsers. Dit is op zich goed nieuws, want het staat toe om op een eenvoudige manier, en met verschillende eigenschappen, een lettertypebestand te veranderen. Toch bestaan er nog niet zoveel gratis lettertypen om uit te kiezen. Google heeft echter wel een paar aanpasbare lettertypen in Early Access.

Overweeg lokaal Google Fonts te hosten

Als alternatief voor het verschaffen van lettertypen van de server van Google, kunt je ook lokaal lettertypen hosten, wat prestatievoordelen kan bieden. Houd er echter rekening mee dat de meeste Google Fonts waarschijnlijk al in de browsers van gebruikers zijn opgeslagen. Daarom raden we aan om je eigen prestatietests uit te voeren.

Als je een ander premium lettertype gebruikt dan Google Fonts — zoals het lettertype “Brandon” dat we gebruiken op onze Kinsta-site — dan kun je ze het beste lokaal houden en deze vanuit je CDN leveren.  Kijk voor meer informatie over dit onderwerp op ons bericht over het lokaal hosten van lettertypen.

Kies een lettertype dat regelmatig updates krijgt

Lettertypen zijn net als WordPress-plug-ins en -thema’s: na verloop van tijd ontvangen ze updates en verbeteringen om ze nog beter te maken. En hoewel updates belangrijker zijn voor plug-ins dan voor lettertypen, kan het toch nuttig zijn om een lettertype te kiezen dat regelmatig updates ontvangt. De Noto-familie van Google is er één die sinds 2014 regelmatig wordt bijgewerkt.

De meeste lettertypen in deze lijst zijn behoorlijk populair, dus kunnen we er vanuit gaan dat elk lettertype op deze lijst regelmatig updates en verbeteringen zal ontvangen. Mocht je besluiten om geen gebruik van de lijst te maken, zou het geen slecht idee zijn ervoor te zorgen dat welk lettertype je ook kiest populair genoeg is om regelmatig updates te ontvangen.

Vergeet de toegankelijkheid niet

In een recente studie (2017) van de World Health Organization bestaan er naar schatting 253 miljoen mensen met gezichtsstoornissen: 36 miljoen zijn blind en 217 miljoen hebben een matige tot ernstige gezichtsvermindering.

Wanneer je Google Fonts gebruikt, kun je met CSS zelf bepalen hoe je tekst eruit komt te zien door de gewenste kleur en grootte aan te geven. Vergeet dus niet om hiervoor de Web Content Accessibility Guidelines (WCAG) 2.0 te volgen. Dit zorgt ervoor dat de inhoud voor iedereen gemakkelijk toegankelijk is.

Het volgen van deze richtlijnen zal de inhoud toegankelijk maken voor een breder scala van mensen met een handicap, inclusief blindheid en slechtziendheid, doofheid en gehoorverlies, leerstoornissen, cognitieve beperkingen, beperkte beweging, spraakbeperkingen, lichtgevoeligheid en combinaties hiervan.

Een heel belangrijke richtlijn is het kleurcontrast. In een ouder ontwerp van de Kinsta-website was ons lettertype een beetje te licht en bezoekers uitten hun bezorgdheid daarover, omdat het moeilijk leesbaar was. Je wilt uiteraard niet dat je geweldige webinhoud leidt tot een slechte of onaangename ervaring voor de lezers!

Je kunt een tool zoals de Color Contrast Checker van WebAIM gebruiken om te zien of je lettertypekleuren voldoen aan de officiële aanbevelingen. Hieronder kun je zien dat op dit moment de kleuren op onze blog geslaagd zijn voor de test. 👍

Kleurcontrast checker tool

Kleurcontrast checker tool

Wat is jouw favoriete lettertype van Google Fonts?

Google Font is geweldig en wordt dagelijks gebruikt door miljoenen websites op internet. Het volgen van praktische tips zoals het beperken van tekengewichten, deze lokaal te hosten (in sommige gevallen) en het volgen van richtlijnen voor toegankelijkheid, zorgt voor een betere algehele ervaring voor je bezoekers.

Nu is het jouw beurt —  wat zijn jouw favoriete lettertypen en combinaties van Google Fonts? Laat het ons weten in de reacties hieronder en vergeet niet onze uitgebreide gids over WordPress-lettertypes te lezen!

31
keer gedeeld