Wen design 2009

1. Tipografia & 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 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. 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. 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 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. 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. 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
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. Web Design - a.a. 2007/2008 2

13. Tipografia & Web
1

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. 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. 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. Web Design - a.a. 2007/2008 2

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. Anatomia
del carattere
Web Design - a.a. 2007/2008 2

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

22. 2

23. 2

24. 2

25. 2

26. 2

27. 2

28. Hoefler Text
Hoefler Text
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. 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. Personalità
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 for…noobs
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

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