"L'uso efficace di una tipografia corretta" @ WordCamp Bologna 2013

1,633 views

Published on

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.

Published in: Design

"L'uso efficace di una tipografia corretta" @ WordCamp Bologna 2013

  1. 1. L’uso efficace di una tipografia corretta di MATTIA COMPAGNUCCI WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  2. 2. Say Hello! Mattia Compagnucci Web, brand & type design. Co-founder Fattelo! www.mattiacompagnucci.com ~ www.fattelo.comTwitter @matcompagnucci Facebook mattiacompagnucci.visualdesigner TITILLIUM www.campivisivi.net/titillium/
  3. 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. 4. “Da grandi poteri derivano grandi responsabilità” Peter Parker, Uomo Ragno
  5. 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. 6. La tipografia è importante,datele la giusta attenzione.
  7. 7. Perché?
  8. 8. “Parole scelte con cura meritano lettere scelte con cura…” “Gli elementi dello stile tipografico” Robert Bringhurst
  9. 9. Video +Immagini + Testi
  10. 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. 11. Un buon uso della tipografia sembra indurre nell’utente un mood positivo. :)
  12. 12. Aumentando la comprensione dei contenuti. ;)
  13. 13. Come?
  14. 14. “Parole scelte con cura meritano lettere sceltecon cura, queste a loro volta meritano di esserecomposte con affetto, intelligenza, conoscenza e abilità.” “Gli elementi dello stile tipografico” Robert Bringhurst
  15. 15. . 1. Scegliere il giusto carattere2. Impostare correttamente il contenuto della pagina 3. Gerarchizzare il contenuto .
  16. 16. . 1. Scegliere il giusto carattere2. Impostare correttamente il contenuto della pagina 3. Gerarchizzare il contenuto .
  17. 17. 1. Scegliere il giusto carattere Scegliere un carattere coerente con il tono della comunicazione e ben progettato.
  18. 18. 1. Scegliere il giusto carattere- Il giusto tono Un tono?!?
  19. 19. TI AMO
  20. 20. Ti amo
  21. 21. PROFESSIONALE
  22. 22. PROFESSIONALE
  23. 23. 1. Scegliere il giusto carattere - Qualità progettuale Quand’è ben progettato?
  24. 24. 1. Scegliere il giusto carattere - Qualità progettuale Quando ha un set di glifi completo.
  25. 25. 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/
  26. 26. WAVE WAVESOTTO ANTIPASTO www.dafont.com/antipasto.font SOPRA NOVECENTO www.typography.synthview.com
  27. 27. WAVE WAVESOTTO ANTIPASTO www.dafont.com/antipasto.font SOPRA NOVECENTO www.typography.synthview.com
  28. 28. 1. Scegliere il giusto carattere - Qualità progettualeQuando viene fornito con diverse forze d’asta.
  29. 29. GRETA SANS 10 pesi combinati in 4 larghezze(compressed, condensed, normal, expanded) http:/ /www.typotheque.com/blog/greta_system
  30. 30. 1. Scegliere il giusto carattere - Qualità progettuale Quando è presente un vero corsivo.
  31. 31. Io sono forzatoIo sono disegnato VOLKHOV www.fontsquirrel.com/fonts/volkhov
  32. 32. 1. Scegliere il giusto carattere - Qualità progettuale Quando presenta opzioni opentype. http:/ /ie.microsoft.com/testdrive/graphics/opentype/opentype-fontbureau/index.html
  33. 33. ACTA POSTER www.dstype.com/fonts/acta-poster
  34. 34. ACTA POSTER www.dstype.com/fonts/acta-poster
  35. 35. 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)
  36. 36. 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/
  37. 37. Testate sempre i caratteri su diversi sistemi operativi e browser.
  38. 38. . 1. Scegliere il giusto carattere2. Impostare correttamente il contenuto della pagina 3. Gerarchizzare il contenuto .
  39. 39. 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.
  40. 40. 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.
  41. 41. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever sincethe 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 sheetscontaining 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 sincethe 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 sheetscontaining 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 sincethe 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 sheetscontaining Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.142 caratteriLorem 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 typebeen the industry’s standard dum- specimen book. It has survived not only five centuries, but also the leap intomy text ever since the 1500s, when electronic typesetting, remaining essentially unchanged. It was popularised inan 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 typechanged. It was popularised in the specimen book. It has survived not only five centuries, but also the leap into1960s with the release of Letraset electronic typesetting, remaining essentially unchanged. It was popularised insheets 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
  42. 42. 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.
  43. 43. 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 typespecimen book. It has survived not only five centuries, but also the leap intoelectronic typesetting, remaining essentially unchanged. It was popularised. 12/23In the 1960s with the release of Letraset sheets containing Lorem Ipsum passa-ges, and more recently with desktop publishing software like Aldus PageMakerincluding versions of Lorem Ipsum lorem Ipsum is simply dummy text of theprinting 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 PageMakerincluding versions of Lorem Ipsum lorem Ipsum is simply. 12/12Lorem 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 typespecimen book. It has survived not only five centuries, but also the leap intoelectronic typesetting, remaining essentially unchanged. It was popularised inthe 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
  44. 44. 2. Impostare correttamente il contenuto della pagina In media l’interlina dovrebbe essere il 20% in più del corpo scelto.
  45. 45. 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.
  46. 46. . 1. Scegliere il giusto carattere2. Impostare correttamente il contenuto della pagina 3. Gerarchizzare il contenuto .
  47. 47. 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)
  48. 48. www.informationarchitects.net iABC Font
  49. 49. www.ilovetypography.comFF Scala Sans - FF Scala www.scalafont.com
  50. 50. FF Basic Gothic Web Prowww.typekit.com/fonts/ff-basic-gothic-web-pro
  51. 51. Il web è pieno di strumenti utili.
  52. 52. Dove trovare buoni caratteri?
  53. 53. Fontsquirrel (Free) www.fontsquirrel.comGoogle 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
  54. 54. Come testarli e scegliere le giustecombinazioni?
  55. 55. Web Font Specimen (Free) www.webfontspecimen.com Scale & Rythm (Free) www.lamb.cc/typograph/ TypecastApp (Pay) www.typecast.com
  56. 56. C’è dell’altro?
  57. 57. “Gli elementi dello stile tipografico” Robert BringhurstThe 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/
  58. 58. Thank you! Mattia Compagnucci Web, brand & type design. Co-founder Fattelo! www.mattiacompagnucci.com ~ www.fattelo.comTwitter @matcompagnucci Facebook mattiacompagnucci.visualdesigner

×