Embed Size (px)
DESCRIPTION
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.
Citation preview
WORDCAMP BOLOGNA - 9 Febbraio 2013
@WordcampBologna # WPCAMPBO13
L’uso efficace di una
tipografia correttadi MATTIA COMPAGNUCCI
Say Hello!
Mattia CompagnucciWeb, brand & type design.
Co-founder Fattelo!
www.mattiacompagnucci.com ~ www.fattelo.com
Twitter @matcompagnucci Facebook mattiacompagnucci.visualdesigner
TITILLIUM www.campivisivi.net/titillium/
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.
“Da grandi poteri derivano grandi responsabilità”Peter Parker, Uomo Ragno
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
La tipografia è importante,datele la giusta attenzione.
Perché?
“Parole scelte con cura meritano lettere scelte con cura…”
“Gli elementi dello stile tipografico” Robert Bringhurst
Video+
Immagini+
Testi
“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
Un buon uso della tipografia sembra indurre nell’utente un mood positivo.
:)
Aumentando la comprensione dei contenuti.
;)
Come?
“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
.1. Scegliere il giusto carattere
2. Impostare correttamente il contenuto della pagina
3. Gerarchizzare il contenuto
.
.1. Scegliere il giusto carattere
2. Impostare correttamente il contenuto della pagina
3. Gerarchizzare il contenuto
.
Scegliere un carattere coerente con il tono della comunicazione e ben progettato.
1. Scegliere il giusto carattere
Un tono?!?
1. Scegliere il giusto carattere- Il giusto tono
TI AMO
Ti amo
PROFESSIONALE
PROFESSIONALE
Quand’è ben progettato?
1. Scegliere il giusto carattere - Qualità progettuale
Quando ha un set di glifi completo.
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/
1. Scegliere il giusto carattere - Qualità progettuale
WAVE
WAVE
SOTTO ANTIPASTO www.dafont.com/antipasto.font SOPRA NOVECENTO www.typography.synthview.com
SOTTO ANTIPASTO www.dafont.com/antipasto.font SOPRA NOVECENTO www.typography.synthview.com
WAVE
WAVE
Quando viene fornito con diverse forze d’asta.
1. Scegliere il giusto carattere - Qualità progettuale
GRETA SANS 10 pesi combinati in 4 larghezze(compressed, condensed, normal, expanded) http://www.typotheque.com/blog/greta_system
Quando è presente un vero corsivo.
1. Scegliere il giusto carattere - Qualità progettuale
Io sono forzato
Io sono disegnato
VOLKHOV www.fontsquirrel.com/fonts/volkhov
Quando presenta opzioni opentype.http://ie.microsoft.com/testdrive/graphics/opentype/opentype-fontbureau/index.html
1. Scegliere il giusto carattere - Qualità progettuale
ACTA POSTER www.dstype.com/fonts/acta-poster
ACTA POSTER www.dstype.com/fonts/acta-poster
Quando il carattere è ottimizzato per il web e viene visualizzato correttamente sui vari
browser e sistemi operativi.(operazione chiamata hinting)
1. Scegliere il giusto carattere - Qualità progettuale
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/
Testate sempre i caratteri su diversi sistemi operativi e browser.
.1. Scegliere il giusto carattere
2. Impostare correttamente il contenuto della pagina
3. Gerarchizzare il contenuto
.
Una volta scelto il carattere dobbiamo scegliere che corpo utilizzare per il testo e
l’iterlinea del testo.
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.
2. Impostare correttamente il contenuto della pagina
Lorem Ipsum is simply dummy text of the printing and typeset-ting industry. Lorem Ipsum has been the industry’s standard dum-my 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 sur-vived not only five centuries, but also the leap into electronic type-setting, remaining essentially un-changed. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more.
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.
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 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.
ADOBE GARAMOND PRO
75 caratteri
142 caratteri
28 caratteri
L’interlinea scelta deve far risultare il testo una texture omogenea di caratteri, senza
soffocare o disperdere il contenuto.
2. Impostare correttamente il contenuto della pagina
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 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.
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.
ADOBE GARAMOND PRO
12/12
12/23
12/15
In media l’interlina dovrebbe essere il 20% in più del corpo scelto.
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.
2. Impostare correttamente il contenuto della pagina
.1. Scegliere il giusto carattere
2. Impostare correttamente il contenuto della pagina
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)
3. Gerarchizzare il contenuto
www.informationarchitects.net
iABC Font
www.ilovetypography.com
FF Scala Sans - FF Scala
www.scalafont.com
FF Basic Gothic Web Pro
www.typekit.com/fonts/ff-basic-gothic-web-pro
Il web è pieno di strumenti utili.
Dove trovare buoni caratteri?
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
Come testarli e scegliere le giuste combinazioni?
Web Font Specimen (Free) www.webfontspecimen.com
Scale & Rythm (Free) www.lamb.cc/typograph/
TypecastApp (Pay) www.typecast.com
C’è dell’altro?
“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/
Thank you!
Mattia CompagnucciWeb, brand & type design.
Co-founder Fattelo!
www.mattiacompagnucci.com ~ www.fattelo.com
Twitter @matcompagnucci Facebook mattiacompagnucci.visualdesigner
