I caratteri tipografici sono ovunque, ci accompagnano silenziosi in ogni momento della giornata, sono protagonisti dei nostri progetti Wordpress insieme alle immagini, e ne possono decretare il successo o l'insuccesso. Come scegliere il giusto carattere, come utilizzarlo in maniera efficace e quali strumenti abbiamo a nostra disposizione. Un viaggio nella tipografia e il suo sviluppo all'interno dei nostri progetti che ci farà capire come un buon uso dei caratteri tipografici può fare veramente la differenza.

1. L’uso efficace di una
tipografia corretta
di MATTIA COMPAGNUCCI
WORDCAMP BOLOGNA - 9 Febbraio 2013
@WordcampBologna # WPCAMPBO13

2. Say Hello!
Mattia Compagnucci
Web, brand & type design.
Co-founder Fattelo!
www.mattiacompagnucci.com ~ www.fattelo.com
Twitter @matcompagnucci Facebook mattiacompagnucci.visualdesigner
TITILLIUM www.campivisivi.net/titillium/

3. Perché questo talk?
Con la nuova dichiarazione @font-face siamo riusciti a liberarci dalla schiavitù delle font web-safe.
Possiamo utilizzare un immaginario di caratteri vastissimo, abbiamo un potere enorme tra le mani.

4. “Da grandi poteri derivano grandi responsabilità”
Peter Parker, Uomo Ragno

5. Di che cosa parleremo?
- Del perchè e del come trattare correttamente la tipografia all’interno dei nostri progetti.
- Degli strumenti e risorse che abbiamo a nostra disposizione

6. La tipografia è importante,
datele la giusta attenzione.

7. Perché?

8. “Parole scelte con cura meritano lettere scelte con
cura…”
“Gli elementi dello stile tipografico” Robert Bringhurst

9. Video
+
Immagini
+
Testi

10. “La differenza tra una buona e una cattiva tipografia
sembra avere un piccolo effetto su alcuni fattori
come la velocità di lettura e la comprensione del
testo.”
“The aesthetics of reading” Larson e Picard

11. Un buon uso della tipografia sembra indurre nell’utente un mood positivo.
:)

12. Aumentando la comprensione dei contenuti.
;)

15. Come?

16. “Parole scelte con cura meritano lettere scelte
con cura, queste a loro volta meritano di essere
composte con affetto, intelligenza, conoscenza
e abilità.”
“Gli elementi dello stile tipografico” Robert Bringhurst

17. .
1. Scegliere il giusto carattere
2. Impostare correttamente il contenuto della pagina
3. Gerarchizzare il contenuto
.

18. .
1. Scegliere il giusto carattere
2. Impostare correttamente il contenuto della pagina
3. Gerarchizzare il contenuto
.

19. 1. Scegliere il giusto carattere
Scegliere un carattere coerente con il tono
della comunicazione e ben progettato.

20. 1. Scegliere il giusto carattere- Il giusto tono
Un tono?!?

21. TI AMO

22. Ti amo

23. PROFESSIONALE

24. PROFESSIONALE

25. 1. Scegliere il giusto carattere - Qualità progettuale
Quand’è ben progettato?

26. 1. Scegliere il giusto carattere - Qualità progettuale
Quando ha un set di glifi completo.

28. 1. Scegliere il giusto carattere - Qualità progettuale
Quando lo spazio tra coppie di caratteri è
studiata caso per caso.
(kerning)
THE KERNING GAME http:/
/type.method.ac/

29. WAVE
WAVE
SOTTO ANTIPASTO www.dafont.com/antipasto.font SOPRA NOVECENTO www.typography.synthview.com

30. WAVE
WAVE
SOTTO ANTIPASTO www.dafont.com/antipasto.font SOPRA NOVECENTO www.typography.synthview.com

31. 1. Scegliere il giusto carattere - Qualità progettuale
Quando viene fornito con diverse forze d’asta.

32. GRETA SANS 10 pesi combinati in 4 larghezze(compressed, condensed, normal, expanded) http:/
/www.typotheque.com/blog/greta_system

33. 1. Scegliere il giusto carattere - Qualità progettuale
Quando è presente un vero corsivo.

34. Io sono forzato
Io sono disegnato
VOLKHOV www.fontsquirrel.com/fonts/volkhov

35. 1. Scegliere il giusto carattere - Qualità progettuale
Quando presenta opzioni opentype.
http:/
/ie.microsoft.com/testdrive/graphics/opentype/opentype-fontbureau/index.html

36. ACTA POSTER www.dstype.com/fonts/acta-poster

37. ACTA POSTER www.dstype.com/fonts/acta-poster

38. 1. Scegliere il giusto carattere - Qualità progettuale
Quando il carattere è ottimizzato per il web
e viene visualizzato correttamente sui vari
browser e sistemi operativi.
(operazione chiamata hinting)

39. Proxima Nova “a,” as renderizzata da tre differenti browser/sistemi operativi a 16px.
“Type rendering on the web “ Typekit Blog
http:/
/blog.typekit.com/2010/10/05/type-rendering-on-the-web/

40. Testate sempre i caratteri su diversi sistemi operativi e browser.

41. .
1. Scegliere il giusto carattere
2. Impostare correttamente il contenuto della pagina
3. Gerarchizzare il contenuto
.

42. 2. Impostare correttamente il contenuto della pagina
Una volta scelto il carattere dobbiamo
scegliere che corpo utilizzare per il testo e
l’iterlinea del testo.

43. 2. Impostare correttamente il contenuto della pagina
Il corpo del testo deve essere tale da avere
tra 45-75 caratteri in una riga di testo.

44. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
142 caratteri
Lorem Ipsum is simply dummy Lorem Ipsum is simply dummy text of the printing and typesetting industry.
text of the printing and typeset- Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,
ting industry. Lorem Ipsum has when an unknown printer took a galley of type and scrambled it to make a type
been the industry’s standard dum- specimen book. It has survived not only five centuries, but also the leap into
my text ever since the 1500s, when electronic typesetting, remaining essentially unchanged. It was popularised in
an unknown printer took a galley the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
of type and scrambled it to make and more recently with desktop publishing software like Aldus PageMaker inclu-
a type specimen book. It has sur- ding versions of Lorem Ipsum.
vived not only five centuries, but Lorem Ipsum is simply dummy text of the printing and typesetting industry.
also the leap into electronic type- Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,
setting, remaining essentially un- when an unknown printer took a galley of type and scrambled it to make a type
changed. It was popularised in the specimen book. It has survived not only five centuries, but also the leap into
1960s with the release of Letraset electronic typesetting, remaining essentially unchanged. It was popularised in
sheets containing Lorem Ipsum the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
passages, and more. and more recently with desktop publishing software like Aldus.
28 caratteri 75 caratteri
ADOBE GARAMOND PRO

45. 2. Impostare correttamente il contenuto della pagina
L’interlinea scelta deve far risultare il testo
una texture omogenea di caratteri, senza
soffocare o disperdere il contenuto.

46. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised.
12/23
In the 1960s with the release of Letraset sheets containing Lorem Ipsum passa-
ges, and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry.
In the 1960s with the release of Letraset sheets containing Lorem Ipsum passa-
ges, and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum lorem Ipsum is simply.
12/12
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker inclu-
ding versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make.
12/15
ADOBE GARAMOND PRO

47. 2. Impostare correttamente il contenuto della pagina
In media l’interlina dovrebbe essere il 20% in
più del corpo scelto.

48. 2. Impostare correttamente il contenuto della pagina
Per creare armonia all’interno della pagina
ogni distanza dovrà essere un multiplo o
sottomultiplo dell’interlinea scelta.

49. .
1. Scegliere il giusto carattere
2. Impostare correttamente il contenuto della pagina
3. Gerarchizzare il contenuto
.

50. 3. Gerarchizzare il contenuto
-Diverso corpo del carattere
- Forze d’asta diverse
- Varianti come il corsivo e il maiuscoletto
- Spazio bianco per dividere i vari livelli di gerarchizzazione
- Colori differenti
- Caratteri differenti (non più di due)

51. www.informationarchitects.net
iABC Font

52. www.ilovetypography.com
FF Scala Sans - FF Scala
www.scalafont.com

53. FF Basic Gothic Web Pro
www.typekit.com/fonts/ff-basic-gothic-web-pro

54. Il web è pieno di strumenti utili.

55. Dove trovare buoni caratteri?

56. Fontsquirrel (Free) www.fontsquirrel.com
Google Web Font (Free) www.google.com/webfonts
MyFonts (Free - Pay) http://www.myfonts.com/
Typekit (Free - Pay) www.typekit.com
Fontdeck (Pay) www.fontdeck.com
Fonts.com (Pay) www.fonts.com

57. Come testarli e scegliere le giuste
combinazioni?

58. Web Font Specimen (Free) www.webfontspecimen.com
Scale & Rythm (Free) www.lamb.cc/typograph/
TypecastApp (Pay) www.typecast.com

59. C’è dell’altro?

60. “Gli elementi dello stile tipografico” Robert Bringhurst
The Elements of Typographic Style Applied to the Web www.webtypography.net
Typophile www.typophile.com
Font-Face www.font-face.com
What’s the Font http://www.myfonts.com/WhatTheFont/

61. Thank you!
Mattia Compagnucci
Web, brand & type design.
Co-founder Fattelo!
www.mattiacompagnucci.com ~ www.fattelo.com
Twitter @matcompagnucci Facebook mattiacompagnucci.visualdesigner