Google Fonts: mooie lettertypes op je website

Wat is Google Fonts?

Google Fonts is een website met gratis en open source lettertypes. Met Google Fonts is het makkelijk om prachtige typografie op je website te gebruiken. Deze lettertypes mag je gratis gebruiken, ook voor commerciële projecten. Google host deze fonts en zet deze om naar een bruikbaar lettertype. Je hoeft alleen maar een link toe te voegen aan je website.

Hoe voeg je Google Fonts toe aan je website?

Het makkelijkste is om de Google Fonts toe te voegen aan de head van je HTML-code. Hiervoor hoef je alleen maar een link te kopiëren en plakken. Op de website van de Google Fonts API zie je precies hoe dit werkt.

Als je geen toegang hebt tot de HTML-code van je website of deze niet kunt aanpassen kun je een plugin gebruiken. Kijk bijvoorbeeld naar de Easy Google Fonts plugin voor Wordpress. Hiermee voeg je Google Fonts toe aan je Wordpress website zonder de code aan te hoeven raken.

Kan ik de Google Fonts ook downloaden naar mijn eigen computer?

Ja, je kunt Google Fonts ook downloaden naar je eigen computer. Zo kan je de lettertypes ook gebruiken in bijvoorbeeld Photoshop of Illustrator. Je mag de fonts ook gebruiken voor drukwerk en andere doeleinden. Om een lettertype op te slaan klik je op de knop 'Download family' op de pagina van het lettertype. Je download dan een ZIP-bestand waar alle lettertype varianten in staan.

Hoe kies je een goed lettertype?

Met Google Fonts heb je meer dan 1.000 lettertypes waar je uit kunt kiezen. Maar hoe kies je nu een goed lettertype? Zorg er ten eerste voor dat je lettertype goed leesbaar is. Je kunt wel een super interessante tekst hebben, hij is waardeloos als hij niet te lezen is. Zorg er verder voor dat je lettertype verschillende diktes (weights in het Engels) heeft. Hiermee zorg je ervoor dat je een duidelijk contrast tussen de kopjes en de lopende tekst kunt maken. Op Google Fonts kun je makkelijk zien in hoeveel en welke diktes een lettertype beschikbaar is. Check ons artikel met typografie tips voor meer handig advies en voorbeelden.

Mooie Google Font voorbeelden en combinaties

1. Montserrat + Lato

Montserrat en Lato zijn twee van de meest gebruikte lettertypes van Google Fonts. Beide lettertypes zijn schreefloos en prettig te lezen vanaf je monitor. Montserrat is hier in SemiBold gebruikt en contrasteert hierdoor mooi met Lato.

Lettertypes

Montserrat
Lato

Kleuren

Achtergrondkleur: #083D77
Tekstkleur: #E8F4F7

2. Teko + Ubuntu

De scherpe randen en hoeken van Teko geven het lettertype een technische, strakke uitstraling. Dit gevoel wordt extra versterkt door Teko in hoofdletters te gebruiken. De ronde, vriendelijke vormen van Ubuntu contrasteren hier mooi bij.

Lettertypes

Teko
Ubuntu

Kleuren

Achtergrondkleur: #D3D7DB
Titel: #EA5147
Tekst: #657D83

3. Roboto Condensed + Open Sans

De dikke letters van Roboto Condensed vallen goed op en contrasteren goed bij het eenvoudigere schreefloze lettertype Open Sans. Door te kiezen voor de condensed (smallere) variant past er meer tekst op een regel en is het contrast met het andere lettertype nóg groter.

Lettertypes

Roboto Condensed
Open Sans

Kleuren

Achtergrondkleur: #FF2214
Tekstkleur: #FFFFFF

4. Merriweather + Noto Sans

Ook hier combineren we een schreef met een schreefloze letter. Merriweather is in dit geval ook nog eens dik gemaakt zodat er nog meer contrast ontstaat. Deze combinatie met Noto Sans werkt goed voor nieuws- of magazine websites.

Lettertypes

Merriweather
Noto Sans

Kleuren

Achtergrondkleur: #D3E0F3
Tekstkleur: #3F4E5B

5. Archivo + Cardo

Deze combinatie werkt goed voor moderne websites. Een schreefloos lettertype wordt hier gecombineerd met een klassieke schreef. Archivo, het lettertype dat hier voor de titel wordt gebruikt, ziet er modern uit. Vooral de letter G ziet er interessant uit.

Lettertypes

Archivo
Cardo

Kleuren

Achtergrondkleur: #292929
Titel: #7FEFBD
Tekst: #F3EFE0

6. Playfair Display + Work Sans

Door de dunne schreven is Playfair Display alleen op langere en grotere teksten te lezen. De schreven geven het geheel een klassieke uitstraling. Playfair Display is gecombineerd met Work Sans, een prettig leesbaar schreefloos lettertype.

Lettertypes

Playfair Display
Work Sans

Kleuren

Achtergrondkleur: #753FB9
Tekstkleur: #FFFFFF

7. PT Serif + Roboto Slab

PT Serif is een lettertype met schreef. Dik en schuin (italic) gedrukt geeft het font meer karakter. Roboto Slab heeft serifs die overal even dik zijn. Deze zogenaamde 'chocoladeletters' zien er hierdoor duidelijk anders uit dan de meer traditionele schreven van de titels.

Lettertypes

PT Serif
Roboto Slab

Kleuren

Achtergrondkleur: #FFFFFF
Tekstkleur: #000000

8. Questrial + Lustria

Questrial is opgebouwd uit smalle, lange letters. Hierdoor krijgt het lettertype een sierlijke uitstraling. Door deze te combineren met het klassieke Lustria, met schreef, krijgt het geheel een elegante look.

Lettertypes

Questrial
Lustria

Kleuren

Achtergrondkleur: #FF006B
Tekstkleur: #FFFFFF

9. Ultra + Source Code Pro

Met deze lettertype combinatie maak je pas echt een statement. Het megavette lettertype Ultra valt goed op door de ronde vormen en dikke schreven. Door dit lettertype te combineren met een monospace lettertype waarvan alle letters even dik zijn ontstaat een maximaal contrast. Deze combinatie doet retro aan door de klassieke lettertypes.

Lettertypes

Ultra
Source Code Pro

Kleuren

Achtergrondkleur: #0C3833
Tekstkleur: #E9E5DA

10. Libre Baskerville + Noto Sans

Het klassieke Libre Baskerville heeft ronde vormen en subtiele schreven. Door de smalle letters ziet het font er extra sierlijk uit. Open Sans is een eenvoudig lettertype dat niet teveel aandacht opeist en fijn leest. De neutrale maar vriendelijke vormen maken het perfect voor lange stukken tekst. Ook is het lettertype beschikbaar in Griekse en cyrillische tekens.

Lettertypes

Libre Baskerville
Noto Sans

Kleuren

Achtergrondkleur: #F4EBDD
Tekstkleur: #1E5283

Meer typografie inspiratie?

Bekijk dan meer websites met Google Fonts of onze typografische websites.