13 nov 15

Laat je website uitblinken via typografie

Vooraleer ik jullie meeneem in de wondere wereld van typografie, is het van belang dat ik vertel hoe het web vroeger opgebouwd was. In den beginne was het web enorm gelimiteerd qua lettertypes, dit omdat de browsers gebruikt maakten van de fonts die mensen geïnstalleerd hadden op hun computer. 

Als we dan keken naar welke fonts zowel Windows en MacOS standaard geïnstalleerd hadden, kwamen we aan deze korte lijst:

  • Arial / Helvetica
  • Times New Roman / Times
  • Courier New / Courier
  • Verdana
  • Georgia
  • Tahoma
  • Comic Sans MS
  • Impact

Maar daar kwam jaren geleden verandering in: de meeste browsers hadden een manier geïmplementeerd die ons in staat stelde andere lettertypes te gebruiken. De poorten waren geopend en we begonnen aan een mooie periode in webdesign. 

Fast-forward naar 2015: Google liet weten rekening te houden met de responsieve kant van websites. Daarmee kwam de nieuwe uitdaging naar boven borrelen: hoe maken we de content op alle toestellen gebruiksvriendelijk?

Leesbaarheid: de gouden 66-character regel

Bij het nadenken over de grootte van de tekst, kijken we naar de zogezegde 66-character regel. Volgens onderzoek blijkt dat één lijn tekst maximum tussen de 60 - 75 letters mag bevatten.

Deze regel werd opgebouwd door rekening te houden met verschillende factoren:

  • hoe mensen lezen 
  • hoe moeilijk het is voor je ogen om één lijn te volgen tot het einde en daarna terug te keren naar de volgende lijn 
  • het snel kunnen scannen van verschillende titels en blokken tekst 

Deze regel wordt praktisch overal toegepast, dus het voelt natuurlijk aan voor ons om zo’n blokken tekst te lezen. Maar wat met verschillende breedtes? 

Voor kleinere breedtes moeten we de teruggrijpen naar bovenstaande puntjes. Daaruit blijkt dat we best naar de 40 - 55 letters gaan, met iets minder ruimte tussen de lijnen, om alles wat compacter te krijgen.

Lettertypes combineren: sfeer is koning

Maar genoeg over de technische kant van typografie. Met deze kennis alleen maken we nog geen aantrekkelijke site. Hoe begin je in godsnaam met het kiezen van mooie lettertypes? Wat werkt en wat werkt niet? 

Het antwoord daarop is er eentje die toepasbaar is bij alle vaardigheden: zoiets leer je enkel door er veel mee bezig te zijn. Sommige mensen zijn geboren met een natuurlijke neus voor lettertypes, andere moeten zich meer laten inspireren. Maar uiteindelijk blijft het een proces van trial & error: Je vindt 2mooie lettertypes en zet ze eens onder elkaar. Je zal al snel voelen of de combinatie werkt of niet.

Om door het bos de bomen te zien, delen we de fonts in 5 grote categorieën:

  • serifs ( vb. Merriweather )
  • sans-serifs ( vb. Open Sans )
  • scripts ( vb. Pacifico )
  • slab serif ( vb. Sentinel )
  • monotype ( vb. Courier New )
  • decoratief ( vb. Obsidian )

Krachtige typografie zit hem in het spelen tussen de verschillende categorieën. Enkele voorbeelden:

 

 title=

1. Hautehorlogerie

Haute Horlogerie kiest om een zwaar sans-serif (Past95) te combineren met een elegante serif (Minion Pro). Het zijn 2 uitersten maar in dit geval werkt dit perfect. Een serif font wordt gebruikt voor de looptekst, dit geeft een zekere klassieke high-end feel. 


 title=

2. Vimeo

Vimeo maakt gebruik van verschillende script en decoratieve fonts om de juiste sfeer te creëren. Dit in combinatie met Apex Rounded voor lopende tekst.


"Pauline Osmont" title="Pauline Osmont"

3. Pauline Osmont

Pauline Osmont creëerde haar eigen script font als logo. Voor haar menu maakte ze ook gebruik van de combinatie Prata (Serif) en Futura Heavy (Sans-serif).

Soms is het niet nodig om verschillende fonts te gebruiken. Rokivo houdt alles leesbaar door te spelen met gewicht en kleuren. De site gebruikt Circular Std als lettertype, waar de heading zwart is en medium dikte heeft. De looptekst is Book en heeft een lichtgrijze tint! 


 title=

4. Rokivo

Soms is het niet nodig om verschillende fonts te gebruiken. Rokivo houdt alles leesbaar door te spelen met gewicht en kleuren. De site gebruikt Circular Std als lettertype, waar de heading zwart is en medium dikte heeft. De looptekst is Book en heeft een lichtgrijze tint! 


 title=


5. Truthlabs

We hebben de ongeschreven regel om maximum 3 verschillende lettertypes te gebruiken op een site. Dit deels omdat de site anders best zwaar wordt. Truthlabs maakt ten volle gebruik van deze 3 lettertypes. Een prachtig display font genaamd Tiempos voor de grote titels, en een sans-serif genaamd BrownStd voor de subtitels. Qua looptekst gebruiken ze Tiempos Text, van dezelfde familie als de grote titels. Het geheel werkt perfect en geeft een heel stijlvolle sfeer.

Wil je dat we de typografie op jouw site eens van dichterbij bekijken? Aarzel niet om contact met ons op te nemen.