INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 01
INFORMATICA E GRAFICA PER IL WEB TIPOGRAFIA
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 02
I CARATTERI TIPOGRAFICI: CAPACITÀ ESPRESSIVA
BAUER FOTOGRAFO 1°ANNO | Editing e cultura visiva | A.S. 2011/2012 | docente: Diana Quarti 28
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.
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 03
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 04
BAUER FOTOGRAFO 1°ANNO | Editing e cultura visiva | A.S. 2011/2012 | docente: Diana Quarti 28
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 | docente: Diana Quarti 28
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.
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 05
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 06
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 07
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 08
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 09
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 10
I CARATTERI TIPOGRAFICI. CAPACITÀ ESPRESSIVA: CONTRASTO
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 11
I CARATTERI TIPOGRAFICI. CAPACITÀ ESPRESSIVA: COERENZA
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 12
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 la stampa).
Quando si sceglie un carattere per un progetto bisogna tenere ben presente:
» il target di riferimento e il contesto 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
Per la scelta dei caratteri tipografici vale la regola Less is more: in ogni progetto è consigliabile usare solo 1 o 2 famiglie di caratteri (usando diversi pesi della stessa famiglia per caratterizzare diversi titoli, testi, didascalie, parole chiave ecc.).
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. (Es. www.fontsquirrel.com - www.google.com/fonts - www.dafont.com/it/ )
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 13
TIPOGRAFIA WEB
Inizialmente la tipografia sul web era piuttosto limitata, visto che la scelta delle font dipendeva da font installate sul computer dell’utente e per ovviare i problemi di compatibilità tra le diverse piattaforme la scelta doveva ricadere sulle font web-safe abbinate a delle fallback font (Arial, Courier New, Georgia, Helvetica, Times New Roman, Verdana, Trebuchet MS, Lucida Sans). Quindi per definire la famiglia di caratteri da usare veniva definito un carattere principale e poi una serie di caratteri sostitutivi. L’utilizzo di caratteri non web-safe era limitato su alcuni titoli e menù che non venivano trattati come testi ma come immagini.
Oggi invece la tipografia web ha ricevuto invece un notevole impulso sia grazie ai css che defiscono ogni dettaglio della composizione tipografica (peso, stile, interlinea, spaziatura tra le lettere ecc.) sia grazie alla possibilità di includere i caratteri all’interno del mio codice.
Con la proprietà font-face è possibile, infatti, caricare all’interno delle pagine web font non standard salvate all’interno della directory del sito web o di una libreria online; consentendo la visualizzazione del sito in modo corretto su tutti i dispositivi e su tutti i browser, indipendentemente dal fatto che il carattere sia installato sul computer dell’utente.
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 14
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
» fantasia
I CARATTERI TIPOGRAFICI: CLASSIFICAZIONE
graziati
lineari
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 15
I CARATTERI TIPOGRAFICI: CLASSIFICAZIONE NOVARESE
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:
La classificazione dei caratteri di Aldo Novarese
La classificazione dei caratteri di Aldo Novarese
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 16
La classificazione dei caratteri di Aldo Novarese
I CARATTERI TIPOGRAFICI: CLASSIFICAZIONE DI ALDO NOVARESE
La classificazione dei caratteri di Aldo Novarese
LAPIDARII caratteri lapidari si rifanno ai caratteri romani antichi, ispirandosi alle incisioni su pietra. L’archetipo per questo tipo di caratteri è l’incisione della colonna traiana, infatti il carattere più famoso di questa famiglia si chiama appunto Trajan e ha solo la forma maiuscola. Hanno grazie triangolari che formano un angolo acuto con la linea di base (la forma che lo scalpello dà alle grazie sulla pietra).
Caratteri: Trajan, Meridien, Augustea
MEDIEVALII caratteri medievali, chiamati anche gotici, erano i caratteri calligrafici tipici del periodo di Gutenberg in area germanica, ma oggi di difficile lettura. Hanno estremità allungate caratterizzate da angoli accentuati. Le grazie sono definite “a punta di lancia rivolta verso il basso”. Il carattere Textura usato da Gutemberg nella fusione dei primi caratteri mobili in Europa, si ispirò proprio a questo tipo di caratteri.
Caratteri: Fraktur, Textura, San Marco
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 17
La classificazione dei caratteri di Aldo Novarese
La classificazione dei caratteri di Aldo Novarese
I CARATTERI TIPOGRAFICI: CLASSIFICAZIONE DI ALDO NOVARESE
VENEZIANII caratteri veneziani hanno una forma simile a quella dei lapidari, ma le grazie hanno l’estremità delle grazie arrotondata e il piede dell’asta è spesso appena concavo. Il nome veneziani deriva da alcuni stampatori attivi nell’area nella seconda metà del ‘400 che disegnarono caratteri di questo tipo e usarono il primo corsivo per la stampa (Francesco Griffo, Aldo Manuzio).
Caratteri: Garamond, Bembo, Jenson
TRANSIZIONALII caratteri transizionali hanno grazie orizzontali e sottili, terminano con un’asta la cui base ha andamento lineare. Chiamati così per indicare la transizione tra romani antichi e romani moderni. Nascono tra la fine del XVII e l’inizio del XVIII secolo.
Caratteri: Times, Times New Roman, Baskerville, Caslon, Century
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 18La classificazione dei caratteri di Aldo Novarese
La classificazione dei caratteri di Aldo Novarese
I CARATTERI TIPOGRAFICI: CLASSIFICAZIONE DI ALDO NOVARESE
BODONIANII caratteri bodoniani hanno un rapporto di spessore molto accentuato tra le aste e l’asse perpendicolare. Hanno grazie molto sottili che si uniscono con l’asta verticale della lettera, formando un evidente angolo retto. Il nome deriva da Giambattista Bodoni, tipografo italiano attivo dalla fine del ‘700, a Parma.
Caratteri: Bodoni, Didot
SCRITTII caratteri scritti detti anche calligrafici, imitano la scrittura a mano. Assumono pertanto caratteristiche assai eterogenee in relazione al tipo di strumento di scrittura che si imita. I calligrafici propriamente detti sono quelli che imitano una scrittura fatta con dei pennini tipografici, mentre gli handwritten determinano i caratteri più informali che imitano la scrittura a mano.
Caratteri: Shelley, Zapfino
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 19
La classificazione dei caratteri di Aldo Novarese
La classificazione dei caratteri di Aldo Novarese
I CARATTERI TIPOGRAFICI: CLASSIFICAZIONE DI ALDO NOVARESE
ORNATII caratteri ornati sono caratteri con decorazioni. Sono formati generalmente dalle sole lettere maiuscole, e sono utilizzati come capilettera.
Caratteri: Romantiques, Rosewood
EGIZIANII caratteri egiziani sono riconoscibili per le grazie ad angolo retto molto spesse, prendono il nome dai caratteri che venivano usati su casse di spedizioni (in quell’epoca che arrivavano o veniva spedite in Egitto). Sono caratteri con forte impatto visivo.
Caratteri: Rockwell
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 20
La classificazione dei caratteri di Aldo Novarese
La classificazione dei caratteri di Aldo Novarese
I CARATTERI TIPOGRAFICI: CLASSIFICAZIONE DI ALDO NOVARESE
LINEARII caratteri lineari sono detti anche bastoni, sono privi di grazie e hanno spessori delle aste uniformi, al giorno d’oggi chiamati comunemente sans serif (senza grazie).
Caratteri: Helvetica, Futura, Gill Sans
FANTASIAI caratteri fantasia, comprendono tutti i caratteri che non rientrano nelle precedenti categorie.
Caratteri: Gillies gothic, Playbill
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 21
I CARATTERI TIPOGRAFICI: ACCENNI DI TIPOMETRIA
La linea di base è la linea sulla quale la maggior parte delle lettere si appoggiano.
L’occhio di un carattere è l’altezza del carattere comprendente sia le ascendenti che le discendenti. Da non confondersi con l’occhio medio che è l’altezza delle lettere minuscole in particolare della lettera “x” che non presentà nè ascendenti o discendenti nè correzioni ottiche. A parità di corpo un carattere che ha un occhio medio maggiore solitamente ha una migliore leggibilità. Le ascendenti e le discendenti sono parti delle minuscole che si estendono oltre all’occhio medio.
Quando si deve allineare a un testo un oggetto (o un altro testo) è importante utilizzare la linea di base visto che crea un “appoggio ottico“ molto forte.
ÈgiplIAxOCCH
IO
X-HEIGHT (occhio medio)
ASCENDENTI altezza maiuscole
SPALLA SUPERIORE
SPALLA INFERIORE
correzioni ottiche
DISCENDENTI
area delle accentazioni delle maiuscole
CORP
O
linea di base
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 22
I CARATTERI TIPOGRAFICI: ACCENNI DI TIPOMETRIA
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, i CSS3 introducono i rem.
ÈgiplIAxOCCH
IO
X-HEIGHT (occhio medio)
ASCENDENTI altezza maiuscole
SPALLA SUPERIORE
SPALLA INFERIORE
correzioni ottiche
DISCENDENTI
area delle accentazioni delle maiuscole
CORP
O
linea di base
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 23
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
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 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.
COMPOSIZIONE TIPOGRAFICA: INTERLINEA
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 24
COMPOSIZIONE TIPOGRAFICA: ALLINEAMENTI E SILLABAZIONE
COMPOSIZIONE TIPOGRAFICA: VEDOVE E ORFANE VEDOVA ORFANA RIGHINO
magnisc.Bore custemolor aut aut aute nienimo tem fugitis aut restiam, quo odit lab ius verrorrori nestium et lab ilitius niminve restotam, sequam etur, coremo doluptia quunt renderis luptam non eum elestiam que sundempossit quas mincim reseque inulpa cones essi ducium renderis luptam re doluptia quunt renderis deliqui tem faccusani restor am
As aut volut eius maiorer ibusapero omnist, elitisa eiuse, andipie nimusa voluptusci re demperis aturios sitatem. Ehendior adi od uta comnis sandit occuptatem verero ea nullupt atusam non earum ventotaspit as expedit renderis luptam qui quiasim oluptam, sit experum essimus dolecto cum qui blatest, sequoditi. Quo quis accatint prepudae et ut diam, venemperi
deles net quod quo il et officiae que nobitatem luptam non eum elestiam que sundempossit niminve restotam, sequam etur, coremo doluptia quunt renderis luptam non eum elestiam que beatem.Qui dolupta pellab ideliti ut qui omnis as susam golessimus, sundit accus recep niminve restotam, sequam etur, coremo doluptia quunt renderis
GIUSTIFICATO
Il seguente testo è composto a blocchetto e necessita della sillabazione altrimenti si creano spazi tra le parole disomogenei.
Il seguente testo è composto a bloc-chetto e necessita della sillabazione altrimenti si creano spazi tra le parole disomogenei.
CENTRATO/EPIGRAFE
Il seguente testo è composto a epigrafe e non necessita della silla-bazione si deve andare a capo a fine frase e con congiunzioni e articoli.
Il seguente testo è composto a epigrafe e non necessita della sillabazione si deve andare a capo a fine frase
e con congiunzioni e articoli.
BANDIERA SINISTRA
Il seguente testo è composto a bandie-ra allineata a sinistra e non necessita della sillabazione si deve andare a capo a fine frase e con congiunzioni e articoli.
Il seguente testo è composto a bandiera allineata a sinistra e non necessita della sillabazione si deve andare a capo a fine frase e con congiunzioni e articoli.
BANDIERA DESTRA
Il seguente testo è composto a ban-diera allineata a destra e non necessita
della sillabazione si deve andare a capo a fine frase e con congiunzioni e
articoli.
Il seguente testo è composto a bandiera allineata a destra
e non necessita della sillabazione si deve andare a capo a fine frase
e con congiunzioni e articoli.
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 25
COMPOSIZIONE TIPOGRAFICA: SPAZIATURA
La spaziatura è lo spazio tra le lettere delle parole di una composizione.
Nella stampa il controllo della spaziatura è un modo eccellente per gestire ed eliminare vedove e orfane o per ottenere effetti particolari sul testo.
Nel web invece viene usata soprattutto per ottenere aggiustare visivamente un blocco di testo e migliorarne la leggibilità, visto che la diversità di supporti, di browser e di dimensioni possono influire sullo scorrimento del testo.
Unt pratem dolorper am quissisl in henibh ercil ex enisisi tatum zzriliqui eugue mod et, quisis et, vullamet augue facipit vendio con euisit eugiam, tatue dolorpe ratumsandre. Cus, as magnatquia doluptam fugiandi cullupt atiorestrum si dolupti orposam, cum quassun tiasitiis nos nus sin pos iur aliquia vel moloris doluptur?
Unt pratem dolorper am quissisl in henibh ercil ex enisisi tatum zzriliqui eugue mod et, quisis et, vullamet augue facipit vendio con euisit eugiam, tatue dolorpe ratumsandre. Cus, as magnatquia doluptam fugiandi cullupt atiorestrum si dolupti orposam, cum quassun tiasitiis nos nus sin pos iur aliquia vel moloris doluptur?
Unt pratem dolorper am quissisl in henibh ercil ex enisisi tatum zzriliqui eugue mod et, quisis et, vullamet augue facipit vendio con euisit eugiam, tatue dolorpe ratumsandre. Cus, as magnatquia doluptam fugiandi cullupt atiorestrum si dolupti orposam, cum quassun tiasitiis nos nus sin pos iur aliquia vel moloris doluptur?
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 26
COMPOSIZIONE TIPOGRAFICA: KERNING
Il kerning è la riduzione dello spazio bianco tra determinate coppie di lettere.
I programmi Adobe permettono di settare le opzioni metrico / ottico / un valore in cifre
AVOH AVOH AVOHmetrico ottico 0 (zero)
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 27
DOMANDE?