Typografie op het web

Vorige week heeft mijn collega Mandy een artikel geschreven over typografie voor print. Deze week wil ik hierop inhaken en wat vertellen over typografie op het web en de geschiedenis hiervan. Dat we kunnen kiezen uit verschillende lettertypes voor een website is namelijk helemaal niet zo vanzelfsprekend.

Geschiedenis

In de eerste versie van HTML was het nog niet mogelijk om te bepalen welke lettertypes gebruikt zouden worden om de tekst te tonen. In 1995 introduceerde Netscape de tag waarmee het mogelijk was wel om aan te geven welk lettertype (font) er gebruikt moest worden voor een specifiek stuk tekst. Voorwaarde om dit te laten werken was dat de bezoeker van de website het lettertype ook op zijn computer geïnstalleerd moest hebben.

In 1998 bij de introductie van CSS2 werd het mogelijk om een “web font” te definiëren die voor de hele website werd gebruikt. De 10 jaar daarna werd dit alleen gebruikt door Microsoft (tegenwoordig: Internet Explorer). De reden dat er in die 10 jaar weinig tot geen verdere ontwikkeling was op het gebied van typografie is tweeledig. Ten eerste waren er maar heel weinig fonts die legaal op het web gebruikt mochten worden. Er waren wel licenties voor print, maar voor het web waren deze er niet. Daarnaast had Microsoft een format EOT (Embedded OpenType) ontwikkeld waar het font in zat en dat gebruikt kon worden om het font te tonen. Helaas hadden zij hier het patent op en kon het door niemand anders gebruikt worden.

Vanaf 2008 veranderde er een hoop op het gebied van lettertypes. Tegen die tijd waren er al veel meer lettertypes met een weblicensie en vanaf dit jaartal werd EOT toegevoegd aan de webstandaard. Daarnaast begon W3C met de ontwikkeling van het format WOFF, wat licencie vrij was en door iedereen gebruikt kon worden. Vanaf dat moment begonnen meerdere browers met de implementatie hiervan.

Nu de mogelijkheid aanwezig was om andere lettertypes op website te gebruiken zag je dat designers van websites dit ook toepassen in hun ontwerpen. Nog niet alles wat de designers maakten werkte op alle browsers waardoor developers op zoek gingen naar alternatieven. Zo werd van sommige teksten plaatjes gemaakt en ook technieken als Cufon en Sifr werden gebruikt. Helaas was dit alles slecht voor vindbaarheid, zeer bewerkelijk en totaal niet onderhoudsvriendelijk.

Tegenwoordig zijn er een hoop online diensten waar je fonts kan vinden en downloaden (gratis of tegen betaling) en zijn de mogelijkheden (bijna) oneindig om websites tot leven te laten komen met geweldige typografie!

Online is niet hetzelfde als print

Online wordt er vaak een veel groter font gebruikt dan bij print. De lettergrootte bij print ligt vaak tussen de 8 en 10 punten  terwijl je online al snel een lettergrootte van 16 pixels gebruikt (1 punt staat gelijk aan 1 pixel). Als je een andere lettergrootte gebruikt veranderd automatisch ook de regellengte en de regelafstand. Op zich logisch, want de verhouding is op het web anders dan bij print. Deze verhouding zit bijvoorbeeld al in de afstand tussen je beeldscherm en je hoofd in vergelijking met de afstand van een tijdschrift en je hoofd.

Tips voor het uitkiezen van een goed lettertype

Bewust maar vooral onbewust beïnvloed typografie ons gedrag op een website. Normaal zijn we ons hier niet van bewust, maar juist wanneer een tekst slecht leesbaar is valt het op. Daarom is het belangrijk om goed na te denken over welk lettertype je kiest. Voor je website hoeft niet persé 1 lettertype te zijn maar kunnen er ook meerdere zijn.

Enkele voorbeelden van gratis webfonts die goed samen gaan zijn:

  • Cormorant Garamond Bold Italic met Fira Sans regular
  • PT Sans Bold met Playfair display regular
  • Vollkorn Regular Italic met RaleWay Medium

 

Uitstraling en karakter

Ieder lettertype heeft zijn uitstraling en karakter, daarom is het een hele uitdaging om een goede balans te vinden tussen een goed leesbare letter voor de basis van je website en een letter die de beleving van je merk versterkt.

Om contrast aan je lettertypes toe te voegen heb ik bij bovenstaande voorbeelden van gecombineerde lettertypes gekozen om een schreefletter te combineren met een schreefloze letter. Op deze manier hou je het contrast en wordt de tekst interessant en prettig om te lezen.

Workhorse font

Wanneer je voor een enkel lettertype kiest is het belangrijk om dan te kiezen voor een zogenoemd “Workhorse” font. Een “workhorse” font is een flexibel lettertype dat gebruikt kan worden voor een hoop verschillende onderdelen en herken je aan de volgende punten:

  • Het kan gebruikt worden voor titels én body tekst
  • Het heeft veel verschillende stylen en types (zoals bold, light, italic, extrabold, etc.)
  • Is leesbaar op veel verschillende formaten

Een aantal gratis voorbeelden van “workhorse” fonts zijn:

  • Source Sans Pro
  • Lato
  • Titillium web
  • Raleway
  • Merriweather
  • Open Sans

Bedenk goede redenen waarom en op welke manier je typografie gebruikt en maak dit visueel duidelijk. Wil je nog meer weten of heb je nog vragen over het gebruik van typografie op je website? Neem gerust contact op of loop eens zonder afspraak binnen (op woensdagmiddag tussen 15:00 en 17:00 uur).

Marisca Zoon
Techniek
marisca@vivars.nl

Mogen wij jou bellen?

Liever persoonlijk en direct contact? Vul hier je telefoonnummer in, en ik of één van mijn collega’s zal contact met je opnemen.

Bel Joris Spitholt