Presentazione: Analisi dei Font Progetto di Strumenti e Applicazioni del web Università degli studi di Milano Bicocca A cura di Jessica Amelotti, Federica Nacci e Davide Garavaglia

1. Analysis

2. CREATIVE COMMONS
Il presente materiale è pubblicato con licenza Creative Commons.
“Attribuzione - Non commerciale – Condividi allo stesso modo”.
La licenza non si estende alle immagini provenienti da altre fonti e agli
screenshoots, cui diritti restano in capo ai rispettivi proprietari

3. A cura di …
Federica Nacci
Jessica Amelotti
Davide Garavaglia

4. LA TIPOGRAFIA

5.  Dal greco τύπος, “impronta” e γράφειν,
“scrivere”
 Tecnologia per produrre testi stampati
 Svolge diverse funzioni:
 Disegno dei font
 Impaginazione
 Stampa del supporto
 Confezionamento
E’ un ottimo strumento per un’efficace strategia di
comunicazione e nel design in particolare è la
manifestazione visuale della lingua …

6. L’arte della tipografia è lo strumento
appropriato in vista d’un obiettivo
essenzialmente utilitario, e che non è
estetico se non accidentalmente, poiché il
piacere degli occhi è raramente la
preoccupazione principale del lettore.
Stanley Morrison

7. Messaggio tipografico
 Ha il compito di trasmettere un valore estetico
 Ha la capacità di comunicare un significato
La tipografia può essere usata come immagine e il
significato delle parole diventare parte
integrante di questa

8. Un po’ di storia
Xilografia
Tipografia
moderna
Stereotipia
Litografia
Linotype
&
Monotype
Macintosh
Grafica digitale …
XV sec. 1454 1796 XIX sec. 1886-1889 1984 XXI sec.

9. Xilografia
 Dal greco ξύλον, “legno” e γράφω, “scrivo”
 Consiste in incisioni di immagini su tavolette di
legno inchiostrate e incise su carte, mediante
stampa su torchio
 Tipo di incisione a rilievo
 Primi casi in Europa agli
inizi del 1400

10. Tipografia Moderna
 Invenzione della stampa
a caratteri mobili da
parte di Johannes
Gutenberg
 Primo libro stampato fu
la Bibbia a 42 linee tra il
1448-54
 La tecnica consiste nell’allineare e assemblare i tipi
creando pagine complete di testo
 Sistema economico e rapido

11. Conseguenze …
 Moltiplicazione dei libri stampati
 Sperimentazione di sempre nuovi caratteri con
l’obiettivo di migliorare la leggibilità del testo
 Nascita del corsivo (1501)
 Introduzione di nuovi caratteri standard (1700)
grazie ai tipografi Baskserville; Didot;
Bodoni

12. Litografia
 Dal greco λίθος “pietra” e γράφειν, “scrivere”
 E’ una tecnica di riproduzione meccanica delle
immagini inventata da Alois Senefelder
 E’ una stampa piana a mezzo di pietra
calcarea con la capacità di assorbire acqua e
grasso

13. Stereotipia
La Rivoluzione industriale portò anche uno
sviluppo delle tecniche tipografiche. Così la
pressa in legno venne sostituita dalla pressa
con struttura in metallo
In questo contesto nasce la Stereotipia:
una tecnica di riproduzione della pagina
mediante calco su lastra metallica, attraverso
una pressione piana

14. Linotype & Monotype
Il XIX sec. Fu caratterizzato da uno sviluppo
esponenziale delle tecnologie. In particolar
modo le migliori innovazioni nel campo della
tipografia furono introdotte dai giornali.
Ad esempio il Times adottò la pressa piano-
cilindrica a vapore che permise di aumentare le
copie da 300 a 1.100 all’ora.

15. Linotype (1886)
 Ottmar Mergenthaler
 Macchina per
composizione a
caldo; permette di
creare una linea
intera di caratteri in
metallo
 Prima macchina
automatica
Monotype (1889)
 Tolbert Lanston
 Macchina articolata,
in essa c’è una sola
matrice per lettera
perciò si fonde un
solo carattere alla
volta

16. Tipografia rivisitata
Gli anni Ottanta furono la culla della Rivoluzione
informatica. Si assistette infatti a un ulteriore
sviluppo nel campo tipografico. I pionieri di
questa svolta furono:
 IBM: Lanciò il primo personal computer
 Apple: Mise sul mercato nel 1984 il Macintosh

17. Conseguenze …
 Avvento di sistemi operativi e interfacce web di
facile utilizzo
 Sviluppo di software per la grafica
 Democratization of type
 Nascita di imprese per il trasferimento dei font in
formato digitale ( Adobe, Emigre, Itc)

18. Il caso Macintosh
Il Macintosh 128k fu il primo
personal computer con
interfaccia grafica (GUI) e
mouse, lanciato da Apple nel
1984.
Rispetto al precedente Apple
Lisa ebbe un grandissimo
successo …

19. La grande svolta di Apple
 Introduce importanti novità nell’interfaccia
grafica, come le icone e la scrivania
 Utilizza programmi di disegno grafico (MacPaint)
 Utilizza programmi di videoscrittura (MacWrite)
 Fu in grado di dare ad ogni carattere la propria
proporzione nello spazio e introdusse nuovi font
come il Chicago, creato appositamente per Apple
 Utilizza PageMaker, il primo programma per il
desktop publishing Prima grande rivoluzione della
tipografia

20. Il nuovo secolo
 Diffusione e sviluppo dei personal computer
 Avvento della grafica digitale che porterà allo
sviluppo di nuovi software e applicazioni
 Espansione del mercato dei font. Gli utenti
sono sempre più liberi di scegliere (Web 1.0)
 Con l’avvento del web 2.0 gli utenti hanno la
possibilità, attraverso diverse app, di realizzare
i propri font

21. COS’E’ IL FONT?

22. In italiano il termine font viene tradotto come “tipo
di carattere” ma è una definizione fuorviante, in
quanto:
 Il font è l’insieme delle lettere e dei segni
d’interpunizione disegnati in un determinato
stile
 Il carattere, invece, è la lettera intesa come
forma o grafismo
Ancora diverso è il lettering. Ovvero tutto ciò che
riguarda il carattere, la composizione del testo e il
rapporto che esiste tra il linguaggio scritto e
l’immagine

23. Una prima differenza …
I tipi di font si dividono in due macro-categorie:
 Serif (dal francese con grazie)
 Sans Serif (dal francese senza grazie)
La grazia è quell’allungamento, solitamente
ortogonale, all’estremità del carattere.
Nascono dal carattere lapidario romano, dove le
grazie erano funzionali per una più facile incisione
su pietra. Vengono utilizzate per rendere il
carattere più elegante e leggibile.
Cosa sono le grazie?

25. Le famiglie di caratteri
Classificazione morfologica di Aldo
Novarese, celebre teorico della
forma alfabetica e rinomato
disegnatore di font tipografici.
La classificazione parte dallo
studio delle terminazioni delle aste,
cioè dal disegno delle grazie.
Oggi è diventato sempre più
difficile classificare i font perché i
nuovi prodotti sono astorici,
astilistici, multiformi e destrutturati

26. BODONIANI
MEDIEVALI
FANTASIA
SCRITTI
LAPIDARI
TRANSAZIONALI
LINEARI
Ricordano la tipografia pura dell’inizio del XIX
secolo
Rimandano all’alfabeto gotico tedesco medievale
Emulano la scrittura calligrafica
Traggono ispirazione dalle iscrizioni monumentali
dell’antichità
La forma richiama i tipi di scrittura utilizzati nel
XVIII secolo
Forme geometriche e squadrate
Si ispirano al carattere romano, rinnovato
durante il Rinascimento
Tutti i sans serif, privi di grazie
Nascono nei monasteri amanuensi, sono usati
principalmente come capolettera
Fortemente espressivi, astorici e molto artistici

27. Le parti del carattere

28. Ricapitolando,
le parti che possiamo trovare in un carattere sono
 Apice
 Asta trasversale (16)
 Montante
 Gancio (14)
 Ascendente (18)
 Grazie (15 e 17)
 Collegamento (12)
 Coda (13)
 Discendente
 Spaziatura (11)

29. Il corpo del carattere
Linea delle
ascendenti
Linea delle
maiuscole
Linea delle
minuscole
Linea di base
Linea delle
discendenti
Occhio superiore: Si trovano le
maiuscole e le lettere minuscole con
ascendenti
Occhio medio: Si trovano tutte le
lettere basse senza ascendenti né
discendenti
Occhio inferiore: Si trovano tutte le
minuscole con discendenti

30. Il contrasto
 Il contrasto di un carattere è sostanzialmente la
differenza di spessore tra le linee spesse e
quelle sottili
 Nell’ambito della teoria della Gestalt un font con
alto contrasto è molto più leggibile quando usato
in grandi dimensioni, mentre uno a basso
contrasto garantisce una buona lettura per corpi
piccoli
 Il Bodoni MT è un classico esempio di font ad
alto contrasto
 Il Lucida Fax è un classico esempio di font a
minore contrasto

31. Kerning & Tracking
 Il kerning (o crenatura)
è lo spazio tra le singole
lettere all’interno di un
font
 Rende la composizione
più fluida perché alcune
lettere (come A e V)
possono essere
avvicinate tra loro
senza sovrapporsi
 Il tracking è lo spazio
bianco tra le diverse
parole
 Permette di garantire al
cervello una rapida
individuazione dell’inizio
e della fine di una
parola in un testo e
quindi una maggiore
leggibilità

33. Legibility & Readability
 E’ la leggibilità di un
carattere
 E’ connessa alla struttura
grafica del singolo
carattere tipografico
 E’ una caratteristica
oggettiva e non legata a
gusti personali
 Un font ornamentale non
ha una buona leggibilità
perché progettato per
essere attrattivo
 E’ la leggibilità di un testo
 Tutte quelle
caratteristiche di forma,
tracking, kerning, colore e
tutte le altre proprietà che
collaborano nel creare un
aspetto complessivo che
può essere più o meno
leggibile

34. Strategie per una buona
leggibilità
Bisogna fare attenzione ad alcune caratteristiche del
testo per renderlo il più leggibile possibile:
 Allineare il testo a bandiera e possibilmente a sinistra
 Evitare testi centrati o giustificati (se non per frasi brevi)
 Dividere in paragrafi per rendere ordinato il testo e per
creare “pause programmate”
 Scegliere un font adeguato al messaggio
 Dare rilevanza all’interlinea tra le righe del testo

35. Come utilizzare i font?
Al fine di eseguire un buon testo tipografico che riesca
a comunicare esattamente il messaggio che avete
in mente è bene tenere in considerazione alcuni
punti:
 Tone of voice
 Scelta del font
 Punti di enfasi
 Corpo del carattere
 Supporto sul quale verrà letto il messaggio

36. Tone of voice
 E’ l’intonazione e il registro con cui ci si rivolge al
pubblico
 Prima di scegliere il font dobbiamo capire cosa
vogliamo dire, per conto di chi e a quale scopo
 Ogni scelta, dal font alla composizione del testo,
dalle immagini fino ai segni grafici deve essere
sempre coerente con il tone of voice scelto

37. La scelta del font
 “Ogni carattere ha un suo carattere”. Tutti i font
comunicano uno stato d’animo e delle sensazioni
perciò vanno utilizzati nel contesto adeguato
 Ad esempio i font calligrafici creano la
sensazione di discorso diretto; quelli “graziati”
sono più inclini a un discorso formale; i comic si
rifanno al mondo dei cartoon; i medievali
rimandano a scenari misteriosi e lontani; i font
moderni, fantasiosi e asimettrici sono più adatti
per un messaggio dinamico e vivace

39. I punti di enfasi
Il destinatario della comunicazione va guidato,
catturato e stimolato come e dove vogliamo noi
 Per rendere più semplice questo passaggio la
tipografia ci viene in auto con l’enfasi.
 Essa corrisponde all’intonazione particolare che,
nel parlato, si mette su alcune parole
 Nella tipografia alcuni elementi d’enfasi possono
essere: il capolettera, una parola che spicca per
variazione di font, di dimensione, di colore, di
inclinazione o segni grafici.

40. Corpo del carattere
Il corpo del carattere (la grandezza) deve essere
adatto al tipo e al luogo della comunicazione
Solitamente, nell’editoria, le parti del testo hanno
dimensioni standard:
Da 6 a 8 punti per le note
Da 8 a 9 per le didascalie
Da 10 a 14 per i testi stampati come i libri
Da 12 a 16 per gli occhielli
Da 24 punti in poi per i titoli
Da 72 punti in su per i titoli “urlati” e per i manifesti

41. Stampa vs Schermo
 Per i lunghi testi,
come i libri, vengono
più spesso utilizzati i
graziati
 I graziati sono più
facilmente distinguibili
dal nostro cervello
 Il 90% dei libri è
stampato in Simoncini
Garamond
 Per la scrittura su
schermo sono
consigliati i font sans
serif
 I dettagli dei serif, che
su carta rendono
distinguibili i caratteri,
su schermo si
perdono perché la
risoluzione del video è
minore che su stampa

42. Qualche esempio …
 OpenDyslexic è un font open
source nato nel 2011 per
facilitare la lettura e la
comprensione dei testi
 E’ diverso dagli altri font perché
utilizza linee pesanti, giocando
su altezze e inclinazioni,
cosicchè ogni lettera abbia una
forma unica
 Bianconero è la prima font italiana ad alta leggibilità
messa sul mercato a scopi non commerciali

43.  Questo è il font script ChàvezPro ideato dal designer
Marcelo Volpe in onore dell’ex presidente
venezuelano Hugo Chàvez, noto per spiegare le sue
idee scrivendo a mano sulla lavagna durante le
trasmissioni televisive.
 Il carattere è ottenuto dalla digitalizzazione della sua
scrittura

44. I font del XX secolo
La storia dei caratteri segue quella della società. Oggi
si richiedono tipi di scrittura per display, orologi
digitali, leedscreen, etichettatrici ecc …
Fu il primo carattere studiato ad
hoc per i computer. E’ un carattere molto schematico e
rigido in quanto doveva adattarsi alle limitate
possibilità dei primi computer

45. La grafica
digitale

46. La nascita del web 2.0
 2004 Tim O’Reilly
 Evoluzione del WWW
 Nuova visione di internet  Interattività
 Cambia il nostro modo di lavorare e di interagire
con le informazioni in rete
 Appeal  colori + animazioni = impatto visivo
 Utente attivo: blog, forum, chat …

47.  Percezione del testo
il web svolge una funzione centrale
 Il nostro occhio si concentra su:
 Titoli e sottotitoli
 Grassetti e corsivi
 Parole tra virgolette o tra parentesi
 Parole in colore
 Parole con l’iniziale maiuscola all’interno
del testo.
 La lettura dal web è immediata, ma riduce la
capacità di concentrazione in quanto è
“saltellante”. La lettura su carta, generalmente, è
più lenta

48. Grafica digitale
E’ un settore della produzione artistica che si
occupa di creare elementi e prodotti per la
comunicazione visiva; consiste nella
trasmissione di un messaggio attraverso le
immagini.
Sostanzialmente …

49. Raster & Vettoriale

50. Raster
 Prende il nome dal termine inglese che significa
griglia
 Nella grafica raster, o bitmap, l’immagine è
composta da una griglia di punti, detti pixel di
forma quadrata
 Ogni pixel possiede informazioni di colore che
nell’insieme creano l’immagine
 La proprietà più importante è la risoluzione
 Si utilizza come unità di misura il pollice inglese
(2,54 cm) e quindi il rapporto dot per inch, DPI,
cioè punti per pollice

51. Photoshop
 E’ il principale programma di grafica raster
 E’ un software proprietario prodotto dalla Adobe
Systems Incorporated, specializzato
nell’elaborazione di fotografie e, più in generale,
di immagini
 La prima versione risale al 1990 ad opera dei
fratelli Thomas e John Knoll, figli di un fotografo,
che idearono il programma per agevolare il
lavoro del padre
 Prende corpo dall’applicativo esistente Display,
sviluppato nel 1987 per MacPlus

52. Vettoriale
 Si basa su forme geometriche come linee,
punti, curve e poligoni
 E’ possibile ingrandire le immagini all’infinito
senza perdere minimamente risoluzione, poichè
si basano su equazioni matematiche
 Le immagini occupano minor spazio e rendono le
modifiche più semplici perché le informazioni
contenute sono davvero minime
 Per ottenere immagini vettoriali di qualità sono
necessarie dei software potenti

53. Illustrator
 E’ il principale programma di grafica vettoriale
 E’ un software per l’elaborazione di illustrazioni e
per la grafica, prodotto da Adobe Systems
Incorporated
 Apple Macintosh rilasciò la prima versione nel
1986; invece Windows nel 1989, ma non ebbe
successo
 I lavori più sviluppati con Illustrator sono:
costruzione di loghi, prodotti pubblicitari e anche
layout per siti web

54. Il colore tipografico
 La scrittura può aggiungere colore alla pagina, e
di conseguenza lo stile tipografico influisce
sull’interpretazione del messaggio
 La base sono scale di colori e mescolanze:
 Additiva o sintesi (RGB)
 Sottrattiva (CMYK)

55. Mescolanza additiva
 E’ tipica dei monitor
 Si riferisce ai colori primari della luce (rosso,
verde, blu)
 Se miscelati tra loro generano tutti i colori
presenti nello spettro, mentre se sommati in parti
uguali (da qui il termine additivo) producono luce
bianca

56. Mescolanza sottrattiva
 È tipica delle stampanti
 Utilizza colori primari dei pigmenti che hanno la
capacità di assorbire in modo selettivo solo
alcune lunghezze d’onda della luce. Le altre parti
vengono riflesse e determinano il colore
 Il colore di un pigmento è dato dalla sottrazione
di radiazioni della luce bianca e da qui l’aggettivo
sottrattivo
 I colori primari sono ciano, magenta e giallo a cui
viene aggiunto il nero

57. Curiosità
 Il nostro occhio riconosce uno spettro di sette
colori chiamati anche i colori dell’arcobaleno
(rosso, arancio, giallo, verde, azzurro, indaco,
violetto)
 Caso a sé sono il bianco e il nero, detti colori
neutri
 I colori complementari, invece, sono particolari
in quanto se avvicinati provocano un effetto
“tremolio” e affaticano la vista, rendendo
difficile la lettura

58. Ai fini della leggibilità …

59. I colori web safe
 I primi computer
possedevano schede
video e monitor in
grado di visualizzare
soltanto 256 colori,
gestiti in maniera
differente a seconda
dei diversi sistemi
operativi
 Queste differenze
comportano la lettura di
soltanto 216 colori
comuni, chiamati anche
colori “web safe”

60. L’identità del font
 La scelta di un particolare font da parte di
un’azienda rappresenta un momento decisivo in
quanto rende il marchio unico e riconoscibile
 Anche lo stile del font esprime un messaggio
chiaro e diretto al consumatore
 E’ stato dimostrato che nomi brevi sono più
semplici da memorizzare
Vediamo se queste aziende sono riuscite
a rendere il loro font unico e
riconoscibile …

67. I PROBLEMI
DELL’OPEN SOURCE

68. I font installati sui computer degli utenti non sono uguali
per tutti.
I caratteri a disposizione dipendono da diverse variabili:
 Sistema Operativo
 Software installati sul pc
 Caratteri installati manualmente
Quindi:
nella scelta dei font da utilizzare, bisogna tener
presente che non tutti gli utenti avranno installato
un certo font sul proprio computer

70. WEB SAFE FONTS
vs
FONT
PROPRIETARI

71. WEB SAFE FONTS:
 Sono caratteri standard, compatibili e
trasversali a tutti i sistemi operativi
 Font con licenza open source
 Sono talmente numerosi da soddisfare le
esigenze estetiche di qualsiasi utente
 Sono la soluzione per ovviare alla problematica
dell’interoperabilità tra i sistemi operativi
 I più noti fonts web safe sono: Arial, Courier,
Georgia, Times New Roman, Verdana, etc…

72. FONT PROPRIETARI:
 Definiti anche font liberi sono protetti da
licenza, quindi a pagamento
 Caratterizzati da una grafica più elaborata
perché progettati da designer professionista
 Un buon carattere può costare anche più di
100 euro
www.myfonts.com

73. LIBRERIE ON LINE
GOOGLE WEB FONTS
(www.google.com/fonts)
DAFONT
(www.dafont.com)

74. GOOGLE WEB FONTS
 Archivio on line più ampio in assoluto, costituito da
più di 600 font. Tutti open source
 Altri due archivi open source, anche se più limitati,
sono FreeTypography e OpenFontLibrary
DAFONT
 Archivio on line che offre sia font proprietari che
font open source
 Un altro esempio è FontSquirrell

75. Font-stack
È un’alternativa al web safe per rendere
compatibile la pagina web su qualunque sistema
operativo.
Si basa sulla proprietà del font-family del CSS e
consente di inserire una lista di caratteri da
utilizzare nella pagina, nel caso in cui quel
determinato carattere non fosse leggibile.

76. L’idea principale del font-stack consiste nell’utilizzare
famiglie di caratteri simili. Ad esempio se il font
Times New Roman non fosse presente nel sistema
operativo verrebbe in automatico sostituito da un
secondo simile, come Georgia.
Le più famose famiglie di caratteri simili sono:
 SERIF: come Georgia e Times New Roman
 SAN SERIF: come Arial e Verdana
 MONOSPACE: come Courier e Courier New

77. Typography Apps
Esistono, in rete, numerose
applicazioni gratuite dove è
possibile creare o scaricare
font per pc e mobile…
 Font Forge (per creare il tuo
font personale)
 Fontomizer e Ifont (Android);
Cool Font e Font Studio
(Apple) per scaricare nuovi
font sul tuo smartphone

78. Sitografia
http://www.treccani.it/lingua_italiana/speciali/chiaro_scuro/Carrada.html
http://www.html.it/articoli/i-colori-e-il-loro-uso-nel-web-1/
http://bestcreativity.com/blog/it/font-logo-facebook-twitter-linkedin-social-network/
http://www.bitdesign.it/ditelo-con-un-font/
https://www.google.com/fonts
http://www.fonts.com/font/microsoft-
corporation/calibri?QueryFontType=Web&src=GoogleWebFonts
http://www.partitaivaonline.com/tipografia-e-grafica-web-levoluzione-della-specie/
http://www.libreitalia.it/font-e-interoperabilita/
http://windows.microsoft.com/it-it/windows-vista/troubleshoot-font-problems
https://it.wikipedia.org/wiki/Tipografia#Storia
http://www.tipografialeone.net/approfondimenti/font-caratteri-tipografia-grafica-tipi-misure-
caratteristiche/
http://www.dafont.com/it/
http://www.grafigata.com/

79. THE END