Webtypografie: speciale fonts voor de website

In „Welk lettertype of font kan ik gebruiken?” is beschreven welke standaard lettertypes (of fonts) gebruikt kunnen worden. De beperking hierin vloeit voort uit het beschikbaar moeten zijn van de gebruikte fonts op de computer waarop een webpagina wordt weergegeven. Al heel wat jaren wordt gezocht hoe deze beperking opgeheven kan worden. Hiervoor zijn diverse oplossingen bedacht, zoals teksten in plaatjes of flash-filmpjes, die ieder hun eigen probleem veroorzaken: niet toegankelijk, niet schaalbaar, de flow van het document wordt gebroken en/of niet (goed) leesbaar voor gehandicapten en zoekmachines. Het lijkt erop dat vanaf 2010 echte alternatieven beschikbaar beginnen te komen onder de verzamelnaam webtypografie.

@font-face

Vanaf 1998 opgenomen in CSS2 en weer verwijderd in CSS2.1 om in CSS3 weer terug te keren. Microsoft was er vroeg bij, vanaf Internet Explorer versie 4, waarbij het lettertype opgeslagen moet zijn in Microsofts eigen Embedded OpentType-systeem (EOT). Safari bouwde de ondersteuning ook al vroeg in. Firefox ondersteunt het pas recent, en sindsdien begint het eindelijk echt gebruikt te worden. Het gewenste lettertype moet op je eigen webserver geplaatst worden en via CSS worden gedefinieerd.

Auteursrechten

Naast het beschikbaar maken van deze technologie in de browsers was er jarenlang een probleem met auteursrechten en dus licentiekosten. De gebruikte lettertypes zijn namelijk simpel te downloaden via de link in de HTML naar het bestand dat het lettertype beschrijft. Dit probleem is nu ondervangen doordat een aantal bedrijven deals hebben gesloten met letterontwerpers en de fonts aanbieden, hetzij tegen een eenmalige betaling (zoals www.fontspring.com en www.kernest.com) vanaf nul euro of in abonnementsvorm (zoals www.fontdeck.com en www.typekit.com).

Google Font API

In mei 2010 introduceerde Google, in combinatie met TypeKit en een aantal letterontwerpers, een verzameling lettertypes die gratis (open source) in websites te gebruiken zijn door een extra regel in de code op te nemen en het font in CSS te benoemen. Sterker nog, via de website www.google.com/webfonts kunnen diverse effecten visueel worden uitgeprobeerd waarna de juiste CSS-regels via knippen/plakken zo in de CSS kan worden vastgelegd. Klik hiervoor het het gewenste lettertype en daarna op: „Font previewer: Preview this font”.

Google heeft ook een webfont loader. Deze geeft meer controle over het laden van de fonts dan de Google Web Fonts API.

Formaten

Er is nog steeds een probleem met bestandsformaten. De belangrijkste zijn: OpenType (OTF) en TrueType (TTF). Deze twee worden door de meeste browsers ondersteund.

Internet Explorer kan alleen overweg met OpenType-bestanden die omgezet zijn naar Embedded OpenType-formaat. De omzetting hierheen is moeizaam, zeker met het gebruiksonvriendelijke eigen tool van Microsoft: WEFT (www.microsoft.com/typography/weft.mspx).

Ook Scalable Vector Graphics (SVG) wordt gebruikt. Hiertoe worden OTF- en TTF-bestanden omgezet naar vectordata, die door HTML gerenderd moeten worden. Deze bestanden zijn groter dan de normale letterbestanden en laden trager. SVG wordt door de meeste browsers ondersteund, ook door de iPad en iPhone.

Geheel nieuw is het Web Open Font Format (WOFF), ontwikkeld door Mozilla samen met een aantal letterontwerpers. WOFF comprimeert OTF- en TTF-bestanden en voegt hier extra informatie aan toe, onder andere licentie-informatie. Firefox 3.6 ondersteund dit lettertype al en Microsoft zal het in versie 9 van I.E. gaan ondersteunen.

Voorbeeld

Een voorbeeld is te zien op de volgende pagina: www.timmerdorpakersloot.nl/gastenboek. De naam in de kop en de paginatitel zijn gemaakt met font „Lobster” en de namen van de schrijvers in het gastenboek in font „Reenie Beanie”. Beide komen van de Google webfonts. De rest van de pagina komt uit een normale computer font-family: „Lucida Grande”, Verdana, Arial, Helvetica, sans-serif.