Tekst voor het Web

• Lettertypes

• Wat is er speciaal aan lezen van een computerscherm?

• Vuistregels voor doeltreffende webteksten.

Lettertypes: Letter-anatomie

http://www.papress.com/other/thinkingwithtype/letter/anatomy.htm

Soorten lettertypes

Humanistisch Modern Slab serif

(humanistische) oude stijl

• duiken op in de 15e-16e eeuw

• Verwant aan kalligrafie, schrijfbeweging

Claude Garamond (Parijs, 1480-1561)

GaramondParijs

Schuine schreef op de kleine lettersVloeiende overgang van dik naar dun

Modern

• Firmin Didot (1764-1836)

• Giambattista Bodoni (1740-1813)

•Dunne, rechte schreef, •scherp dik-dun contrast, •verwantschap met handschrift verwatert•minder geschikt voor “body copy”

egyptian of slab serif

• 19de eeuw: decoratieve lettertypes voor reclame

• dikke schreef

sans serif - schreefloos

• 1816 William Caslon: 1e “sans”

• Bauhaus (1919): essentie van lettervorm

• schreefloos, grote x-hoogte

Fantasie: handschrift• leesbaarheid • TIP: gebruik een uitvergroot detail

Fantasie: decoratief

Waar haal je fonts / lettertypes?

• Klaar voor gebruik:

Geïnstalleerd bij besturingssysteem

• Je kan lettertypes downloaden

Gratis: fantasie

Betalend: Bodoni, Helvetica Neue, ...

Waar zet je nieuwe lettertypes op de eigen

PC?

• In de systeemfolder

“C:\WINDOWS\Fonts”

Webdesign: Hoe wend je een bepaald lettertype

aan?• stylesheet

– voor lettertypes die normaal gesproken aanwezig zijn bij gebruiker• font-family: Georgia, "Times New Roman", Times, serif;

• afbeelding– voor fantasie en betalende lettertypes

• http://www.csszengarden.com/?cssfile=213/213.css

Welke lettertypes zijn “standaard”?

• serif–Georgia

(M. Carter 1996, i.o. MS, serif for screen, eenvoudige curves, royale ruimte)

– Times New Roman (S. Morisson 1931, Britse krant, default)

–Palatino –bookman Old Style (windows)–Garamond (windows)

Welke lettertypes zijn “standaard”?

• sans serif– Arial – Helvetica (mac)

(M. Miedinger, 1957)

– Geneva (mac)– Tahoma (windows)– Verdana

(M. Carter, 1996, large x-height, more open forms th. helvetica)

– Lucida sans

Welke lettertypes zijn “standaard”?

Mono-spaced

–Courier

Tekst anatomie

• Leading (line spacing)– CSS: line-height p {line-height: 1.25em;}

Tekst anatomie

•Kerning and tracking (letter spacing)

CSS: letter-spacing

p { letter-spacing: -0.1em; }

Letterlover?

• HelveticaA Documentary Film by Gary Hustwit

• http://www.helveticafilm.com/index.html

Leesbaarheid

• Legibility

• Readability

Legibility

• herkenbaarheid en leesbaarheid van een klein aantal woorden,zoals: wegwijzer of krantenkop

• Is het letterbeeld of woordbeeld herkenbaar?

Readability

• leesbaarheid van een langere tekst, zoals: boek of rapport

Scherm versus papier

• Beeldschermtekst wordt anders gelezen:– Fysiek is het vermoeiender om tekst op het

scherm te lezen.• Scherm is minder scherp.• + : Beeldschermen worden beter en er bestaan

lettertypes die speciaal ontwikkeld werden voor leesbaarheid (Arial, Tahoma)

– Psychologisch: de lezer is een gebruiker geworden, die ongeduldig rondneust.

Readability

• Voor gedrukte pagina’s, met heel veel letters

• Serif lettertype

–Georgia–Times–Garamond

Readability

• niet te groot• niet te klein

• ZET NOOIT EEN HEEL PAK TEKST IN HOOFDLETTERS (all caps)

• Je wil ook nooit een hele lap tekst cursief of vet zetten

Een erg lange lijn tekst is moeilijk te volgen met de ogen, hou regels daarom kort: 52-78 karakters (spaties meegeteld), of 8 à 12 woorden.

Legibility

• Herkenbaarheid van woordvormen

• Weergave op een scherm is minder scherp dan papier

• Gevolg: “serif” wordt visuele ruis

Optimale legibility

• Lettertypes die speciaal voor het scherm zijn ontworpen– Arial– Verdana– Georgia

Stylesheet afhankelijk van medium

• Je kan twee stylesheets meegeven: voor screen en voor print

Lettertypes mixen

• Ga voor contrast ipv conflict

Heading 2To guarantee uniform presentation across platforms, some Mac web browsers such as Safari, Firefox, Mozilla and Internet Explorer assume the display is 96 pixels per inch.

Heading 2To guarantee uniform presentation across platforms, some Mac web browsers such as Safari, Firefox, Mozilla and Internet Explorer assume the display is 96 pixels per inch.

Lettertypes mixen

• Hou het aantal verschillende “fonts”

héél beperkt

Hoe lang is een pagina?

• Hangt af van hoe je wil dat een pagina wordt gelezen/bekeken/gebruikt:

• Vergelijk bijvoorbeeld:– The Decline of Fashion Photography

http://www.slate.com/features/010510_fashion-slide-show/01.htm

– Five Simple Steps to designing grid systemshttp://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/

...vervolg

• Ideale pagina lengte?– The Evolution of Writing

http://textism.com/writing/– Presentation Zen

Noise and the elimination of ...http://presentationzen.blogs.com/presentationzen/visuals/index.html

– Web Style Guide: Chunking informationhttp://www.webstyleguide.com/site/chunk.html

Schrijven voor het Web

• Tekst moet zich lenen voor diagonaal lezen.

• De computerscherm lezer, leest niet, hij of zij scant de tekst.

• Het gedrag van een lezer van een website is: klikken, scrollen, zoeken.

Wees to the point

• Wees bondig en helder, kom meteen terzake.

Titels en labels zijn cruciaal

• Titels moeten direct en concreet zijn.

Strooi gul met tussentitels

• Tussentitels stuwen de lezer verder door de tekst.

• Ze zijn ook het middel bij uitstek om tekst makkelijk diagonaal leesbaar te maken.

• Een tekst voor het web heeft veel meer tussentitels nodig dan je normaal voor druk zou gebruiken.

• De lezer ziet meestal een kleinere portie tekst dan normaal, waardoor tussentitels sneller op elkaar moeten volgen.

Hou paragrafen kort

• Twee à drie zinnen is al genoeg voor een tekst op het scherm.

Hou zinnen bondig

• Vermijd bijzinnen, terzijdes en uitweidingen.

• Prop niet teveel informatie in één zin.

Links

• Onderlijn nooit tekst die geen link is.• Link op een trefwoord, of een betekenisvolle

zinssnede:– Niet: Klik hier voor de tekst over Paling in West-

Vlaanderen.– Wel: Lees meer over Paling in West-Vlaanderen.

• Bij elke link moet het duidelijk zijn wat er gaat gebeuren wanneer erop geklikt wordt.