Er zijn 1052 verschillende Google Font families gratis beschikbaar op het moment van schrijven. Dat is nog eens een keuzeprobleem! Daarom is het niet zo gek dat je wel wat hulp kan gebruiken bij het vinden van de naald in de hooiberg. En dat bieden we met deze lijst van de beste Google Fonts.
We zullen daarnaast ook een aantal best practices delen voor het gebruiken van Google Fonts in WordPress.
Het kiezen van een lettertype is niet alleen maar een kwestie van smaak. Het kan ook een substantieel effect hebben op de bouncerates en conversiepercentages van je website, met name in negatieve zin wanneer je een lettertype kiest dat moeilijk te lezen is. Daarom is het ook zeker de tijd waard om het perfecte Google Fonts familie te kiezen voor jouw website, in plaats van het eerste het beste lettertype dat je toevallig tegenkomt.
Wanneer je nog meer keuze wil, kijk dan ook eens naar ons artikel over meer dan 50 moderne lettertypen die je op WordPress websites kan gebruiken.
Waarom zou je Google Fonts gebruiken?
Er zijn duizenden verzamelingen van lettertypen te vinden, dus wat maakt Google Fonts nou zo bijzonder?
Allereerst is het helemaal gratis. Daarnaast worden Google Fonts onderhouden en aangeboden door Google en zijn ze dus gegarandeerd veilig. Natuurlijk zijn er allerlei gure websites waar je ook gratis lettertypen kan downloaden, maar dan weet je maar nooit of er nog troep tussen de bestanden zit.
De kwaliteit van lettertypen op meer obscure websites kan ook nogal variëren.
Google daarentegen heeft een selectie gemaakt van meer dan duizend lettertypen van hoge kwaliteit. Wanneer je zelf niet een grafisch ontwerper bent met een perfecte kijk op typografie, is dit dus een veiligere keuze.
Daarnaast zijn er ook geen ingewikkelde restricties door de licenties. Alle lettertypen in de Google Fonts catalogus zijn open source en gratis te gebruiken, ook in commerciële projecten. Je kan ze downloaden of embedden op je website en je kan ze zelfs voor printmaterialen gebruiken.
Alhoewel er geen uniforme licentie is, gebruiken de meeste lettertypen in de verzameling de Open Font Licentie.
Andere “gratis lettertypen” zijn zelden echt gratis, en bevatten allerlei ingewikkelde beperkingen qua licenties, waardoor je echt in de problemen kan komen als je een foutje maakt. Gelukkig hebben Google Fonts deze uitdagingen niet.
Daarnaast is het eenvoudig om Google Fonts toe te voegen aan je website via de Google Fonts API. Je kan ze ook individueel downloaden en zelf weer uploaden naar je webserver via FTP/SFTP.
Alhoewel Google Fonts meestal eenvoudig zijn en wellicht niet zo flitsend als sommige betaalde lettertypen, is het zeker mooier dan web-safe lettertypen die al voorgeïnstalleerd zijn bij sommige besturingssystemen. Oftewel, lettertypen die iedereen letterlijk duizenden keren eerder heeft gezien.
Waar moet je op letten bij een Google Font
Als er één ding is dat je moet leren qua ontwerpen van een website, is dat het kiezen van een Google Font dat goed past bij je project. Goede typografie kan een website maken of breken.
Het lijkt een onbelangrijk detail, maar kan precies het verschil maken tussen een bezoeker die je website meteen weer verlaat, of iemand die lekker doorleest en zo een loyale lezer of zelfs klant wordt.
Het leren kiezen van het perfecte lettertype is iets waar grafisch ontwerpers jaren over doen, maar door een aantal principes in je hoofd te houden, kan je zeker een mooi lettertype voor je website vinden.
- Past bij je merk: Dit is het meest kritieke punt. De beste websites hebben een lettertype dat het karakter van het merk weerspiegelt, maar ook goed leesbaar is en mooi past bij het huidige ontwerp. Zo gebruiken Apple en Iron Maiden bijvoorbeeld compleet verschillende lettertypen, maar ze passen allebei perfect bij hun merk en identiteit.
- Leesbaarheid: Het één na belangrijkste principe is leesbaarheid. Een grillig fantasy font of juist ruig dik lettertype kan goed bij je merk passen, maar als je bezoekers het voor geen meter kunnen lezen, zijn ze zo weer weg. Daarom moeten je lettertypen altijd professioneel en leesbaar zijn.
- Font classificatie: Alhoewel er honderden manieren zijn om lettertypen te classificeren, zijn er vijf hoofdsoorten: serif, sans-serif (respectievelijk ook met schreef en schreefloos genoemd), script (ook wel handgeschreven), monospace en decoratief. Een script of serif lettertype is eleganter, terwijl monospace lettertype vaak populair zijn op tech websites. Door het kennen van deze classificaties kan je meteen een belangrijke selectie maken bij het begin van je zoektocht.
- Display of body font: Display lettertypen zijn voor grote letters, in headers of in projecten voor printmaterialen. Door de grootte kunnen ze wat moeilijker leesbaar zijn, en bieden ze meer ruimte voor een uniek ontwerp. Body fonts, oftewel de lettertypen voor hoofdteksten, moeten allereerst makkelijk leesbaar zijn, aangezien ze het grootste deel van de tekst zullen aanbieden aan de lezer.
- Emotie en bedoeling: Net zoals bij ander artistiek werk, ontwerpen artiesten lettertypen voor bepaalde emoties en bepaalde situaties. De meeste lettertypen bevatten opmerkingen over hoe ze zijn ontwerpen en wat de beste gebruikssituaties zijn. Gebruik die opmerkingen en aanwijzingen om te bepalen of een lettertype inderdaad bij je project past.
De 10 beste Google Fonts (volgens de wijsheid van de massa)
Hoe maak je nou een lijst met de beste Google Fonts wanneer zoveel aspecten zo subjectief zijn? We willen natuurlijk niet dat deze lijst alleen maar onze smaken en voorkeuren weerspiegelt, dus gebruiken we data om de meest populaire Google Fonts te bepalen.
We gebruiken de Google Font analytics om gebruik te maken van de wijsheid van de massa. Met meer dan 50 biljoen fontviews in totaal, heeft Google een zekere hoeveelheid data die we hiervoor kunnen gebruiken.
Daarna gaan we verder dan alleen een populariteitswedstrijd, door te kijken naar een aantal HTML fonts die het momenteel ook steeds beter doen.
Ben je er klaar voor? Laten we beginnen aan de lijst!
1. Roboto
Roboto heeft al jaren de eerste plek in handen en is ook Kinsta’s keuze, als sans-serif lettertype ontworpen door Christian Robertson, dat Google ooit heeft ontwikkeld als systeemlettertype voor Android. Het is inmiddels ontzettend populair, is beschikbaar in 12 verschillende stijlen, en al die verschillende stijlen komen ook individueel voor in de cijfers van Google Fonts.
Zo is Roboto zelf het meest populaire lettertype. Maar Roboto Condensed staat op de zesde plek, en Roboto Slab zien we op plek twaalf in de meest populaire lettertypen.
2. Open Sans
Open Sans is een heel prettig leesbaar lettertype dat in opdracht van Google is ontwikkeld, gebaseerd op de voorganger van het lettertype, Droid Sans. Google gebruikt Open Sans op een deel van hun eigen websites, webadvertenties en hun eigen printmaterialen. Open Sans Condensed, het zusterfont, is te vinden op de dertiende plek van meest populaire Google Fonts.
3. Lato
Lato is ook een populaire keuze, ontwikkeld door Łukasz Dziedzic. Er zit veel verhaal achter het ontwerp, met het balanceren van conflicterende doelstellingen, waardoor het resultaat een uniek, lichtgewicht sans-serif font is.
4. Montserrat
Montserrat is een sans-serif font van Julieta Ulanovsky, die in de gelijknamige buurt Montserrat woont, in Buenos Aires. Met 18 verschillende stijlen, van licht tot zwaar, heb je een hoop keuze.
5. Oswald
Oswald is een sans-serif lettertype dat ontwikkeld is door Vernon Adams. Het is ontworpen met in het achterhoofd de bijzondere Alternate Gothic stijl, wat terug te zien is in de dikke halen.
6. Source Sans Pro
Source Sans Pro is een sans-serif lettertype dat gemaakt is voor Adobe. Het is ook het eerste open source lettertype van Adobe. Het is gemaakt door Paul Hunt, en onderscheidt zich door lichte letters, waardoor het mooi strak en goed leesbaar is.
7. Slabo 27px/13px
Slabo is een serif lettertype dat ontwikkeld is door John Hudson van Tiro Typeworks. Dit lettertype is specifiek ontwikkeld voor bepaalde groottes, namelijk 27 px of 13 px.
8. Raleway
Met 18 verschillende stijlen om uit te kiezen, is Raleway ook een sans serif font met een grote font family, ooit ontwikkeld door Matt McInerney. Als je Raleway mooi vindt, maar iets uniekers zoekt, biedt Raleway Dots ongeveer dezelfde stijl, maar dan met puntjes, die het goed kan doen voor grote titels.
9. PT Sans
PT Sans is ontwikkeld voor de Public Types van de Russische Federatie, en bevat daarom zowel Latijnse als Cyrillische tekens. Er zijn ook diverse andere lettertypen te vinden in de PT font family, inclusief een aantal serif opties.
10. Merriweather
Merriweather’s naam doet je meteen denken aan een prettig ontwerp, wat precies het idee van de ontwerpers was. Merriweather Sans is een zusterproject dat iets minder populair is, maar er wel heel goed mee te combineren is.
Bonuslettertypen en nieuwkomers
De tien bovenstaande lettertypen zijn momenteel de populairste Google Fonts als je simpelweg naar de statistieken kijkt. Maar door alleen de opties te benoemen die momenteel het meest gebruikt worden, doen we nieuwkomers te kort, die minder tijd hebben gehad om hoog in de statistieken te komen.
Daarom hier nog enkele van onze favorieten, die nog niet bovenaan in de lijsten te vinden zijn.
11. Noto Sans / Serif
Noto is een lettertype dat in opdracht van Google is gemaakt, en is te vinden als serif en sans serif versie. Het krijgt regelmatig updates, en er zijn inmiddels al meer dan 100 Noto lettertype, en dat worden er dus steeds meer.
Het doel van Noto is om alle alfabetten en tekens uit verschillende talen te gaan aanbieden, waarbij hun ontwerp hetzelfde en onderscheidend blijft binnen al die verschillende tekens. Afgeleiden hiervan zijn bijvoorbeeld het populaire Noto Sans KR en Noto Sans JP.
12. Nunito Sans
Nunito Sans is een sans serif optie die snel populariteit aan het winnen is. Het gebruik ervan is verdrievoudigd tussen 2018 en 2019, en het wordt elk jaar populairder.
13. Concert One
Concert One is een afgerond, grotesk lettertype dat ideaal is voor titels en koppen. Het ongebruikelijk ontwerp trekt gegarandeerd de aandacht.
14. Prompt
Prompt is een sans serif lettertype dat aangeboden wordt door het Thaise communicatie designbedrijf Cadson Demak. Het is lusloos, wat het equivalent is van schreefloos voor het Thaise alfabet, en bevat zowel Thaise als Latijnse letters.
15. Work Sans
Work Sans is een sans serif lettertype dat geoptimaliseerd is voor het gebruik op schermen. De ontwerpers raden aan om het middengewicht te gebruiken, tussen de 14px en 48 px.
Zo maak je de beste combinaties van Google Fonts
Wanneer je dacht dat het moeilijk is om één lettertype te kiezen uit alle Google Fonts, moet je ze eens gaan proberen te combineren op je website! Gelukkig hoeft je dit probleem niet per sé op te lossen, tenzij je dat wilt. Er zijn verschillende manieren om meerdere Google Fonts eenvoudig te combineren.
Allereerst geeft de website van Google Fonts al een aantal populaire combinaties aan wanneer je op de pagina van een lettertype kijkt:
Daarnaast kan je ook een website als Font Pair gebruiken om nog meer suggesties te krijgen.
Best practices voor het gebruiken van Google Fonts op WordPress websites
Wanneer je eenmaal het perfecte lettertype voor je project gevonden hebt, kan je onderstaande best practices gebruiken om Google Fonts toe te passen binnen WordPress.
Beperk het aantal variaties van je lettertype
Sommige lettertypen in onze lijst, bijvoorbeeld Montserrat en Raleway, bieden wel 18 verschillende gewichten. Alhoewel het altijd fijn is om keuze te hebben, is het niet slim om alle 18 varianten te laden op je WordPress website, aangezien dat je laadtijd verlengt.
Het volgen van onderstaande richtlijn is dan ook echt belangrijk.
Voor de meeste lettertypen is een goede vuistregel om maximaal drie stijlen te gebruiken:
- Normaal
- Cursief
- Vetgedrukt
Veel WordPress websites gebruiken tegenwoordig ook cursief niet meer, en houden het dus bij twee variaties.
Wanneer je zelf Google Fonts op je website zet, kan je precies kiezen welke gewichten je op wil nemen op je site. Ga eerst naar een pagina van het gewenste lettertype, en klik op Select this style bij de gewenste variaties.
Veel WordPress thema’s bevatten inmiddels eenvoudige manieren om Google Fonts te gebruiken en te bepalen welke variaties je wil toepassen. Maar niet alle thema-developers focussen zich op prestaties. Daarom kan het in sommige gevallen beter zijn om de Google Fonts van je thema uit te schakelen en zelf de lettertypen toe te voegen.
Variabele lettertypen worden ook steeds populairder, en worden ondersteund door alle moderne browsers. Ze zijn erg handig, omdat je met één lettertypebestand verschillende doelen kan bereiken. Google Fonts heeft allerlei variabele lettertypen die je kan kiezen, en je kan hier zelfs meteen op filteren.
Overweeg het lokaal hosten van een Google Font
In plaats van het aanbieden van lettertypen via Google’s server, kan je lettertypen ook lokaal hosten, wat je prestaties kan verbeteren. Maar onthoud wel dat Google Fonts meestal al gecachet zijn in de browsers van je bezoekers. We raden je dus aan om de prestaties van verschillende opties te testen.
Wanneer je een ander premium font gebruikt dan Google Fonts, bijvoorbeeld het “Brandon” lettertype dat we op de website van Kinsta gebruiken, is het lokaal hosten (en aanleveren via je CDN) eigenlijk altijd de beste aanpak. Voor meer over dit onderwerp kan je onze artikelen lezen over het lokaal hosten van lettertypen.
Kies een lettertype dat regelmatig updates krijgt
Lettertypen lijken erg op WordPress plugins en thema’s, namelijk dat ze regelmatig updates en verbeteringen nodig hebben. En alhoewel het niet zo nauw komt als bij WordPress plugins, kan het wel de moeite lonen om een lettertype te kiezen dat regelmatig updates krijgt. Zo krijgt de Noto family van Google regelmatig updates sinds 2014.
Omdat veel van de lettertypen op deze lijst populair zijn, kan je er ook wel op rekenen dat ze regelmatig updates krijgen. Mocht je iets kiezen dat niet op de lijst staat, kies dan een lettertype dat in ieder geval populair genoeg is.
Denk na over toegankelijkheid
Volgens de World Health Organization, op basis van data uit een groot onderzoek in 2015, leven ongeveer 253 miljoen mensen met beperkt zicht: 36 miljoen mensen zijn echt blind, en 217 miljoen zijn slechtziend of hebben ernstige beperkingen qua zicht. Daarnaast toont onderzoek aan dat het aantal mensen met enige vorm van visuele beperking 2,2 miljard was.
Wanneer je Google Fonts gebruikt, kan je zelf bepalen hoe dat eruitziet, zoals kleur en grootte. Volg daarbij dus altijd de Web Content Accessibility Guidelines (WCAG) 2.0. Hierdoor is je content altijd goed toegankelijk voor iedereen.
Het volgen van deze richtlijnen maakt je content toegankelijk voor iedereen met een visuele beperking, inclusief blinden en slechtzienden, maar ook mensen met beperkt gehoor, leerbeperkingen, cognitieve beperkingen, verminderde motoriek, spraakproblemen, fotosensitiviteit, en alle combinaties hiervan. Web Content Accessibility Guidelines (WCAG) 2.0
Een belangrijke richtlijn is het kleurcontrast. Ons lettertype was een beetje te licht bij een eerder ontwerp van de Kinsta website, en bezoekers gaven aan dat ze het moeilijk te lezen vonden. Je wil natuurlijk niet geweldige content schrijven, en er vervolgens achterkomen dat mensen het nauwelijks kunnen lezen.
Je kan een tool als Color Contrast Checker van WebAIM gebruiken om te controleren dat de kleuren van je lettertypen inderdaad voldoen aan de officiële aanbevelingen. Zo zie je hier bijvoorbeeld dat de kleuren van ons blog nu voldoen aan de richtlijnen. 👍
Zo voeg je Google Fonts toe aan WordPress
Wanneer je één of twee lettertypen hebt gekozen, moet je ze alleen nog toevoegen aan je website. Dankzij Google Font is dat echt een fluitje van een cent.
Stel dat je een lettertype op je website wil zetten. Je hebt dan drie opties: een plugin installeren, bijvoorbeeld Easy Google Fonts of Google Fonts Typography; je kan de Google Fonts API gebruiken om een font te uploaden naar je website; of je kan het handmatig downloaden en hosten op je eigen website.
Als je wil weten hoe je je lettertypen verandert in WordPress, dan hebben we daar een uitgebreide uitleg voor geschreven.
Samenvatting
Google Fonts zijn geweldig, en worden door miljoenen websites gebruikt. Dit maakt het internet fijner, meer open, sneller en toegankelijker door betrouwbare principes voor typografie en iconografie.
Om je bezoekers een betere algemene ervaring te bieden, raden we je aan om best practices voor lettertypes te volgen, zoals een beperkt aantal stijlen van je lettertype gebruiken, fonts eventueel lokaal hosten, en je houden aan richtlijnen voor toegankelijkheid.
De rest is allemaal aan jou: wat zijn jouw favoriete lettertypen en combinaties van lettertypen bij Google Fonts? Laat het ons weten in de reacties, en lees ook eens ons uitgebreide artikel over WordPress lettertypen!
Salman Ravoof is een autodidactische webdeveloper, schrijver, creator en een groot bewonderaar van Free and Open Source Software (FOSS). Naast techniek is hij enthousiast over wetenschap, filosofie, fotografie, kunst, katten en eten. Lees meer over hem op zijn website en kom in contact met Salman op X.
Laat een reactie achter