INFORMATICA E GRAFICA PER IL WEB...defiscono ogni dettaglio della composizione tipografica (peso, stile, interlinea, spaziatura tra le lettere ecc.) sia grazie alla possibilità di

INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 01

INFORMATICA E GRAFICA PER IL WEB TIPOGRAFIA


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.















BAUER FOTOGRAFO 1°ANNO | Editing e cultura visiva | A.S. 2011/2012 | docente: Diana Quarti 28



















M’illumino d’immenso.BAUER FOTOGRAFO 1°ANNO | Editing e cultura visiva | A.S. 2011/2012 | docente: Diana Quarti 28


























I CARATTERI TIPOGRAFICI. CAPACITÀ ESPRESSIVA: CONTRASTO


I CARATTERI TIPOGRAFICI. CAPACITÀ ESPRESSIVA: COERENZA


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/ )


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.


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


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




I CARATTERI TIPOGRAFICI: CLASSIFICAZIONE 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





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



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





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





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


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


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


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


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.


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?




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)


DOMANDE?

Documents

INFORMATICA E GRAFICA PER IL WEB...defiscono ogni dettaglio della composizione tipografica (peso, stile, interlinea, spaziatura tra le lettere ecc.) sia grazie alla possibilità di