Lezione Font Slides · E’ possibile importare font esterni tramite apposito comando CSS. Paolo Nazzaro. Estetica Prestazioni Paolo Nazzaro. Fine Paolo Nazzaro. Title: Lezione Font

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