|
>
.02 > .01 .00 > .99 |
|
|
>
.02 .02 > .01 |
Grafische vormgeving/techniek
De seconde van Ron van Roon Fontlicenties en de kleine lettertjes Laissez-passer (nieuwe paspoort) |
|
>
.05 .04 .03 .02 .02 .01 |
|
|
>
.05 .03 .03 .01 .01 .01 |
|
|
>
.01 .00 .99 |
|
|
>
.02 .01 .00 |
|
|
>
.98 |
|
>
2002 > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > |
>
Dit is geen Times > Het wereld wijde web wordt gedomineerd door de Times, Arial, Verdana en Georgia. Wat maakt deze letters nu zo leesbaar of onleesbaar en zijn er alternatieven? > Dat nieuwe lettertype is zeker speciaal voor de mensen die laatst bij Pearl zo'n speciale computerbril hebben gekocht. Dat lettertype moet echt veranderen want langer dan 2 minuten hou ik het niet vol. Het wordt één letterbrij en ik krijg er hoofdpijn van. Deze kritiek van een zekere Olivier B. was één van de vele negatieve reacties op de gerestylde website van het blad Emerce. Wat bleek: de redactie en vormgever van Emerce.nl hadden voor de broodtekst de Georgia gekozen, een schreefletter die nota bene speciaal is ontworpen voor het beeldscherm. De redactie had juist het idee een gebruiksvriendelijke letter geselecteerd te hebben die ook nog eens mooi aansloot bij de lay-out van de papieren Emerce. Wanneer is een schermletter goed leesbaar en hoe universeel is zon begrip? > Carters Verdana Nergens is de functionaliteit van typografie zo gewenst als op een beeldscherm. Moeilijk leesbare tekst is funest voor de kijkcijfers. De meeste letters zijn echter niet ontworpen voor het beeldscherm en dat is duidelijk te zien aan het lettertype dat in den beginne alle webpaginas domineerde: de Times New Roman. Op papier kun je je geen buil vallen aan de Times, maar op het scherm verliest deze typische krantenletter al gauw zijn kenmerkende details. In het grove pixelgrid van een beeldscherm is geen plaats voor een Times 12 met fraaie dik/dun verschillen of een subtiele schreef. Met de komst van de 2.0 browsers kon de webdesigner ook andere fonts definiëren, maar deze verworvenheid bleek maar relatief. In de praktijk is de keuze namelijk beperkt tot de lettertypen die een websitebezoeker in zijn systeem heeft staan. Met name het rijtje Arial, Helvetica, Geneva, Swiss heeft een grote vlucht genomen. Hoewel veel toegepast, is de Arial of Helvetica evenmin als de Times een overtuigende schermletter. Voor koppen voldoet de Arial heel aardig, maar in de kleine corpsen is de spatiëring op het scherm zo beroerd dat letters met elkaar gaan verkleven. Een woord als harnas wordt dan al gauw hamas doordat het boogje van de r min of meer vastgeplakt zit aan de n. > De voorlopige oplossing van het schermprobleem is afkomstig van een bedrijf dat niet bepaald als innovatief te boek staat. In 1994 gaf Microsoft aan de bekende letterontwerper Matthew Carter de opdracht om een systeemfont te ontwikkelen voor Windows 95. Bill Gates had toen niet kunnen denken dat Carters Verdana zou uitgroeien tot één van de populairste fonts van het internet, de netwerktechnologie waar hij tot eind 1995 geen brood in zag. Omdat de Verdana vooral op het scherm moest presteren en in mindere mate op papier, besloot Carter de schermletter als uitgangspunt te nemen voor het printerfont en niet andersom. Simpel gezegd maakte hij eerst de bitmap fonts en tekende daar later de outlines omheen voor de printerfonts. Vergeleken met de Verdana verbleekt de Arial op vele fronten. De Verdana heeft een grotere x-hoogte, bredere letters, grotere openingen in de karakters en een duidelijk contrast tussen romein en vet. Karakters als de onderkast i, j, l, de kapitalen I, J en L en het cijfer 1 zijn duidelijk van elkaar te onderscheiden en er is speciale aandacht besteed aan de uitvoering van ligaturen als ff, fi en fl. Bovendien is de letterspatiëring extra groot zodat de onderlinge karakters elkaar niet raken. In een interview met Webreview zei Carter ooit dat niet alleen de spatiëring zelf maar ook de regelmatigheid ervan de unieke eigenschappen van de Verdana bepalen. > Rubberen medium Diezelfde regelmatigheid vinden we ook terug in de Georgia, een voor het beeldscherm ontworpen schreefletter die Carter in 1997 ontwierp. Ook hier is voldaan aan alle voorwaarden waar een goed leesbare schermletter aan moet voldoen. De Georgia is een heldere letter die het heel goed doet in de kleinere corpsgroottes. Zelfs op een corpsgrootte van 9 punten behoudt de Georgia het karakter van een traditionele schreefletter en blijft de letter bijzonder goed leesbaar. Net als de Verdana kun je de Georgia ongestraft cursief zetten zonder dat de boel onmiddellijk onleesbaar wordt. Voordelen te over dus dacht ook Titus Vegter, de vormgever van Emerce.nl. Vegter koos bewust niet voor de Verdana omdat deze letter volgens hem geen exclusiviteit uitstraalt. Vegter: Emerce.nl is geen website voor de toevallig passerende bezoeker, het is een site voor de professional die bewust terugkeert. Die look-and-feel van de site moet hier natuurlijk bij aansluiten. De Georgia maakt een volwassen indruk, is goed leesbaar en is ook op papier een betere optie. De Emerce site bevat namelijk veel langere artikelen waarvan je je kunt voorstellen dat bezoekers ze willen afdrukken. De Georgia maakt bovendien gebruik van Mediaeval (uithangende) cijfers in plaats van normale tabelcijfers. Dit geeft een veel rustiger beeld in de broodtekst. De lezersreacties hebben Vegter enigszins verbaasd, maar hij relativeert de kritiek met de stelling dat je als vormgever geen invloed hebt op de specifieke browserinstellingen van je bezoekers. Internet is immers een rubberen medium. Tijdens ons telefoongesprek komt zon instelling toevallig aan de orde. Vegter vermoedt dat ik de anti-aliasing (font smoothing) van schermletters, een optie van het besturingssysteem, heb uitgeschakeld. Dat blijkt inderdaad het geval. Het gevolg is dat de Georgia op Emerce.nl er iets minder vloeiend uitziet. Zo zie je maar. Aan de andere kant is er de lezersreactie die je ook na een papieren restyling zou kunnen verwachten: alle verandering is even wennen. > Het scherm onder controle Met de teloorgang van Netscape Navigator wordt het steeds legitiemer om lettertypen als de Verdana, Georgia en in mindere mate de Trebuchet te gebruiken als broodletter voor een website. Wie tegenwoordig een exemplaar van Internet Explorer installeert, krijgt deze, en nog een paar andere fonts op de koop toe. Met andere woorden: de kans dat iemand geen Georgia, Impact of Trebuchet kan bekijken, wordt met de dag kleiner. Natuurlijk zijn er veel meer goede beeldschermletters, maar het heeft vooralsnog geen zin om deze in een stylesheet te definiëren. De oudste en meest beproefde methode om de beperkte letterkeuze te omzeilen is het GIF plaatje. Giet de tekst in een afbeelding en alles wordt weer mogelijk. Dat werkt prima voor koppen en het navigatiesysteem, maar er zijn ook ontwerpers die de elasticiteit van het web niet zo zien zitten en grote lappen tekst als een afbeelding op een webpagina plaatsen. I want total control. Zoiets. > De andere methode om lettertypen op een webpagina te definiëren is font embedding, een technologie die al meer dan vier jaar bestaat maar tot op de dag van vandaag nog steeds niet van de grond is gekomen. Het is een systeem waarbij de browser automatisch een lettertype binnenhaalt en vervolgens gebruikt om de pagina mee op te maken. De twee langst bestaande font embedding technologieën zijn TrueDoc van Bitstream en WEFT (Web Embedding Fonts Tool) van Microsoft. De beperkingen van beide systemen zijn te groot om een doorslaand succes te kunnen worden. Zo krijgt Bitstream het maar niet voor elkaar om TrueDoc te laten functioneren op Netscape 6 en de Macintosh versie van Internet Explorer, en werkt Microsofts WEFT juist uitsluitend en alleen op Internet Explorer. De jongste speler op het gebied van font embedding is het Zweedse BorWare. In tegenstelling tot Microsoft en Bitstream lijkt BorWare er wel in te slagen om een embedded fonttechnologie te ontwikkelen voor elke mogelijke webbrowser, al is er voor Netscape 4.x en 6 wel een speciale plug-in nodig. Het is echter nog maar de vraag of dit bedrijf de font embedding technologie uit de kinderschoenen kan halen. Een embedding technologie die niet als zodanig bekend staat is Macromedias Flash. De technologie werkt uitstekend, maar veel ontwerpers weten jammer genoeg niet om te gaan met de kleinere corpsen. Broodtekst in Flash wordt al gauw blurry en daardoor slecht leesbaar. > Pixelplay Hoewel letteruitgeverijen als FontShop en Adobe speciale voor het beeldscherm geoptimaliseerde lettertypen uitbrengen, zijn ze duidelijk niet gemaakt volgens Carters bitmapmethode. In corpsgroottes van 12 punten en groter functioneren deze letters uitstekend, maar daaronder wordt het al gauw minder florissant. Nergens worden leemtes zo snel opgevuld als op het web en de laatste jaren verschijnen links en rechts minuscule bitmap lettertypen die zich helemaal op hun gemak voelen op de pixels van een beeldscherm. Ze hebben een vaste corpsgrootte van een minimaal aantal pixels en nemen als GIF afbeelding nauwelijks enige kilobytes in beslag. De kunst is om op die paar pixels (we vermoeien u nog even niet met het verschil in pixels op Macintosh en Windows) een consistent letterbeeld te creëren waarbij het onderscheid tussen de afzonderlijke karakters nog duidelijk waarneembaar is. Populaire voorbeelden zijn Silkscreen van Jason Kottke en Sevenet van Peter Bruhn, maar de beste pixelfonts zijn afkomstig van Joe Gillespie, de vormgever en webmaster van Web Page Design for Designers. Op basis van zijn eerste letter, de Mini 7, heeft Gillespie inmiddels een hele familie pixelfonts afgeleverd. Voor 8 dollar per stuk zijn ze de uwe. > - - - > > Microsoft TrueType core fonts for the Web - www.microsoft.com/typography/fontpack > Webfonts FontShop webfonts - www.fontshop.com/news/newreleases/ffwebfonts Adobe WebType - www.adobe.com/type/browser/P/P_911.html > Font Embedding WEFT - www.microsoft.com/typography/web/embedding TrueDoc- www.truedoc.com Fairy - www.borware.com/apps/fairy > Pixelfonts Silkscreen - www.kottke.org/plus/type/silkscreen Sevenet - www.fountain.nu/fonts/download/sevenet.html Mini 7 e.a. - www.wpdfd.com/mini7.htm > - - - > > > > © Gerard Voshaar 2002 |