Typografie en schrijftips voor tekst op een beeldscherm

of 39 /39
Tekst voor het Web • Lettertypes • Wat is er speciaal aan lezen van een computerscherm? • Vuistregels voor doeltreffende webteksten.

Embed Size (px)

Transcript of Typografie en schrijftips voor tekst op een beeldscherm

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