Webtypografie websave 2010

  • 1,167 views
Uploaded on

 

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,167
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
13
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Webtypografie Letters op het beeldscherm 1 donderdag 14 oktober 2010
  • 2. Typografie op het web 1991 Tim Berners-Lee – ontstaan van het world wide web Met Internet Explorer 1.0 is er geen sprake van web typogra e Vandaag is er reeds de mogelijkheid om met o.a. Google, Typekit... te kiezen uit een bibliotheek van 100-den fonts welke zich op je website zonder problemen en helemaal legaal kunnen vertonen op eender welk beeldscherm. Web pagina’s kunnen we eindelijk tot leven wekken met goede typogra e. voorbeelden: http://www.youwillnotbelieve.us/ http://media.twitter.com/ 2 donderdag 14 oktober 2010
  • 3. Richtlijnen voor web typografie CONTRAST Tekst bestaat om leesbaar te zijn! Zorg voor voldoende contrast tussen letters & achtergrondkleur. TIP: contrast test = converteer je pagina met photoshop naar grijswaarden. Witte tekst op zwart is leuk Voor een kort tekstje. Maar erg vermoeiend voor lange tekst. 3 donderdag 14 oktober 2010
  • 4. Richtlijnen voor web typografie GROOTTE Vormgevers hebben een voorliefde voor kleine korpsgrootte. Maar iemand met een 15inch Mac Book zal dankbaar zijn als hij de teksten nog steeds goed kan lezen. Kies best geen bodytekst met corps onder 10px 4 donderdag 14 oktober 2010
  • 5. Richtlijnen voor webtypografie HIËRARCHIE Aandachtspunten moeten opvallen en de aandacht vasthouden. De bezoeker moet je elementen in een hiërarchie scannen. Wissel af met lettertypes voor kop en bodytekst. Gebruik nooit meer dan 2 lettertypes tegelijk. Wissel af met verschillende stijlen; Kapitalen, italic, schreef/schree oos, kleur 5 donderdag 14 oktober 2010
  • 6. 6 donderdag 14 oktober 2010
  • 7. Richtlijnen voor web typografie WITRUIMTE Laat je tekst ademen Geen vrees voor lege ruimte Regelafstand van (best) 140% van je tekstgrootte leest vlotter 7 donderdag 14 oktober 2010
  • 8. Richtlijnen voor web typografie WEB SAVE FONTS Tijdens het het bouwen van een website kom je een keer op punt dat je ‘Fonts’ (lettertypes), vaak in CSS, moet gaan de niëren. Wanneer je een leuk lettertype voor je website hebt gevonden dat je uiteindelijk gaat gebruiken, moet je jezelf gaan afvragen of de gebruikers/bezoekers dit lettertype op hun computer hebben staan. Hebben ze dat niet, dan zal de OS het standaard lettertype voor de website gebruiken. Dit kan je website ongevraagd drastisch veranderen. Daarom is het altijd best geweest ‘font-save’ lettertypes te gebruiken die standaard op elke OS aanwezig zijn. Maar! Er is dus een vernieuwing aan de gang met typekit & google dat nu fonts kan hosten. 8 donderdag 14 oktober 2010
  • 9. Richtlijnen voor web typografie Dit is een lijst met de meest voorkomende Web-Save-Fonts. 9 donderdag 14 oktober 2010
  • 10. Richtlijnen voor web typografie font-family: Arial, Helvetica, sans-serif; De browser gaat eerst op zoek font-family: ‘Arial Black’, Gadget, sans-serif; font-family: ‘Bookman Old Style’, serif; naar het eerste lettertype, kan hij font-family: ‘Comic Sans MS’, cursive; deze niet vinden dan neemt hij de font-family: Courier, monospace; font-family: ‘Courier New’, Courier, monospace; tweede enz. font-family: Garamond, serif; font-family: Georgia, serif; font-family: Impact, Charcoal, sans-serif; Kande browser geen enkel vinden, font-family: ‘Lucida Console’, Monaco, monospace; dan gaat hij het standaard font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif; lettertype van de OS gebruiken. font-family: ‘MS Sans Serif ’, Geneva, sans-serif; font-family: ‘MS Serif ’, ‘New York’, sans-serif; (zoals Times) font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif; font-family: Symbol, sans-serif; font-family: Tahoma, Geneva, sans-serif; font-family: ‘Times New Roman’, Times, serif; font-family: ‘Trebuchet MS’, Helvetica, sans-serif; font-family: Verdana, Geneva, sans-serif; font-family: Webdings, sans-serif; font-family: Wingdings, ‘Zapf Dingbats’, sans-serif; 10 donderdag 14 oktober 2010
  • 11. Richtlijnen voor web typografie CSS geeft de mogelijkheid tussen 5 font families: schreef / schree oos / cursief / fantasie / monospace Om voor te stellen aan de browser indien geen van de voorgestelde fonts aanwezig zijn. 11 donderdag 14 oktober 2010
  • 12. De 5 font familie sets FONT FAMILY STACKS Lettertypes onderscheiden zich o.a in het verschil van X-hoogte. Lettertypes zoals verdana hebben een grote x-hoogte dit bevorderd de leesbaarheid. Maar heeft ook het effect de letters groter te maken dan andere types van dezelfde puntgrootte. Dit vangt men op door een kleinere corpsgrootte; maar veroorzaakt dat vervangende lettertypes weer onleesbaar worden. Met CSS speci ceer je alternatieve fonts met gelijkaardige x-hoogte. 12 donderdag 14 oktober 2010
  • 13. De 5 font families De brede schree oze set Verdana is ontworpen door Matthew Carter en Tom Rickner voor Microsoft. Geneva is ontworpen door Kris Holmes en Suzan Kare voor Apple. Beide lettertypes hebben een grote x-hoogte, wat zorgt voor breder uitlopende zinnen. In deze set komen verdana, en geneva voor op de familie schree ozen. body{ font-family:Verdana,Geneva,sans-serif; } 13 donderdag 14 oktober 2010
  • 14. De 5 font families De smalle schree oze set Tahoma is ontworpen door Matthew Carter en Tom Rickner voor Microsoft. Arial is ontworpen door Robin Nicholas en Patricia Saunders voor Monotype. Helvetica is ontworpen door Edouard Hoffmann en Max Miedinger. Deze 3 lettertypes hebben een normale x-hoogte, wat zorgt voor breder uitlopende zinnen. Hoewel Tahoma een iets grotere x-hoogte heeft. In deze set komen deze 3 lettertypes voor op de familie schree ozen. body{ font-family:Tahoma,Arial,Helvetica,sans-serif; } 14 donderdag 14 oktober 2010
  • 15. De 5 font families De brede schreef set Georgia is ontworpen door Matthew Carter en Tom Rickner voor Microsoft. Utopia is ontworpen door Robert Slimbach voor Adobe. Palatino of palatino Linotype is ontworpen door Herman Zapff voor Linotype. Deze 3 types hebben een grote x-hoogte, en verschijnen dus breed uitgesmeerd in vergelijking met anderen. Deze set bevat 3 lettertypes die voorafgaan aan de familie schreven. body{ font-family:Tahoma,Arial,Helvetica,sans-serif; } 15 donderdag 14 oktober 2010
  • 16. De 5 font families De smalle schreef set Times New Roman is ontworpen door Starling Burgess, Victor Lardent, en Stanley Morison voor Monotype. Times was ontworpen door Stanley Morison en Walter Tracy voor Linotype. Beide zijn normale schreef lettertypes, en zijn bijna identiek. Deze set bevat naast deze twee types ook de familie schreven. body{ font-family:'Times New Roman',Times,serif; } 16 donderdag 14 oktober 2010
  • 17. De 5 font families De vaste spatiëring set Courier New is ontworpen door Howard Kettler voor Ascender. Courier was ontworpen door Howard Kettler voor Linotype. Beide hebben een vaste spatiëring , geschikt als voorbeeld van computer programmeer code. Deze set bevat naast deze twee types ook de familie monospace. body{ font-family:'Courier New','Courier',monospace; } 17 donderdag 14 oktober 2010
  • 18. Bitmap uitvoering Voor Webtypogra e kan men zich best beperken tot lettertypes waarvan de bitmap uitvoering geschikt is voor langere teksten. Schreven (zoals bij de Times, of Bodoni) zijn hier niet goed voor, omdat geprobeerd is met de beschikbare pixels de schreef weer te geven. • Schreven worden sterk met drukwerk geassocieerd en hebben een complexe vorm die zich moeilijk tot een opbouw uit pixels verhoudt. Dit leidt over het algemeen tot een onrustig tekstbeeld. • Schree ozen (zoals Verdana ) lenen zich in de meeste situaties op het beeldscherm beter voor de weergave van langere teksten. Dit is een tekst in de Times (10 punt) Dit is een tekst in Verdana (10 punt) 18 donderdag 14 oktober 2010
  • 19. Bitmap - Vector 19 donderdag 14 oktober 2010
  • 20. Webletter / printletter Op papier kun je de Times aangenaam lezen, maar op het scherm verliest deze typische krantenletter al gauw zijn kenmerkende details. In het grove pixelgrid van een beeldscherm is geen plaats voor een Times 12 met fraaie dik/dun verschillen of een subtiele schreef. Times New Roman (12 punt) Voor koppen voldoet de Arial heel aardig, maar in de kleine corpsen is de spatiëring op het scherm zo beroerd dat letters met elkaar gaan kleven. Een woord als ‘harnas’ wordt dan al gauw ‘hamas’ doordat het boogje van de ‘r’ min of meer vastgeplakt zit aan de ‘n’. Arial (10 punt) harnas 20 donderdag 14 oktober 2010
  • 21. Verdana: schermfont De voorlopige oplossing van het schermprobleem: In 1994 gaf Microsoft aan Matthew Carter de opdracht om een systeemfont te ontwikkelen voor Windows 95. Verdana zou uitgroeien tot één van de populairste fonts van het internet. Omdat de Verdana vooral op het scherm moest presteren en in mindere mate op papier, besloot Carter de schermletter als uitgangspunt te nemen voor het printerfont en niet andersom. Simpel gezegd maakte hij eerst de bitmap fonts en tekende daar later de outlines omheen voor de printerfonts. 21 donderdag 14 oktober 2010
  • 22. Verdana / Arial Vergeleken met de Verdana verbleekt de Arial op vele fronten. • De Verdana heeft een grotere x-hoogte, • bredere letters, • grotere openingen in de karakters • en een duidelijk contrast tussen romein en vet. • Karakters als de onderkast i, j, l, de kapitalen I, J en L en het cijfer 1 zijn duidelijk van elkaar te onderscheiden en er is speciale aandacht besteed aan de uitvoering van ligaturen als ff, en . • Bovendien is de letterspatiëring extra groot zodat de onderlinge karakters elkaar niet raken. In een interview met Webreview zei Carter ooit dat niet alleen de spatiëring zelf maar ook de regelmatigheid ervan de unieke eigenschappen van de Verdana bepalen. 22 donderdag 14 oktober 2010
  • 23. Georgia: web schreefletter Diezelfde regelmatigheid vinden we ook terug in de Georgia, een voor het beeldscherm ontworpen schree etter die Carter in 1997 ontwierp. Ook hier is voldaan aan alle voorwaarden waar een goed leesbare schermletter aan moet voldoen: • De Georgia is een heldere letter die het heel goed doet in de kleinere corpsgroottes. • Zelfs op een corpsgrootte van 9 punten behoudt de Georgia het karakter van een traditionele schree etter en blijft de letter bijzonder goed leesbaar. • Net als de Verdana kun je de Georgia ongestraft cursief zetten zonder dat de boel onmiddellijk onleesbaar wordt. 23 donderdag 14 oktober 2010
  • 24. BESLUIT: Times New Roman, Helvetica en Arial zijn populair omdat ze makkelijk lezen op papier , maar deze types zijn niet ontworpen voor een computerscherm Microsoft heeft speciaal 2 lettertypen laten ontwerpen die ergonomisch geschikt zijn om van een beeldscherm gelezen te worden. Verdana (schreefloos) 18punt Georgia (met schreef) 18 punt Verdana (schreefloos) 10punt Georgia (met schreef) 10 punt 24 donderdag 14 oktober 2010
  • 25. bitmap lettertypen de laatste jaren verschijnen links en rechts minuscule bitmap lettertypen die zich helemaal op hun gemak voelen op de pixels van een beeldscherm. De kunst is om op die paar pixels een consistent letterbeeld te creëren waarbij het onderscheid tussen de afzonderlijke karakters nog duidelijk waarneembaar is. Populaire voorbeelden zijn Silkscreen van Jason Kottke en Sevenet van Peter Bruhn, maar de beste pixelfonts zijn afkomstig van Joe Gillespie, de vormgever en webmaster van Web Page Design for Designers. Op basis van zijn eerste letter, de Mini 7, heeft Gillespie inmiddels een hele familie pixelfonts afgeleverd. 25 donderdag 14 oktober 2010
  • 26. Pixelfonts Silkscreen - http://kottke.org/plus/type/silkscreen/ Mini 7 e.a. - http://minifonts.com/mini7.html Webfonts FontShop webfonts - http://www.fontshop.com/blog/?cat=80 Typekit - http://typekit.com/ Google Font API & Font directory - http://code.google.com/intl/nl/apis/webfonts/ 26 donderdag 14 oktober 2010