際際滷

際際滷Share a Scribd company logo

L3 Typography Part1

Download as KEY, PDF
P
Paolo Omero

Wen design 2009

1 of 80
Downloaded 57 times
Tipogra鍖a & Web Paolo Omero Web Design - a.a. 2007/2008 1
Web Design - a.a. 2007/2008 2
95% of the Web is Typography http://informationarchitects.jp/the-web-is-all-about-typography-period/ Web Design - a.a. 2007/2008 2
95% of the Web is Typography http://informationarchitects.jp/the-web-is-all-about-typography-period/ Information design is typography Back in 1969, Emil Ruder, a famous Swiss typographer, wrote on behalf of his contemporary print materials what we could easily say about our contemporary websites: Today we are inundated with such an immense flood of printed matter that the value of the individual work has depreciated, for our harassed contemporaries simply cannot take everything that is printed today. It is the typographers task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him. With some imagination (replace print with online) this sounds like the job description of an information designer. It is the information designers task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him. Web Design - a.a. 2007/2008 2
La tipogra鍖a La tipografia 竪 il mezzo tramite il quale unidea scritta viene visualizzata La scelta dellaspetto visivo pu嘆 influenzare notevolmente la leggibilit del testo e le sensazioni del lettore, grazie alle migliaia di tipi di caratteri disponibili. Si varia da caratteri chiari e distinguibili senza sforzo e che ben si adattano a testi lunghi, ad altri che colpiscono lattenzione e che sono maggiormente utilizzati nei titoli e nella pubblicit Web Design - a.a. 2007/2008 2
Il tono del testo La tipografia definisce il tono di un testo, pertanto la scelta del carattere dovrebbe basarsi sul contenuto del messaggio che si intende trasmettere e sulla tipologia dei destinatari. Web Design - a.a. 2007/2008 2
Il carattere Il corpo del carattere definisce laltezza delle lettere, comprese le parti ascendenti e discendenti e la spalla superiore e inferiore. Spesso lo si identifica con la dimensione del carattere ma, storicamente, si riferisce alle dimensioni fisiche del blocco che conteneva in la lettera in rilievo da imprimere. Ecco perch竪 un carattere risulter sempre pi湛 piccolo della dimensione che gli 竪 stata assegnata. Web Design - a.a. 2007/2008 2
Unit di misura 12 punti = 1 pica 1 punto = 0,35mm 1 pica = 4,22 mm Em: 竪 lunit di misura di base per un dato carattere, equivale alla sua altezza media e deriva dalla larghezza della m minuscola di un carattere. Web Design - a.a. 2007/2008 2
Leggibilit leggibilit del carattere leggibilit del carattere Progettato con ascendenti e discendenti accentuate. Studi sulla leggibilit del carattere hanno dimostrato che il lettore decifra le lettere dalla parte SUPERIORE Web Design - a.a. 2007/2008 2
Crenatura e legatura La crenatura consente di correggere lo spazio tra due lettere. Alcune combinazioni di lettere presentano uno spazio eccessivo tra di loro, il che le rende di pi湛 difficile lettura. La crenatura riduce questo eccesso. Alcune combinazioni di lettere hanno spesso bisogno di essere crenate e sono note come coppie di crenatura. La crenatura 竪 usata soprattutto per conferire un aspetto equilibrato e armonico ai caratteri. Web Design - a.a. 2007/2008 2
Crenatura e legatura Leccesso di spazio tra le lettere fa apparire poco armonica la parola a sinistra in cui i caratteri sembrano distaccarsi luno dallaltro Web Design - a.a. 2007/2008 2
Web Design - a.a. 2007/2008 2
Tipogra鍖a & Web 1
Interlinea linterlinea serve a creare lo spazio per linserimento delle ascendenti e discendenti e ad evitare che le righe si confondano luna con laltra risultando troppo vicine fra loro. Linterlinea 竪 usata per facilitare la lettura. carattere piccolo, interlinea ampia. La larghezza (o dimensione o giustezza)di una colonna 竪 collegata alla dimensione del carattere Web Design - a.a. 2007/2008 2
Misure ideali La lunghezza ideale di una riga 竪 di circa 9 parole (basate su una media di 5 lettere a parola) La lunghezza ideale di una riga 竪 di circa 1,5 volte la lunghezza dellalfabeto minuscolo abcdefghijklmnopqrstuvwxyzabcdefghijklm il numero minimo 竪 di circa 26 caratteri, quello ideale 38 e quello massimo 68 Web Design - a.a. 2007/2008 2
Sillabazione, giusti鍖cazione e spaziatura Se allinterno di una colonna il testo 竪 allineato a sinistra o a destra, lo spazio fra le colonne sar sempre lo stesso e uno dei lati della colonna apparir irregolare. Giustificando un testo, entrambi i lati appariranno ugualmente allineati, quindi lo spazio tra le parole varier a seconda della necessit. Un testo giustificato che abbia parole molto lunghe e molti spazi vuoti potr presentarsi visivamente imperfetto poich竪, a causa degli spazi, le parole sembreranno navigare nel blocco di testo Web Design - a.a. 2007/2008 2
Web Design - a.a. 2007/2008 2
Particolare attenzione va dedicata alla giusti鍖cazione soprattutto con colonne di testo molto strette. Continui a-capo, vedove, spaziatura irregolare e spazi vuoti consecutivi in verticale (ruscellamento) sono incovenienti frequenti con la giusti鍖cazione automatica del testo Particolare attenzione va dedicata alla giusti鍖cazione soprattutto con colonne di testo molto strette. Continui a-capo, vedove, spaziatura irregolare e spazi vuoti consecutivi in ver ticale (ruscellamento) sono incovenienti frequenti con la giusti鍖cazione automatica del testo Web Design - a.a. 2007/2008 2
Anatomia del carattere Web Design - a.a. 2007/2008 2
Anatomia del carattere http://www.fontshop.com/support/glossary.php Heres a glossary of common type terminology, which along with the FAQs may answer many font related questions. If the information you need isnt here, call us. Kerning: Kerning refers to the horizontal space between individual pairs of letters (a kerning pair). Fonts that are properly kerned appear evenly spaced without large open gaps of white space between characters. Ligatures: Special characters that are actually two letters combined into one. In cases where two adjacent characters would normally bump into each other, a ligature allows the letters to 鍖ow together more gracefully. This usually makes word shapes more aesthetically 2 pleasing. Some common ligatures are 鍖", 鍖, ff, ffl, etc.
2
2
2
2
2
2
2
Hoe鍖er Text Hoe鍖er Text 2
2
2
2
2
2
2
2
2
2
2
2
2
2
PER INIZIARE A STUDIARE, ESERCIZIO PER CASA! Trovate esempi che vi piacciono in cui questi font sono utilizzati Scrivete un documento in cui mostrate il font il suo utilizzo perch竪 vi 竪 piaciuto Impaginate il documento meglio che potete, in modo elegante, come se fosse un libro di design convertite in PDF e consegate mettendolo sul vostro blog e spedendomi una mail 2
2
2
2
2
2
2
永艶姻壊看稼温鉛庄岳 in un progetto gra鍖co luso di determinati tipi di carattere suscita diverse associazioni mentali con vari aspetti della personalit: per esempio alcuni font sembrano pi湛 autoritari ed altri pi湛 scherzosi. Le personalit dei caratteri tipogra鍖ci contribuiscono a suggerire unidea speci鍖ca di ci嘆 che si sta leggendo. Se un font 竪 evocativo rispetto al contenuto testuale, signi鍖ca che 竪 stato utilizzato in modo coerente. Se non vi sono nessi fra testo e font, o se la relazione 竪 ridotta al minimo, il lettore non risponder prontamente al messaggio o addirittura lo ri鍖uter. 2
永艶姻壊看稼温鉛庄岳 2
2
2
2
2
2
2
2
Provare online: DAFONT.com Provate a scrivere diverse parole e confrontare il contenuto con il messaggio visivo evocato dal font 2
Provare online: http://typetester.maratz.com/ 2
15 great examples of Web Typography 01: A List Apart for people who make websites 2
15 great examples of Web Typography 02: Shaun Inman professional designer and developer 2
15 great examples of Web Typography 03: FontShop as its name suggests 2
15 great examples of Web Typography 04: Jes炭s Rodr鱈guez Velasco blog of UC Berkeley p 2
15 great examples of Web Typography 05: BearSkinRug Shop professional illustrator, Kevin Cornel 2
15 great examples of Web Typography 06: Design View Andy Rutledge, design strategist 2
15 great examples of Web Typography 07: Rikcat Industries Rik Catlow, design director 2
15 great examples of Web Typography 08: Quipsologies news and creative morsels 2
15 great examples of Web Typography 09: Design Snips web design showcase 2
15 great examples of Web Typography 10: Red Interactive Agency web marketing and development 2
15 great examples of Web Typography 11: The Big Noob developed by and fornoobs 2
15 great examples of Web Typography 12: Design Can Change climate change 2
15 great examples of Web Typography 13: Process Type Foundry they make type 2
15 great examples of Web Typography 14: Finch interactive and graphic design agency 2
15 great examples of Web Typography 15: SR28 Simon Reynolds, web designer and illustrator 2
...e altri 15 http://ilovetypography.com/2008/01/02/good-web-typography/ 2
Da vedere! (il pdf 竪 su materiale didattico) Elegant Web Typography Future of Web Design 2007 Jeff Croft April 17th, 2007 Future of Web Design, London Elegant Web Typography 2
Da vedere! (il pdf 竪 su materiale didattico) 2
Da vedere! (il pdf 竪 su materiale didattico) http://webtypography.net/sxsw2007/webtypography-sxsw2007-notes.pdf 2
Risorse utili http://ilovetypography.com http://webtypography.net http://www.papress.com/other/ thinkingwithtype/index.htm http://www.typophile.com/ http://ilovetypography.com/2007/10/06/arial- versus-helvetica/
Esercizi per la prossima volta (1) DOCUMENTO ESEMPI 10 FONT (2) DOCUMENTO DI ESEMPI TYPOGRAPHY + CSS Trovate esempi che vi piacciono in cui i 10 font della classificazione sono Trovate esempi online di siti Web con utilizzati buon uso della tipografia Scrivete un documento in cui mostrate Scrivete un documento in cui conservate: il font lo screenshot dellesempio il suo utilizzo lurl perch竪 vi 竪 piaciuto il tipo di font usato (lo vedete dal CSS) Impaginate il documento meglio che il codice CSS da riusare per i vostri lavori potete, in modo elegante, come se un Vostro esempio su FireWorks+CSS per fosse un libro di design studiare lesempio che avete trovato convertite in PDF e consegate (3) MOSTRARE DIFERENZE TRA ARIAL mettendolo sul vostro blog e ed HELVETICA spedendomi una mail

More Related Content

L3 Typography Part1

  • 1. Tipogra鍖a & Web Paolo Omero Web Design - a.a. 2007/2008 1
  • 2. Web Design - a.a. 2007/2008 2
  • 3. 95% of the Web is Typography http://informationarchitects.jp/the-web-is-all-about-typography-period/ Web Design - a.a. 2007/2008 2
  • 4. 95% of the Web is Typography http://informationarchitects.jp/the-web-is-all-about-typography-period/ Information design is typography Back in 1969, Emil Ruder, a famous Swiss typographer, wrote on behalf of his contemporary print materials what we could easily say about our contemporary websites: Today we are inundated with such an immense flood of printed matter that the value of the individual work has depreciated, for our harassed contemporaries simply cannot take everything that is printed today. It is the typographers task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him. With some imagination (replace print with online) this sounds like the job description of an information designer. It is the information designers task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him. Web Design - a.a. 2007/2008 2
  • 5. La tipogra鍖a La tipografia 竪 il mezzo tramite il quale unidea scritta viene visualizzata La scelta dellaspetto visivo pu嘆 influenzare notevolmente la leggibilit del testo e le sensazioni del lettore, grazie alle migliaia di tipi di caratteri disponibili. Si varia da caratteri chiari e distinguibili senza sforzo e che ben si adattano a testi lunghi, ad altri che colpiscono lattenzione e che sono maggiormente utilizzati nei titoli e nella pubblicit Web Design - a.a. 2007/2008 2
  • 6. Il tono del testo La tipografia definisce il tono di un testo, pertanto la scelta del carattere dovrebbe basarsi sul contenuto del messaggio che si intende trasmettere e sulla tipologia dei destinatari. Web Design - a.a. 2007/2008 2
  • 7. Il carattere Il corpo del carattere definisce laltezza delle lettere, comprese le parti ascendenti e discendenti e la spalla superiore e inferiore. Spesso lo si identifica con la dimensione del carattere ma, storicamente, si riferisce alle dimensioni fisiche del blocco che conteneva in la lettera in rilievo da imprimere. Ecco perch竪 un carattere risulter sempre pi湛 piccolo della dimensione che gli 竪 stata assegnata. Web Design - a.a. 2007/2008 2
  • 8. Unit di misura 12 punti = 1 pica 1 punto = 0,35mm 1 pica = 4,22 mm Em: 竪 lunit di misura di base per un dato carattere, equivale alla sua altezza media e deriva dalla larghezza della m minuscola di un carattere. Web Design - a.a. 2007/2008 2
  • 9. Leggibilit leggibilit del carattere leggibilit del carattere Progettato con ascendenti e discendenti accentuate. Studi sulla leggibilit del carattere hanno dimostrato che il lettore decifra le lettere dalla parte SUPERIORE Web Design - a.a. 2007/2008 2
  • 10. Crenatura e legatura La crenatura consente di correggere lo spazio tra due lettere. Alcune combinazioni di lettere presentano uno spazio eccessivo tra di loro, il che le rende di pi湛 difficile lettura. La crenatura riduce questo eccesso. Alcune combinazioni di lettere hanno spesso bisogno di essere crenate e sono note come coppie di crenatura. La crenatura 竪 usata soprattutto per conferire un aspetto equilibrato e armonico ai caratteri. Web Design - a.a. 2007/2008 2
  • 11. Crenatura e legatura Leccesso di spazio tra le lettere fa apparire poco armonica la parola a sinistra in cui i caratteri sembrano distaccarsi luno dallaltro Web Design - a.a. 2007/2008 2
  • 12. Web Design - a.a. 2007/2008 2
  • 14. Interlinea linterlinea serve a creare lo spazio per linserimento delle ascendenti e discendenti e ad evitare che le righe si confondano luna con laltra risultando troppo vicine fra loro. Linterlinea 竪 usata per facilitare la lettura. carattere piccolo, interlinea ampia. La larghezza (o dimensione o giustezza)di una colonna 竪 collegata alla dimensione del carattere Web Design - a.a. 2007/2008 2
  • 15. Misure ideali La lunghezza ideale di una riga 竪 di circa 9 parole (basate su una media di 5 lettere a parola) La lunghezza ideale di una riga 竪 di circa 1,5 volte la lunghezza dellalfabeto minuscolo abcdefghijklmnopqrstuvwxyzabcdefghijklm il numero minimo 竪 di circa 26 caratteri, quello ideale 38 e quello massimo 68 Web Design - a.a. 2007/2008 2
  • 16. Sillabazione, giusti鍖cazione e spaziatura Se allinterno di una colonna il testo 竪 allineato a sinistra o a destra, lo spazio fra le colonne sar sempre lo stesso e uno dei lati della colonna apparir irregolare. Giustificando un testo, entrambi i lati appariranno ugualmente allineati, quindi lo spazio tra le parole varier a seconda della necessit. Un testo giustificato che abbia parole molto lunghe e molti spazi vuoti potr presentarsi visivamente imperfetto poich竪, a causa degli spazi, le parole sembreranno navigare nel blocco di testo Web Design - a.a. 2007/2008 2
  • 17. Web Design - a.a. 2007/2008 2
  • 18. Particolare attenzione va dedicata alla giusti鍖cazione soprattutto con colonne di testo molto strette. Continui a-capo, vedove, spaziatura irregolare e spazi vuoti consecutivi in verticale (ruscellamento) sono incovenienti frequenti con la giusti鍖cazione automatica del testo Particolare attenzione va dedicata alla giusti鍖cazione soprattutto con colonne di testo molto strette. Continui a-capo, vedove, spaziatura irregolare e spazi vuoti consecutivi in ver ticale (ruscellamento) sono incovenienti frequenti con la giusti鍖cazione automatica del testo Web Design - a.a. 2007/2008 2
  • 19. Anatomia del carattere Web Design - a.a. 2007/2008 2
  • 20. Anatomia del carattere http://www.fontshop.com/support/glossary.php Heres a glossary of common type terminology, which along with the FAQs may answer many font related questions. If the information you need isnt here, call us. Kerning: Kerning refers to the horizontal space between individual pairs of letters (a kerning pair). Fonts that are properly kerned appear evenly spaced without large open gaps of white space between characters. Ligatures: Special characters that are actually two letters combined into one. In cases where two adjacent characters would normally bump into each other, a ligature allows the letters to 鍖ow together more gracefully. This usually makes word shapes more aesthetically 2 pleasing. Some common ligatures are 鍖", 鍖, ff, ffl, etc.
  • 21. 2
  • 22. 2
  • 23. 2
  • 24. 2
  • 25. 2
  • 26. 2
  • 27. 2
  • 29. 2
  • 30. 2
  • 31. 2
  • 32. 2
  • 33. 2
  • 34. 2
  • 35. 2
  • 36. 2
  • 37. 2
  • 38. 2
  • 39. 2
  • 40. 2
  • 41. 2
  • 42. PER INIZIARE A STUDIARE, ESERCIZIO PER CASA! Trovate esempi che vi piacciono in cui questi font sono utilizzati Scrivete un documento in cui mostrate il font il suo utilizzo perch竪 vi 竪 piaciuto Impaginate il documento meglio che potete, in modo elegante, come se fosse un libro di design convertite in PDF e consegate mettendolo sul vostro blog e spedendomi una mail 2
  • 43. 2
  • 44. 2
  • 45. 2
  • 46. 2
  • 47. 2
  • 48. 2
  • 49. 永艶姻壊看稼温鉛庄岳 in un progetto gra鍖co luso di determinati tipi di carattere suscita diverse associazioni mentali con vari aspetti della personalit: per esempio alcuni font sembrano pi湛 autoritari ed altri pi湛 scherzosi. Le personalit dei caratteri tipogra鍖ci contribuiscono a suggerire unidea speci鍖ca di ci嘆 che si sta leggendo. Se un font 竪 evocativo rispetto al contenuto testuale, signi鍖ca che 竪 stato utilizzato in modo coerente. Se non vi sono nessi fra testo e font, o se la relazione 竪 ridotta al minimo, il lettore non risponder prontamente al messaggio o addirittura lo ri鍖uter. 2
  • 51. 2
  • 52. 2
  • 53. 2
  • 54. 2
  • 55. 2
  • 56. 2
  • 57. 2
  • 58. Provare online: DAFONT.com Provate a scrivere diverse parole e confrontare il contenuto con il messaggio visivo evocato dal font 2
  • 59. Provare online: http://typetester.maratz.com/ 2
  • 60. 15 great examples of Web Typography 01: A List Apart for people who make websites 2
  • 61. 15 great examples of Web Typography 02: Shaun Inman professional designer and developer 2
  • 62. 15 great examples of Web Typography 03: FontShop as its name suggests 2
  • 63. 15 great examples of Web Typography 04: Jes炭s Rodr鱈guez Velasco blog of UC Berkeley p 2
  • 64. 15 great examples of Web Typography 05: BearSkinRug Shop professional illustrator, Kevin Cornel 2
  • 65. 15 great examples of Web Typography 06: Design View Andy Rutledge, design strategist 2
  • 66. 15 great examples of Web Typography 07: Rikcat Industries Rik Catlow, design director 2
  • 67. 15 great examples of Web Typography 08: Quipsologies news and creative morsels 2
  • 68. 15 great examples of Web Typography 09: Design Snips web design showcase 2
  • 69. 15 great examples of Web Typography 10: Red Interactive Agency web marketing and development 2
  • 70. 15 great examples of Web Typography 11: The Big Noob developed by and fornoobs 2
  • 71. 15 great examples of Web Typography 12: Design Can Change climate change 2
  • 72. 15 great examples of Web Typography 13: Process Type Foundry they make type 2
  • 73. 15 great examples of Web Typography 14: Finch interactive and graphic design agency 2
  • 74. 15 great examples of Web Typography 15: SR28 Simon Reynolds, web designer and illustrator 2
  • 75. ...e altri 15 http://ilovetypography.com/2008/01/02/good-web-typography/ 2
  • 76. Da vedere! (il pdf 竪 su materiale didattico) Elegant Web Typography Future of Web Design 2007 Jeff Croft April 17th, 2007 Future of Web Design, London Elegant Web Typography 2
  • 77. Da vedere! (il pdf 竪 su materiale didattico) 2
  • 78. Da vedere! (il pdf 竪 su materiale didattico) http://webtypography.net/sxsw2007/webtypography-sxsw2007-notes.pdf 2
  • 80. Esercizi per la prossima volta (1) DOCUMENTO ESEMPI 10 FONT (2) DOCUMENTO DI ESEMPI TYPOGRAPHY + CSS Trovate esempi che vi piacciono in cui i 10 font della classificazione sono Trovate esempi online di siti Web con utilizzati buon uso della tipografia Scrivete un documento in cui mostrate Scrivete un documento in cui conservate: il font lo screenshot dellesempio il suo utilizzo lurl perch竪 vi 竪 piaciuto il tipo di font usato (lo vedete dal CSS) Impaginate il documento meglio che il codice CSS da riusare per i vostri lavori potete, in modo elegante, come se un Vostro esempio su FireWorks+CSS per fosse un libro di design studiare lesempio che avete trovato convertite in PDF e consegate (3) MOSTRARE DIFERENZE TRA ARIAL mettendolo sul vostro blog e ed HELVETICA spedendomi una mail

Editor's Notes