Wordpress

15 beste Google-lettertypen op nummer in 2021 (plus tips om ze te gebruiken)

Er zijn 1052 verschillende Google Font-families gratis beschikbaar (op het moment van schrijven van dit artikel). Dat zijn veel keuzes! Het is dus geen wonder dat je hulp nodig hebt bij het vinden van die speld in een hooiberg met een lijst met de beste Google Fonts.

We hebben het voor je, en dan zullen we ook enkele best practices delen voor het gebruik van Google Fonts in WordPress.

Het kiezen van een lettertype is meer dan alleen een esthetische keuze - het kan een aanzienlijk effect hebben op de bouncepercentages en conversiepercentages van uw site, vooral als u een lettertype kiest dat moeilijk te lezen is. Daarom loont het om even de tijd te nemen om de perfecte Google Fonts-familie voor uw website te kiezen, in plaats van het eerste lettertype te gebruiken dat u tegenkomt.

Als je nog meer lettertypen nodig hebt, bekijk dan ons bericht over 50+ moderne lettertypen voor gebruik op je WordPress-website.

Waarom Google-lettertypen gebruiken?

Er zijn duizenden lettertype-opslagplaatsen op internet, dus wat maakt Google Fonts precies zo speciaal?

Google Fonts-catalogus.
Google Fonts-catalogus.

Ten eerste is het gratis! Bovendien worden Google Fonts onderhouden en geleverd door Google, wat betekent dat ze gegarandeerd veilig zijn. Natuurlijk zijn er tal van onbetrouwbare websites waar je gratis lettertypen kunt downloaden, maar wie weet wat je nog meer met die bestanden zult vinden?

De kwaliteit van lettertypen op dergelijke websites kan soms ook twijfelachtig zijn.

Google heeft een selectie samengesteld van meer dan duizend hoogwaardige lettertypen. Als je geen grafisch ontwerper bent met een perfect oog voor typografie, is het een veiligere keuze.

Ten tweede zijn er geen ingewikkelde licentiebeperkingen. Alle lettertypen in de Google Fonts-catalogus zijn open source en gratis te gebruiken in commerciële projecten. Je kunt ze downloaden of insluiten op je site, en je kunt ze zelfs gebruiken in printprojecten.

Hoewel er geen uniforme licentie is, gebruiken de meeste lettertypen in de repository de Open Font-licentie.

Open Lettertypelicentie.
Open Lettertypelicentie.

Andere "gratis lettertypen" zijn zelden gratis en worden geleverd met een hele reeks verwarrende licentiebeperkingen die u in heet water kunnen brengen als u een fout maakt. Helaas hebben Google Fonts niet dezelfde bagage.

En tot slot, het is moeiteloos om Google Fonts toe te voegen aan uw website met behulp van de Google Fonts API. U kunt ze ook afzonderlijk downloaden en via FTP/SFTP naar uw webserver uploaden.

Hoewel Google Fonts over het algemeen eenvoudig is en misschien niet zo flitsend als sommige betaalde lettertypen, verslaat het zeker webveilige lettertypen die vooraf zijn geïnstalleerd met de belangrijkste besturingssystemen, dezelfde lettertypen die iedereen duizenden keren eerder heeft gezien.

Er zijn 1052 verschillende Google Font-families gratis beschikbaar ... voel je je al overweldigd? 🤯 Beperk je keuzes met behulp van dit bericht 👇Klik om Tweet

Waar u op moet letten in een Google-lettertype

Als er één ding is dat u moet leren bij het ontwerpen van een website, dan is het wel hoe u een Google-lettertype kiest dat geschikt is voor uw project. Een goede typografie maakt of breekt je site.

Het lijkt misschien een onbelangrijk detail, maar het kan het verschil zijn tussen iemand die uw site voortijdig verlaat of blijft hangen om een ​​trouwe lezer of klant te worden.

Het kiezen van het juiste lettertype is iets wat grafische ontwerpers jarenlang onder de knie hebben, maar met een paar principes in gedachten kun je een mooi lettertype voor je website kiezen.

  • Past bij uw merk: Dit is misschien wel het meest kritische aspect. De beste websites hebben een lettertype dat pronkt met hun persoonlijkheid en toch leesbaar is en past bij het huidige ontwerp. Apple en Iron Maiden gebruiken bijvoorbeeld enorm verschillende lettertypen, maar ze passen allebei bij hun merk.
  • Leesbaarheid: Het tweede meest cruciale principe is leesbaarheid. Een gekke fantasie of een grungy lettertype past zeker bij uw merk, maar als uw bezoekers het niet kunnen lezen, zullen ze snel vertrekken. Daarom moeten uw lettertypen professioneel en leesbaar zijn.
  • Lettertypeclassificatie: Hoewel er honderden manieren zijn om een ​​lettertype te classificeren, zijn dit de vijf hoofdtypen: schreef, schreefloos, schrift, monospace en decoratief. Een script- of serif-lettertype straalt elegantie uit, terwijl monospace-lettertypen populair zijn op technische sites. Als u deze classificaties kent, krijgt u een beter startpunt voor uw zoekopdracht.
  • Display- of tekstlettertype: Displaylettertypen zijn voor grote formaten, kopteksten of printprojecten. Ze kunnen het zich veroorloven om minder leesbaar te zijn omwille van een uniek ontwerp. De primaire richtlijn van body fonts is leesbaarheid, aangezien ze het grootste deel van uw site zullen uitmaken.
  • Stemming en intentie: Net als elk ander artistiek werk ontwerpen kunstenaars lettertypen voor specifieke stemmingen en instellingen. De meeste lettertypen worden geleverd met opmerkingen over hoe ze zijn ontworpen en hoe u ze kunt gebruiken. Gebruik ze om te beslissen of het lettertype bij uw project past.

De 10 beste Google-lettertypen in 2021 (volgens de wijsheid van de menigte)

Dus, hoe ontwikkel je een lijst met de beste Google-lettertypen als zoveel hiervan subjectief is? We willen niet dat deze hele lijst bevooroordeeld is, dus we gaan met de gegevens aan de slag om een ​​lijst samen te stellen met de meest populaire Google-lettertypen.

We gebruiken Google Fonts-analyse om te vertrouwen op de wijsheid van de menigte. Met meer dan 50 biljoen totale lettertypeweergaven heeft Google slechts een klein beetje gegevens om uit te halen.

Daarna gaan we wat verder dan de ruwe populariteitscijfers en kiezen we een aantal opkomende HTML-lettertypen die aan populariteit winnen.

Klaar? Laten we erin duiken!

1. Roboto

robot.
robot.

De langlopende nummer 1 plek en BehmasterRoboto, het favoriete lettertype van Google, is een schreefloos aanbod van Christian Robertson dat Google heeft ontwikkeld als het systeemlettertype voor Android. Het is nu enorm populair, is verkrijgbaar in 12 verschillende stijlen en verschijnt meerdere keren in de analyses van Google Fonts.

Roboto is bijvoorbeeld het meest populaire lettertype. Maar Roboto Condensed is ook het zesde meest populaire lettertype, en Roboto Slab verschijnt ook op nummer 12!

2. Open Sans

Openen zonder.
Openen zonder.

Open Sans Condensed is een goed leesbaar lettertype in opdracht van Google en geïnspireerd op zijn voorganger Droid Sans. Google gebruikt Open Sans op sommige van zijn websites en zijn print- en webadvertenties. Open Sans Condensed, het zusterlettertype hier, heeft ook de dertiende meest populaire plek op Google Fonts.

3. Lato

Lato.
Lato.

Lato is een andere populaire keuze van Łukasz Dziedzic. Het heeft een heel verhaal achter het ontwerp, waarbij tegenstrijdige doelen worden afgewogen, wat resulteert in een uniek, lichtgewicht schreefloos lettertype.

4. montserrat

Monsterserrat.
Monsterserrat.

Montserrat is een schreefloos lettertype van Julieta Ulanovsky, die in de gelijknamige wijk Montserrat in Buenos Aires woont. Met 18 verschillende stijlen variërend van licht tot zwaar heb je behoorlijk wat keuze.

5. Oswald

Oswald.
Oswald.

Oswald is een schreefloos lettertype dat oorspronkelijk is ontwikkeld door Vernon Adams. Het is ontworpen met de kenmerkende alternatieve gotische stijl in gedachten, wat duidelijk wordt door de gedurfde lijnen.

6. Source Without Pro

Bron Sans Pro.
Bron Sans Pro.

Source Sans Pro is een schreefloos lettertype gemaakt voor Adobe en Adobe's eerste open-source lettertype. Gemaakt door Paul Hunt, de lichte belettering maakt het schoon en leesbaar.

7. Slabo 27px/13px

Slabo.
Slabo.

Slabo is een schreeflettertype ontwikkeld door John Hudson van Tiro Typeworks. Dit lettertype is speciaal ontworpen voor bepaalde formaten - 27px of 13px, afhankelijk van uw behoeften.

8. Raleway

Raleway
Raleway

Met 18 verschillende stijlen is Raleway een ander groot schreefloos lettertype, oorspronkelijk gemaakt door Matt McInerney. Als je van Raleway houdt en op zoek bent naar iets unieks, dan biedt Raleway Dots een vergelijkbare styling met een gestippelde benadering die kan werken voor grote krantenkoppen.

9. PT Zonder

PT Zonder.
PT Zonder.

PT Sans is ontwikkeld voor de openbare typen van de Russische Federatie en bevat als zodanig zowel Latijnse als Cyrillische tekens. Er zijn ook verschillende andere lettertypen in de PT-familie, waaronder enkele serif-opties.

10. Merriweer

Merriweer.
Merriweer.

De naam van Merriweather roept het idee op van een aangenaam ontwerp, en dat is precies wat de ontwerpers bedoelden. Hoewel niet zo populair, is Merriweather Sans een zusterproject dat er uitzonderlijk goed bij past.

Bonuslettertypen + nieuwkomers

Volgens de cijfers zijn de tien lettertypen hierboven de meest populaire Google-lettertypen. Maar alleen het tonen van de meest populaire opties bewijst een slechte dienst aan geweldige opkomende lettertypen die niet de aandacht hebben gekregen om in de analyses te verschijnen.

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

11. Noto Sans / Serif

Noto Sans/Serif.
Noto Sans/Serif.

Noto is een lettertype in opdracht van Google dat zowel in schreef- als schreefloze versies wordt geleverd. Het ontvangt regelmatig updates en er zijn nu meer dan 100 Noto-lettertypen, en er komen er steeds meer bij!

Het doel van Noto is om alle alfabetten en tekens uit verschillende talen te dekken, terwijl het aparte ontwerp harmonieus is in honderden verschillende lettertypefamilies. Deze derivaten omvatten de populaire Noto Sans KR en Noto Sans JP.

12. Nunito Sans

Nunito Sans.
Nunito Sans.

Nunito Sans is een schreefloze optie die snel in populariteit groeit. Het gebruik ervan is tussen 2018 en 2019 verdrievoudigd en het wordt elk jaar alleen maar populairder.

13. Concert één

Concert één.
Concert één.

Concert One is een afgerond, grotesk lettertype dat een geweldige optie is voor koppen. Het onconventionele ontwerp zal zeker de aandacht trekken.

14. Vraag

Snel.
Snel.

Prompt is een schreefloos aanbod van het Thaise communicatieontwerpbureau Cadson Demak. Het is lusloos (het Thaise equivalent van schreefloos) en bevat zowel Thaise als Latijnse karakters.

15. Werk zonder

Werk zonder.
Werk zonder.

Work Sans is een schreefloos lettertype dat is geoptimaliseerd voor gebruik op schermen. De ontwerpers raden aan de middengewichtstijlen te gebruiken voor alles van 14px-48px.

Supersnelle, betrouwbare en volledig veilige hosting nodig voor uw WordPress-website? Behmaster biedt dit alles en 24/7 ondersteuning van wereldklasse door WordPress-experts. Bekijk onze plannen

Hoe u de beste combinaties van Google-lettertypen kunt maken

Als u dacht dat het moeilijk was om één lettertype uit Google Fonts te kiezen, wacht dan tot u ze op uw site probeert te koppelen! Gelukkig is dit geen probleem dat u hoeft op te lossen (tenzij u dat wilt). U kunt een aantal manieren gebruiken om de beste Google Fonts-combinaties te bedenken.

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

Ontdek populaire Google Fonts-combinaties.
Ontdek populaire Google Fonts-combinaties.

Verder kun je ook een site zoals Font Pair gebruiken om meer suggesties te krijgen.

Best practices voor het gebruik van Google Fonts op WordPress

Zodra u de perfecte lettertypen voor uw project hebt gevonden, volgen hier enkele praktische tips voor het gebruik van Google Fonts op WordPress.

Beperk het aantal lettergewichten dat u gebruikt

Sommige van deze lettertypen, zoals Montserrat en Raleway, worden geleverd met 18 verschillende lettergewichten. Hoewel dat goed is om u opties te geven, wilt u niet alle 18 gewichten op uw WordPress-site laden, omdat dit uw laadtijden vertraagt.

Het volgen van deze richtlijn is erg belangrijk!

Voor de meeste lettertypen is het een goede vuistregel om maximaal drie gewichten te gebruiken:

  • Regular
  • cursief
  • pin

Veel WordPress-sites die we tegenwoordig zien, slaan zelfs cursief over en gebruiken gewoon twee verschillende lettergewichten.

Als u zelf Google Fonts insluit, kunt u precies kiezen welke gewichten u wilt opnemen. Ga eerst naar een lettertypepagina en klik vervolgens op Selecteer deze stijl naast degene die u wilt.

Een lettertype kiezen in Google Fonts.
Een lettertype kiezen in Google Fonts.

De meeste WordPress-thema's bevatten tegenwoordig eenvoudige manieren om te kiezen welke Google-lettertypen en -gewichten u wilt gebruiken. Maar niet alle thema-ontwikkelaars zijn gericht op prestaties. Dus in sommige gevallen is het misschien beter om Google Fonts in je thema uit te schakelen en zelf toe te voegen.

Variabele lettertypen beginnen ook populair te worden en worden door alle moderne browsers ondersteund. Deze zijn geweldig omdat het één lettertypebestand kan transformeren met verschillende eigenschappen. Google Fonts heeft tal van variabele lettertypen om uit te kiezen, en u kunt uw zoekopdracht zelfs verfijnen tot die specifiek.

"Instelling

Overweeg om Google Fonts lokaal te hosten

Als alternatief voor het aanbieden van lettertypen vanaf de server van Google, kunt u lettertypen ook lokaal hosten, wat prestatievoordelen biedt. Houd er echter rekening mee dat de meeste Google-lettertypen waarschijnlijk al in de browser van mensen zijn opgeslagen. We raden je daarom aan om je prestatietests uit te voeren.

Als u een ander premium-lettertype gebruikt dan Google-lettertypen, zoals het "Brandon"-lettertype dat we gebruiken op onze Behmaster site, is het lokaal hosten (en bedienen vanaf uw CDN) de beste route. Voor meer informatie over dit onderwerp, bekijk onze berichten over het lokaal hosten van lettertypen.

Kies een lettertype dat 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 de inzet lang niet zo groot is als WordPress-plug-ins, kan het toch voordelig zijn om een ​​lettertype te kiezen dat regelmatig wordt bijgewerkt. Zo krijgt de familie Noto van Google sinds 2014 regelmatig updates.

Omdat de meeste lettertypen op deze lijst populair zijn, is het waarschijnlijk een goede gok dat elk lettertype op deze lijst regelmatig wordt bijgewerkt en verbeterd. En als u besluit van de lijst af te gaan, is het nooit een slecht idee om ervoor te zorgen dat het lettertype dat u kiest populair genoeg is om de aandacht te trekken.

Vergeet de toegankelijkheid niet

Volgens de Wereldgezondheidsorganisatie leven volgens gegevens die in 2015 zijn verzameld naar schatting 253 miljoen mensen met een visuele beperking: 36 miljoen zijn blind en 217 miljoen hebben een matige tot ernstige visuele beperking. Daarnaast is het aantal mensen met een vorm van beperking gestegen tot 2.2 miljard per 2021.

Wanneer u Google Fonts gebruikt, kunt u bepalen hoe het eruitziet met CSS, zoals kleur en grootte. Vergeet dus niet de Web Content Accessibility Guidelines (WCAG) 2.0 te volgen. Dat zorgt ervoor dat uw inhoud voor iedereen gemakkelijk toegankelijk is.

Door deze richtlijnen te volgen, wordt inhoud toegankelijk voor een breder scala aan mensen met een handicap, waaronder blindheid en slechtziendheid, doofheid en gehoorverlies, leerstoornissen, cognitieve beperkingen, beperkte beweging, spraakstoornissen, lichtgevoeligheid en combinaties hiervan. – Richtlijnen voor toegankelijkheid van webcontent (WCAG) 2.0

Een kritische richtlijn is het kleurcontrast. Ons lettertype was een beetje te licht op een ouder ontwerp van de Behmaster website, en bezoekers uitten hun zorgen omdat het moeilijk leesbaar was. Het laatste dat u wilt doen, is geweldige inhoud publiceren, alleen om de ogen van mensen te vermoeien!

U kunt een tool zoals de Color Contrast Checker van WebAIM gebruiken om te zien of uw lettertypekleuren voldoen aan de officiële aanbevelingen. Zo kun je zien dat de kleuren op onze blogposts nu de test hebben doorstaan. 👍

Tool voor het controleren van kleurcontrasten.
Tool voor het controleren van kleurcontrasten. 

Hoe Google-lettertypen aan WordPress toe te voegen

Met een of twee lettertypen uitgezocht, is de laatste stap om het toe te voegen aan uw website. Dankzij Google Fonts is deze taak nog eenvoudiger dan normaal.

Stel, u wilt een lettertype op uw website krijgen. In dat geval heb je drie opties: het installeren van een plug-in zoals Easy Google Fonts of Google Fonts Typography, het gebruiken van de Google Fonts API om het lettertype naar je site te uploaden, of het handmatig downloaden en hosten op je website.

Als u wilt weten hoe u uw lettertypen in WordPress kunt wijzigen, hebben we een gedetailleerde handleiding geschreven om u te helpen.

Het kiezen van een lettertype is meer dan alleen een esthetische keuze - het kan een aanzienlijk effect hebben op de bouncepercentages en conversiepercentages van uw site 😲 Ga hier aan de slag ⬇️Klik om Tweet

Samengevat

Google Fonts zijn fantastisch en worden door miljoenen websites gebruikt. Ze maken het web aangenamer, opener, sneller en toegankelijker door middel van solide typografie- en iconografische principes.

Om een ​​betere algehele ervaring voor uw bezoekers te garanderen, raden we u aan de beste lettertypen te volgen, zoals het beperken van lettertypegewichten, het lokaal hosten van lettertypen (indien nodig) en u aan de toegankelijkheidsrichtlijnen houden.

Nu aan jou - wat zijn je favoriete lettertypen en lettertypeparen van Google Fonts? Laat het ons hieronder in de reacties weten en vergeet niet onze uitgebreide handleiding over WordPress-lettertypen te lezen!

Gerelateerde artikelen

0 Comments
Inline feedbacks
Bekijk alle reacties
Terug naar boven knop