Futura, Helvetica, Frutiger, Rockwell en Univers zijn een aantal lettertypes die ik graag in mijn designs gebruik. Echter binnen web design ben ik beperkt in het gebruik ervan door het feit dat veel bezoekers deze fonts niet geïnstalleerd hebben. Hierdoor ben ik vaak toch weer aangewezen op standaard lettertypes als Arial, Verdana of Georgia. Opzich niet erg, want dit zijn goede fonts. Toch kan een andere typografie net dat beetje extra aan een ontwerp geven. Typografie speelt immers een belangrijke rol in de uitstraling van een website.
Gelukkig zijn er genoeg technieken die het mogelijk maken andere lettertypes te gebruiken. Veel gebruikte technieken zijn sIFR, Cufón of Typeface.js. Een ander veelbesproken techniek is @font-face, een CSS-decleratie die met de komst van CSS 3 tot een standaard behoord.
Hoe werken webfonts?
In een CSS bestand staat alle informatie over de vormgeving van een website, ook welke lettertypes voor welke elementen worden gebruikt. Met onderstaande code worden bijvoorbeeld alle kopjes in het populaire font Frutiger weergegeven.
h1, h2, h3 {
font-family: Frutiger, Helvetica, Arial;
}
Omdat veel bezoekers het Frutiger font niet geïnstalleerd hebben zullen zij de kopjes niet in dit font zien. De browser zal nu op zoek gaan naar het tweede font uit dit rijtje. Kan de browser dit lettertype ook niet vinden dan zal het derde font, in dit geval Arial gebruikt worden. Zoals gezegd zijn er gelukkig technieken waardoor alle bezoekers hetzelfde lettertype zullen zien. De meest populaire technieken zijn: sIFR, Cufón en typeface.js.
-
sIFR
sIFR staat voor Scalable Inman Flash Replacement en is momenteel de meest gebruikte van de drie. sIFR maakt gebruik van Flash en Javascript om teksten te transformeren naar het desgewenste font. Als Javascript en/of Flash niet geactiveerd zijn worden de teksten in een standaard lettertype getoond. Het grote nadeel van sIFR is dat het een website beduidend trager maakt, vooral bij het veelvoudig gebruik ervan.
-
Cufón
Cufón is het naar mijn inziens betere alternatief voor sIFR. Het grote voordeel van Cufón is dat het erg gemakkelijk werkt en aantoonbaar sneller is als sIFR. Met sIFR was ik soms tijden aan het knoeien met de margins, paddings, en line-heights van teksten. Met Cufón is dat verleden tijd. Het nadeel van Cufón is dat de teksten niet selecteerbaar zijn.
-
Typeface.js
Typeface.js is misschien wel de meest interessante van de drie. Typeface.js maakt net als Cufón gebruik van Javascript om de teksten te transformeren naar een ander lettertype. Dit script converteert de teksten niet naar afbeeldingen zoals Cufon dat doet, maar embed het font. Zo kunnen de teksten nog wel geselecteerd worden, wat de toegankelijkheid ten goede komt.
Ik krijg nog wel eens de vraag of bovenstaande technieken geen negatieve invloed hebben op de zoekresultaten in de zoekmachines. Het antwoord is nee. De code die Google leest is met of zonder het gebruik van bovenstaande technieken namelijk excact hetzelfde.
@font-face
Het grote nadeel van sIFR, Cufón en Typeface.js is dat Flash en/of Javascript geactiveerd moeten zijn om de transformatie naar een ander font te laten werken. Ook gaat de snelheid van een website bij het gebruik van deze technieken achteruit. Maar gelukkig is er sinds kort een alternatief: @font-face. Dit CSS-attribuut zou alle bovenstaande problemen moeten oplossen. @font-face bestaat al een tijdje, maar werd tot dusver weinig toegepast. Er waren nog te weinig browsers die het @font-face attribuut ondersteunden. Maar met de komst van CSS 3 behoord @font-face tot een standaard en zullen steeds meer browsers dit type ondersteunen. @font-face werkt als volgt:
@font-face {
font-family: Frutiger;
font-weight: bold;
src: url(Frutiger.otf) format(truetype);
}
Vervolgens werkt de declaratie zoals we dat gewend waren:
h1, h2, h3 {
font-family: Frutiger, Helvetica, Arial;
font-weight: bold;
color: #000;
}
Een erg interessant alternatief. Maar is het wel zo mooi als het lijkt? Helaas kleven er namelijk nog wel een aantal nadelen aan het gebruik van @font-face. De grootste beperking is dat veel browsers deze techniek nog niet ondersteunen. @font-face wordt inmiddels ondersteund door Safari 3.1+ , Opera 10+, Internet Explorer 4.0+, Mozilla Firefox 3.5+ en Google Chrome 3.0+.
Ook kunnen er kanttekingen bij de performance gezet worden, zo blijkt uit een artikel van Steve Sounders. Doordat het font gedownload moet worden zal bijvoorbeeld Firefox eerst de teksten in een standaard lettertype tonen en pas waarna het font is gedownload deze teksten vervangen met het nieuwe font. Deze transformatie is in veel gevallen op te merken. Veel andere browsers zoals Internet Explorer laden de website pas wanneer het lettertype is gedownload. Kan de browser het font niet downloaden, dan is een wit scherm het enige wat je te zien krijgt.
Hoewel ik zo had uitgekeken naar het @font-face attribuut, zal ik het nog niet grootschalig gaan toepassen. Met name door het feit dat veel browsers dit CSS-attribuut nog niet ondersteunen. De eerder genoemde performance issues spelen hierin een minder belangrijke rol aangezien deze factoren bij sIFR, Cufón en Typeface ook al aanwezig waren. Wat overigens nog een aandachtspuntje is, is dat je met @font-face (overigens ook met Cufón en Typeface.js ) aangewezen bent op gratis fonts. Commerciele fonts mogen namelijk niet gebruikt worden wegens mogelijke autersrechtenschendingen.
Kortom, voor nu nog Cufón of Typeface.js maar in de toekomst hoop ik snel @font-face te kunnen gebruiken.