1. Tekst voor het Web

• Lettertypes

Wat is er speciaal aan lezen van een computerscherm?

Vuistregels voor doeltreffende webteksten.

2. Lettertypes:Letter-anatomiehttp://www.papress.com/other/thinkingwithtype/letter/anatomy.htm 3. Soorten lettertypes Humanistisch Modern Slab serif 4. (humanistische) oude stijl

duiken op in de 15e-16e eeuw

Verwant aan kalligrafie, schrijfbeweging

5. Claude Garamond(Parijs, 1480-1561)

Garamond

Parijs

Schuine schreef op de kleine letters Vloeiende overgang van dik naar dun 6. 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

7. egyptian of slab serif

19de eeuw: decoratieve lettertypesvoorreclame

dikke schreef

8. sans serif - schreefloos

1816 William Caslon: 1e sans

Bauhaus (1919): essentie van lettervorm

schreefloos, grote x-hoogte

9. Fantasie: handschrift

leesbaarheid

TIP: gebruik een uitvergroot detail

10. Fantasie: decoratief 11. Waar haal je fonts / lettertypes?

Klaar voor gebruik:

Genstalleerd bij besturingssysteem

Je kan lettertypes downloaden

Gratis: fantasie

Betalend: Bodoni, Helvetica Neue, ...

12. Waar zet je nieuwe lettertypes op de eigen PC?

In de systeemfolder

C:WINDOWSFonts

13. 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

14. 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)

15. 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

16. Welke lettertypes zijn standaard?

Mono-spaced

• Courier

17. Tekst anatomie

Leading (line spacing)

• CSS: line-heightp {line-height: 1.25em;}

18. Tekst anatomie

Kerning and tracking(letter spacing)

CSS: letter-spacing

p {letter-spacing: -0.1em;}

19. Letterlover?

Helvetica A Documentary Filmby Gary Hustwit

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

20. Leesbaarheid

Legibility

Readability

21. Legibility

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

Is het letterbeeld of woordbeeld herkenbaar?

22. Readability

leesbaarheid van een langere tekst,zoals: boek of rapport

23. 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.

24. Readability

Voor gedrukte paginas,met heel veel letters

Serif lettertype

• Georgia

• Times

• Garamond

25. 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 ofvetzetten

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

Herkenbaarheid van woordvormen

Weergave op een schermis minder scherpdan papier

Gevolg: serifwordtvisuele ruis

27. Optimale legibility

Lettertypes die speciaal voor het scherm zijn ontworpen

• Arial

• Verdana

• Georgia

28. Stylesheet afhankelijk van medium

Je kan twee stylesheets meegeven: voorscreenen voorprint

29. Lettertypes mixen

Ga voor contrast ipv conflict

Heading 2 To 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 2 To 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. 30. Lettertypes mixen

Hou het aantal verschillende fonts hl beperkt

31. 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 systems http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1 /

32. ...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 information http://www.webstyleguide.com/site/chunk. html

33. Schrijven voor het Web

Tekst moet zich lenen voordiagonaal lezen .

De computerscherm lezer, leest niet, hij of zijscantde tekst.

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

34. Weesto the point

Wees bondig en helder,kom meteenterzake .

35. Titels en labels zijn cruciaal

Titels moeten direct en concreet zijn.

36. Strooi gul met tussentitels

Tussentitelsstuwen de lezer verderdoor de tekst.

Ze zijn ook het middel bij uitstek om tekst makkelijkdiagonaal leesbaarte maken.

E en tekst voor het webheeftveelmeer tussentitelsnodig danjenormaal voor druk zou gebruiken.

De lezer ziet meestal een kleinere portie tekst dan normaal, waardoortussentitels snellerop elkaar moeten volgen.

37. Hou paragrafen kort

Twee drie zinnen is al genoegvoor een tekst op hetscherm.

38. Hou zinnen bondig

Vermijdbijzinnen, terzijdes en uitweidingen.

Prop niet teveel informatie in n zin.

39. Links

Onderlijn nooit tekst die geen link is.

Link op een trefwoord, of een betekenisvolle zinssnede:

• Niet: Klikhiervoor de tekst over Paling in West-Vlaanderen.

• Wel: Lees meer overPaling in West-Vlaanderen .

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