Tekst voor het Web <ul><li>Lettertypes </li></ul><ul><li>Wat is er speciaal aan lezen van een computerscherm? </li></ul><u...
Lettertypes:  Letter-anatomie  http://www.papress.com/other/thinkingwithtype/letter/anatomy.htm
Soorten lettertypes Humanistisch Modern Slab serif
(humanistische) oude stijl <ul><li>duiken op in de 15e-16e eeuw   </li></ul><ul><li>Verwant aan kalligrafie, schrijfbewegi...
Claude Garamond  (Parijs, 1480-1561) <ul><li>Garamond </li></ul><ul><li>Parijs </li></ul>Schuine schreef op de kleine lett...
Modern <ul><li>Firmin Didot (1764-1836) </li></ul><ul><li>Giambattista Bodoni (1740-1813) </li></ul><ul><li>Dunne, rechte ...
egyptian of slab serif <ul><li>19de eeuw: decoratieve lettertypes  voor  reclame </li></ul><ul><li>dikke schreef </li></ul>
sans serif - schreefloos <ul><li>1816 William Caslon: 1e “sans” </li></ul><ul><li>Bauhaus (1919): essentie van lettervorm ...
Fantasie: handschrift <ul><li>leesbaarheid     </li></ul><ul><li>TIP: gebruik een uitvergroot detail </li></ul>
Fantasie: decoratief
Waar haal je fonts / lettertypes? <ul><li>Klaar voor gebruik: </li></ul><ul><li>Geïnstalleerd bij besturingssysteem </li><...
Waar zet je nieuwe lettertypes op de eigen PC? <ul><li>In de systeemfolder  </li></ul><ul><li>“ C:WINDOWSFonts ” </li></ul>
Webdesign: Hoe wend je een bepaald lettertype aan? <ul><li>stylesheet </li></ul><ul><ul><li>voor lettertypes die normaal g...
Welke lettertypes zijn “standaard”? <ul><li>serif </li></ul><ul><ul><li>Georgia   (M. Carter 1996, i.o. MS, serif for scre...
Welke lettertypes zijn “standaard”? <ul><li>sans serif </li></ul><ul><ul><li>Arial  </li></ul></ul><ul><ul><li>Helvetica (...
Welke lettertypes zijn “standaard”? <ul><li>Mono-spaced </li></ul><ul><ul><li>Courier </li></ul></ul>
Tekst anatomie <ul><li>Leading (line spacing) </li></ul><ul><ul><li>CSS: line-height  p {line-height: 1.25em;} </li></ul><...
Tekst anatomie <ul><li>Kerning and tracking  (letter spacing) </li></ul><ul><li>CSS: letter-spacing </li></ul><ul><li>p { ...
Letterlover? <ul><li>Helvetica A Documentary Film  by Gary Hustwit </li></ul><ul><li>  </li></ul><ul><li>http://www.helvet...
Leesbaarheid <ul><li>Legibility </li></ul><ul><li>Readability </li></ul>
Legibility <ul><li>herkenbaarheid en leesbaarheid van een klein aantal woorden, zoals: wegwijzer of krantenkop </li></ul><...
Readability <ul><li>leesbaarheid van een langere tekst,  zoals: boek of rapport </li></ul>
Scherm versus papier <ul><li>Beeldschermtekst wordt anders gelezen: </li></ul><ul><ul><li>Fysiek is het vermoeiender om te...
Readability <ul><li>Voor gedrukte pagina’s,  met heel veel letters </li></ul><ul><li>Serif lettertype </li></ul><ul><ul><l...
Readability <ul><li>niet te groot </li></ul><ul><li>niet te klein </li></ul><ul><li>ZET NOOIT EEN HEEL PAK TEKST IN HOOFDL...
Legibility <ul><li>Herkenbaarheid van woordvormen </li></ul><ul><li>Weergave op een scherm  is minder scherp  dan papier <...
Optimale legibility <ul><li>Lettertypes die speciaal voor het scherm zijn ontworpen </li></ul><ul><ul><li>Arial </li></ul>...
Stylesheet afhankelijk van medium <ul><li>Je kan twee stylesheets meegeven: voor  screen  en voor  print </li></ul>
Lettertypes mixen <ul><li>Ga voor contrast ipv conflict </li></ul>Heading 2 To guarantee uniform presentation across platf...
Lettertypes mixen <ul><li>Hou het   aantal   verschillende   “fonts ”  héél beperkt </li></ul>
Hoe lang is een pagina? <ul><li>Hangt af van hoe je wil dat een pagina wordt gelezen/bekeken/gebruikt: </li></ul><ul><li>V...
...vervolg <ul><li>Ideale pagina lengte? </li></ul><ul><ul><li>The Evolution of Writing http://textism.com/writing/ </li><...
Schrijven voor het Web <ul><li>Tekst moet zich lenen voor  diagonaal lezen . </li></ul><ul><li>De computerscherm lezer, le...
Wees  to the point <ul><li>Wees bondig en helder,  kom meteen  terzake . </li></ul>
Titels en labels zijn cruciaal <ul><li>Titels moeten direct en concreet zijn. </li></ul>
Strooi gul met tussentitels <ul><li>Tussentitels  stuwen de lezer verder  door de tekst.  </li></ul><ul><li>Ze zijn ook he...
Hou paragrafen kort <ul><li>Twee à drie zinnen is al genoeg  voor een tekst op het  scherm. </li></ul>
Hou zinnen bondig <ul><li>Vermijd  bijzinnen, terzijdes en uitweidingen.  </li></ul><ul><li>Prop niet teveel informatie in...
Links <ul><li>Onderlijn nooit tekst die geen link is. </li></ul><ul><li>Link op een trefwoord, of een betekenisvolle zinss...
Upcoming SlideShare
Loading in …5
×

Typografie en schrijftips voor tekst op een beeldscherm

2,459
-1

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,459
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Typografie en schrijftips voor tekst op een beeldscherm

    1. 1. Tekst voor het Web <ul><li>Lettertypes </li></ul><ul><li>Wat is er speciaal aan lezen van een computerscherm? </li></ul><ul><li>Vuistregels voor doeltreffende webteksten. </li></ul>
    2. 2. Lettertypes: Letter-anatomie http://www.papress.com/other/thinkingwithtype/letter/anatomy.htm
    3. 3. Soorten lettertypes Humanistisch Modern Slab serif
    4. 4. (humanistische) oude stijl <ul><li>duiken op in de 15e-16e eeuw </li></ul><ul><li>Verwant aan kalligrafie, schrijfbeweging </li></ul>
    5. 5. Claude Garamond (Parijs, 1480-1561) <ul><li>Garamond </li></ul><ul><li>Parijs </li></ul>Schuine schreef op de kleine letters Vloeiende overgang van dik naar dun
    6. 6. Modern <ul><li>Firmin Didot (1764-1836) </li></ul><ul><li>Giambattista Bodoni (1740-1813) </li></ul><ul><li>Dunne, rechte schreef, </li></ul><ul><li>scherp dik-dun contrast, </li></ul><ul><li>verwantschap met handschrift verwatert </li></ul><ul><li>minder geschikt voor “body copy” </li></ul>
    7. 7. egyptian of slab serif <ul><li>19de eeuw: decoratieve lettertypes voor reclame </li></ul><ul><li>dikke schreef </li></ul>
    8. 8. sans serif - schreefloos <ul><li>1816 William Caslon: 1e “sans” </li></ul><ul><li>Bauhaus (1919): essentie van lettervorm </li></ul><ul><li>schreefloos, grote x-hoogte </li></ul>
    9. 9. Fantasie: handschrift <ul><li>leesbaarheid  </li></ul><ul><li>TIP: gebruik een uitvergroot detail </li></ul>
    10. 10. Fantasie: decoratief
    11. 11. Waar haal je fonts / lettertypes? <ul><li>Klaar voor gebruik: </li></ul><ul><li>Geïnstalleerd bij besturingssysteem </li></ul><ul><li>Je kan lettertypes downloaden </li></ul><ul><li>Gratis: fantasie </li></ul><ul><li>Betalend: Bodoni, Helvetica Neue, ... </li></ul>
    12. 12. Waar zet je nieuwe lettertypes op de eigen PC? <ul><li>In de systeemfolder </li></ul><ul><li>“ C:WINDOWSFonts ” </li></ul>
    13. 13. Webdesign: Hoe wend je een bepaald lettertype aan? <ul><li>stylesheet </li></ul><ul><ul><li>voor lettertypes die normaal gesproken aanwezig zijn bij gebruiker </li></ul></ul><ul><ul><ul><li>font-family: Georgia, &quot;Times New Roman&quot;, Times, serif; </li></ul></ul></ul><ul><li>afbeelding </li></ul><ul><ul><li>voor fantasie en betalende lettertypes </li></ul></ul><ul><ul><ul><li>http://www.csszengarden.com/?cssfile=213/213.css </li></ul></ul></ul>
    14. 14. Welke lettertypes zijn “standaard”? <ul><li>serif </li></ul><ul><ul><li>Georgia (M. Carter 1996, i.o. MS, serif for screen, eenvoudige curves, royale ruimte) </li></ul></ul><ul><ul><li>Times New Roman (S. Morisson 1931, Britse krant, default) </li></ul></ul><ul><ul><li>Palatino </li></ul></ul><ul><ul><li>bookman Old Style (windows) </li></ul></ul><ul><ul><li>Garamond (windows) </li></ul></ul>
    15. 15. Welke lettertypes zijn “standaard”? <ul><li>sans serif </li></ul><ul><ul><li>Arial </li></ul></ul><ul><ul><li>Helvetica (mac) (M. Miedinger, 1957) </li></ul></ul><ul><ul><li>Geneva (mac) </li></ul></ul><ul><ul><li>Tahoma (windows) </li></ul></ul><ul><ul><li>Verdana (M. Carter, 1996, large x-height, more open forms th. helvetica) </li></ul></ul><ul><ul><li>Lucida sans </li></ul></ul>
    16. 16. Welke lettertypes zijn “standaard”? <ul><li>Mono-spaced </li></ul><ul><ul><li>Courier </li></ul></ul>
    17. 17. Tekst anatomie <ul><li>Leading (line spacing) </li></ul><ul><ul><li>CSS: line-height p {line-height: 1.25em;} </li></ul></ul>
    18. 18. Tekst anatomie <ul><li>Kerning and tracking (letter spacing) </li></ul><ul><li>CSS: letter-spacing </li></ul><ul><li>p { letter-spacing: -0.1em; } </li></ul>
    19. 19. Letterlover? <ul><li>Helvetica A Documentary Film by Gary Hustwit </li></ul><ul><li> </li></ul><ul><li>http://www.helveticafilm.com/index.html </li></ul>
    20. 20. Leesbaarheid <ul><li>Legibility </li></ul><ul><li>Readability </li></ul>
    21. 21. Legibility <ul><li>herkenbaarheid en leesbaarheid van een klein aantal woorden, zoals: wegwijzer of krantenkop </li></ul><ul><li>Is het letterbeeld of woordbeeld herkenbaar? </li></ul>
    22. 22. Readability <ul><li>leesbaarheid van een langere tekst, zoals: boek of rapport </li></ul>
    23. 23. Scherm versus papier <ul><li>Beeldschermtekst wordt anders gelezen: </li></ul><ul><ul><li>Fysiek is het vermoeiender om tekst op het scherm te lezen. </li></ul></ul><ul><ul><ul><li>Scherm is minder scherp. </li></ul></ul></ul><ul><ul><ul><li>+ : Beeldschermen worden beter en er bestaan lettertypes die speciaal ontwikkeld werden voor leesbaarheid (Arial, Tahoma) </li></ul></ul></ul><ul><ul><li>Psychologisch: de lezer is een gebruiker geworden, die ongeduldig rondneust. </li></ul></ul>
    24. 24. Readability <ul><li>Voor gedrukte pagina’s, met heel veel letters </li></ul><ul><li>Serif lettertype </li></ul><ul><ul><li>Georgia </li></ul></ul><ul><ul><li>Times </li></ul></ul><ul><ul><li>Garamond </li></ul></ul>
    25. 25. Readability <ul><li>niet te groot </li></ul><ul><li>niet te klein </li></ul><ul><li>ZET NOOIT EEN HEEL PAK TEKST IN HOOFDLETTERS (all caps) </li></ul><ul><li>Je wil ook nooit een hele lap tekst cursief of vet zetten </li></ul>Een erg lange lijn tekst is moeilijk te volgen met de ogen, hou regels daarom kort: 52-78 k ara k ters ( spaties meegeteld ) , of 8 à 12 woorden.
    26. 26. Legibility <ul><li>Herkenbaarheid van woordvormen </li></ul><ul><li>Weergave op een scherm is minder scherp dan papier </li></ul><ul><li>Gevolg: “serif” wordt visuele ruis </li></ul>
    27. 27. Optimale legibility <ul><li>Lettertypes die speciaal voor het scherm zijn ontworpen </li></ul><ul><ul><li>Arial </li></ul></ul><ul><ul><li>Verdana </li></ul></ul><ul><ul><li>Georgia </li></ul></ul>
    28. 28. Stylesheet afhankelijk van medium <ul><li>Je kan twee stylesheets meegeven: voor screen en voor print </li></ul>
    29. 29. Lettertypes mixen <ul><li>Ga voor contrast ipv conflict </li></ul>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. 30. Lettertypes mixen <ul><li>Hou het aantal verschillende “fonts ” héél beperkt </li></ul>
    31. 31. Hoe lang is een pagina? <ul><li>Hangt af van hoe je wil dat een pagina wordt gelezen/bekeken/gebruikt: </li></ul><ul><li>Vergelijk bijvoorbeeld: </li></ul><ul><ul><li>The Decline of Fashion Photography http://www.slate.com/features/010510_fashion-slide-show/01. htm </li></ul></ul><ul><ul><li>Five Simple Steps to designing grid systems http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1 / </li></ul></ul>
    32. 32. ...vervolg <ul><li>Ideale pagina lengte? </li></ul><ul><ul><li>The Evolution of Writing http://textism.com/writing/ </li></ul></ul><ul><ul><li>Presentation Zen Noise and the elimination of ... http://presentationzen.blogs.com/presentationzen/visuals/index.html </li></ul></ul><ul><ul><li>Web Style Guide: Chunking information http://www.webstyleguide.com/site/chunk. html </li></ul></ul>
    33. 33. Schrijven voor het Web <ul><li>Tekst moet zich lenen voor diagonaal lezen . </li></ul><ul><li>De computerscherm lezer, leest niet, hij of zij scant de tekst. </li></ul><ul><li>Het gedrag van een lezer van een website is: klikken, scrollen, zoeken. </li></ul>
    34. 34. Wees to the point <ul><li>Wees bondig en helder, kom meteen terzake . </li></ul>
    35. 35. Titels en labels zijn cruciaal <ul><li>Titels moeten direct en concreet zijn. </li></ul>
    36. 36. Strooi gul met tussentitels <ul><li>Tussentitels stuwen de lezer verder door de tekst. </li></ul><ul><li>Ze zijn ook het middel bij uitstek om tekst makkelijk diagonaal leesbaar te maken. </li></ul><ul><li>E en tekst voor het web heeft veel meer tussentitels nodig dan je normaal voor druk zou gebruiken. </li></ul><ul><li>De lezer ziet meestal een kleinere portie tekst dan normaal, waardoor tussentitels sneller op elkaar moeten volgen. </li></ul>
    37. 37. Hou paragrafen kort <ul><li>Twee à drie zinnen is al genoeg voor een tekst op het scherm. </li></ul>
    38. 38. Hou zinnen bondig <ul><li>Vermijd bijzinnen, terzijdes en uitweidingen. </li></ul><ul><li>Prop niet teveel informatie in één zin. </li></ul>
    39. 39. Links <ul><li>Onderlijn nooit tekst die geen link is. </li></ul><ul><li>Link op een trefwoord, of een betekenisvolle zinssnede: </li></ul><ul><ul><li>Niet: Klik hier voor de tekst over Paling in West-Vlaanderen. </li></ul></ul><ul><ul><li>Wel: Lees meer over Paling in West-Vlaanderen . </li></ul></ul><ul><li>Bij elke link moet het duidelijk zijn wat er gaat gebeuren wanneer erop geklikt wordt. </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×