Tipografia & 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....
95% of the Web is Typography
http://informationarchitects.jp/the-web-is-all-about-typography-period/


Information design ...
La tipografia

✤ La tipografia è il mezzo tramite il quale un’idea scritta
  viene visualizzata
✤ La scelta dell’aspetto vi...
Il “tono” del testo

✤ La tipografia definisce il tono di un testo, pertanto la
  scelta del carattere dovrebbe basarsi su...
Il carattere

✤ Il corpo del carattere definisce l’altezza delle
  lettere, comprese le parti ascendenti e discendenti e l...
Unità di misura

✤ 12 punti = 1 pica
✤ 1 punto = 0,35mm
✤ 1 pica = 4,22 mm


✤ Em: è l’unità di misura di base per un dato...
Leggibilità


  leggibilità del carattere

  leggibilità del carattere
  Progettato con ascendenti e discendenti accentuat...
Crenatura e legatura

✤ La crenatura consente di correggere lo spazio tra
  due lettere. Alcune combinazioni di lettere
  ...
Crenatura e legatura



L’eccesso di spazio tra le lettere fa apparire poco armonica la parola a sinistra in cui i
caratte...
Web Design - a.a. 2007/2008   2
Tipografia & Web




                  1
Interlinea

✤ l’interlinea serve a creare lo spazio per l’inserimento
  delle ascendenti e discendenti e ad evitare che le...
Misure ideali

✤ La lunghezza ideale di una riga è di circa 9 parole (basate
  su una media di 5 lettere a parola)
✤ La lu...
Sillabazione, giustificazione e
spaziatura
✤ Se all’interno di una colonna il testo è allineato a sinistra
  o a destra, lo...
Web Design - a.a. 2007/2008   2
Particolare attenzione va dedicata alla
                              giustificazione soprattutto con colonne
             ...
Anatomia
del carattere




   Web Design - a.a. 2007/2008   2
Anatomia del carattere                    http://www.fontshop.com/support/glossary.php




              Here’s a glossary...
2
2
2
2
2
2
2
Hoefler Text
Hoefler 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

✤ Sc...
2
2
2
2
2
2
Personalità
in un progetto grafico l’uso di determinati tipi di
carattere suscita diverse associazioni mentali con
vari asp...
Personalità




              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 da...
Provare online:
                  http://typetester.maratz.com/




                                                  2
15 great examples of Web Typography




01:   A List Apart — for people who make websites




                            ...
15 great examples of Web Typography




02:   Shaun Inman — professional designer and developer




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




                        ...
15 great examples of Web Typography




05:   BearSkinRug Shop — professional illustrator, Kevin Cornel




              ...
15 great examples of Web Typography




06:   Design View — Andy Rutledge, design strategist




                         ...
15 great examples of Web Typography




07:   Rikcat Industries — Rik Catlow, design director




                        ...
15 great examples of Web Typography




08:   Quipsologies — news and creative morsels




                               ...
15 great examples of Web Typography




09:   Design Snips — web design showcase


                                       ...
15 great examples of Web Typography




10:   Red Interactive Agency — web marketing and development




                 ...
15 great examples of Web Typography




11:   The Big Noob — developed by and for…noobs




                              ...
15 great examples of Web Typography




12:   Design Can Change — climate change




                                     ...
15 great examples of Web Typography




13:   Process Type Foundry — they make type




                                  ...
15 great examples of Web Typography




14:   Finch— interactive and graphic design agency




                           ...
15 great examples of Web Typography




15:   SR28 — Simon Reynolds, web designer and illustrator




                    ...
...e altri 15
  http://ilovetypography.com/2008/01/02/good-web-typography/




                                           ...
Da vedere!
(il pdf è su materiale didattico)

Elegant Web Typography              Future of Web Design 2007




Jeff Croft...
Da vedere!
(il pdf è su materiale didattico)




                                    2
Da vedere!
(il pdf è su materiale didattico)
http://webtypography.net/sxsw2007/webtypography-sxsw2007-notes.pdf




      ...
Risorse utili
http://ilovetypography.com

http://webtypography.net
http://www.papress.com/other/
thinkingwithtype/index.ht...
Esercizi per la prossima volta
(1) DOCUMENTO ESEMPI 10 FONT                 (2) DOCUMENTO DI ESEMPI
                      ...
Upcoming SlideShare
Loading in …5
×

L3 Typography Part1

1,478 views

Published on

Wen design 2009

1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
1,478
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
47
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide
















































































  • L3 Typography Part1

    1. 1. Tipografia & Web Paolo Omero Web Design - a.a. 2007/2008 1
    2. 2. Web Design - a.a. 2007/2008 2
    3. 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. 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 typographer’s 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 designer’s 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. 5. La tipografia ✤ La tipografia è il mezzo tramite il quale un’idea scritta viene visualizzata ✤ La scelta dell’aspetto 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 l’attenzione e che sono maggiormente utilizzati nei titoli e nella pubblicità Web Design - a.a. 2007/2008 2
    6. 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. 7. Il carattere ✤ Il corpo del carattere definisce l’altezza 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. 8. Unità di misura ✤ 12 punti = 1 pica ✤ 1 punto = 0,35mm ✤ 1 pica = 4,22 mm ✤ Em: è l’unità 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. 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. 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. 11. Crenatura e legatura L’eccesso di spazio tra le lettere fa apparire poco armonica la parola a sinistra in cui i caratteri sembrano distaccarsi l’uno dall’altro Web Design - a.a. 2007/2008 2
    12. 12. Web Design - a.a. 2007/2008 2
    13. 13. Tipografia & Web 1
    14. 14. Interlinea ✤ l’interlinea serve a creare lo spazio per l’inserimento delle ascendenti e discendenti e ad evitare che le righe si confondano l’una con l’altra risultando troppo vicine fra loro. ✤ L’interlinea è 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. 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 dell’alfabeto minuscolo ✤ abcdefghijklmnopqrstuvwxyzabcdefghijklm ✤ il numero minimo è di circa 26 caratteri, quello ideale 38 e quello massimo 68 Web Design - a.a. 2007/2008 2
    16. 16. Sillabazione, giustificazione e spaziatura ✤ Se all’interno 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. 17. Web Design - a.a. 2007/2008 2
    18. 18. Particolare attenzione va dedicata alla giustificazione 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 giustificazione automatica del testo Particolare attenzione va dedicata alla giustificazione 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 giustificazione automatica del testo Web Design - a.a. 2007/2008 2
    19. 19. Anatomia del carattere Web Design - a.a. 2007/2008 2
    20. 20. Anatomia del carattere http://www.fontshop.com/support/glossary.php Here’s a glossary of common type terminology, which along with the FAQs may answer many font related questions. If the information you need isn’t 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 flow together more gracefully. This usually makes word shapes more aesthetically 2 pleasing. Some common ligatures are “fi", “fl”, “ff”, “ffl”, etc.
    21. 21. 2
    22. 22. 2
    23. 23. 2
    24. 24. 2
    25. 25. 2
    26. 26. 2
    27. 27. 2
    28. 28. Hoefler Text Hoefler Text 2
    29. 29. 2
    30. 30. 2
    31. 31. 2
    32. 32. 2
    33. 33. 2
    34. 34. 2
    35. 35. 2
    36. 36. 2
    37. 37. 2
    38. 38. 2
    39. 39. 2
    40. 40. 2
    41. 41. 2
    42. 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. 43. 2
    44. 44. 2
    45. 45. 2
    46. 46. 2
    47. 47. 2
    48. 48. 2
    49. 49. Personalità in un progetto grafico l’uso 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 tipografici contribuiscono a suggerire un’idea specifica di ciò che si sta leggendo. Se un font è evocativo rispetto al contenuto testuale, significa 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 rifiuterà. 2
    50. 50. Personalità 2
    51. 51. 2
    52. 52. 2
    53. 53. 2
    54. 54. 2
    55. 55. 2
    56. 56. 2
    57. 57. 2
    58. 58. Provare online: DAFONT.com Provate a scrivere diverse parole e confrontare il contenuto con il messaggio visivo evocato dal font 2
    59. 59. Provare online: http://typetester.maratz.com/ 2
    60. 60. 15 great examples of Web Typography 01: A List Apart — for people who make websites 2
    61. 61. 15 great examples of Web Typography 02: Shaun Inman — professional designer and developer 2
    62. 62. 15 great examples of Web Typography 03: FontShop — as its name suggests 2
    63. 63. 15 great examples of Web Typography 04: Jesús Rodríguez Velasco — blog of UC Berkeley p 2
    64. 64. 15 great examples of Web Typography 05: BearSkinRug Shop — professional illustrator, Kevin Cornel 2
    65. 65. 15 great examples of Web Typography 06: Design View — Andy Rutledge, design strategist 2
    66. 66. 15 great examples of Web Typography 07: Rikcat Industries — Rik Catlow, design director 2
    67. 67. 15 great examples of Web Typography 08: Quipsologies — news and creative morsels 2
    68. 68. 15 great examples of Web Typography 09: Design Snips — web design showcase 2
    69. 69. 15 great examples of Web Typography 10: Red Interactive Agency — web marketing and development 2
    70. 70. 15 great examples of Web Typography 11: The Big Noob — developed by and for…noobs 2
    71. 71. 15 great examples of Web Typography 12: Design Can Change — climate change 2
    72. 72. 15 great examples of Web Typography 13: Process Type Foundry — they make type 2
    73. 73. 15 great examples of Web Typography 14: Finch— interactive and graphic design agency 2
    74. 74. 15 great examples of Web Typography 15: SR28 — Simon Reynolds, web designer and illustrator 2
    75. 75. ...e altri 15 http://ilovetypography.com/2008/01/02/good-web-typography/ 2
    76. 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. 77. Da vedere! (il pdf è su materiale didattico) 2
    78. 78. Da vedere! (il pdf è su materiale didattico) http://webtypography.net/sxsw2007/webtypography-sxsw2007-notes.pdf 2
    79. 79. 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/
    80. 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 dell’esempio ✤ il suo utilizzo ✤ l’url ✤ 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 l’esempio che avete trovato ✤ convertite in PDF e consegate (3) MOSTRARE DIFERENZE TRA ARIAL mettendolo sul vostro blog e ed HELVETICA spedendomi una mail

    ×