Hoeveel tekst staat er op jouw website? Best veel, waarschijnlijk. Als je een blog of een informatieve site hebt, is de tekst van je site waarschijnlijk het belangrijkste onderdeel. Als je kijkt naar wat voor een centrale rol tekst heeft op de meeste websites, wordt er relatief weinig aandacht besteed aan de opmaak ervan. Heel veel sites kiezen een standaardlettertype (Trebuchet, 16px, bijvoorbeeld) en houden het daarbij.
Maar wat als je méér wilt? Heel lang was er sprake van technische beperkingen: tekst wás op het web nou eenmaal niet erg aantrekkelijk. Voor de nobele kunst van de typografie moest je ergens anders zijn. Tegenwoordig is dat niet meer zo. In dit artikel kun je lezen hoe je web fonts kunt gebruiken om meer controle te krijgen over de lettertypes die op je site gebruikt worden. Maar eerst: een stukje geschiedenis.
Een stukje geschiedenis
De mogelijkheid om een lettertype te kiezen voor een deel van een webpagina werd geïntroduceerd in 1995, toen Netscape Navigator de <font>-tag introduceerde. Met een font-tag kon een lettertype gekozen worden, maar alleen als dat lettertype al op de computer van de bezoeker geïnstalleerd was. Omdat je nooit zeker wist of een bezoeker een bepaald lettertype had, beperkten veel webbouwers zich tot een algemene categorie in plaats van een specifiek lettertype (sans-serif of serif, bijvoorbeeld).
Om de onzekerheid wat weg te nemen begon Microsoft in 1996 met het “Core fonts for the Web”-project. Een set lettertypes die eerder alleen bij Windows werden geleverd werd gratis en voor niets weggegeven. Het idee achter het project was dat softwaremakers, dus leveranciers van browsers en besturingssystemen, de lettertypes ook zouden gaan meeleveren, zodat ze op elke computer beschikbaar waren. Dat zou webbouwers dan weer in staat stellen om ervoor te zorgen dat hun webpagina er op, zeg, een Macintosh ongeveer hetzelfde uit zou zien als op een Windows-machine.
Dat laatste bleek lastiger dan gedacht, maar het eerste is zonder meer gelukt. De “Core fonts for the Web” werden inderdaad precies dat: lettertypes die iedereen kent en iedereen gebruikt. De meeste namen uit de collectie zullen ook niet-webbouwers bekend in de oren klinken: Arial, Courier New en Times New Roman, maar bijvoorbeeld ook Webdings. Dit blogartikel gebruikt Trebuchet MS, uit dezelfde collectie.
De Core fonts-set heeft drie schreefloze (sans-serif) lettertypes, twee lettertypes met schreef (serif), twee lettertypes met vaste breedte (monospaced) en nog wat lettertypes voor speciale doeleinden. Als je dus besloten hebt dat je een letter met schreef wilt gebruiken, en je wilt je beperken tot de veilige standaardset, dan heb je de keuze tussen Times New Roman en Georgia. Dat is het. Zoek je een wat informeler lettertype? Dan mag je kiezen tussen Comic Sans en … of gewoon niet.
@font-face
Dat webbouwers de keuze hadden tussen Georgia en Times was een kleine verbetering, maar nog veel beter zou het zijn als er lettertypes meegestuurd konden worden. In 1998 publiceerde het W3C, het World Wide Web Consortium, de tweede versie van de stijlstandaard CSS. In CSS 2 zat, naast een grote stapel andere verbeteringen, de @font-face-instructie, waarmee precies dat meesturen gedaan kon worden.
De bedrijven die lettertypen maakten en verkochten keken met argusogen naar deze nieuwe ontwikkeling. Deze type foundries wilden zeker weten dat hun lettertypen bij het meesturen niet te kopiëren waren. Er moest dus een indeling met kopiëerbescherming komen.
Microsoft implementeerde @font-face in Internet Explorer 4, en ontwikkelde een eigen indeling die die kopiëerbescherming zou kunnen bieden. De indeling kreeg de naam Embedded OpenType (EOT). Webbouwers die van plan waren een lettertype mee te sturen moesten eerst het lettertypebestand omzetten in een EOT-bestand. Dat omzetten ging alleen met een speciaal programma van Microsoft, een programma dat alleen op Windows draaide.
Ook Netscape, de grote concurrent van Microsoft in de browseroorlog die gevoerd werd, implementeerde @font-face. Microsoft was echter niet van plan om de specificaties voor de EOT-indeling vrij te geven, en al helemaal niet aan haar aartsvijand. Netscape Navigator 4 begreep dus @font-face-instructies, maar alleen als gebruik werd gemaakt van TrueDoc, een nog onbekendere indeling dan EOT. TrueDoc was gemaakt door type foundry Bitstream, en was niet compatibel met EOT.
Noch EOT, noch TrueDoc werd een succes en er was geen manier om zowel EOT als TrueDoc aan te bieden. Al met al werd de @font-face-functionaliteit bijna niet gebruikt en uiteindlijk grotendeels genegeerd. Webbouwers waren simpelweg niet bereid om extra werk te doen om lettertypes om te zetten, en helemaal niet als toch maar een deel van hun bezoekers de fonts zouden kunnen zien.
In de volgende CSS-versie, versie 2.1, werd @font-face in zijn geheel geschrapt. Er was te weinig interesse.
Duistere magie
In de jaren die volgden kochten mensen steeds grotere en betere beeldschermen, werden de grafische mogelijkheden van browsers steeds groter, en werd ook de weergave van tekst steeds beter. Hogere resoluties zorgden voor kleinere pixels, en antialiasing maakte tekst minder korrelig. Voor het eerst zag tekst op het web er, nou ja, redelijk uit. Maar nog steeds werden de meeste webbouwers beperkt door de standaardset aan lettertypes.
Men begon te experimenteren met het gebruik van afbeeldingen in plaats van ‘echte’ tekst. Van elke kop werd, in het gewenste lettertype en de gewenste kleur, een afbeelding gemaakt, die vervolgens gebruikt werd in plaats van de tekst zelf. Dit werkte, maar het maken van de plaatjes was veel werk.
Al snel begon men na te denken over hoe het maken van plaatjes geautomatiseerd kon worden. Als je een programma schreef dat afbeeldingen kon maken van willekeurige stukjes tekst, en een stukje JavaScript dat koppen verving door die automatische afbeeldingen, hoefde je niet zelf meer met Photoshop aan de slag. Dit werkte, maar het was nog zeker niet perfect: tekst kon niet geselecteerd worden, en de koppen zagen er lelijk uit als de pagina geprint werd.
De volgende stap was de sIFR-techniek, waarbij koppen niet vervangen werden door afbeeldingen, maar door speciaal gebouwde Flash-animaties van één frame met daarin de tekst in het correcte lettertype. Ook deze aanpak werkte, en tekst kon geselecteerd en geschaald worden. De gecombineerde complexiteit van de Javascript-code en de Flash-animaties zorgde er echter voor dat de techniek alleen met mate gebruikt kon worden, om te voorkomen dat tragere browsers onder het gewicht bezweken.
Eigenlijk kon iedereen het er over eens worden dat de image replacement-technieken, zoals ze waren gaan heten, lapmiddelen waren. Het was tijd om te zoeken naar een échte oplossing. En die kwam er.
Opnieuw @font-face
De oplossing kwam uit onverwachte hoek. Apple introduceerde in 2008 versie 3.1 van Safari, waarin onverwacht en na bijna tien jaar afwezigheid ondersteuning voor een variant van @font-face was opgenomen. Deze versie maakte het voor het eerst mogelijk om meerdere varianten van hetzelfde lettertype mee te sturen, elk in een andere indeling.
De mogelijkheid om meerdere indelingen mee te geven betekende dat browsers zelf konden besluiten welke indeling ze wilden gaan ondersteunen. Oude versies van Internet Explorer konden een EOT-bestand blijven gebruiken en nieuwere browserontwikkelaars konden ondersteuning voor nieuwe indelingen inbouwen, zonder elkaar in de weg te zitten.
Ook Mozilla Firefox implementeerde de nieuwe @font-face instructie, een decennium nadat het uit voorganger Netscape was verwijderd. Opera en Google Chrome volgden niet lang daarna. In CSS versie 3 werd @font-face opnieuw in de standaard opgenomen. Na overleg tussen Microsoft en het W3C werd de EOT-standaard vrijgegeven. De wereld was klaar voor web fonts en vice versa.
Web fonts uitbesteden
Web fonts hebben dus een lange, relatief onstuimige geschiedenis. Maar wat je als websitebouwer misschien graag wilt weten is hoe je @font-face kunt gebruiken op je eigen site.
Er zijn een aantal manieren om web fonts toe te voegen. Misschien wel de snelste methode is met Google Fonts, een dienst die toegang geeft tot gratis web fonts. Google Fonts werkt vrij eenvoudig: kies één of meer lettertypes, kies de varianten (vet, schuingedrukt), en kies welke karakterset je wilt (voor Nederlands is Latin Extended voldoende, indien beschikbaar). De dienst geeft je vervolgens een regel code die je binnen de <head>-tag op je site kunt plakken.
<link href='http://fonts.googleapis.com/css?family=Exo:100' rel='stylesheet' type='text/css'>
Als je dat gedaan hebt, dan kun je het lettertype dat je gekozen hebt, in dit geval de lichtste variant van Exo, op dezelfde manier gebruiken als ‘normale’ lettertypes. Gebruik je SSL voor je site? Vervang dan http: door https: of haal het weg om waarschuwingen te voorkomen.
De Google-dienst biedt intussen meer dan zeshonderd gratis lettertypes aan. Ben je specifiek op zoek naar een (betaald) lettertype? Dan zou je eens bij Adobe Typekit kunnen kijken, die voor een vaste prijs per maand keuze bieden uit duizenden fonts.
Web fonts zelf doen
Wil je het font liever op je eigen website bewaren, zonder gebruik te maken van een derde partij? Dat kan ook. Bijna alle type foundries verkopen hun waren tegenwoordig als web fonts. Meestal krijg je een zip-bestandje met daarin het lettertype in alle gangbare indelingen, plus een snipper CSS-code (met daarin, jawel, de @font-face-instructie) die je kunt gebruiken om naar het lettertype te verwijzen. MyFonts heeft een uitgebreide collectie waarmee je meteen kunt beginnen, waaronder Museo Slab 500 voor de meeneemprijs van 0 euro.
Heb je al een specifiek lettertypebestand dat je wilt gebruiken, bijvoorbeeld een gratis font dat je ergens hebt gevonden? Dan kun je de Webfont Generator van FontSquirrel gebruiken om de ontbrekende indelingen te maken. Let erop dat je controleert of je het lettertype wel als webfont mag gebruiken: dat je het lettertype hebt gekocht wil niet automatisch zeggen dat je het als webfont mag gebruiken.
Nog meer mogelijkheden
Lettertypes zijn in feite verzamelingen van tekeningen van letters, zo opgeslagen dat ze groter en kleiner gemaakt kunnen worden zonder scherpte te verliezen. Dit betekent dat je web fonts ook zou kunnen gebruiken om andere soorten afbeeldingen naar de browser te sturen: icoontjes, bijvoorbeeld. Lettertypes die eigenlijk verzamelingen icoontjes zijn heten icon fonts. Een goed, veel gebruikt en gratis voorbeeld is Font Awesome, een font met maar liefst 479 icoontjes. Minder bekend, maar minstens net zo stijlvol, zijn de icon fonts van Symbolset.
Het grote voordeel van icon fonts is dat de icoontjes schaalbaar zijn, en er dus goed uit blijven zien als je de pagina inzoomt – of wanneer Apple met een nóg scherper scherm komt. Een nadeel is dat je in principe beperkt bent tot één kleur, trucage daargelaten.
Kortom…
Wil je dat je site nét even wat anders aanvoelt dan de volgende? Denk er dan eens over na om een web font mee te sturen. Na meer dan vijftien jaar ontwikkeling is dat makkelijker dan ooit. Nog geen website, maar wel nieuwsgierig, of wil je starten met iets nieuws? Check dan onze webhostingpagina voor meer informatie.
P.S. Wil je op de hoogte blijven van alle artikelen, updates, tips en trucs die verschijnen op ons blog? Dat kan! Rechts bovenin via RSS, e-mail, het liken van onze Facebook-pagina, het +1’en op Google+ of het volgen op Twitter.
