Slide: tipografia e colore

INFORMATICA E GRAFICA PER IL WEB
Psicologia e comunicazione
A.A. 2013/2014
Università degli studi Milano-Bicocca
docente: Diana Quarti
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
01
I caratteri tipografici
La scelta del carattere tipografico è molto importante perchè aiuta a definire gran parte
dell’identità di un progetto (sia per il web, sia per stampa).
Quando si sceglie un carattere per un progetto bisogna tenere ben presente:
»» il contesto e/o il tipo di azienda/ente
»» le connotazioni che vogliamo dare: la forma del carattere aiuta a richiamare concetti o
epoche storiche che lo rendono più adatto ad alcuni progetti rispetto ad altri
»» il target di riferimento
Per la scelta dei caratteri tipografici vale la regola Less is more: in ogni progetto è
consigliabile usare solo 1 o 2 caratteri.
In internet è possibile trovarare delle font gratuite o open source, non sempre sono però di
buona qualità o sono adatte per tutti i tipi di progetti, soprattutto le font decorative hanno
un’applicazione molto limitata per la scarsa leggibilità e per le connotazioni molto forti.
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
02
I caratteri tipografici: classificazione
I caratteri tipografici possono essere classificati per il loro aspetto. Una prima suddivisione
possiamo farla individuando 2 tipi di famiglie graziati, lineari. A queste potremmo
aggiungere i caratteri calligrafici e quelli fantasia.
La classificazione di Aldo Novarese (del 1956) suddivise i caratteri derivandone lo stile
dalle loro terminazioni e il nome dalle origini o dall’aspetto di ciascuno:
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
03
I caratteri tipografici: capacità espressiva
CAPACITÀ ESPRESSIVA DEI CARATTERI TIPOGRAFICI
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
BAUER FOTOGRAFO 1°ANNO | Editing e cultura visiva | A.S. 2011/2012 | INFORMATICA
docente: Diana
QuartiPER IL WEB | A.A. 2013/2014 | docente: Diana Quarti 28
E GRAFICA
04
M’illumino d’immenso
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
05
ACITÀ ESPRESSIVA DEI CARATTERI TIPOGRAFICI
VA DEI CARATTERI TIPOGRAFICI
llumino d’immenso.
M’illumino d’immen
mmenso.
M’illumino d’immenso.
umino d’immenso.
M’illumino d’im
.
M’illumino d’immenso.
umino d’immenso.
M’illumino d’immenso
.
M’illumino d’immenso.
umino d’immenso.
M’illumino d’immens
o.
M’illumino d’immenso.
umino d’immenso.
M’illumino d’immen
.
M’illumino d’immenso.
illumino d’immenso.
M’illumino d’imm
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
06
M’illumino
d’immenso
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
07
M’illumino
d’immenso
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
08
M’illumino d’immenso
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
09
M’illumino
d’immenso
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
10
M’illumino d’immenso
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
11
I caratteri tipografici. Capacità espressiva: contrasto
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
12
I caratteri tipografici. Capacità espressiva: coerenza
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
13
I caratteri tipografici: accenni di tipometria
correzioni ottiche
OCCHIO
SPALLA SUPERIORE
ÈgiplIAx
area delle accentazioni delle maiuscole
ASCENDENTI
altezza maiuscole
X-HEIGHT (occhio medio)
DISCENDENTI
SPALLA INFERIORE
Le dimensioni del carattere tipografico si misura in
verticale e si definisce corpo. Il corpo viene calcolato dalla
spalla superiore alla spalla inferiore (comprende quindi
oltre all’occhio anche l’area delle accentazioni delle
maiuscole). Il nome deriva dall’altezza della faccia dei
vecchi caratteri di fonderia (in piombo).
Tradizionalmente la misura del corpo del carattere si
misura in punti tipografici (1 pt = 0,376 mm).
Nel web invece vengono usate diverse unità di misura:
pixel ed em sono le più usate.
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
14
Composizione tipografica
Oltre la scelta del carattere è importante decidere la disposizione e l’ingombro all’interno
del nostro progetto, il peso e la dimensione di titoli, testo e ogni elemento tipografico.
Anche solo con la tipografia è possibile costruire logotipi efficaci (o meno). Ma è anche
importante valutare come il carattere può interagire con simboli e immagini.
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
15
Composizione tipografica: interlinea
L’interlinea è lo spazio tra 2 linee di testo, indica la distanza tra la linea di base di una riga
e quella della riga successiva. Viene misurata con le stesse unità di misura dei caratteri.
Unt pratem dolorper am quissisl in henibh
ercil ex enisisi tatum zzriliqui eugue mod
et, quisis et, con velessequi tatue dolorpe
ratumsandre.Everumento te voluptam endella
cesequid et parum aceptas senderepta vel
estium laceprem qui optae eum evelibus eic
temporporro tectur, aliaerum repuda acest, con
plit iusandae ommo blaccae voloresto tet a
ex et laut et volores re repudae ptatur solupta
vendi sitatium fugiamet prem fuga. Ectatus
mint ullestis vel eos estiatem eatasped modic
to tem quatibust utestio ribusa nem aut etur,
nobis imint faccull estrunt ibeatem quatenis
a consenet omnis es ullicte voluptio blam,
utem exped essitiur si ut ommolor re exero vel
iliquid eos magnis enimagnam.
Unt pratem dolorper am quissisl in henibh
ercil ex enisisi tatum zzriliqui eugue mod
et, quisis et, con velessequi tatue dolorpe
ratumsandre.Everumento te voluptam endella
cesequid et parum aceptas senderepta vel
estium laceprem qui optae eum evelibus eic
temporporro tectur, aliaerum repuda acest, con
plit iusandae ommo blaccae voloresto tet a
Unt pratem dolorper am quissisl in henibh
ercil ex enisisi tatum zzriliqui eugue mod
et, quisis et, con velessequi tatue dolorpe
ratumsandre.Everumento te voluptam endella
cesequid et parum aceptas senderepta vel
estium laceprem qui optae eum evelibus eic
temporporro tectur, aliaerum repuda acest, con
plit iusandae ommo blaccae voloresto tet a
ex et laut et volores re repudae ptatur solupta
vendi sitatium fugiamet prem fuga. Ectatus
mint ullestis vel eos estiatem eatasped modic
to tem quatibust utestio ribusa nem aut etur,
nobis imint faccull estrunt ibeatem quatenis
a consenet omnis es ullicte voluptio blam,
utem exped essitiur si ut ommolor re exero vel
iliquid eos magnis enimagnam.
ex et laut et volores re repudae ptatur solupta
vendi sitatium fugiamet prem fuga. Ectatus
mint ullestis vel eos estiatem eatasped modic
to tem quatibust utestio ribusa nem aut etur,
nobis imint faccull estrunt ibeatem quatenis
a consenet omnis es ullicte voluptio blam,
utem exped essitiur si ut ommolor re exero vel
iliquid eos magnis enimagnam.
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
16
Il colore
Un altro elemento di progettazione molto importante è il colore.
Ad ogni colore vengono attribuiti significati e simbologie, sia per alcune caratteristiche
fisiche sia per cause di tipo culturale.
Il rosso è un colore che richiama l’attenzione e spesso viene usato per indicare pericolo, ma
è anche associato all’amore e alla passione. Al contrario il blu è un colore calmo, associato
anche all’eleganza e alla stabilità. In occidente il nero è il colore che viene usato per il lutto,
mentre in alcuni paesi orientali viene usato il bianco.
La scelta dei colori per un progetto:
»» si può basare su una paletta di colore creata dal designer
»» può essere sviluppata utilizzando come base la ruota dei colori e scegliendo un metodo
di selezione del colore
»» selezionando alcuni colori da un’immagine (o una serie di immagini) di partenza
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
17
Il colore: color wheel
monocromatico
colori analoghi
colori complementari
triade complementare
triade equilatera
doppio complementare
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
18
Il colore: contrasto colore-sfondo
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
19
Domande?
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti
20