Het perfecte (web)font: Tips en uitleg

Designers steken vaak veel tijd in het uitzoeken van de perfecte fonts voor hun website. En daar kan jij een voorbeeld aan nemen! Een goede combinatie van fonts kan heel veel uitmaken.

Het perfecte font – and how to find it

Wat is precies een (web)font, hoe kies je de beste fonts voor jouw website en waar moet je goed opletten bij het uitkiezen van een font? Een font is een lettertype die je kunt gebruiken voor een document. Er zijn drie basiscategorieën van fonts: serif, sans-serif en decoratief. Serif betekent eigenlijk dat er wat meer details in het font zitten, bij sans-serif heeft het font eigenlijk helemaal geen details. Dat geeft een wat modernere uitstraling. Decoratieve fonts zijn vaak sierlijke letters. Decoratieve lettertypes zijn vaak minder goed leesbaar en niet altijd goed om te gebruiken voor een website. Dit kan wel, maar met mate.

Serif (Schreef)

Sans-serif (Schreefloos)

Decoratief

Webfonts: speciaal voor het web.
Webfonts zijn fonts die gebruikt kunnen worden voor een website. Webfonts staan niet standaard op iedere computer maar moeten via een server gedownload en geladen worden. Nadat deze gedownload is kan hij in de browser worden weergeven en gebruikt. Dit kost veel tijd. Daarom heeft Google het makkelijk gemaakt en bestaat bijvoorbeeld Google Fonts. Dit is een verzameling van webfonts die door Google zelf worden aangeboden. Hierbij hoef je zelf de fonts niet te laden maar worden ze via JavaScript geladen. Je hoeft dus niet meer stuk voor stuk fonts te downloaden maar je hebt ze allemaal in één keer geladen op je computer staan. Dit zorgt ervoor dat je de mooiste webpagina’s kan maken met deze zeer uiteenlopende fonts die tegelijkertijd niet voor een vertraging van de pagina zorgen. Alleen maar voordelen.  

5 vuistregels voor het kiezen van de juiste fonts voor je website

1. Kijk naar je huisstijl
Kijk als eerst goed naar je website en naar de huisstijl van je website. Ga daarna zoeken naar fonts die goed bij die huisstijl passen, zodat het uiteindelijk een mooi geheel vormt. Bijvoorbeeld: heeft je website een zachte en vriendelijke uitstraling? Gebruik dan een font met afrondingen in de stokken van elke letter.

2. Niet te veel fonts
Hou het rustig op jouw website en gebruik niet teveel fonts. Anders oogt je site erg rommelig en bovendien wordt de laadtijd van je website langer.

3. Kies leesbare fonts
Sommige browsers hebben op kleinere tekstgroottes meer moeite met fonts met dunne lijntjes of schreven. Kies daarom websafe-fonts voor leestekst en custom fonts voor kopjes.

4. Goede combinatie
Kies voor een goede combinatie van fonts. Fonts die goed bij elkaar passen brengen overzicht en rust mee op de website. Denk aan wat goed bij de huisstijl van je website past.

5. Check online font previews
Pak niet zomaar wat fonts die je mooi vindt. Online kun je verschillende fonts met elkaar vergelijken en combineren. Zo kun je kijken of fonts bij elkaar passen en of het goed bij jouw website past.

Vorm en stijl is niet alles

Natuurlijk is het belangrijk om goed te kijken naar schreef- of schreefloze fonts, maar dat is niet het allerbelangrijkste. Het gaat er vooral om dat je tekst goed leesbaar is. De leesbaarheid van je tekst gaat om hoe de letters en woorden staan gerangschikt, hoe de afstand is tussen verschillende regels en hoe groot de ruimte is tussen de afzonderlijke letters. Dit zijn allemaal belangrijke punten die meespelen in het uitzoeken van goede fonts. Het is dus belangrijk dat je er even goed voor gaat zitten en niet zomaar het eerste beste font pakt voor je website.

Moet je dit helemaal zelf uitzoeken? Nee, gelukkig is het meeste werk al voor je gedaan. Er zijn genoeg websites waarbij er al verschillende fontcombinaties staan opgesteld, waarbij je simpelweg alleen maar hoeft te kijken of je ze mooi vindt en of ze bij je huisstijl passen. Laten we een kijkje nemen.

De combinatie serif/sans-serif of sans-serif/serif is het meest populair om te gebruiken op een website. Dit is hoe het er dan uit kan zien:

of

De combinatie van een schreefloze header (titel) en een schreef-font voor de tekst is heel sterk. Maar ook andersom kun je mooie combinaties maken:

Hier speel je juist met een schreef-font als header en een schreefloze tekst. De combinaties zijn eindeloos. Je kunt ook zelf lekker aan de slag gaan en goed kijken welke combinatie het best bij jouw website past.

Inspiratie opdoen?

Ben je opzoek naar nog meer voorbeelden en inspiratie? Op de volgende sites kun je kijken naar voorbeelden van fonts- en fontcombinaties.
Digitalsynopsis.com
Fontpair
Myfonts
Typewolf
Google Fonts

Fonts bij Hogans Play

Maak je gebruik van een Hogans Play website? Dan heb je standaard toegang tot meer dan 500 Google fonts die je naar hartelust kunt uitproberen en combineren. Dit betekent geen moeilijkheden met licenties, wat je op andere websites wel tegen zou kunnen komen. Bij Hogans Play heb je een compleet assortiment aan fonts die je allemaal kunt gebruiken voor jouw website. Het concept van Hogans Play is simpel: krijg toegang tot kant-en-klare templates (die je helemaal zelf kan aanpassen) en ga lekker zelf aan de slag met jouw website. Je kunt het zo gek maken als je zelf wilt. En heb je vragen of heb je advies nodig? De supportpagina is altijd beschikbaar.

Kijk op www.hogansplay.nl voor meer informatie.