UPDATE WEBFONTS TEKST HENK GIANOTTEN
Oplossingen voor de online letterbeperkingen
Webfonts eindelijk volwassen? Webtypografie wordt nog steeds stiefmoederlijk bedeeld als gevolg van de juridische en technische beperkingen. Ruim tien jaar na de introductie van @font-face ontstaan er nieuwe en bruikbare fontembeddingstechnieken en specifieke webfontformaten.
I
n diverse artikelen wees ik op de mogelijkheden en vooral de beperkingen van het gebruik van letters op websites. De toename van het webgebruik is enorm; de ontwerp- en fontaspecten worden steeds belangrijker. De huidige fontformaten die wij gebruiken voor druk- en printwerk hebben veel faciliteiten. De fonts zijn vrijwel altijd lettergrootte-onafhankelijk, waardoor we de outline van extreem klein tot megagroot kunnen maken. Bovendien kennen de TrueType- en OpenType-fonts grote tot zeer grote lettersamenstellingen, waardoor de bestandsomvang voor webtoepassingen flink toeneemt. Het belangrijkste bezwaar van de fontproducenten, tegen het embedden van fonts in websites, is echter de mogelijkheid om de fonts via internet illegaal te verspreiden.
▲
Vandaar dat men het embedden van letterfonts in PDF-bestanden meestal wel toestaat, omdat ze voldoende gemodificeerd worden waardoor illegaal verspreiden vrijwel onmogelijk is. Het embedden van complete fonts voor bijvoorbeeld de @font-face techniek bij CSS is vrijwel altijd pertinent verboden.
Uitwijkmogelijkheden De ontwerper wordt dus gedwongen de vaste basisletters als Arial, Cambria, Helvetica, Times, Trebuchet en Verdana te gebruiken. Flashafbeeldingen, Photofonts, sIFR (Javascript, Flash en CSS) en Cufón outlines zijn uitwijkmogelijkheden, maar mede door de relatief trage verwerking van dergelijke bestanden zijn ook die technieken niet populair. Dat kan resulteren
De site van Typekit getoond in de browser Firefox, waarbij het font FF Prater
▲
in sterk afwijkende huisstijlen voor print- en webuitingen van één bedrijf of organisatie, iets dat de meeste brand- en marketingmanagers sterk afwijzen. Het feit dat Ikea onlangs de Verdana als huisstijlletter voor het drukwerk selecteerde, demonstreert dat betere technieken voor fontgebruik voor webtoepassingen hard nodig zijn. De browserproducenten zijn uiteindelijk bepalend bij de keuze in de ondersteuning van fontformaten en dus van de door ons te gebruiken technieken. Verbeteringen van de fontverwijzingstechnieken en nieuwe webfontformaten zijn enige belangrijke recente ontwikkelingen. In de twee hierop volgende artikelen kom je respectievelijk meer te weten over WOFF-fonts en over TaaS met cloud computing.
De homepagina van TypeKit site waarbij het FF Dax font getoond wordt met
Bold weergegeven wordt. De gedecodeerde en gesubsetted fontinfo komt van
behulp van de Chrome browser; nog experimenteel maar het werkt hier goed.
een cloud server en biedt het ultieme ‘Type as a Service’.
Op pagina 38 zie je dat ook TypeKit niet altijd goed werkt.
35
»
UPDATE WEBFONTS / WOFF
Mogelijkheden om webtypografie in te zetten
Het nieuwe webfontformaat? De Nederlander Erik van Blokland introduceerde een nieuwe compacte webfontsoort World Open Font Format, waar onder meer Mozilla recent haar ondersteuning bij Firefox aan toezegde. Veel fontproducenten promoten graag WOFF en hopen minimaal op de steun van Safari, Opera en Chrome.
H
et zijn uiteindelijk de browserboeren die bepalen hoe onze letters op het beeldscherm worden weergegeven. Op dit moment zijn er vijf browsers die daarin meespelen: Explorer, Firefox, Safari, Chrome en Opera. Deze partijen zijn momenteel samen goed voor bijna 99 procent van het browsergebruik.
Complex en inconsistent De meest gebruikte techniek om fonts in deze browsers weer te geven is @font-face, waarbij fonts als Embedded OpenType (EOT), TrueType (TT) en OpenType (OT) worden weegegeven. EOT is een Microsoft-systeem waarbij de fonts
compacter worden volgens een door Monotype Imaging gepatenteerde MicroType Express fontcompressietechniek. Hoewel de naam doet vermoeden dat het om OT-fonts gaat, zijn het vooral de TT-fonts die op die manier bewerkt worden. De EOT-implementaties in de verschillende Explorer-versies zijn echter redelijk complex en inconsistent, waardoor de fontproducenten gedwongen werden veel extra voorzieningen te treffen om fonts alsnog geschikt te maken voor IE. Microsoft maakte destijds ook de gratis utility Web Embedding Fonts Tool (WEFT) beschikbaar, waarmee men de bestaande fonts geschikt kan maken voor EOT.
Gewraakte compressietechniek Hoewel EOT sinds 1997 in gebruik is heeft Microsoft pas in 2007 en 2008 getracht EOT bij de W3C-organisatie als standaard in te brengen. Dat mislukte, mede als gevolg van het gebruik van gepatenteerde technieken voor de compressie. Begin 2009 introduceerde het Amerikaanse Ascender – bekend van onder meer de licenties voor Microsoft-fonts op andere besturingsystemen – EOT Lite. Dit werkt zonder de gewraakte compressietechniek, waardoor het voor fontproducenten gemakkelijker was fonts voor webgebruik geschikt te maken. Bovendien zouden andere browsers dan IE de EOT Litefonts ook ondersteunen. Fontproducenten als URW++ en FontFont ondersteunen nu EOT Lite. Al met al is dit fontformaat bruikbaar, maar nog steeds complex en hoogstwaarschijnlijk onvoldoende open om andere browsermakers overstag te doen gaan.
Begenadigde letterontwerper Het afgelopen anderhalf jaar is er flink gestoeid met voorstellen tot webfontstandaards en -technieken. EOT en EOT Lite kregen echter onvoldoende steun om als echte standaard gebruikt te worden, door de belangrijkste
◀
Deze TypeKit-voorbeelden tonen aan dat in vorm
sterk afwijkende letters goed worden weergegeven. Hier de Bello-letters van Underware.
36
UPDATE WEBFONTS / WOFF
◀
Ook de bijzondere Fraktur-letter als de Bro-
kenscript Bold die de Nederlander Just van Rossum voor FontShop maakte, hoort tot de fontcollectie waar TypeKit klanten uit kunnen kiezen. Firefox 3.6 ondersteunt naast EOT Lite ook de WOFFfonts. TypeKit kan voor elke browser de optimale fontsoort kiezen. Als WOFF de standaard wordt en door alle browsers ondersteund zou worden hoeft bijvoorbeeld TypeKit voor de recent uitgebrachte browsers maar één formaat te ondersteunen. Oude browsers hanteren de oude techniek en de ‘terugvalfonts’ als Arial en Times.
browserproducenten en ondersteund door de belangrijkste letterproducenten. Onze landgenoot Erik van Blokland van LettError stelde samen met de Amerikaanse ontwerper/ programmeur Tal Leming en zijn Engelse collega Jonathan Kew een nieuw webfontformaat op: World Open Font Format (WOFF). Erik is één van de meest begenadigde programmeurs en letterontwerpers die ons land kent en in de vorige editie van Publish besprak ik onder meer zijn Trixie-fonts met bijzondere OpenTypefaciliteiten. Op basis van bestaande fonttechnieken (TT en OT), waardoor ook bestaande weergavetechnieken gehanteerd blijven, ontwikkelde men een fontformaat zonder encriptietechnieken en DRM-faciliteiten. Domeinlinking en crosslinking zijn daarbij onmogelijk. Je kunt ermee bovendien naast de fontinformatie, aanvullende metadata, licentie-informatie en gebruiksinformatie aan toevoegen. De fontcompressie op basis van de bestaande rechtenvrije zlib-
techniek (een algemeen toepasbare compressiemethode) maakt de fonts extreem klein en met behulp van subsetting kan het benodigde aantal tekens in het font beperkt worden.
W3C-oplossing Mozilla maakte vrij snel bekend dat men WOFF in Firefox 3.6 ondersteunt en dat men WOFF 1.0 als standaard bij de W3C-organisatie heeft aangemeld. Als het ook werkelijk een webstandaard wordt, is dat een goede ontwikkeling. Adobe, ITC, FontFont, Linotype, Monotype, Underware en anderen meldden al WOFF-fonts in hun programma op te nemen. Als de andere browserbouwers WOFF ook ondersteunen is het op termijn mogelijk betere webtypografie in te zetten. Wat echter onopgelost is en een groot probleem wordt, is het gebrek aan standaards inzake de lettersamenstelling van de verschillende fonts. In het recente OT-artikel gaf ik dat al aan. In grafische toepassingen kunnen we fonts subsetten in
PDF’s en daarmee de fontinhoud tot een minimum beperken. Bij PDF/X is de fontgrootte minder belangrijk. Bij PDF’s voor webtoepassingen wordt dat probleem al groter. Bij fontembedding in webpagina’s is het extra noodzakelijk fontinfo te beperken en daarnaast te comprimeren om snelle verwerking mogelijk te maken. Daar oplossingen voor aandragen met behulp van onder meer gestandaardiseerde fontinhouddefinities is minstens zo belangrijk. EOT: www.microsoft.com/typography EOT-Lite: www.ascendercorp.com Erik van Blokland: www.letterror.com Johnatan Kew: www.mozilla.org Tal Lemming: www.talleming.com Type Supply: www.typesupply.com WOFF: http://hacks.mozilla.org/2009/10/ woff Bekendmaking van Mozilla support: http://lists.w3.org/Archives/Public/ www-font
»
Wat onopgelost is en een groot probleem wordt, is het gebrek aan standaards inzake de lettersamenstelling van de verschillende fonts ▲
Zie hier een voorbeeld van het font FF Nuvo. De FF Nuvo in
WOFF-formaat is gratis bij Fontshop te downloaden. 37
UPDATE WEBFONTS / TAAS
Uitkomst door webkrachten te bundelen
Webtypografie als service Bij de huidige webtypografie komt de pagina- en fontinformatie van de bezochte url. Met cloud computing kun je de fontinformatie ook van elders betrekken. Een fontleverancier en enkele externe service providers leveren deze diensten al onder de titel Type as a Service (TaaS).
D
e huidige browsers gebruiken verschillende fonts en hanteren technieken om speciale fonts uit verschillende webveilige combinaties te kiezen. Dat is complex en vraagt om voldoende speciale kennis. Bovendien is er een veel te beperkte fontkeuze. Technieken als World Open Font Format (WOFF) zouden op de zeer lange termijn het fontgebruik voor webtoepassingen sterk kunnen wijzigen. Nu hebben we daar maar zeer beperkt voordeel van. Bovendien moeten ontwerpers van de bestaande grafische fonts webvarianten vervaardigen of kopen. Als de gebruikersovereenkomst van de fontproducent het toelaat mag je dat zelf doen, anders moet je bij de fontleverancier de speciale webfonts (bijvoorbeeld in EOT Lite-formaat) aanschaffen. Dat geschikt maken en beheren is voor veel ontwerpers een lastige klus.
▲
Gratis weblicentie De Nederlandse letterproducent Typotheque in Den Haag introduceerde onlangs de webfonts van haar OpenType-fontbibliotheek. Daarbij koop je een normale licentie van een font en krijg je gratis de weblicentie van datzelfde font erbij. Het systeem van Typotheque genereert de codes en fontformaten (EOT en TTF) voor de verschillende browsers en plaatst de CSS-codes voor @font-face in je eigen pagina. Typotheque plaatste de benodigde fontinformatie met behulp van cloud computing op meerdere servers. Op het moment dat een gebruiker de webpagina’s ophaalt, wordt tegelijkertijd de fontinformatie van één van de andere cloud servers gehaald. De fontinformatie staat dus niet meer op je desktop en pas als de browser het fontformaat niet zou ondersteunen, maakt men gebruik van de bestaande websafe fonts
De fontoverzichten op de TypeKit-site worden met Chrome niet goed weerge-
▲
▲
De fonts op de homepage van TypeKit werken bij
het gebruik van Firefox 3.5 soms niet goed. Vreemd blijft dat het normale vervangende webfont Arial hier niet zichtbaar is. De rest van de pagina toont de andere fonts goed.
als Arial, Times en anderen. Vrijwel alle fonts van Typotheque zijn nu in OT beschikbaar en kunnen ook als webfont worden gebruikt. Als je nog geen OT- maar PS-fonts hebt, moet je eerst
Dezelfde overzichten van TypeKit worden met behulp van Firefox met de juiste
ven. Automatisch grijpt men terug op Times Roman. Voor een fontselectieweer-
fonts weergegeven. De Bello-letter van het Nederlandse Underware is één van de
gave uiterst knullig.
ruim 400 mogelijkheden die men als TaaS biedt.
38
UPDATE WEBFONTS / TAAS
▲
In Internet Explorer worden de Irma Slab-fonts ook in deze TaaS-toepassing
▲
Dezelfde pagina van de Typotheque-website wordt bij het gebruik van de
goed weergegeven. Typotheque hanteert een eigen techniek voor het subsetten
Chrome browser nu nog niet goed weergeven. Gelukkig dat het vervangende font
van de fonts.
Times Roman goed wordt toegepast. De verschillen in de weergave van de fonts in de linker kolom zijn goed zichtbaar.
een upgrade realiseren. Naast de basisprijs voor de fonts (waarvoor het aantal in gebruik zijnde CPU’s als criterium geldt) is er ook een gebruiksrecht dat per maand en per capaciteit berekend wordt. 500 Mb per maand (bijvoorbeeld 25.000 downloads van 20K fontinformatie) is gratis, elke Gigabyte extra kost 1 euro. Meerdere domeinen zijn mogelijk en het transfereren van een ontwerpsite naar een klantsite is mogelijk. De webmaster kan zelf het gebruik per maand instellen, waarbij bij overschrijding automatisch gebruik gemaakt wordt van de bestaande bij de gebruiker aanwezige ‘websafe’ fontverzameling.
Piepkleine bestanden Op dit moment wordt Chrome nog niet ondersteund, kunnen bijzondere huisstijlfonts niet gebruikt worden en zijn nog geen fonts van andere producenten op deze manier te gebruiken. Omdat het systeem de mogelijkheden van de OT-fonts met extreem grote lettersamenstellingen hanteert worden zeer veel talen ondersteund. Daarbij worden uitsluitend de gebruikte tekens ‘subsetted’ en ontstaan er dus piepkleine bestanden. Alle onnodige fonttabellen en andere data die nodig is voor normaal gebruik is bovendien verwijderd. Op de site is uitvoerige informatie aanwezig over het gebruik en de mogelijkheden.
Meerdere bronnen Waar Typotheque haar afnemers slechts laat kiezen uit de eigen collectie, laat TypeKit kiezen uit een verzameling fonts van ruim veertig verschillende producenten. TypeKit koopt de fonts en maakt er voor de gebruiker een
specifiek webfont van. Ook hier staat de fontinformatie niet op de server van de host, maar op de servers van een cloud. Men maakt ook hier gebruik van CSS en het systeem @font-face, waarbij fonts voor de verschillende browsers worden aangemaakt. De ontwerper dient over de licenties van de oorspronkelijke producent te beschikken. Om datzelfde lettertype ook op de site weer te geven kies je uit één van de drie fontverzamelingen waarover Typekit beschikt. Dat zijn drie pakketten met respectievelijk 100, 300 of ruim 400 fonts. Bij elk pakket hoort ook een fontverbruik. Bij het basispakket kun je momenteel kiezen voor vijf fonts uit een verzameling van honderd. Dat zijn freefonts, fonts met een knullig beperkte lettertekensamenstelling, maar ook enkele hoogkwalitatieve fonts van bijvoorbeeld Mark Simonson, FontFont en Underware.
Stunt De kwaliteit van veel hier getoonde fonts is voldoende voor de Verenigde Staten, maar beslist onvoldoende voor internationale toepassingen met meerdere talen. Het is duidelijk dat TypeKit zich nu nog vooral op Noord-Amerika richt. Naast het aantal en de keuze uit de fontverzameling is ook de benodigde bandbreedte van de cloud servers bepalend voor de abonnementsprijs per maand. Omdat men net is begonnen stunt men met aantrekkelijke testperiodes en jaarprijzen. De webmaster kan online de capaciteit aanpassen aan de omstandigheden en het fontgebruik. Ook hier is het mogelijk meerdere websites te
bedienen en sites van ontwerper naar klant te transfereren. TypeKit kreeg vrij snel na de introductie, concurrentie van Kernest en TypeDeck. Soortgelijke oplossingen waarbij ook hier de fontinformatie vanaf externe servers wordt opgehaald. Tot nu toe is het aantal beschikbare fonts via deze TaaS-oplossing zeer beperkt. Underware heeft nu nog slechts twee fonts, Typofonderie dertien en FontFont 36 fonts in de collectie. Grote fontleveranciers als Adobe, ITC, Linotype en Monotype doen niet mee. De investeerders van TypeKit hebben onlangs veel geld opgehaald om mogelijk te maken dar meer fonts opgenomen worden en om met meer fontproducten alsnog contracten af te sluiten. Het is in ieder geval duidelijk dat TaaS een oplossing biedt om betere webtypografie te realiseren.
Voor goede ontwerpers Ook hier is het gebrek aan standaards op het gebied van fontindelingen fnuikend. De gebruiker kan bij TypeKit nergens zien in hoeverre de gekozen fonts de benodigde taalgebieden afdekken. Zelfs van de fonts van Europese makelij is dat nergens af te lezen. Typotheque is wat dat betreft duidelijk een betere oplossing voor goede ontwerpers. De komende maanden komen andere fontaanbieders beslist met TaaS-oplossingen. We houden je op de hoogte. www.fontdeck.com www.kernest.com www.typekit.com www.typotheque.com
39
