Webtypografie
                             Letters op het beeldscherm




                                                 ...
Typografie op het web

   1991 Tim Berners-Lee – ontstaan van het world wide web

   Met Internet Explorer 1.0 is er geen s...
Richtlijnen voor web typografie

   CONTRAST
   Tekst bestaat om leesbaar te zijn!
   Zorg voor voldoende contrast tussen l...
Richtlijnen voor web typografie

   GROOTTE
   Vormgevers hebben een voorliefde voor kleine korpsgrootte.
   Maar iemand me...
Richtlijnen voor webtypografie

   HIËRARCHIE
   Aandachtspunten moeten opvallen en de aandacht vasthouden.
   De bezoeker ...
6
donderdag 14 oktober 2010
Richtlijnen voor web typografie

   WITRUIMTE
   Laat je tekst ademen
   Geen vrees voor lege ruimte
   Regelafstand van (b...
Richtlijnen voor web typografie

   WEB SAVE FONTS
   Tijdens het het bouwen van een website kom je een keer op punt dat je...
Richtlijnen voor web typografie

                                         Dit is een lijst met de meest
                   ...
Richtlijnen voor web typografie

   font-family: Arial, Helvetica, sans-serif;                           De browser gaat ee...
Richtlijnen voor web typografie

   CSS geeft de mogelijkheid tussen 5 font families:

   schreef / schree oos / cursief / ...
De 5 font familie sets

   FONT FAMILY STACKS
   Lettertypes onderscheiden zich o.a in het verschil van X-hoogte.
   Lette...
De 5 font families

   De brede schree oze set




   Verdana is ontworpen door Matthew Carter en Tom Rickner voor Microso...
De 5 font families

   De smalle schree oze set




   Tahoma is ontworpen door Matthew Carter en Tom Rickner voor Microso...
De 5 font families

   De brede schreef set




   Georgia is ontworpen door Matthew Carter en Tom Rickner voor Microsoft....
De 5 font families

   De smalle schreef set




   Times New Roman is ontworpen door Starling Burgess, Victor Lardent, en...
De 5 font families

   De vaste spatiëring set




   Courier New is ontworpen door Howard Kettler voor Ascender.
   Couri...
Bitmap uitvoering
   Voor Webtypogra e kan men zich best beperken tot lettertypes waarvan de bitmap
   uitvoering geschikt...
Bitmap - Vector




                                              19
donderdag 14 oktober 2010
Webletter / printletter

   Op papier kun je de Times aangenaam lezen, maar op het scherm verliest deze
   typische krante...
Verdana: schermfont

   De voorlopige oplossing van het schermprobleem:
   In 1994 gaf Microsoft aan Matthew Carter de opd...
Verdana / Arial

   Vergeleken met de Verdana verbleekt de Arial op vele fronten.

   •   De Verdana heeft een grotere x-h...
Georgia: web schreefletter

   Diezelfde regelmatigheid vinden we ook terug in de Georgia, een voor
   het beeldscherm ontw...
BESLUIT:
   Times New Roman, Helvetica en Arial zijn populair omdat ze makkelijk lezen op
   papier , maar deze types zijn...
bitmap lettertypen

   de laatste jaren verschijnen links en rechts minuscule bitmap lettertypen die zich
   helemaal op h...
Pixelfonts

   Silkscreen - http://kottke.org/plus/type/silkscreen/

   Mini 7 e.a. - http://minifonts.com/mini7.html



 ...
Upcoming SlideShare
Loading in …5
×

Webtypografie websave 2010

1,425 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

Webtypografie websave 2010

  1. 1. Webtypografie Letters op het beeldscherm 1 donderdag 14 oktober 2010
  2. 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. 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. 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. 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. 6 donderdag 14 oktober 2010
  7. 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. 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. 9. Richtlijnen voor web typografie Dit is een lijst met de meest voorkomende Web-Save-Fonts. 9 donderdag 14 oktober 2010
  10. 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. 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. 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. 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. 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. 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. 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. 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. 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. 19. Bitmap - Vector 19 donderdag 14 oktober 2010
  20. 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. 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. 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. 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. 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. 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. 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

×