Typografie en schrijftips voor tekst op een beeldscherm
-
Upload
culturelestudies -
Category
Education
-
view
2.374 -
download
3
Transcript of Typografie en schrijftips voor tekst op een beeldscherm
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.