Lezione Font Slides · E’ possibile importare font esterni tramite apposito comando CSS. Paolo...
Transcript of Lezione Font Slides · E’ possibile importare font esterni tramite apposito comando CSS. Paolo...
-
FONT
Metalinguaggi di Marcatura
Paolo Nazzaro
-
Definizione di font
Un font è un insieme di lettere e simboli accomunati da uno stile grafico e/o da una
funzione.
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
GOTHAM
Paolo Nazzaro
-
Carattere e Font
Font
Meccanismo di consegna
Software di installazione
Carattere
Forma delle lettere
Design visivo
Oggi i due termini vengono usati in maniera intercambiabile.
Paolo Nazzaro
-
Anatomia di un font
Paolo Nazzaro
-
Bianco e NeroUna lettera è composta da controforme e tratti,
rispettivamente bianco e nero.
BBBPaolo Nazzaro
-
Nozioni ottiche
L’uomo non vede l’esatta copia della realtà.
Ciò che vediamo è una rappresentazione mediata da conoscenze ed esperienze pregresse.
Paolo Nazzaro
-
Illusioni otticheL’occhio umano percepisce i tratti verticali
come più sottili.
Paolo Nazzaro
-
Tratti orizzontali e verticali
T26 pt
22 pt
O22 pt
25 pt
Paolo Nazzaro
-
Overshooting
Overshooting: oltrepassaggio, superamento.
A parità di altezza, l’occhio umano percepisce le forme piatte come più alte rispetto a quelle a punta o
arrotondate.
Paolo Nazzaro
-
Overshooting
Overshooting: oltrepassaggio, superamento.
A parità di altezza, l’occhio umano percepisce le forme piatte come più alte rispetto a quelle a punta o
arrotondate.
Paolo Nazzaro
-
Overshooting
Lettere a punta e/o arrotondate sono più alte.
NEROLe estremità di N e O sforano l’altezza del carattere.
Paolo Nazzaro
-
Marchi celebri
Leggero overshooting delle lettere curve, quali S, p e o.
Paolo Nazzaro
-
Marchi celebri
G, g ed e non sono perfettamente inscritte nelle rispettive circonferenze.
Paolo Nazzaro
-
SpacingSpacing: valore numerico che determina lo spazio
alla destra e alla sinistra della lettera.
IMPaolo Nazzaro
-
Casi particolari
AVAV148 pt 105 pt
Paolo Nazzaro
-
KerningKerning: variazione di spacing per casi particolari.
AVIMKerning positivo Kerning negativo
Paolo Nazzaro
-
Sans | serif
APaolo Nazzaro
ASans Serif
DidotGotham
Serif
-
Web Font
Paolo Nazzaro
-
Definizione di web font
Un web font è un font appositamente ottimizzato per essere usato su una pagina web.
Paolo Nazzaro
-
Scegliere un font
La scelta di un font si basa su 3 criteri
Leggibilità Impatto visivo Compatibilità
Abc
Paolo Nazzaro
-
Leggibilità
Legibility Readability
Singolo carattere Intero testo
XPaolo Nazzaro
-
Legibility
Rapporto tra x-height e cap-height.
Ideale tra 0,4 e 0,6.
x gb cap-heightx-height
Paolo Nazzaro
-
Legibility
x gb27 pt27 / 108 = 0,25pt
108 pt
54 pt
27 ptx gb55 pt
55 / 95 = 0,58pt
95 pt
22 pt
18 pt
Gotham Tangerine
Testo di esempio Lorem ipsum dolor sit amet, consectetur
adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Duis aute irure reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Testo di esempio Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et
dolore magna aliqua. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Paolo Nazzaro
-
Legibility
102 pt
34 pt
48 pt
184 pt
102 / 184 = 0,55pt
Paolo Nazzaro
-
Readability
Testo di esempio Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Testo di esempio Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Struttura del testo: paragrafi, allineamento, interlinea, grassetti, dimensione carattere.
Paolo Nazzaro
-
Prestazioni
Paolo Nazzaro
-
PrestazioniWeb Font
Pro Contro
Qualità dei contenuti Velocità di navigazione
Paolo Nazzaro
-
Dimensioni di un file2 fattori
Numero di glifi Complessità dei glifi
𝛑Paolo Nazzaro
-
HelveticaPunti in comune tra roman e italic.rr
x
y
Uno stile viene estrapolato dall’altro.
Paolo Nazzaro
-
ImportE’ possibile importare font esterni tramite apposito
comando CSS.
Paolo Nazzaro
-
Estetica Prestazioni
Paolo Nazzaro
-
Fine
Paolo Nazzaro