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)

Serif font

Sans-serif (Schreefloos)

Sans-serif font

Decoratief

Decoratief font

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:

Hogans Example font 1

of

Hogans Example font 2

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:

Hogans Example font 3

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.

Leer meer van onze blogs

Wat is CDN? En wat zijn de voordelen?

Sommige grote websites zijn soms heel snel geladen. CDN is een vorm van hosting waarbij gebruik word gemaakt ...
Blog bekijken

Wat is SSL certificaat? En waarom heb ik deze nodig?

Bij Hogans maken wij gebruik van een SSL-certificaat bij het maken van een website. Dit bestand zorgt ervoor ...
Blog bekijken

Supersnelle website met Caching. Wat zijn de voordelen?

De exacte details van caching zijn complex. Het idee is echter simpel. Een website wordt honderden en soms ...
Blog bekijken

Wat zijn KPI’s en wat kan je er mee?

Het is het belangrijkste om een doel te bepalen van wat je wilt bereiken op je website. Wat ...
Blog bekijken

Hogans meets Firebase

Firebase is de NoSQL document database van Google. Het is er al een tijdje, dit jaar flink 2018 ...
Blog bekijken

Wat te doen met ruwe data?

Ruwe data omzetten in realtime actie kan maar al te lastig zijn. Uit onderzoek blijkt dat maar liefst ...
Blog bekijken

Drupal vs WordPress

Zowel Wordpress als Drupal zijn beide een zogenaamde CMS (Content Management System) wat betekent dat content gemakkelijk onderhouden ...
Blog bekijken

Waarom je zoveel tabs open hebt staan (en hoe je het stopt)

Heb jij dag in dag uit minstens vijftig tabs tegelijkertijd openstaan? Dat komt je productiviteit niet ten goede. ...
Blog bekijken

Analytics op jouw website: Meten is weten!

Voor veel bedrijven is het hebben van een (nieuwe) website het doel opzich. Natuurlijk is online vindbaarheid niet ...
Blog bekijken

The Eisenhower Matrix: get things done

Met zoveel belangrijke taken tegelijkertijd is het moeilijk om ze ook daadwerkelijk uit te voeren. Dit kan zorgen ...
Blog bekijken