Beste gratis Google web fonts | lettertypes voor WordPress website

Welke letterypes en fonts kun je het beste gebruiken voor je website? In dit artikel over typografie geef ik een overzicht van de beste mooiste en gratis lettertypes van Google Web Fonts voor WordPress.

Lettertypes en fonts voor websites

Fonts, I love it! Sinds mijn 16e één van mijn hobbies. Check mijn site fontzoeker.nl die al sinds 2003 (!) ongewijzigd online is. Het is een website om fonts en lettertypes te herkennen en de naam van het font te achterhalen. Destijds revolutionair, maar inmiddels achterhaald door diensten van bijvoorbeeld Adobe.
Het is een website die ik destijds maakte in Flash, en wonderwel doet ie het nog steeds. Anno 2019 weigert de site helaas in bepaalde webbrowsers, maar voor old times sake laat ik hem nog even online staan.

Wat zijn Google Web Fonts?

Google Web Fonts is een verzameling van ongeveer 1000 lettertypes die je gratis mag gebruiken voor je website. Deze lettertypes worden door Google gehost op hun servers. De fonts worden online door jouw website ingeladen en aan de bezoeker getoond. Daardoor is het niet meer nodig dat deze lettertypes op de computer van je websitebezoeker aanwezig is. Het tijdperk van Arial, tekton en Verdana is hierdoor (gelukkig) voorbij. Hieronder vind je een overzicht van de beste Google Web Fonts die naadloos met WordPress werken. Enkele handige tips vind je onderaan!

Voordelen Google Web Fonts

Een bijkomend voordeel is dat deze fonts overal en altijd werken. Zowel op PC als Mac en op desktop, tablet en mobiel. Geen zorgen dus, zolang je ze maar goed implementeert in je website. De meeste WordPress thema’s ondersteunen in 2019 standaard Google Fonts.
Tijdens de cursus leg ik uit hoe dit goed functioneert en hoe je alle vrijheid hebt om de typografie van je WordPress website verder te optimaliseren. Tijdens de volgende grafisch ontwerp en webdesign trainingen gaan we dieper op het gebruik van fonts in:


Schreef of schreefloos font voor webdesign

De eerste keuze die je voor je lettertypes dient te maken is de keuze tussen een schreefletter of een schreefloze letter. Op onderstaande afbeelding is het verschil goed te zien. Bij het schreeflettertype staan de schreven aangegeven met rode rondjes, het schreefloze lettertypen heeft deze extra streepjes niet.

Schreef lettertypes

Schreven (in het engels engels Serif) zijn de dunne streepjes aan het uiteinde van de ‘pootjes’ van een letter. Schreven in een lettertype begeleiden de ogen van de lezer over de regel. Vooral voor lange teksten in drukwerk, zoals in boeken, magazines en kranten, is leesbaarheid erg belangrijk. Daarom wordt teksten in boeken en kranten vaak in een schreef lettertype gedrukt. Bekende en veelgebruikte lettertypes met schreef zijn Times, Palatino en Georgia.

Schreefloze lettertypes voor websites

Bij kortere en grotere teksten zoals titels, inleidingen en industriele toepassingen als verkeersborden heeft het oog geen begeleiding nodig en kunnen schreven zelfs storend werken. Korte en grote teksten worden daarom doorgaans in een schreefloos lettertype opgemaakt. Ook op computers en beeldschermen wordt vooral gebruikgemaakt van schreefloze lettertypen. De schreven storen het letterbeeld op een scherm, omdat dit beeld uit pixels samengesteld is. Hoe kleiner het lettertype hoe storender de schreven zijn weergegeven op een beeldscherm. Veel gebruikte en bekende schreefloze lettertypes zijn o.a. Arial, Helvetica, Calibri en Verdana.

Lijst beste gratis fonts voor WordPress

Mijn favoriete gratis fonts die ik hieronder voor je heb geselecteerd. De onderstaande lettertypes werken op elk platform, Mac of PC, en alle telefoons en tablets. Mocht je suggesties hebben? Prima. Laat maar weten via contact. Dank, Arthur Wentzel


Voorbeelden van mooie Google web fonts

Bekijk enkele voorbeelden van mooie lettertypes die je voor website kunt gebruiken. De naam van het font zie je als je over de afbeelding gaat. Klik om het voorbeeld te vergroten.



Top 20 Google web fonts | Schreefloze letterypes

Bekijk onder het lijstje de voorbeelden van de schreefloze fonts (sans).
Work Sans
Fira Sans
Chivo
Source Sans Pro
Poppins (alternatief voor Futura)
Lato (komt van alles nog dichtst bij de Gill sans)
Open Sans (no-nonsense, prima leesbaar)
Karla
Roboto
Alegreya Sans
Archivo Narrow
Raleway
Montserrat (veilige keuze met veel gewichten)
Rubik | 5 gewichten | Voorbeeld Rubik font


Bekijk de voorbeelden van schreefloze lettertypes/fonts

 


Top 20 Google web fonts | Lettertypes met schreef

Bekijk onder het lijstje de voorbeelden van de lettertypes met schreef (serif).
Arvo | 4 gewichten
Playfair Display | 6 gewichten
Lora | 4 gewichten
Source Serif Pro
Libre Baskerville (hele economische letter)
Neuton
Cardo
Bitter
Domine
Old Standard TT
Alegreya
Roboto Slab
Scope One | Nieuw, nadeel: maar 1 gewicht
Fjord one | subtiele literaire letter


Bekijk de voorbeelden van lettertypes/fonts met schreef

 

Blij met deze design tip?

Heb je een training gevolgd en tevreden over de handleidingen en tips? Laat dan een review achter. Je helpt Arthur dan zijn werk sustainabel te maken. Bekijk ter inspiratie de reviews:


Top 10 Google web fonts | Fun fonts

Een lijstje met 4 fun fonts. Leuk voor restaurants, uitnodigingen etc.


Cherry Swash
Lobster
Lobster Two
Cherry Swash
BioRhyme, frivole cocktail-letter
Abril Fatface
Gravitas | Mooi voor klassieke koppen. Variant op het 18e eeuwse Bodoni lettertype
Alfa Slab One | Mooie vette chocoladeletter. Perfect voor Sinterklaastijd


Praktijkvoorbeelden van gratis WordPress fonts

Enkele praktijkvoorbeelden van gratis fonts voor WordPress. De onderstaande lettertypes werken altijd heel prettig en zijn een veilige keus voor iedere WordPress website. Waarom? Ze zijn heel goed leesbaar, zowel groot voor koppen en klein voor platte tekst. Daarnaast hebben deze lettertypes heel veel gewichten, dus van dun naar dik, zodat je altijd de goede toon kan zetten met je typografie.

Lettertypes voor huisstijl, branding en drukwerk

Google Fonts werken in principe alleen online. Je kan ze dus niet allemaal gebruiken voor je hele huisstijl en branding en andere communicatie-uitingen. De onderstaande fonts kun je ook downloaden voor je computer, dus als truetype, postscript of open type bestand zodat je ze ook voor een huisstijl of drukwerk kan gebruiken.

Fira font

De Fira Sans is altijd goed en een veilige keus. De kan het Fira Font gratis downloaden als OTF voor Mac en PC zodat je het ook voor andere communicatie-uitingen zoals je huisstijl kan gebruiken.
wordpress google font - Fira sans


Montserrat font

De Montserrat Sans is een mooi massieve letter in veel gewichten. Van heel heel dun naar heel vet. In principe geschikt voor vrijwel elke website.
wordpress google font - Montserrat sans


Chivo font

wordpress google font - Chivo sans


Tips voor Typografie en Google web fonts

Tip: Google fonts live bekijken

Een handige website die ik vaak gebruik om te experimenteren met verschillende lettertypes. Je hebt gelijk een preview van jouw text in Google Web Fonts.
Type Zebra

Tip: WhatFont checken in je browser

Een andere heel handige tool voor Chrome voor typografie is WhatFont. Met WhatFont kun je heel makkelijk lettertypes analyseren en achterhalen.
WhatFont voor Chrome browser


Update 2019

Er komen af en toe weer niewe Google Webfonts uit. Dit zijn mijn laatste ontdekkingen:
Cairo
Kavoon
Monoton
Exo 2 | Mooi voorbeeld van Exo 2 op de site van Nederlandse ontwerper Henk Knoeff

Links typografie

www.designbombs.com/fantastic-fonts


Meer fonts en lettertypes voor WordPress gebruiken

Dit werkt een wat ingewikkelder dan het gebruik van Google Web Fonts. Hieronder staat dit uitgebreid omschreven:


Succes met je fonts!