Varieer met letters

Tot voor kort was de grote beperking bij het maken van websites dat er maar een paar lettertypen beschikbaar waren. Zo’n 5-6 jaar geleden begonnen de eerste experimenten met diensten die online ook andere lettertypen beschikbaar stelden. In het begin was het een hoop gedoe met gebruiksrechten en standaarden totdat Adobe in 2009 met Typekit kwam en kort daarna begon Google Fonts.

Je hoeft dus niet alleen Verdana of Arial te gebruiken voor je website omdat deze toevallig op de meeste computers geïnstalleerd staan, maar inmiddels kun je kiezen uit een grotere variatie van ‘externe’ lettertypen. Hiermee kun je je website een eigen uitstraling geven en de leesbaarheid vergroten.

Hoe werkt het?

De meest stabiele manier om een extern lettertype te gebruiken is via een regeltje code in je HTML-pagina waarmee een bepaald lettertype geladen wordt zodat je vervolgens dit lettertype kunt aanroepen in je stylesheet met de ‘Font-family’ selector. Per lettertype laad je een aantal stijlen zoals regular, bold, italic, bold-italic, etc. Dit heet een ‘font-family’. Veel fonts hebben alleen deze 4 opties maar als je een uitgebreider lettertype hebt kunnen dit er veel meer zijn.

Als je Google fonts gebruikt dan kost dit niets. De meeste andere diensten vragen een bedrag per lettertype of een bedrag per jaar. Google fonts is een mooie om mee te beginnen, maar het aanbod is wel wat beperkt, vooral als je wilt werken met bekende lettertypes of letters met een uitgebreide font-family. Zelf werk ik, naast Google fonts, met Typekit waar je al vanaf $ 50,- per jaar van de hele collectie lettertypes gebruik kunt maken. Er zit wel een beperking op wat traffic op je website betreft, maar je moet wel een erg drukke website hebben wil je daar over heengaan.

Waarom externe fonts?

Niet iedereen zal meteen de behoefte voelen om van de vertrouwde Arial of Verdana af te stappen. Sommige organisaties hebben zelfs hun huisstijlletter aangepast aan de beperkingen van beschikbare fonts op hun WIndows computers.

De keuze aan letters die standaard op je computer geïnstalleerd staan is erg beperkt en bestaat uit letters die een aftreksel zijn van andere letters zoals de Arial die gebaseerd is op de Univers of letters die specifiek voor beeldschermen met beperkte resolutie ontwikkeld zijn (Verdana, Geneva).

Voor mij is het belangrijk dat een website een eigen uitstraling kan hebben en daar speelt een lettertype een belangrijke rol in. Dus ik vind het fijn uit een grotere variatie van lettertypen te kunnen kiezen. Daarnaast beschik ik graag over een grotere keuze binnen een font-family zodat je kunt variëren in lijndiktes (font-weight in CSS) en stijl (italic, bold) bij het bepalen van kopjes en specifiek vormgegeven tekst.

Een ander voordeel is dat je zeker weet dat het font beschikbaar is. Zogenaamde websafe fonts zoals Arial en Verdana komen niet voor op Linux machines en allerlei mobiele apparaten.

Nadelen

Misschien wel het grootste nadeel is dat je als webdesigner of website-eigenaar ineens veel meer keuze hebt in lettertypes. Het kiezen van een geschikte letter is best ingewikkeld. Er spelen afwegingen mee die normaal gesproken door een grafisch ontwerper gemaakt worden. Zonder typografische kennis heb je al snel het idee dat al die verschillende letters op elkaar lijken. Welke kies je dan? Met een verkeerd gekozen letter kun je de uitstraling van je website onderuit halen.

Ieder lettertype moet worden geladen als iemand je website bezoekt. Nu valt het wel mee als je maar 1 lettertype met hooguit 4 stijlen gebruikt, maar wanneer je helemaal losgaat wordt je website er een stuk zwaarder van en dat is niet goed voor je gebruikers.

Lang niet alle letters die je kunt kiezen zijn geschikt voor beeldschermen. Als je een klassieke letter als de Garamont wilt gebruiken, kijk dan goed hoe deze er uitziet op verschillende beeldschermen. DIt kan best tegenvallen. Daarnaast worden letters door verschillende browsers op een verschillende manier weergegeven, zodat een letter er in Explorer anders uit kan zien dan in Chrome.

Neem de tijd

Er is dus veel meer mogelijk met letters dan voorheen. Dat is mooi. Mijn advies is, neem de tijd om hier eens mee te experimenteren en begin met een letter die je op een andere website hebt gezien. Kijk goed hoe dit er in de context van jouw website, in verschillende browsers en op verschillende schermen uitziet.

Hieronder de websites met nuttige informatie.

http://www.sitepoint.com/google-fonts-is-born-can-i-get-a-hallelujah/
http://alistapart.com/article/on-web-typography

Een selectie van web font libraries:

https://typekit.com/
http://www.fonts.com
http://www.fontsquirrel.com
http://www.google.com/webfonts