Pennenstrijd
Sat, 18 Dec 2004 20:17 +0100
Visuele overdracht van informatie op het internet
Voor de overgrote meerderheid van de mensen wordt informatie op het World Wide Web weergegeven op een scherm. Schermen zijn er in vele soorten, typen en maten. En dan hangen ze ook nog eens aan veel verschillende computersystemen, met verschillende Operating Systems, waarop steeds weer andere browsers draaien. Daarbij is niet eens te voorzien met welke afmeting van de browser viewport een bezoeker het liefst surft1)
Verschillende merken en versies van vanalles waarmee het aantal configuraties oneindig groot benadert.
Poeh. Het is eigenlijk overweldigend op hoeveel manieren informatie op het internet, bijvoorbeeld deze informatie, bij geïnteresseerden terecht komt. En dan doel ik alleen nog maar op visueel.
Om die visuele overdracht te doen slagen, moet een schrijver/
Lettertypes
Standaard fonts van een browser3)
De bezoeker die teksten ziet met een moderne, grafische browser, heeft een aantal lettertypes als de standaard gedefinieerd. Niet alleen het lettertype, maar ook de grootte is in de browser ingesteld. Ter illustratie het volgende:
| Standaard lettertypes in uw browser | |
|---|---|
| type | tekstfragment als voorbeeld |
| serif |
Deze tekst geeft weer, welk font met welke grootte als standaard in uw browser is ingesteld voor een lettertype
serif (ofwel met schreef).Hier laat ik ook zien hoe een tekst met
<em>nadruk</em> toont in dit standaardfont, en tot slot hoe een tekst die <strong>sterke nadruk</strong> krijgt, oogt. |
| sans-serif |
Deze tekst geeft weer, welk font met welke grootte als standaard in uw browser is ingesteld voor een lettertype
sans-serif (ofwel schreefloos).Hier laat ik ook zien hoe een tekst met
<em>nadruk</em> toont in dit standaardfont, en tot slot hoe een tekst die <strong>sterke nadruk</strong> krijgt, oogt. |
| monospace |
Deze tekst geeft weer, welk font met welke grootte als standaard in uw browser is ingesteld voor een lettertype
monospace (ofwel een font waarbij alle letters dezelfde ruimte innemen).Hier laat ik ook zien hoe een tekst met
<em>nadruk</em> toont in dit standaardfont, en tot slot hoe een tekst die <strong>sterke nadruk</strong> krijgt, oogt. |
| cursive |
Deze tekst geeft weer, welk font met welke grootte als standaard in uw browser is ingesteld voor een lettertype
cursive (meestal een schrijfletter nabootsend)Hier laat ik ook zien hoe een tekst met
<em>nadruk</em> toont in dit standaardfont, en tot slot hoe een tekst die <strong>sterke nadruk</strong> krijgt, oogt. |
| fantasy |
Deze tekst geeft weer, welk font met welke grootte als standaard in uw browser is ingesteld voor een lettertype
fantasy (ofwel een fantasierijk lettertje; dit kan werkelijk van alles zijn)Hier laat ik ook zien hoe een tekst met
<em>nadruk</em> toont in dit standaardfont, en tot slot hoe een tekst die <strong>sterke nadruk</strong> krijgt, oogt. |
Een gebruiker/bezoeker kan dus eigenlijk zelf heel goed bepalen hoe hij of zij wil, dat de tekst van een internetpagina op het eigen scherm wordt getoond. Mits de bezoeker een fatsoenlijke browser tot zijn of haar beschikking heeft natuurlijk3). Anders houdt het hele verhaal al snel op.
Toch wil een auteur voor het World Wide Web net iets meer te zeggen hebben over het voorkomen van zijn of haar teksten, dan slechts Dit is een serif
of Dat moet als monospace worden getoond
. Om een harmonieus ogende pagina in het venster van uw browser te tonen, speelt een webontwerper met verschillende lettertypes.
Lettertypes van een ontwerp voor het web
Een verstandige keuze is geheel niet eenvoudig. Zoals in de eerste alinea al geschetst, is het namelijk volstrekt onduidelijk wat de omstandigheden nou precies zullen zijn waarin een pagina aan een bezoeker getoond gaat worden.
Één van die onzekerheden is welke lettertypes de bezoeker überhaupt op zijn of haar systeem geïnstalleerd heeft staan. Dat varieert bijvoorbeeld per operating system, maar hangt daarnaast mede af van geïnstalleerde applicaties die lettertypes mee kunnen leveren bijvoorbeeld, of van versieverschillen van grafische browsers die de beschikbaarheid van al die lettertypes beïnvloeden.
Om het allemaal nog wat complexer te maken, is de grootte van het ene lettertype ook nog eens totaal afwijkend van de grootte van een ander letterype, zelfs als beide op
Regel 1 - rekening houden met beschikbaarheid
Als voorzorgsmaatregel is het alleen daarom al verstandig om ten minste drie lettertypen in een stijl op te nemen, als je een font definieert:
- het specifieke font voor
Windows-gebruikers , bijvoorbeeld Tahoma; - het specifieke font voor bijvoorbeeld Apple- of
Linux-gebruikers , bijvoorbeeld Geneva; - een generiek systeemfont waarop de browser kan terugvallen als de eerder genoemde specifieke fonts niet aanwezig of niet beschikbaar zijn, bijvoorbeeld sans-serif.
Regel 2 - de basisprincipes kennen
Het definiëren van een font kan op verschillende manieren de mist in gaan. Enige basiskennis van wat met een font allemaal mogelijk is, is plezierig, zodat allerlei features zinvol kunnen worden toegepast. Daarom hier de belangrijkste manieren om een font te kunnen manipuleren:
| Manipulatie van een font | |
|---|---|
| Kenmerk | Voorkomen |
schreef of schreefloos |
De eerste keuze die een ontwerper maakt is Times New Roman: Arial: Ik vind een letter met schreef makkelijker lezen vanaf het scherm, dan een schreefloze letter. Vandaar dat mijn keuze voor een letter met schreef voor de broodtekst van mijn pagina's snel was gemaakta1). De overige voorbeelden gebruiken mijn standaard lettertype, tenzij het significant is om daar van af te wijken. |
absoluut of relatief |
Er zijn vele eenheden waarin je kan definiëren wat de grootte van het lettertype moet zijn. Opeenvolgend zijn dit stukjes tekst met 80%, 100%, 1em, 16px en 12pt fontgrootte:
Op het eerste oog kunnen de laatste vier precies hetzelfde lijken. Toch zijn ze dat absoluut niet. De groottes uitgedrukt in procenten en in Ook als een bezoeker handmatig voor een grotere weergave kiest (in dit geval alleen in IE), zullen de letters bij de absolute groottes niet meeschalen. Met het kiezen voor absolute groottes voor je fonts, kies je dus mogelijk voor het ontoegankelijk maken van je pagina's voor mensen die de weergave van fonts op hun scherm (noodszakelijkherwijs) vergroot hebben. |
intrinsieke grootte |
Bij het kiezen van een goed font en van een goede grootte, speelt ook de grootte van het lettertype zelf een rol. Bij de volgende voorbeeldjes, is voor ieder lettertype de grootte ingesteld op 100% en is de weergave dus in overeenstemming met de favoriete lettergrootte van de bezoeker, of zou dat moeten zijn: Arial: Tahoma: Verdana: Times New Roman: Georgia: Palatino Linotype: De verschillen zijn significant en uitsluitend toe te schrijven aan het lettertype. Sowieso lijken de schreeflozen (sans-serif) een stuk groter dan de lettertypes met schreef (serif). Verdana is van de schreeflozen met ruime voorsprong de grootste van dit rijtje. Times New Roman is de kleinste. En dat allemaal bij een weergave op 100% van het favoriete formaat font van de bezoeker, zoals hij of zij dat heeft ingesteld in de browser. Verdana is voor veel ontwerpers voor het web uitermate aantrekkelijk. De letter is ruim en open en leest vlot van een scherm, zeker voor een schreefloze letter. Anderzijds is ze wel erg groot. Om daar wat aan te doen kiest menig webontwerper voor een Verdana op 80%: Op het eerste oog lijkt dat een prima oplossing, tot je ontdekt wat er gebeurt als je bezoeker het betreffende font niet beschikbaar heeft: Verdana voor de Verdanalozen: Dat is voor grote brokken tekst, zeker met langere regels, wel een heel iebelig lettertype geworden, waarvan de letters voor veel mensen al gauw te klein zullen zijn om comfortabel te kunnen lezen. Als de grootte van het font dan ook nog eens met een absolute maat (bijvoorbeeld 9pt of 12px) is ingesteld, kan een massa bezoekers (die met IE) het font niet eens op een eenvoudige manier naar keuze handmatig vergroten, om de inhoud van een pagina zo alsnog comfortabel te kunnen lezen. Verdana heeft op 80% grootte (of met 9pt of 12px) ongeveer dezelfde afmeting als bijvoorbeeld Times New Roman of Palatino Linotype hebben op 100%. Het voorkomen van een font, de intrinsieke grootte van een lettertype, betekent dus nogal wat voor je ontwerp. Om geen toegankelijkheidsproblemen te creëren is het belangrijk verkleinen van het font voor de broodtekst van je pagina ongewenst, zeker als daarbij gebruik zou worden gemaakt van een absolute grootte voor het font. Daarmee is een keuze voor een lettertype, met als grootste argument 'toegankelijkheid', beperkt tot de middenmoters. Als toegankelijkheid geen issue is, zijn de extremen (zeer groot, juist heel klein) opeens ook beschikbaar voor een ontwerp. |
|
Regelafstand is van invloed op de leesbaarheid (en dus toegankelijkheid) van teksten op het scherm (en op andere media, maar die komen hier niet aan bod): 105% 125% 160% 200% 480% Te compact, zoals bij het tekstfragment met slechts 105% regelhoogte, leest niet comfortabel. Te ruim zoals bij 200% regelhoogte in ieder geval optreedt, leest ook niet prettig meer. Bij nog hoger waarden komt er een punt waarop het niet langer in één oogopslag duidelijk is, dat de ene regel hoort bij de andere regel. Bij het laatste tekstfragment met een regelhoogte van 480% is dat duidelijk het geval. |
|
|
Eigenlijk lijken de lettertypen Verdana en Tahoma erg op elkaar. Verdana is iets groter, maar het grootste verschil in de indruk die de letter maakt, wordt veroorzaakt door de afstand tussen de letters onderling. De letters van Verdana staan veel ruimer opgesteld, dan die van Tahoma: Verdana: Tahoma: Bij Verdana is niet alleen het individuele lettertje steeds een tikkie breder dan bij Tahoma, ook de onderlinge afstand van de karakters is anders, ruimer. Met Tahoma, letter-spacing:1px;: De letter oogt hiermee vrijwel net zo luchtig als de oorspronkelijke Verdana, al blijft die laatste wat ronder. |
|
|
Waar heel voorzicht mee moet worden omgegaan is de property Een Westerse lezer heeft leren lezen van links naar rechts. Een geoefende lezer kan zijn lezen aardig op tempo brengen. Hierbij pikt hij of zij steeds een regel op, op een vast punt langs de linker kantlijn of in ieder geval in de buurt van dat punt. Een tekst die links uitlijnt, leest daarom veel gemakkelijker en sneller dan een tekst die centreert of rechts uitlijnt. Een Westerse lezer heeft leren lezen van links naar rechts. Een geoefende lezer kan zijn lezen aardig op tempo brengen. Hierbij pikt hij of zij steeds een regel op, op een vast punt langs de linker kantlijn of in ieder geval in de buurt van dat punt. Een tekst die links uitlijnt, leest daarom veel gemakkelijker en sneller dan een tekst die centreert of rechts uitlijnt. Een Westerse lezer heeft leren lezen van links naar rechts. Een geoefende lezer kan zijn lezen aardig op tempo brengen. Hierbij pikt hij of zij steeds een regel op, op een vast punt langs de linker kantlijn of in ieder geval in de buurt van dat punt. Een tekst die links uitlijnt, leest daarom veel gemakkelijker en sneller dan een tekst die centreert of rechts uitlijnt. Een Westerse lezer heeft leren lezen van links naar rechts. Een geoefende lezer kan zijn lezen aardig op tempo brengen. Hierbij pikt hij of zij steeds een regel op, op een vast punt langs de linker kantlijn of in ieder geval in de buurt van dat punt. Een tekst die links uitlijnt, leest daarom veel gemakkelijker en sneller dan een tekst die centreert of rechts uitlijnt. Het uit laten vullen van regels tekst in een alinea, zoals in het vierde fragment is te zien, heeft zijn eigen bezwaren. De witruimtes tussen de woorden worden gevarieerd, om de tekst geheel regelvullend te kunnen maken. Dit geeft een wat onrustig beeld en leidt tot vertragingen bij het lezen. Het kan makkelijk als zeer hinderlijk worden ervaren door een lezer. |
|
|
Van andere ordegrootte is het kennen van het verschil tussen de stijlen oblique en italic van fonts. Bij het gebruik van oblique als waarde voor de property Althans, dat is de mare. Tot nu toe heb ik geen font ontdekt dat werkelijk anders toont in de grafische browsers als er een italic font wordt gekozen in plaats van een oblique font. Een aantal fonts heeft helemaal geen italic variant, bijvoorbeeld Times New Roman. Toch, het verschil in gedachte, kan het kiezen voor de waarde italic voor de property |
|
Er is nog een heel rijtje aan andere mogelijkheden om het uiterlijk van teksten met een eenmaal gekozen font te beïnvloeden, naast het inline te gebruiken <strong> en <em>:
font-weight font-variant font-stretch text-transform word-spacing
Volgens mij is de impact op het uiterlijk van je broodtekst, van variatie in
Met de overige properties kan heel wat gestoeid worden en zo kan alsnog heel wat verziekt worden ook. Ze zijn het waard om eens te bestuderen naast wat hier al aan bod is geweest, bijvoorbeeld via de fontssectie en de tekstsectie van de CSS2 Specification zoals aanbevolen door het World Wide Web Consortium.
Regel 3: steek uw licht op bij anderen!
De discussie over fonts voor weergeven van informatie op een beeldscherm is voorlopig nog niet uitgewoed. De ene persoon vindt schreefjes lekker. De andere heeft liever de ronding van een schreefloze letter. De ene wil ruime marges, de andere wil lange regels. De ene wil korte, stacato-achtige teksten. De andere leest liever wat langere volzinnen in sluitende paragrafen en alinea's.
Ik ben niet bekend met onderzoeken op dit gebied, al zullen er al talloze zijn gehouden. Het kan het waard zijn om er eens naar te Googlen als je er in bent geïnteresseerd. Het is in ieder geval waardevol om eens van gedachten te wisselen met gewone mensen die zich hier ook mee bezig houden, bijvoorbeeld via niwo.
1) Theoretisch zijn ruim 840.000 groottes denkbaar, uitgaande van normale situaties.
Alles tussen 1286×1024px voor wide screen notebooks en pakweg 320×150px voor PDA; dat zijn
2) Ik ben volstrekt niet onderlegd op dit gebied. Als dat voldoende reden is om me compleet terzijde te schuiven, soit.
Wel heb ik inmiddels veel gelezen en gediscussieerd over dit onderwerp. In dit artikel leg ik slechts de cumulatie van mijn kennis en ervaring neer. Als dat voldoende reden is om het te lezen, fijn.
3) Als u dit artikel leest in Internet Explorer, zelfs in de laatste versie (6.0) die ook al weer een aantal jaren oud is, kunt u in de tabel met voorbeelden van standaardfonts in grafische browsers, misschien geen verschil zien tussen alle typen, of slechts bij een enkel font een afwijkend lettertype constateren.
Om u nu enigszins uit de brand te helpen, heb ik wat schermafdrukken gemaakt, waarmee u kunt zien hoe de verschillende lettertypen op mijn scherm, in Opera met mijn instellingen, er uit zien. Klik op een lettertype en een plaatje verschijnt van een schermafdruk van mijn scherm (en gelieve uw browser
te lezen als mijn browser
):
Ik kan u overigens met plezier een andere browser aanbevelen, zodat u up to date bent, niet alleen voor het correct zien van lettertypen. Downloaden en installeren is voor beide kinderlijk eenvoudig:
De eerste, FireFox, lijkt me makkelijker in gebruik. De tweede, Opera, lijkt me de betere browser, omdat de CSS- en
4) De keuze voor relatieve maten voor ondermeer de grootte van een font, is onderdeel van een uitgebreidere filosofie. Zie hiervoor mijn pagina over Liquid Design in mijn sectie over Webontwerp.
5) Ik vind toegankelijkheid, accessibility, van wat er aan informatie op het World Wide Web wordt aangeboden, een belangrijk onderwerp. Zie daarvoor ook mijn artikel over Accessibility en Usability.
a1) addendum: sinds ik dit schreef, heb ik de opmaak van mijn pagina's veranderd. Bij het nieuwe ontwerp is de keuze gevallen op een
copyright © 2003-2004 Barbara de Zoete