Font pairing in websites

9 november 2020

Font pairing in websites

Het kiezen van het juiste lettertype is één van de eerste beslissingen die je moet nemen wanneer je een website gaat bouwen. De juiste Font pairing (combinatie van lettertypes) kan het verschil maken tussen een website die ‘klopt’ en een website waar bezoekers weer snel wegklikken. Het toepassen van Font pairing voor online gebruik is meer een kunst dan exacte wetenschap. Als je het goed doet, zullen je bezoekers aangetrokken worden tot het lezen van je boodschap. Dàt moet je hebben.

Soorten lettertypes

Er zijn ontelbaar veel lettertypes. De ene nog mooier dan de andere. Daardoor weet je misschien even niet waar te beginnen. Laat je niet uit het veld slaan. Er zijn geen vaste regels of meetbare waarden, maar de juiste combinaties hebben een grote impact op de leesbaarheid van de tekst en hoe mooi het design wordt gevonden. Uiteraard moet alles in je website perfect binnen je huisstijl passen. Dus ook je lettertypes.

Er zijn algemeen gezien 3 verschillende soorten lettertypes: schreef, schreefloos en de decoratieve lettertypes.

1/ Schreef (Serif)

Schreefletters zijn simpel gezegd letters die dwarsstreepjes hebben aan de uiteinden van verticale en horizontale balken, ook wel schreven genoemd. Ze zijn voornamelijk bedoeld om te zorgen voor een vlotte leesbaarheid in grote stukken tekst in drukwerk zoals bij boeken. Voor online gebruik worden schreefletters, als leestekst (doorlopende tekst), afgeraden omdat beeldschermen met een lage resolutie de schreven erg onduidelijk maken en daardoor de tekst minder goed of slecht leesbaar kunnen maken. Voor online gebruik raad ik dus aan om schreefletters enkel te gebruiken bij grotere teksten zoals titels.
Voorbeelden van veelgebruikte schreefletters zijn bijvoorbeeld Times New Roman, Bodoni en Minion.

2/ Schreefloos (Sans Serif)

Schreefloze lettertypes worden vaak als moderner ervaren omdat ze geen dwarsstreepjes hebben aan de uiteinden. Op een beeldscherm zijn de letters opgebouwd uit pixels. Daardoor gaan de schreven dan storend werken;  het raster van een beeldscherm is niet fijn genoeg is om rondingen van de schreven goed weer te geven op kleinere corpsgroottes. Dit probleem heb je niet bij Schreefloze lettertypes. Voor online gebruik raad ik dus aan om te kiezen voor schreefloze lettertypes.
Voorbeelden van veelgebruikte schreefloze letters zijn bijvoorbeeld Avenir, Myriad en Calibri.

3/ Decoratieve lettertypes

Dit is een groep met vele subcategorieën.
Decoratieve lettertypes hebbenin principe maar één functie: decoratief zijn. Ook hierin zijn ontelbare variaties te vinden en deze zijn bijlange niet allemaal goed leesbaar, zeker niet als ze redelijk klein worden weergegeven. Deze lettertypes roepen een bepaalde sfeer op, en creëren in de juiste combinatie een krachtig beeld. Ze zijn voornamelijk bedoeld voor grote titels en vooral niet als leestekst.
De meest gebruikte soorten binnen deze categorie zijn:

1. Script

Script lettertypes roepen een verfijnde, elegante en soms ouderwetse sfeer op Deze lettertypes lijken handgeschreven te zijn en kunnen daardoor voor een personal touch geven aan je tekst. Ook hierin zijn ontelbare  variaties te vinden en deze zijn lang niet allemaal goed leesbaar, zeker niet als ze redelijk klein worden weergegeven.
Voorbeelden hiervan zijn Lucida en Edwardian Script

2. Display

Display fonts worden vooral gebruikt bij toepassingen die op groot formaat goed moeten overkomen. luid en duidelijk. Helaas vaak ook ‘erover’. Ze zijn het sterkst als ze gebruikt worden voor slechts één woord of een korte zin. Voorbeelden hiervan zijn Cooper en Phosphate.

Your choice of typeface is as important as what you do with it.

Waarop letten bij je keuze?

1/ Het karakter:

Wat voor gevoel geven de letters? Zakelijk, speels, grappig, elegant, feestelijk… Zorg dat het past bij je product en je stijl. Dit is deels een kwestie van smaak maar voornamelijk een kwestie van veel ervaring voordat je hierin de juiste keuze(s) kan maken.

2/ De leesbaarheid:

Ik blijf het herhalen; leesbaarheid is het belangrijkste criteria. Typ het volledige lettertype in hoofd- en kleine letters uit met alle leestekens en cijfers. Bestudeer dit kritisch. Sommige lettertypes hebben bijvoorbeeld geen €-teken, wat knap lastig is als je daar pas later achterkomt.

3/ Structuur en hiërarchie

Vooral bij het gebruik van verschillende lettertypes moet je goed opletten waar de focus op komt te liggen. Breng door het toevoegen titels, tussentitels en alinea’s structuur aan in de verschillende lettertypes. Door een goede samenhang ontstaat er een betere herkenbaarheid en door een duidelijke hiërarchie een prettige leesvolgorde. Zo kan de bezoeker van je site direct zien waar hij/zij het antwoord op zijn/haar vraag kan vinden.

4/ Contrast en harmonie

Beide lettertypes moeten voldoende verschillend zijn maar toch in harmonie met elkaar samen gaan. Hun verschijning moet aanvoelen als een juist geheel.

Te ingewikkeld?

Lukt het combineren van lettertypes niet? Kies dan voor een subtiel effect met een schreefloos lettertype dat bestaat uit veel verschillende font stijlen (zoals light, regular, semi-bold, bold). Deze kan je vaak ook nog italic (cursief) zetten om her en der nadruk op bepaalde onderdelen te leggen. De verzameling van stijlen binnen een lettertype noemen we een font family omdat ze dezelfde stijl hebben maar wel verschillen in dikte. Dan moet je al erg je best doen om een verkeerd resultaat te krijgen. Een goed voorbeeld hiervan Google Font: Roboto. Dit lettertype heeft 12 font stijlen.

In geval van nood

Geraak je er niet uit? Laat je zeker door mij adviseren. Ik ben elke dag bezig met zulke zaken. Wat voor jou moeilijk is, is voor mij a piece of cake.

 

In het ondernemerslandschap is niet opvallen hetzelfde als onzichtbaar zijn. Wil jij je ook graag onderscheiden van de rest? Contacteer me voor een gesprek en leer hoe ik jou kan helpen.

Boek je verkennend gesprek

Weet je niet precies wat je nodig hebt? Wil je me eerst even kort leren kennen?

Dat kan tijdens een verkennend gesprek. We maken een half uurtje vrij om elkaar te leren kennen.

Laden...

We gaan de eerste ontwerpen van je nieuwe logo bespreken.

Om samen mijn ontwerpen voor jouw logo te bekijken en te bespreken plannen we een Zoom-meeting zodat ik mijn scherm met je kan delen. Kleine aanpassingen kan ik zo eventueel real time uitvoeren. Hou hiervoor dus zeker een uur vrij.

Gelieve hiervoor minimaal één dag vantevoren een afspraak te maken.

Laden...

We gaan samen jouw project overlopen

Dit doen we via een Zoom-meeting zodat ik mijn scherm met je kan delen.

Kleine aanpassingen kan ik zo eventueel real time uitvoeren. Hou dus zeker een half uur vrij hiervoor.

Gelieve hiervoor minimaal één dag vantevoren een afspraak te maken.

Laden...