Typografie en leesbaarheid

Toch grappig dat de lettergrootte van tekst met extra interlinie groter lijkt dan van tekst met een kleinere interlinie. Het leest zoveel prettiger naar mijn mening. Het is makkelijker om de regel te volgen.

Staan cijfers op de horizontale as van het staafdiagram voor tijd of iets dergelijks? Seconden?

Prima artikel. Deze theorie zou tot de basiskennis van iedere ontwerper moeten behoren.

Kleine opmerking: Voorzover ik weet is Arial niet voor het scherm ontworpen maar als alternatief voor Helvetica. (Dat pre-scherm is.) Dit om de hoge Helvetica licentiekosten te besparen.

Hoe verhoudt arceren zich tot de toegankelijkheidsrichtlijnen waarbij je kleur niet als enige kenmerk mag gebruiken?

Slim opgemerkt van Tom, de cijfers staan inderdaad voor seconden in deze test.

En de manier van arceren zou niet mogen volgens Drempelsweg prio 1 richtlijnen, aangezien mensen die geen kleur kunnen onderscheiden deze arcering niet of nauwelijks zien:

“Richtlijn 02: Zorg ervoor dat alle informatie die met behulp van kleur wordt overgebracht ook beschikbaar is zonder kleur (W3C ijkpunt 2.1)”

In dat geval zou cursieve, of liever vette, tekst toch een betere oplossing zijn.

Ik ben kleurenblind en kan de arcering echt wel zien hoor. Het zal echt om hele specifieke gevallen zijn (ik weet niet eens of ze wel bestaan) waarbij dit geldt. Mensen met de meest erge vorm kleurblindheid zien alles in grijstinten. Zelfs dan is de gele arcering nog te zien.

Ik ben benieuwd welk standpunt stichting accessibility in deze inneemt.

Ik heb even gemaild met stichting accessibility en dit is het antwoord

Beste Stefan,

richtlijn 2 van de drempelsweg richtlijnen gaat over het gebruik van kleur om informatie over te brengen. Het gaat dus niet zozeer over opmaak van tekst of over opmaak in het algemeen.

Als dus de achtergrondkleur geel alleen gebruikt wordt om tekst leesbaarder te maken is dat geen probleem (zolang het contrast met de tekstkleur natuurlijk wel groot genoeg is). Maar als de kleur geel informatie overbrengt (bijvoorbeeld om verplichte velden bij een formulier aan te geven), dan moet ook op een andere manier (bijvoorbeeld cursief) dezelfde informatie worden overgebracht.

@ Stefan Wobben “Ik ben kleurenblind en kan de arcering echt wel zien hoor. Het zal echt om hele specifieke gevallen zijn (ik weet niet eens of ze wel bestaan) waarbij dit geldt.”

Nou en of ze bestaan! Ze zien niet alleen geen kleuren, ze zien zelfs helemaal niets… Wordt ook wel blind genoemd! En neem van mij aan: een brailleregel of spraaksynthesizer heeft wat moeite het concept “geel” uit te leggen… Vandaar de eis dat betekenis niet alleen via kleur mag worden overgebracht.

HUH wat een agressief taalgebruik zeg….

Ik kwam dit artikel via via toevallig tegen en omdat ik hierzelf onlangs nog een literatuurstudie naar heb gedaan interesseerde ik me voor het artikel. Deze theorie moet zoals Tobi aangaf inderdaad tot de basiskennis behoren van een ontwerper.

Wat ik alleen mis in het artikel is de oorzaak van de slechte leesbaarheid van beeldscherm tekst. Allereerst is dit natuurlijk de lagere resolutie van een beeldscherm. Karakters worden hierdoor minder scherp en kunnen dichtslippen (de gaten in de letters zoals de a, e, o, d enz.). Daarom zijn er ook speciale lettertypes voor het beeldscherm ontworpen die dit moet voorkomen. Er zijn veel verschillende beeldschermletters, maar de enige die je voor het internet algemeen kunt gebruiken zijn naar ik weet de verdana en de Georgia.

Een ander punt van aandacht is het licht dat door de letters schijnt. Door dit licht kan je je minder goed concentreren en het lijdt als het ware af van de tekst.

Als voordeel van beeldschermtekst kan wel aangegeven worden dat het alle kleuren kan vormen. Drukwerk / print wordt vaak opgebouwd uit de kleuren c(yan)m(agentha)y(ellow)(blac)k waardoor de kleuren minder helder worden.

In het artikel geef je vervolgens een aantal factoren van de leesbaarheid van teksten. De factoren die je geeft zijn niet alleen op beeldschermtekst van toepassing. Ook op drukwerk / print zijn veel van jou factoren van toepassing.

Tot slot wil ik aangeven dat de leesbaarheid heel erg sterk met de lengte van de regels te maken heeft. Ik ben dan ook van mening dat teksten die afhankelijk van de resolutie breder worden op internet niet kunnen. Dus ook deze site vind ik typografisch niet sterk. Wellicht dat mensen met een resolutie van 800 * 600 hier een leesbare tekst hebben, maar voor mij (1024) is dat het in ieder geval niet. Wat vinden anderen van flexibele lay-outs en breder wordende teksten?

Er is veel onderzoek gedaan naar de hoeveelheid tekst die in één oogopslag kan worden gelezen door de gebruiker van de website. Dit mag niet breder zijn als zo’n 400/500 pixels ([b]Ja[/b] in pixels want webbeest). Aangezien dit +/- het formaat is wat het menselijk oog in in keer kan bekijken.

Schalende websites in de breedte van het scherm zijn wat mij betreft dus niet lekker leesbaar, of je moet zin hebben je venster te schalen zodat de tekst wat vriendelijker leest.

@Nathalie. Het aantal pixels is inderdaad een kritieke factor voor de leesbaarheid, maar je moet de argumentatie juist omkeren!

Als het aantal tekens per regel gelijkblijft, wordt tekst steeds beter leesbaar naarmate de resolutie verder toeneemt. Hoe meer pixels per letter, des te duidelijker wordt de lettervorm. Vergelijk maar eens de leesbaarheid van bijvoorbeeld een Word-document of een PDF bij een resolutie van 800 bij 600 pixels met de leesbaarheid bij een resolutie van 1600 bij 1200 pixels. Dit is een van de redenen waarom drukwerk (met een resolutie vanaf 1200 pixel per inch) beter leesbaar is dan schermtekst. Dit is ook een van de redenen waarom schermweergaven met een hogere resolutie gebruikersvriendelijker en ergonomisch verantwoorder zijn.

Leesbaarheid kun je niet uitdrukken in pixels. Het aantal tekens per regel is alvast een beter criterium. Een relatieve lettergrootte die kan worden aangepast aan de beeldschermresolutie, is daarom altijd gebruikersvriendelijker dan een vaste lettergrootte in pixels. Daarvoor moet je dus juist wél een schalende lettergrootte en een schalende paginabreedte gebruiken. Betrouwbaardere criteria zijn verder het aantal tekens per woord (de woordlengte), het aantal woorden per zin (de zinslengte) en het aantal zinnen per alinea.

Leesbaarheid wordt uiteindelijk bepaald door de lezer en dus de gebruiker. Hoger opgeleiden hebben minder moeite met lange woorden in lange zinnen. Voor website-usability moet de doelgroep de doorslag geven, ook bij leesbaar. De optimale leesbaarheid vastprikken op een breedte van 400 tot 500 pixels is echt te simpel.

Schalende websites, en dan bedoel ik de breedte van de pagina, zorgen voor een beweging van het hoofd en de nek. Dit zorgt voor een slechtere leesbaarheid. Je hebt net je hoofd geheel naar rechts gedraait en dan moet je naar links voor de volgende regel, wedden dat het zoeken is waar die regel ook alweer begint? Als je de breedte van je tekstvlak vastzet op zo’n 400 a 500 pixels kan de gemiddelde internetgebruiker alles in één oogopslag in zich opnemen. De tekst en de daarbijbehorende eigenschappen zullen in %, of em worden aangegeven binnen de CSS om de gebruiksvriendelijkheid te verhogen.

Wel leuk zo’n discussie, alleen moeilijk mijn standpunten aan te passen als ik vind dat ik gelijk heb. 😉

@ward: Lees ook eens het artikel [url]http://home.tiscali.be/huib.billiet/grafisch/typografie.html[/url] en dan bij tekstbreedte.

citaat daaruit: [b]Tekstbreedte[/b]
In webpagina’s is de regelgeving voor boekwerk in verband met de tekstbreedte niet van toepassing. In boeken zijn tekstregels van ongeveer 40 tekens vlot te lezen, maar bij beeldschermen is het formaat en de leesafstand anders………Men merkt zelf dat het ideaal, afhankelijk van de lettergrootte, rond de 450 pixels ligt.”

@Nathalie. Mijn belangrijkste kritiek is dat een absolute breedte in pixels niet voldoet, zeker niet voor weergaven met een hoge resolutie en evenmin voor breedbeeld. Bij mijn favoriete resolutie van 1600 bij 1200 pixels wordt met een vaste breedte van 450 pixels minder dan een derde van de beschikbare ruimte gebruikt.

Ik ben het zeker met je eens dat tekst niet te breed mag zijn, maar de optimale breedte kan niet worden uitgedrukt in pixels. Bijvoorbeeld de relatieve x-hoogte (ex in CSS) of de relatieve lettergrootte (em in CSS) zijn al beter.

De vuistregel van 40 tekens per regel geldt overigens voor drukwerk met een lay-out in kolommen, bijvoorbeeld kranten en bladen. Bij boeken wordt uitgegaan van 60 tot 70 tekens. Typografisch vormgevers hechten echter groter belang aan het opleidingsniveau. Vooral daarom varieert zetwerk van boekjes voor kleuters in koeienletters met minder dan 40 tekens per regel tot en met wetenschappelijke uitgaven met 85 tot 90 tekens per regel. Ik ben het met je eens dat de vuistregels uit de klassieke typografie en boekverzorging niet zomaar kunnen worden toegepast op beeldschermtypografie. Door dan maar een vuistregel van 450 pixels per regel te formuleren, krijg je echter nog geen goede beeldschermtypografie; dat is te simpel. Het belangrijkste klassieke criterium is dat leesbaarheid wordt bepaald door de lezer. Bijvoorbeeld drukwerk én websites voor kinderen hebben dus niet alleen een ander taalgebruik maar ook een andere typografie nodig dan uitgaven voor hoger opgeleiden. Met één vuistregel in pixels houd je onvoldoende rekening met de gebruikers van een specifieke website en dat is essentieel voor usability: de lezer is bepalend voor leesbaarheid, de gebruiker is bepalend voor gebruikersvriendelijkheid.

@Ward

Ik snap je standpunt, maar een resolutie van 1200 x 1600 (your personal favourite), is niet iets waar standaard voor gebouwd wordt door ons webdesigners. Grote logge bedrijven (en ik ben er zelf getuige van) moeten nog genoegen nemen met een 15″ monitor of zelfs een 14″ monitor terwijl de gemiddelde scherm resolutie in deze tijd zo’n 17″ (1024 x 768) is.

Als je dan uitgaat van een maat die binnen de gemiddelde browserwindows past bouw je voor een scherm van 980 x 590.

Als je op jou resolutie de pagina geheel over het scherm laat schalen en de tekst schaalt mee, wordt het er niet makkelijker op de inhoud op te nemen. Als ik mezelf neem als gebruiker, en ik heb een groot scherm gebeurt het vaker dat ik meerdere site op dat scherm open heb staan. Mochten de pagina’s die op dat moment open staan schalen doe ik mijn best om 3 pagina’s tegelijk op dat scherm te hebben. Dan heb ik het over een ervaren internetgebruiker.

Mijn persoonlijke mening is dat als je veel tekst hebt en dat persé op het scherm wil tonen en niet in een makkelijk leesbaar pdf document, je dit het beste doet door een aantal kolommen met pakkende teksten te vullen. Mocht de gebruiker op zoek zijn naar de informatie die je aanbied is een klein goed geschreven stukje tekst met een lees meer linkje voldoende voor een doorklik op dat item.

Als de gebruiker de keuze heeft gemaakt te klikken op je link kun je de pagina vullen met tekst. Nog steeds liever niet pagina breed. Ik zie liever bij erg grote hoeveelheden tekst een printbaar document, want lezen doe ik bij voorkeur nog steeds van papier zoals de meeste mensen. De 400 a 500 pixelmaat is niet zaligmakend, maar wel de maat die een mens in één oogopslag kan opnemen en goed binnen de gemiddelde schermresolutie valt.