Google Fonts: mooie lettertypes op je website
Met Google Fonts is het heel makkelijk om lettertypes op je website te gebruiken. Maar hoe doe je dat en welke fonts moet je kiezen?
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
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
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
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
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
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
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
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
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
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
Kleuren
Achtergrondkleur: #F4EBDD
Tekstkleur: #1E5283
Meer typografie inspiratie?
Bekijk dan meer websites met Google Fonts of onze typografische websites.
