egutenberg project - tipografia digitale

5/28/2018 eGutenberg Project - Tipografia Digitale

1/141


2/141


3/141

eGutenbergProject

Tipografia DigitaleLanatomia dei Font

A cura diLetizia BolliniAngela Nuzzi,Matteo Ostuni e

Domenica Pontieri


4/141

Tipografia DigitaleeGutenberg Project, www.egutenberg-project.it

Universit degli Studi di Milano - Bicocca. Corso di LaureaMagistrale in Teoria e Tecnologia della Comunicazione. Cor-so di Grafica a.a. 2010/2011

Milano, ottobre 2011

Testi tratti da:Pag. 3-24, 36-39, 43, 45, 46, 49-53, 56-69, 72-87:

Bollini L, Pomati F. (2005). Cultura e strumenti per il visualdesign. Laboratorio di grafica vettoriale.

Pag. 57-63, 65, 66, 68, 69, 79-84, 91-95, 100-102:Bollini L, Greco M. (2008). Organizzare presentazioni effi-caci. Progettare e realizzare diapositive per parlare in pubblico.

Pag. 90-102:

Bollini L, Cova R. (2009). Basic Web Design 2: standard estrumenti per la progettazione web.

Testi parziali e immagini:Angela Nuzzi - [email protected] Ostuni - [email protected] Pontieri - [email protected]

Impaginazione:Domenica Pontieri - [email protected]

Copertina e concept grafico:Rinaldo de Palma - [email protected]

Licenza Creative CommonsAttribuzione - Non commerciale - Condividi allo stesso modo3.0 Italia License

In copertina: Francesco Griffo
http://www.egutenberg-project.it/mailto:angysg84%40gmail.com?subject=Tipografia%20digitale%20-%20L%27anatomia%20dei%20fontmailto:matteo.ostuni%40gmail.com?subject=Tipografia%20digitale%20-%20L%27anatomia%20dei%20fontmailto:domenica.pontieri%40gmail.com?subject=Tipografia%20digitale%20-%20L%27anatomia%20dei%20fontmailto:domenica.pontieri%40gmail.com?subject=Tipografia%20digitale%20-%20L%27anatomia%20dei%20fontmailto:rinaldo.de.palma%40gmail.com?subject=Tipografia%20Digitale%20-%20L%27anatomia%20dei%20fontmailto:rinaldo.de.palma%40gmail.com?subject=Tipografia%20Digitale%20-%20L%27anatomia%20dei%20fontmailto:domenica.pontieri%40gmail.com?subject=Tipografia%20digitale%20-%20L%27anatomia%20dei%20fontmailto:domenica.pontieri%40gmail.com?subject=Tipografia%20digitale%20-%20L%27anatomia%20dei%20fontmailto:matteo.ostuni%40gmail.com?subject=Tipografia%20digitale%20-%20L%27anatomia%20dei%20fontmailto:angysg84%40gmail.com?subject=Tipografia%20digitale%20-%20L%27anatomia%20dei%20fonthttp://www.egutenberg-project.it/


5/141

Indice

Presentazione VIIAnatomia della parola scritta 2Misurazione del carattere 18Tipi grafici 23La composizione 55La forma del testo 71Tipografia web 89Lintervista

108Riferimenti 113Indice delle immagini 125Biografie degli autori 128


6/141


7/141

Presentazione

Lesperienza didattica maturata durante il cor-so di Graphic Design del Corso di Laurea in Teoriae Tecnologia della Comunicazione presso lUniver-

sit degli Studi di Milano-Bicocca confluita nella

realizzazione di questa collana distribuita in diver-

si formati elettronici, articolata in sette lezioni che

intendono affrontare le diverse tematiche connesse

alla progettazione grafica nellambito della comu-

nicazione visiva, snodandosi attraverso un costante

percorso di analisi dello stato dellarte, di osserva-

zione degli interpreti pi significativi e di esplora-

zione degli scenari pi innovativi, fornendo di volta

in volta strumenti, spunti ed occasioni di riflessio-

ne, confronto, partecipazione e divertimento, in uno

scenario in continua evoluzione e rapido mutamento.

Il carattere tipografico, la sua storia, i suoi detta-

gli non sono altro che la manifestazione visiva della

parola, elemento centrale di ogni tipo di comunica-

zione. Saper comunicare visivamente un progetto

dal punto di vista grafico implica lessere in grado

di organizzare, gestire e impostare correttamente

un testo al fine di ottenere un impaginato coerente.

In questo volume, verranno presi in esame tutti gli

elementi che realizzano correttamente un testo e un

layout grafico. Partendo dallanalisi degli elementi

che costituiscono e contraddistinguono i diversi tipi

di carattere vedremo come il linguaggio scritto si mutato nel corso del tempo, facendo evolvere i ca-

ratteri dalla scrittura calligrafica a quella digitale.


8/141

Titolo di capitolo

KEYWO

RD


9/141

Anatomia della

parola scritta

ESSENCE


10/141

Introdurre il tema della tipografia significa de-dicare uno spazio sufficientemente ampio ai ca-ratteri e alla loro importante funzione allinternodi ogni progetto grafico.Questa prima parte del capitolo dedicata alla-

nalisi di quella che definiamo lanatomia dellaparola scritta, in cui si analizzer il carattere daun punto di vista prettamente grafico. Conoscereda quali elementi costituito un carattere utile

per progettare in maniera cor-retta e significativa un testo eun layout grafico.Di seguito vengono analizzatigli elementi che costituisconoe contraddistinguono i diversi

tipi di carattere (asse, discen-dente, ascendente, apice, ver-tice, asta, etc).


11/141

Asse

Ogni tipo, famiglia di caratteri ha un proprio assesul quale vengono disegnate e costruite le lettere.La presenza dellasse imita il tratto di una pen-

na, generando sezioni spesse o sottili, pi o menoinclinate, come se la lettera fosse disegnata conun pennino. La O ideale per individuare lassedi una lettera, perch ne mette chiaramente inevidenza linclinazione.

001.Asse sulla lettera O

001


12/141

Linea di base

La linea di base la linea immaginaria sulla qualepoggiano le lettere.Tutte le lettere discendenti, come la g, la y e la j

si estendono sotto la linea di base. Normalmentenella maggior parte dei caratteri, le lettere ar-rotondate e appuntite, si estendono leggermentesotto la linea di base.

002.Linea di base

002


13/141

Discendente

Il discendente la parte di una lettera che siestende sotto la linea di base e si trova nelle let-tere g, j, p, q, y. I discendenti dello stesso carat-tere, possono avere profondit diverse.

003.Discendente

003


14/141

Ascendente

Lascendente la parte di una lettera che si esten-de sopra laltezza della x. Si trovano nelle lettereb, d, f, h, k, l, t. In alcuni casi a seconda del dise-gno del carattere, lascendente risulta essere pialto della lettera maiuscola.

004.Acendente

004


15/141

Apice

Lapice il punto diintersezione pi altodella lettera, dove si in-

contrano due tratti.

005.Apice006.Vertice

005

006

Vertice

Il vertice il punto diintersezione pi bassotra due tratti, nei pressidella linea di base.


16/141

007

008

Asta

Lasta di una lettera il principale trattoverti- cale di questa,

non include orna-menti di nessun tipo.

In alcuni carattericome nella lettera Me H, di tipo serif (congrazie), spesso sono

presenti aste prima-rie e secondarie.

007.Asta008. Asta primaria e se-

condaria

Asta primaria e secondaria


17/141

Lasta trasversale o in-crocio, il tratto oriz-zontale che attraversa

un altro tratto.

009.Asta trasversale010.Barra

009

010

Asta trasversale

Barra

La barra il trat-to orizzontale che

collega due tratti.


18/141

Braccio

Il braccio iltratto ascenden-te, orizzontale o

diagonale, colle-gato alla letteraad una estremite libero dallaltra.

011.Braccio012.Gamba

011

012

Gamba

La gamba iltratto diagonalediscendente, col-legato alla lettera

ad una estremite libero dallaltra.


19/141

Sperone

Lo sperone una breve pro-iezione appuntita di unastao di un tratto di un carattere

serif (graziato).

013.Sperone014.Svolazzo

014

013

Svolazzo

Lo svolazzo il tratto termi-nale decorativo, aggiunto alcarattere, presente o meno, aseconda del tipo e dello stile

del carattere utilizzato.


20/141

Spina

La spina il puntoprincipale della curvadella lettera S, s.

015.Spina016.Collo

015

016

Collo

Il collo il tratto checollega la sezione su-periore a quella infe-riore della lettera g.Ricordiamo che puessere anche molto

diverso da carattere acarattere.


21/141

Anello/Gancio

Lanello il tratto di-scendente della letterag. Quando completa-

mente chiuso dettoanello, quando aperto detto gancio.

017.Anello/Gancio018.Orecchio

018

Orecchio

Lorecchio una brevesporgenza della letterag. In base allo stile dicarattere potrebbe tro-

varsi anche nelle letterep ed r.

017


22/141

Coda

La coda il prolunga-mento che si estende dauna lettera verso il bas-

so, normalmente sottola linea di base. Si pre-senta sempre attaccataad una estremit e libe-ra dallaltra, come nellelettere Q e j.

019

020

Occhiello

Locchiello lo spaziochiuso nella parte supe-riore della lettera.

019.Coda020.Occhiello


23/141

022

Spalla

La spalla la par-te arrotondata diuna lettera minu-

scola che colle-ga due aste o duetratti verticali.

021.Spalla022.Contorno interno

021

Il contorno in-terno larea del-la lettera intera-

mente racchiusada un contorno.

Contorno interno


24/141


25/141

Misurazione del

carattere

DIMENSI

ON


26/141

La dimensione del carattere detta corpo delcarattere e viene espressa e misurata in punti ti-pografici (pt) per quello che riguarda la grafica astampa. Per le misure tipografiche ci si avvale deltipometro, uno strumento in plastica trasparen-

te, composto da varie scale graduate in cui sonopresenti le misure in centimetri e in millimetri ele corrispondenti misure tipografiche.Nel 1770 F. A. Didot introdusse il sistema dimisura basato sul punto tipografico, che corri-

sponde a 0.375 mm. Il sistemavenne adottato da quasi tuttii Paesi europei, tranne che daInghilterra e Stati Uniti cheassunsero come unit di misu-ra un punto pari a 0,351 mm1.

A partire dal 1980, la parolafont stata usata in alternati-va con la parola carattere, perindicare la rappresentazionedi tutti i caratteri costituenti

uno specifico stile.Allinterno del font sono con-

1.Per ulteriori aggiorna-menti sui sistemi di misu-razione del carattere, sisuggerisce di consultare iltesto in bibliografia Far-si un libro (Bandinelli,

Lussu, Iacobelli, 1990)


27/141

tenuti anche i valori predefiniti degli attributidel carattere, come spaziature e interlinee, anchese possibile intervenire in qualsiasi momentoper modificarli. I font sono inoltre raggruppatiin famiglie, che ne descrivono le varianti di sti-le (condensed, extended, etc) e di spessore (bold,

medium, light, etc)2.

I font standard includono 26 lettere (maiuscole eminuscole), numeri (compresi tra 0 e 9) e carat-teri aggiuntivi (segni di punteggiatura, accenti,

caratteri o simboli particolari,segni di paragrafo, etc).Non tutte le categorie di fontcontengono per le stesse let-tere: nei font per titolazionead esempio, utilizzati solo in

grandi dimensioni, potrebbe-ro mancare alcuni caratteripresenti nei font di testo. Visono poi i set di caratteri spe-ciali, come font ornamentali o

2.Per ulteriori aggiorna-menti sulle font, si sugge-risce di consultare il testoin bibliografia Grafica& Stampa (Fioravanti,

1984)


28/141

simbolici, che normalmente non includono alcu-na lettera, ma solo simboli tipici del particolareset di carattere.Ricordiamo che sempre necessario comunica-re al tipografo che dovr stampare il progetto,la piattaforma utilizzata per creare il documen-

to (Windows o Macintosh) e inserire, insieme alprogetto, anche una cartella con tutti i font uti-lizzati allinterno del documento. Le font verran-no caricate sul sistema operativo in modo da nonavere problemi nella stampa finale del documen-

to. In alternativa si possono convertire i testi intracciati vettoriali.


29/141


30/141

Titolo di capitolo

KEYWO

RD

Tipi grafici

SERIFSAN

S


31/141

Il linguaggio scritto si evoluto nel corso deimillenni, facendo evolvere i caratteri dalla scrit-tura calligrafica degli amanuensi ai caratteri in-dustriali a piombo fino a quelli odierni digitali.Per organizzare questo patrimonio sono state

ideate numerose classificazioni degli stili di ca-rattere3. Di seguito vengono citati alcuni tra i pisignificativi sistemi di classificazione.

Aldo NovareseIn Italia, Aldo Novarese, stu-dioso di estetica del carattere edesigner per la fonderia Nebio-lo, propose una classificazione

in dieci gruppi, secondo criteristorici e formali (tipo di grazie).Questa classificazione compren-de i caratteri: lapidari, medio-evali, veneziani, transizionali,bodoniani, scritti, ornati, egizia-

ni, lineari e fantasie.

3.Per ulteriori aggiorna-menti sui sistemi di clas-sificazione delle categoriedi caratteri, si suggeriscedi consultare il testo inbibliografia Questioni dicarattere (Rattin, Ricci,

1997)


32/141

Lapidari

Il carattere lapidario, chiamato anche capitale qua-drata e maiuscola elegante, nasce per essere usa-to per le epigrafi e per le iscrizioni sui monumenti.

Aspetto riconoscibile di questi caratteri sono le gra-zie, le quali terminano formando un angolo di 30 ela base completamente piatta4.Un esempio quello presente in una stele del ba-samento della Colonna Traiana, eretta a Roma nel

114 d.C.. Si tratta di caratterile cui grazie sono triangolari eformano un angolo acuto con lalinea di base.Il carattere Trajan, maiuscolo emaiuscoletto, disegnato da Ca-

rol Twombly quello che me-glio rappresenta la digitalizza-zione del carattere lapidario5.

4. Per approfondimenticonsultare larticolo in si-tografia Come conoscereed utilizzare i caratteritipografici. Le classifica-zioni stilistiche5. Per approfondimenticonsultare larticolo insitografia Lapidari - Ro-mani Antichi (Classifica-

zione Novarese)


33/141

023

024

023.Carattere Trajan024. Dettaglio della Co-

lonna Traiana, Roma


34/141

Medioevali

I caratteri medioevali (chiamati anche gotici) sonocaratteri tipici del periodo di Gutenberg, che oggisono considerati di difficile lettura proprio per laloro pesantezza visiva. Si tratta di caratteri derivatidalle varie scritture usate nellAlto Medioveo e nelRinascimento. Sono caratterizzati dalle estremitallungate che terminano con angoli accentuati cheimitano le forme eseguite con la penna doca. Le ma-iuscole hanno spesso terminali molto svolazzanti.

Le grazie di questa tipologia di carattere sono anchedefinite a punta di lancia rivolta verso il basso.

025. Carattere Old Lon-

don 025


35/141

Veneziani

I caratteri veneziani derivano dai caratteri romaniantichi, sono caratterizzati dallestremit arroton-data delle grazie e dal piede dellasta leggermenteconcavo. Il carattere Garamond il pi adope-rato, ma vi sono altre tipologie di Veneziani: Bem-bo, Poliphilus Roman Blado Italic, Jenson,Garaldus, ITC Galliard, Golden, Caledo-nia, Centaur, De Roos, Elzevir, Sabon,Vendme, Romulus, Trajanus, Meno,

Minion, Van Dijck, Bitstream Iowan OldStyle, Serlio, Aurelia, Dante6.

6. Per approfondimenticonsultare larticolo in si-tografia Veneziani - Ri-nascimentali (Classifica-zione Novarese)026.Carattere Garamond

026


36/141

Transizionali

I caratteri transizionali sono tutti quei caratterinati tra il periodo degli Old Style e dei Moder-ni quindi tra la fine del XVII e il XVIII secolo.Le caratteristiche che contraddistinguono que-sti tipi di carattere riguardano le grazie le qualinon hanno quasi mai inclinazione e si unisconoallasta verticale con una piccola curva, mentre labase quasi completamente piatta7. Un esempiodi carattere transizionale lo Scotch Roman cre-

ato, probabilmente, da Richard Austin (n. 1765 m. 1830) e poi digitalizzato dalla Monotype.

7. Per approfondimenticonsultare larticolo insitografia Transizionali- Barocche (Classificazio-ne Novarese) e Comeconoscere ed utilizzare icaratteri tipografici. Leclassificazioni stilistiche027. Carattere Scotch

Roman

027


37/141

Bodoniani

I bodoniani sono caratteri classici ispirati a Giovan-battista Bodoni. Sono caratterizzati da un rapportodi spessore esasperato tra le aste e dal contrasto tragli spessori delle grazie e delle aste. Le grazie siuniscono con lasta verticale della lettera, formandoun evidente angolo retto e sono solitamente ridottea un filetto completamente piatto. Vengono moltoutilizzati sia in editoria che in pubblicit.

028.Carattere Bodoni

028


38/141

Scritti

Gli scritti sono detti anche calligrafici in quantosi avvicino alla scrittura a mano. Hanno caratte-ristiche eterogenee e variabili a seconda del tipodi strumento di scrittura che si imita. Si distin-guono in calligrafici legati o non legati.Alcuni esempi sono: Bo Chen Font, Desyrel, El-liot Six, Gorri Sans8.

8. Per approfondimenticonsultare larticolo insitografia 12 Font Scrit-ti a Mano per Uso Com-merciale e 50 BeautifulHand-Drawn Web De-sign

029.Carattere Desyrel

029


39/141

Ornati

I caratteri ornati sono caratteri con decorazioni ac-centuate e ombreggiature che di solito vengono uti-lizzati come capilettera e sempre affiancati ad altricaratteri9. Un esempio di tale carattere lOrnateInitial Styles Two Std ideato da Gerald Gallo.

9. Per approfondimenticonsultare larticolo in si-tografia Come conoscereed utilizzare i caratteritipografici. Le classifica-zioni stilistiche

030.Carattere Ornate

030


40/141

Egiziani

I caratteri egiziani nascono a seguito del ritro-vamento della stele di Rosetta oggi esposta alBritish Museum. Hanno molta forza espressiva.Sono riconoscibili per le grazie ad angolo retto.

031.Carattere Clarendon032. Dettaglio geroglifi-

co della stele di Rosetta 032

031


41/141

Lineari

I caratteri lineari sono detti anche pi comunemen-te bastoni o sans serif. Sono caratteri pi moderni,privi di grazie e spessori delle aste uniformi.Tra i pi famosi troviamo: Arial, Helvetica, Futura,Tahoma, Trebuchet MS e Verdana.

033.Carattere Futura

033


42/141

Fantasie

I caratteri fantasie comprendono tutti quei ca-ratteri che presentano degli effetti particolari odei fregi e non rientrano nelle precedenti catego-rie. Sono caratteri inventati senza nessuna regolacostruttiva10. Molto spesso presentano una riccaquantit di dettagli che per essere comprensibilidevono essere riprodotti in grandi dimensioni11.Un esempio dei caratteri fantasia il Critter, cre-ato da Craig Fraiser, nel quale ogni lettera rap-

presentata dal mondo animale,in particolare il nome di ognianimale inizia con la letterarappresentata: per esempio lalettera Z rappresentata da

una zebra. Questo tipo di ca-rattere composto da sole let-tere maiuscole.

10. Per approfondimenticonsultare larticolo in si-tografia Come conoscere

ed utilizzare i caratteritipografici. Le classifica-zioni stilistiche11. Per approfondimentisui caratteri fantasie, sisuggerisce di consulta-re il testo in bibliografiaTipografia digitale. Evo-luzione tecnica dei carat-

teri (Marvin, 1998)


43/141

Sistema Lawson

Il sistema AtypI (AssociationTypographique Internationale)venne adottato dallassociazio-ne tipografica internazionalee indica dieci categorie: Hu-mane (Tondi del XV sec), Ga-ralde (Francesi del XVI sec),Rale (Transizionali), Didone(Bodoni), Mcane (con grazie

squadrate), Linale (sans se-rif), Incise (caratteri con grazie034.Carattere Critter

034


44/141

triangolari), Script, Manuaire e Fractura.Il sistema DIN Schriften, fu proposto da HermannZapf nel 1967 e si fonda sulla classificazione in trecategorie di caratteri e relative sottocategorie: Ro-man (che comprende Renaissance, Baroque, Neo-classic, Free Roman, Linear, Block, Roman, Script),

Blackletter e Non-roman.Il sistema Typerfinder fu proposto da ChristopherPerfect e Gordon Rookledge nel 1983 e usa due ca-tegorie primarie e sedici sottocategorie. Il sistema

stato concepito per offrire unafacile identificazione dei diversistili di carattere. Le due catego-rie principali comprendono: stilidi carattere per il corpo del testoe stili di carattere decorative.

La classificazione che verrpresa in esame in questa sede quella attuata da Lawson, inte-grata da alcune nuove categoriealla luce della particolare evolu-

zione che la scrittura ha subitonellevoluzione contemporanea


45/141

del desktop publishing e dei media digitali. Le ulti-me due categorie in realt non rientrano nel sistemadi classificazione Lawson, ma importanti per lo svi-luppo che hanno avuto negli ultimi anni.La classificazione comprende le seguenti categorie:Blackletter, Serif (che comprende Oldstyle, Transi-

tional e Modern), Sans Serif (che comprende Grot-teschi, Geometrici e Umanistici), Script, Brush, De-corative, Pixel e Simboli (PI). Questa classificazionemette chiaramente in evidenza le diverse famigliedi caratteri, le differenze di stile e di uso proprie di

ogni singola categoria.Blackletter

I primi stili di carattere imitava-no i tratti dei pennini e dei pen-

nelli, utilizzati dagli amanuensi.Nei primi periodi della pubblica-zione editoriale infatti, lobbiet-tivo del grafico-compositore eraquello di creare dei documenti

che apparissero il pi possibilevicini ai costosi e preziosi lavori


46/141

trascritti manualmente.Questi stili che includono marcati caratteri di aspet-to gotico e medioevale, hanno quindi una forte con-notazione storica e una forte personalit.Poetica Chancery (disegnato da Robert Slimbach) rappresentativo dello stile cancelleresco usato da-

gli amanuensi prima di Gutenberg. La famiglia difont presenta diversi svolazzi nelle lettere maiusco-le e una gamma di caratteri alternati. Alcune lette-re prese dal Book of Kells, rappresentano lettere dimanoscritti sapientemente dipinti a colori.

Esempi di lettere con formegrafiche medioevali utilizzatenei Paesi germanici fino alla Se-conda Guerra Mondiale sono:il Wittenberger Fraktur (di-

segnato da Monotype DesignStaff nel 1903), il WilhelmKlingspor Gotish (disegnatoda Rudolph Koch nel 1925) e ilFette Fraktur (disegnato da C.E. Weber nel 1875).


47/141

Il Clairvaux (disegnato da Herbert Maring nel1981), il Duc De Berry (disegnato da Gottfried Pottnel 1990) e il San Marco (disegnato da Karlgeor-ge Hoefer nel 1990) invece hanno un sapore pretta-mente rinascimentale.

035035. Caratteri Blackletter


48/141

Serif

La parola grazia la traduzione della parola serif,ed un segno pi o meno accentuato, disegnato perraccordare unasta o un tratto, con funzione di orna-mento. Traggono la loro origine dal segno calligra-fico della scrittura (pennello, penna doca, etc).Sono i caratteri i cui estremi terminano con degliallungamenti ortogonali detti grazie che possonoessere pi o meno elaborate. Le grazie hanno una

valenza ornamentale ed esteticanel disegno del font stesso maanche la funzione percettiva dilegare visivamente tra loro lelettere. Prima si pensava chele grazie migliorassero la leg-

gibilit perch forniscono pielementi indicativi per locchio,ma studi pi recenti12hanno di-mostrato che le grazie sono pileggibili per coloro che sono

cresciuti leggendo caratteri conesse, mentre i caratteri senza

12. Per approfondimen-ti sugli studi riguardatila leggibilit consulta-re larticolo in sitografiaWhich Are More Legi-ble: Serif or Sans Serif

Typefaces?


49/141

grazie sono pi leggibili per quelli che sono statiabituati in questo modo13.I caratteri graziati vengono suddivisi in tre sotto-categorie: Old Style, Transitional e Modern.

13. Per approfondimentisulla distinzione tra ca-ratteri bastoni e graziativisionare il video Leggi-bilit Trebuchet http://www.youtube.com/watch?v=mhAPTgrCr6Q&feature=player_embedded

036. Caratteri Serif 036
http://www.youtube.com/watch?v=mhAPTgrCr6Q&feature=player_embeddedhttp://www.youtube.com/watch?v=mhAPTgrCr6Q&feature=player_embeddedhttp://www.youtube.com/watch?v=mhAPTgrCr6Q&feature=player_embeddedhttp://www.youtube.com/watch?v=mhAPTgrCr6Q&feature=player_embeddedhttp://www.youtube.com/watch?v=mhAPTgrCr6Q&feature=player_embeddedhttp://www.youtube.com/watch?v=mhAPTgrCr6Q&feature=player_embeddedhttp://www.youtube.com/watch?v=mhAPTgrCr6Q&feature=player_embeddedhttp://www.youtube.com/watch?v=mhAPTgrCr6Q&feature=player_embedded


50/141

I Transitional presentano un

forte contrasto tra gli spesso-ri del tratto e le grazie, che sipresentano molto sottili e dirit-te. Lasse del carattere quasiverticale. Fanno parte di questacategoria: New Caledonia, Fai-

rfield, Bulmer, Times New Ro-man, Stone serif, New Barske-ville e altri ancora.

I Modern per laspetto con-

trastante tra tratti spessi esottili, viene considerata una

La categoria Old Style ebbe inizio con il primocarattere tondo disegnato da Nicholas Jensen nel1470 e con il primo corsivo disegnato da Aldo Ma-nunzio14. Gli stili di carattere Oldstyle hanno lasseleggermente inclinato verso sinistra e presentanouno spessore di tratto uniforme.

Fanno parte di questa categoria: Aldus, Garamound,Granjon, Caslon, Minion, Palatino e altri ancora.

14. Aldo Manunzio ilpi importante editore estampatore del Rinasci-mento, a lui si deve laf-

fermazione definitiva delcarattere romano sul go-tico e alla diffusione deiprimi testi classici. Per ul-teriori approfondimenti sisuggerisce di consultare itesti in bibliografia Grafi-ca & Stampa (Fioravanti,1984) e Cinque secoli di

stampa (Steinberg, 1982)


51/141

categoria elegante, e con molta personalit.Fanno parte di questa categoria: (Bauer) Bodoni,Linotype Didot, Didot, Walbaum, Melior, Feni-ce, New Century School Book e altri ancora.

037. Caratteri Old Style,

Transitional e Modern

037


52/141

Sans Serif

Gli stili di carattere Sans Serif sono senza grazie,comunemente definiti con il termine di bastoni, ap-parsi per la prima volta in un campionario di carat-teri pubblicato da William Caslon IV nel 181615. Ildesign del carattere Sans Serif fu notevolmente in-fluenzato dagli studi del designer inglese Eric Gill16(n. 1882 m.1940), ideatore del carattere Gill Sans,i caratteri bastoni furono inoltre il campo di ricerca

e sviluppo del linguaggio mo-derno e razionalista del Staat-liches Bauhaus17 (1919 - 1933),la scuola architettura, arte e de-sign diretta da Walter Gropiusa Weimer Kandinskij, in Ger-

mania. La caratteristica pi im-portante ed evidente di questacategoria lassenza delle gra-zie, i caratteri Sans Serif si pre-sentano con un tratto uniforme

e sono particolarmente indicatiper titoli, titoletti o intestazioni,

15. Per approfondimentisi suggerisce di consulta-re il testo in bibliografiaTipografia digitale. Evo-luzione tecnica dei carat-teri (Marvin, 1998)16. Per approfondimentisu Eric Gill consultare ilsuo sito personale www.ericgill.com17. Per approfondimentisulla scuola di di architet-tura, arte e design tedescaconsultare il sito http://www.sapere.it/enciclope-

dia/Bauhaus.html
http://www.ericgill.com/http://www.ericgill.com/http://www.sapere.it/enciclopedia/Bauhaus.htmlhttp://www.sapere.it/enciclopedia/Bauhaus.htmlhttp://www.sapere.it/enciclopedia/Bauhaus.htmlhttp://www.sapere.it/enciclopedia/Bauhaus.htmlhttp://www.sapere.it/enciclopedia/Bauhaus.htmlhttp://www.sapere.it/enciclopedia/Bauhaus.htmlhttp://www.ericgill.com/http://www.ericgill.com/


53/141

ma non per passaggi di testo medio-lunghi.Fanno parte di questa categoria: Avant Garde, Tre-buchet, Helvetica, Gill Sans e altri ancora.I caratteri San Serif comprendono tre categorie: iGrotteschi, i Geometrici e gli Umanistici.

038. Caratteri Sans Serif 038


54/141

I caratteri Grotteschi nascono verso liniziodell80018 e prendono il nome dalle loro caratteri-stiche piuttosto grezze che successivamente ven-nero definite grottesche. Questi caratteri infat-ti sono caratterizzati da linee massicce e piuttostomarcate, senza la presenza di contrasto tra le linee19.

Un esempio di questa categoria di caratteri il Mo-notype Grotesque realizzato nel 1926 da Monotypecon il supervisione di Frank Hinman Pierpont (n.1860 - m. 1937).

I caratteri Geometrici si ba-sano, come suggerisce il nomestesso, sulle forme geometricheelementari. Il pi noto e rappre-sentativo il carattere Futuraprogettato nel 1928 dal tipogra-

fo e grafico tedesco Paul Renner(n. 1878 - m.1956).

I caratteri Umanisticisi basanosui manoscritti del 400 e richia-

mano molto le lettere romane. Icaratteri distintivi riguardano i

18. Per approfondimentisi suggerisce di consulta-

re larticolo in sitografiaClassificazionedeicarat-teriLineareMuseo vir-tuale della Stampa19. Per approfondimentisi suggerisce di consulta-re il testo in bibliografiaTipografia digitale. Evo-luzione tecnica dei carat-

teri (Marvin, 1998)


55/141

contrasti delle linee che risultano affusolate. Il pifamoso esempio di carattere umanistico lOptimacreato nel 1958 da Hermann Zapf (n. 1918)20.

20. Per approfondimentisi suggerisce di consulta-re il testo in bibliografiaTipografia digitale. Evo-luzione tecnica dei carat-teri (Marvin, 1998)039. Caratteri Grotte-schi, Geometrici e Uma-

nistici

039


56/141

Script, Brush

Questa categoria include qualsiasi stile che sem-bri creato con un pennino, simulando una calli-grafia o scrittura a mano libera. Le lettere presen-ti in questa categoria possono presentarsi comeformali ed eleganti, leggere, scritte a mano. Sonospesso inclinate e tendono per questo a unirsi traloro, il che le rende di non facile leggibilit.Fanno parte di questa categoria: Bertold script,

Vivaldi, Lucida Calligraphy,English, e altri ancora per lostile formale ed elegante. Co-mic sans, Mistral, Manolinescript, Caflish script e altri an-cora per lo stile a mano libera.


57/141

Decorative

Gli stili di carattere decorativepossono essere estremamenteelaborati e particolareggiati esono prevalentemente indicatiper titoli di grandi dimensioni oper specifiche esigenze, non de-vono assolutamente essere uti-lizzati nel corpo dei testi. Que-sti stili furono resi disponibili in

Inghilterra e in Francia a parti-re dal XVIII secolo e il loro nu-

040. Caratteri Script,

Brush

040


58/141

mero aument notevolmente in particolar modo inrisposta alla domanda degli inserzionisti.Fanno parte di questa categoria: Bremen, Broadway,Stencil, Mesquite, PepperWood, Bernard Fashion,Visigoth, Stop, Umbra, Futura Black, Christmas ealtri ancora.

041. Carattere Christmas

041


59/141

Pixel

Appartengono a questa categoria i font nati per lavisualizzazione a monitor. I caratteri di questa ca-tegoria sono costituiti da veri e propri punti (pixel),il loro disegno geometrico e squadrato, disegnatocome unimmagine bitmap, punto per punto e dun-que non presentano alcuna curva. Grazie alla lorocaratteristica di essere costituiti da singoli pixel,sono leggibili anche a dimensioni molto ridotte21.Un esempio di questi caratteri il Paskowy che ri-

corda quello utilizzato nei codici a barre.

21. Per approfondimentisi consiglia di consulta-re larticolo in sitografiaPixel Font cosa sono edove trovarle?042.Carattere Paskowy 042


60/141

Simboli (PI)

I caratteri PI, spesso chiamati anche Simboli, noncontengono lettere e numeri, ma solo elementigrafici, pittogrammi o icone di diverso genere, aseconda della tipologia di font selezionato. Que-sta famiglia di caratteri viene utilizzata quindiper inserire simboli, disegni o elementi grafici,non testuali, tipici dello stile selezionato.I tipi di carattere PI sono principalmente segnidecorativi, orologi, simboli ferroviari, numeri

racchiusi in cerchi ed altro. Alcuni esempi sono:Zapf Dingbats, Webdings e Wingdings.

043. Caratteri Simboli

043


61/141


62/141

La composizione

FEATUR

E


63/141

Scopo di questo paragrafo analizzare gli attri-buti del testo che ne delineano laspetto tipografico:stile, dimensione, giustezza di riga, spaziatura e in-terlinea, colore, giustificazione, griglia, margini, co-lonne e altro ancora. Questi concetti vengono spesso

erroneamente trascurati, ma rivestono unimpor-tanza fondamentale nella gestione dellintero testoe dellintero layout di pagina. Prestando attenzionead attributi come allineamenti e interlinea, il testo

risulter maggiormente leggi-bile e il design generale dellapagina migliorer, acquistandoarmonia e qualit estetica.Quando si lavora con il testo utile conoscerne gli elemen-

ti che vanno dalla selezione diuno stile alle scelte dei relativiattributi, fino ad arrivare al suoposizionamento allinterno del-la pagina, nella griglia di impa-

ginazione. Quando un individuolegge un brano, compie delle


64/141

Interlinea

Per interlinea si intende lo spa-zio tra le linee di testo, a parti-re dalla linea di base di una riga

di testo superiore, a quella dellariga inferiore. Linterlinea vie-ne misurata dalla linea di basedi una riga, alla linea di basedi unaltra riga. Nella sceltadellimpostazione dellinterlinea

necessario tenere conto dei

azioni percettive piuttosto articolate e complesse: ilsuo occhio segue la riga di testo con discontinuit,a sbalzi (scatti), questi salti si alternano a momen-ti di fissazione, in cui locchio si ferma per qualchefrazione di secondo. soltanto in questo periodo difissazione che viene percepita linformazione visiva.

Nel periodo di fissazione, locchio del lettore nonregistra i singoli caratteri, ma intere parole o partidi esse. Conoscere questo processo, pu servire perscegliere i giusti criteri di composizione del testo22.

22.Per ulteriori informa-zioni sui sistemi di per-cezione visiva legati allalettura di un testo scrit-

to e in generale per ana-lizzare le principali lineeguida della progettazio-ne grafica, si suggeriscedi consultare il testo inbibliografia Il partico-lare nella progettazionegrafica (Heller, Ghwast,1988), (traduzione a cura

di Girardello, 1997)


65/141

criteri di leggibilit del testo e si consiglia sempredi effettuare diverse prove di stampa, per stabilireil valore pi indicato, per poi passare alla composi-zione definitiva. Si pu notare infatti come variandolinterlinea, cambi laspetto generale dello stile dicarattere e di conseguenza anche della leggibilit.

Molti programmi di editing di testo e di impagina-zione grafica, assegnano in modo predefinito unin-terlinea, pari a circa il 120% della dimensione delcorpo del carattere. Per cui un corpo pari a 12 ptavr uninterlinea pari a 14 pt e verr indicata con la

seguente dicitura 12/14.Ricordiamo tuttavia che ognifamiglia di carattere ha propriecaratteristiche specifiche (dise-gno delle lettere, dimensioni e

proporzioni), si consiglia quindidi calcolare e specificare il realevalore dellinterlinea che megliosi adatta alla tipologia di carat-tere e alluso che se ne deve fare(testo da leggere, titolazione,

testo decorativo).


66/141

044. Spaziatura alto va-lore045. Spaziatura valorestandard046. Spaziatura valore ri-

dotto

044

045

046


67/141

Spaziatura

La spaziatura lo spazio tra le lettere. Quasi tutti isistemi di impaginazione elettronica permettono divariare il valore predefinito di spaziatura.Il controllo della spaziatura un modo eccellenteper gestire ed eliminare vedove e orfane (singole pa-role o sillabe che ricadono nellultima riga di testo oallinizio di una pagina o di una colonna successiva),e per ottenere effetti particolari sul testo.

necessario usarla con caute-la, nei casi di testo da leggere,le lettere devono infatti essereadeguatamente distanziate, per-ch la loro forma possa interagi-re correttamente con le lettere

circostanti, secondo le propor-zioni ottimali e armoniche defi-nite dal font designer. Un ecces-sivo avvicinamento pu renderecomplicata la lettura del testo,

un eccessivo allontanamentorende altres difficoltoso il pro-


68/141

cesso di lettura, nel combinare le lettere, troppo di-stanziate, per formare le parole.

Giustezza

La giustezza di una colonna di testo, indica quanto lunga la riga di testo. La giustezza di un testo molto importante ai fini della sua leggibilit e delsuo inserimento allinterno della griglia di impagi-

nazione. Ma quanto deve esserelunga una riga di testo? Dipen-de dal tipo di carattere utilizza-to, dal relativo corpo, dal layoutcomplessivo della pagina e datutti gli attributi impostati.

Un testo troppo lungo (larghez-za di riga eccessiva), rende dif-ficoltoso il processo di lettura,una volta arrivati alla fine del-la riga, si trova difficolt nel ri-

trovare quella successiva. Percontro, un testo troppo corto


69/141

(larghezza di riga minima), costringe locchio adeffettuare troppi salti e troppe interruzioni di riga,rendendo anche in questo caso il processo di letturadifficoltoso e stancante.

Paragrafi

La giustificazione il modo in cui viene allineatoo giustificato un testo. Ci sono diversi modi per al-

lineare un testo, i pi utilizzatisono: composizione giustificata,composizione centrata e compo-sizione a bandiera.Altri modi pi personalizza-ti e usati in contesti particolari

sono: la composizione a sagoma(quando tutte le righe del bloc-co di testo seguono la sagomadi un disegno o tracciato), e lacomposizione a giustezza cre-

scente o decrescente (quando lerighe variano in modo costante,


70/141

aumentando o diminuendo).Si consiglia di impostare il tipo di giustificazione inbase al tipo di progetto e in base al layout graficodella pagina (elementi, oggetti grafici, illustrazionie struttura dellimpaginato).

Composizione giustificata (a blocchetto)

Nella composizione a blocchetto, le righe hannouguale lunghezza e il testo allineato in modo da

avere entrambe i margini ugualie perfettamente regolari. In al-cune applicazioni vi la possi-bilit di selezionare una giusti-ficazione centrata (lultima rigadi testo viene centrata rispetto

alla larghezza del blocco di te-sto), oppure una giustificazionea destra (lultima riga di testoviene allineata al margine de-stro del blocco). Questo tipo di

composizione la pi utilizzata,per i libri e in generale per tut-


71/141

ti i documenti con lunghi passaggi di testo, perchfacilita il processo di lettura. Una buona composi-zione di questo tipo non facile da realizzare e vagestita con la giusta calibrazione della spaziaturafra le parole. La lettura diventa infatti sgradevolequando si vengono a creare buchi bianchi, dati da

una giustificazione di tipo forzato.

Composizione centrata (aepigrafe)

Nella composizione a epigrafe,le righe, di diversa lunghezza,vengono centrate rispetto allalarghezza del blocco di testo, se-condo un asse centrale. prefe-

ribile usarla per brevi passaggidi testo, perch produce un af-faticamento della vista nellan-dare sempre a cercare linizio diogni nuova riga.


72/141

Composizione a bandiera

Nella composizione a bandiera, le righe, di diversalunghezza, sono allineate al margine destro (ban-diera spalla destra) o sinistro (bandiera spalla sini-stra) del blocco di testo.In questo tipo di composizione c il vantaggio diavere spaziature uniformi, non condizionate dalle-sigenza di arrivare a giustezza e di avere un alline-amento stabile a sinistra o a destra, soprattutto in

assenza di sillabazione delle pa-role (si ricorda che lallineamen-to a destra pi difficoltoso perla lettura, almeno nella nostracultura occidentale, in cui lor-dine di lettura da sinistra a de-

stra. Viene utilizzato solo in casispecifici e per brevi passaggi ditesto). Lo svantaggio della com-posizione a bandiera quello dinon avere un punto determinato

per la fine di ogni riga.


73/141

047. Composizione giu-stificata (a blocchetto)048. Composizione cen-trata (a epigrafe)049.Composizione a ban-

diera (sinistra e destra)

049

047

048


74/141

Margini e colonne

Quando si progetta un qualsiasi prodotto edito-riale (libro, catalogo, brochure, rivista, etc) ne-cessario prestare attenzione allo spazio occupatoda testo e immagini, ma anche allo spazio vuotocircostante. Per molto tempo, nellimpaginazio-ne di libri e riviste, i margini utilizzati sono sta-ti quelli di concezione tipicamente classica, conforti simmetrie e con un andamento decisamen-

te regolare, ancora applicabiliper una produzione sobria eraffinata. Si sono tuttavia svi-luppati altri modi di compo-sizione pi moderni e a volteanche pi esasperati, partico-

larmente adatti per limpagi-nazione di progetti editorialipubblicitari, cataloghi e impa-ginati ricchi di illustrazioni,in cui la segmentazione della

superficie non risulta pi sim-


75/141

metrica e regolare, ma fluida e dinamica.Una buona regola quella di controllare la giu-stezza delle colonne, in relazione allinterlineae al tipo di carattere utilizzato e lasciare spaziosufficiente affinch i caratteri non siano tropporavvicinati al margine esterno della pagina e le

colonne di testo non siano troppo attaccate traloro (a meno di effetti esasperati, ma voluti).

Tono e colore

In una pagina stampata, ladensit delle lettere vienechiamata colore, e indica iltono chiaroscurale della mas-sa tipografica, che determinalimpressione di nero (impres-sione di colore). Questa sensa-zione di colore pu essere pro-vocata da un paragrafo, da unacolonna o da un gruppo di co-

lonne allinterno della pagina,dal tipo di font utilizzato, dal


76/141

relativo corpo, dallimpostazione dei valori inter-lineari e di spaziatura, dal tipo di giustificazionee dallirregolarit stessa delle righe.Se si socchiudono leggermente gli occhi e si os-servano i tre blocchi di testo proposti, si pu no-tare con chiarezza il diverso impatto chiaroscu-

rale di questi, in relazione allimpostazione deidiversi attributi. Questo esercizio utile ancheper valutare il layout complessivo di una pagina:rapporti fra testo, immagini e spazi bianchi.


77/141


78/141

La forma del testo

LEGIBIL

ITY


79/141

Fino ad ora si parlato del testo in modo pura-mente tecnico, definendo lanatomia dei caratteri elaspetto tipografico, ma lettere e parole hanno unproprio stile e una propria personalit e andandoad inserirsi allinterno di uno spazio, si caricano di

valenze emotive molto forti. Esiste una stretta re-lazione tra parole e immagini e tra parole e spaziocompositivo e senso.

Relazioni dimen-

sionali

In questo paragrafo vengonoanalizzate le relazioni dimensio-nali e di senso che si vengono acreare tra testo e spazio compo-

sitivo. Ipotizziamo di scegliereun formato di pagina e di inseri-re al suo interno la parola eGu-tenberg. Se si effettuano diverseprove, se si inserisce ad esempio

la parola nel punto centrale del-la pagina con un corpo molto


80/141

piccolo (8 pt) e se si inserisce la stessa parola nellostesso punto, con lo stesso font ma di dimensioniconsiderevolmente superiori si potr notare comecambiando semplicemente il corpo del carattere, siconferisce un impatto completamente diverso al lay-out, sia da un punto di vista visivo, che da un punto

di vista puramente emotivo e di significato.Tra testo e spazio infatti, vi una forte relazione,che assume differenti valenze espressive, indipen-

dentemente dal significato delleparole inserite. Aumentando odiminuendo il corpo del testo inrelazione al suo spazio, si posso-no ottenere effetti emotivamen-te e visivamente diversi.


81/141

050. Relazioni dimensio-nali tra testo e spazio051. Relazioni dimensio-

nali tra testo e spazio

050

051


82/141

Se il testo si espande su tutta la pagina, come ungrosso titolo, d unimpressione di prepotenza,risalto e forza, viceversa se si presenta piccolo, atal punto che lo spazio vuoto della pagina acqui-sta rilievo, limpressione che si avr sar quelladi un testo pi elegante e raffinato, sottovoce, in-

trigante e discreto. Se il testo si muove seguendoun tracciato immaginario, il risultato sar frivoloo personalizzato.Dallinvenzione della stampa ad oggi, sono stati

disegnati e prodotti migliaiadi caratteri e nonostante que-sto ne vengono continuamentedisegnati di nuovi. Gli esempiriportati, fanno capire chiara-mente come la stessa scritta,

possa caricarsi di significato,valenza emotiva e estetica, aseconda del tipo di caratterecon la quale la si interpreta.A seconda del tipo di font uti-

lizzato, della dimensione/cor-po che gli viene attribuita in


83/141

relazione al format del documento e in base alposizionamento nel layout grafico, si ottengonodiversi tipi di composizioni con un diverso im-patto visivo ed emotivo.Il risultato ovviamente sempre soggettivo e in-terpretabile secondo la propria esperienza e la

propria sensibilit percettiva23.

23. Per ulteriori infor-mazioni sulla relazionedimensionale tra il testoscritto e lo spazio com-positivo si suggerisce diconsultare il testo in bi-bliografia Le vie del sen-so (Testa, 2004)052. Valenza emotiva di

scritta Bastoni

052


84/141

053

053. Valenza emotiva discritta Decorative054. Valenza emotiva di

scritta Script

054


85/141

Linee guida per la composizio-ne tipografica

Poich il carattere deve soddisfare esigenze diverse,a seconda del tipo di progetto cui andr ad inserirsi,

non possibile definire in modo assoluto quale tipodi carattere e che tipo di impostazioni risultano es-sere pi adatte. ovvio che i caratteri e le relativeimpostazioni, destinati ad un uso prettamente tipo-grafico, debbano rispettare criteri diversi da quelli

destinati ad usi pi grafici e per-sonalizzati. Il divario tra questidue orientamenti piuttostogrande: limpaginazione del te-sto a scopo grafico assai lon-

tana dalla gestione di un testoad uso lettura. Un testo scrittodeve possedere un aspetto cor-retto, deve cio essere costrui-to seguendo quelle che sono leprincipali linee guida, che favo-

riscano il processo di lettura,


86/141

memorizzazione e apprendimento.Di seguito vengono proposte alcune importanti li-nee guida che si rivelano utili per una corretta ge-stione tipografica del testo: La leggibilit di un testo diminuisce quando vienea mancare il contrasto tra testo e sfondo. Per passaggi di testo medio/lunghi consigliabileinserire testo nero su fondo bianco, rispetta le rego-le classiche del processo di lettura, aiuta la leggibi-lit e non affatica la vista.

Il contrasto testo bianco sufondo nero conferisce un aspet-to elegante e raffinato, ma vausato con molta cautela perchaffatica notevolmente la vista.

Evitare di usare troppi ca-ratteri diversi allinterno dellostesso documento, per evitareun effetto di disordine e ambi-guit, in cui nulla realmenteevidenziato e in cui non si rie-

sce ad identificare la gerarchia


87/141

di lettura. Lideale sarebbe usare uno o al massimodue tipi di carattere, opportunamente selezionati:un graziato per i blocchi di testo e un bastoni pertitoli e titoletti (vi sono dei set di caratteri bastonimolto leggeri e sottili che possono prestarsi senzaparticolari problemi ad essere inseriti nel corpo di

testi anche medio/lunghi). Si consiglia, per creare la giusta gerarchia allin-terno del progetto, di giocare con diverse dimensio-ni e varianti di peso dello stesso carattere. Si otterrun effetto pi ordinato, gradevole e percettivamente

ben organizzato. Evitare di scegliere tipi di ca-rattere troppo spessi/scuri otroppo sottili/chiari. I caratte-ri troppo spessi e neri sono di

difficile leggibilit e stancanolocchio, perch troppo marca-ti, cos pure quelli troppo sot-tili e chiari, che si distinguonoappena dallo sfondo, produconoanchessi sforzo visivo. Assegnare un corpo di dimen-


88/141

sioni leggibili: il corpo di un testo leggibile varia tra8 e 12 punti. Si tenga presente che un corpo 8 con-sigliato per piccoli riferimenti e note e un corpo 12 decisamente grande. Per passaggi di testo medio/lunghi consigliabile un corpo tra i 9 e gli 11 pun-ti. Ricordiamo che ogni stile di carattere ha proprie

dimensioni, in funzione dellapertura dellocchiel-lo delle lettere: gli 8 punti di uno stile di caratterenon coincidono sempre agli 8 punti di un altro ca-rattere. A parit di corpo, un carattere con un oc-

chiello grande pi leggibile diuno con un occhiello piccolo ostretto. Ricordiamo inoltre che sempre utile fare delle provedi stampa. Lalfabeto provvisto di let-

tere maiuscole e minuscole, chedevono essere combinate performare un insieme armonico eleggibile del testo. Lalternanzadi maiuscole e minuscole facil-

mente leggibile perch alternalettere ascendenti e discendenti,


89/141

quindi il modo pi comune per comporre un testoed quello cui il lettore maggiormente abituato.La presenza delle maiuscole, fornisce punti di rife-rimento (le maiuscole ad esempio, evidenziano chia-ramente linizio di una frase). Limpiego esclusivodi lettere maiuscole o minuscole, produce un senso

di uniformit, perch ritmicamente indistinto. Loc-chio non ha pi punti di riferimento e il processo dilettura risulta rallentato con notevole affaticamen-to dellocchio. Luso del tutto maiuscolo pu esserefinalizzato allevidenziazione di una parola singola

o di un gruppo di parole, peresempio in titoli o in corpi mol-to grandi. Le parti di testo che si desi-derano evidenziare, vanno mes-se in risalto in modo corretto,senza interferire con il processodi lettura. Lobbiettivo infattiquello di chiarire il contenutoe distinguere le singole parti ditesto. Per evidenziare una paro-

la o una parte di testo in modoefficace consigliabile usare il


90/141

corsivo, mentre per evidenziare in modo pi mar-cato si consiglia di utilizzare il grassetto. Ci sonoaltri sistemi di evidenziazione: la sottolineatura, ilcolore, il maiuscolo e il maiuscoletto. possibile assegnare colore al testo, purch sianetto il contrasto testo/sfondo, assegnando il colo-

re su passaggi di testo relativamente corti, per vei-colare lattenzione e per conferire senso specifico. La spaziatura fra le lettere deve essere impostatain modo corretto: bene scegliere tipi di caratteri

con una spaziatura media (im-postando se necessario un gradodi spaziatura adatto, non troppoespanso n troppo ristretto).Lestrema espansione o conden-sazione pu rendere difficoltoso

e illeggibile il testo. La leggibilit di un testo di-pende in larga misura dallim-postazione dello spazio interli-neare. Linterlinea deve essere

impostata in modo da facilitare


91/141

il movimento dellocchio tra le righe. Un insufficien-te spazio interlineare rallenta e disturba il processodi lettura, perch locchio portato a guardare pirighe contemporaneamente, per contro anche unospazio interlineare eccessivo, disturba in quanto lerighe si presentano troppo distaccate e locchio non

trova pi punti di riferimento. Lo spazio interlineare serve per controllare vedo-ve e orfane. Una vedova una singola parola chericade alla fine di un paragrafo, sullultima riga.Unorfana una singola sillaba che ricade alla fine

di un paragrafo, sullultima riga. sempre consigliabile evitarnela presenza perch generano pa-gine irregolari e poco uniformi. La riga di testo un altro

elemento da non sottovaluta-re: le righe devono infatti esse-re di lunghezza appropriata, ntroppo lunghe, n troppo corte.Quando la lunghezza delle ri-ghe eccessiva, locchio si stan-

ca perch fatica a collegare le


92/141

righe successive, viceversa, se sono troppo corte, costretto a continui spostamenti e sbalzi. Bisognaimpostare colonne di testo di dimensioni adeguate! Scegliere il tipo di giustificazione adatto al tipo ditesto che si sta manipolando e al layout grafico.

Il design editoriale

Abbiamo parlato di tipografia,trattando la grammatica del

suo utilizzo e le principali li-nee guida, necessarie e utili peruna corretta gestione del testoallinterno del progetto grafico.Si dato particolare risalto allevarie scelte tipografiche, che in-

cludono la scelta dei caratteri, lerelative dimensioni, il colore diriempimento delle singole lette-re e il colore di sfondo, in rela-zione al format di pagina, dando

risalto al fatto che una buona ge-stione del testo, contribuisce ad


93/141

evidenziare il significato di ci che scritto e di tuttoil layout di pagina. Abbiamo visto come uno stessotesto inserito in uno stesso format di pagina, possaconferire impressioni diverse a seconda delle modi-fiche apportate. Lo spazio in cui si sviluppa il testopu essere organizzato secondo un preciso schema,

cos da veicolare un preciso significato grazie allagestione del testo stesso e delle singole lettere, non-ch degli aspetti grafici complessivi. Abbiamo vistocome uno dei problemi principali legati alla proget-

tazione sia quello di inserire nelpunto giusto i diversi elementidel testo, abbinandoli ad imma-gini, elementi grafici e colore.Lobbiettivo finale quello dimettere in ordine e creare pre-

cise gerarchie di lettura, confe-rendo al tutto leggibilit, este-tica e valore espressivo dando ilgiusto valore ad ogni elemento.


94/141

055.Contrasto tra testo esfondo056. Testo nero su fondobianco: standard di lettu-ra057. Testo bianco su fon-

do nero: forte contrasto 057

055

056


95/141


96/141

Tipografia web

NEWSTY

LE


97/141

Con lintroduzione dei CSS e labolizione defi-nitiva del tag considerato deprecated dalW3C a partire dallHTML 4.0, per la tipografia websi sono aperti nuovi scenari.Pur nella limitatezza delle risorse progettuali e del-

le scelte tipografiche i CSS hanno introdotto unaserie di controlli sulla progettazione tipica e specifi-ca della formattazione del testo che permettono unagamma di scelte orientata verso la ricchezza della

cultura tradizionale della grafi-ca in questo settore. Sintomo diqueste nuove opportunit sonoper esempio linterfaccia stessadel blog di Zeldmann A listapart24 che oltre a discutere

a livello teorico delle potenzia-lit del web implementa e spe-rimenta quanto di nuovo stasuccedendo. O la versione per ilmondo del digitale di un classi-

co della tipografia come The ele-ments of Typographical Style del

24. www.alistapart.comdal 2011 anche nella ver-

sione italiana
http://www.alistapart.com/http://www.alistapart.com/


98/141

Bringhurst25

che ne estende le riflessioni teoriche almondo del web.Il primo problema da affrontare nella scelta dei font,almeno per la parte testuale realizzata in codice diuna pagina web, quella della compatibilit tra unapiattaforma e laltra, e/o le diverse versioni dei si-

stemi operativi che installano di default alcune fa-miglie di font prestabilite.Al cambiare dei sistemi operativi cambiano infattii font installati e questo fa si che il lettering debbaessere scelto sia per il giusto valore espressivo, di

leggibilit, di gradevolezza e diidentit rispetto alla comunica-zione ma anche e soprattutto ri-spetto alla compatibilit tecno-logia/software scelta. Possiamo

scegliere di implementare del-le pagine con font non browsersafe, ma in assenza del font sullamacchina dellutente, questulti-ma andr a selezionare, se nondiversamente da specificato nel

codice, il primo font di default

25. Si veda il proget-to web: www.webtypo-

graphy.net
http://www.webtypography.net/http://www.webtypography.net/http://www.webtypography.net/http://www.webtypography.net/


99/141

disponibile sul browser o quello impostato dallu-tente stesso con effetti imprevedibili.In questo senso i font dovrebbero essere sceltiallinterno di una rosa purtroppo molto ristrettadi caratteri che risultano essere presenti in prati-ca su ogni piattaforma/computer: bastoni: Arial e Verdana graziati: Times (Times New Roman) e Georgia monospaziati: (New) Courier

058. Web font

058


100/141

In particolare Verdana e Georgia26

sono stati di-segnati da Mattew Carter autore tra laltro delMS Trebuchete dei nuovi font introdotti nel nuovosistema operativo di Microsoft Vista, anche se almomento non disponibili su MacOSX a parti-re dal 1994 espressamente per la massima leggi-

bilit a monitor27. Prendendole mosse dalla tipografia tra-dizionale e dalla sua culturaespressiva Carter ha lavorato

con estrema accuratezza sul-la forma, la dimensione degliocchielli, la proporzione dellesingole lettere ed il loro dise-gno in maniera tale che questedue famiglie di font manten-

gono buona leggibilit anchein condizioni estreme, comela visualizzazione a monitor,la mancanza di anti-aliasing28,corpi piccoli al limite della re-

stituzione grafica di un me-dia a bassa risoluzione come

26. Per approfondimenticonsultare il sito www.will-harris.com27. Per ulteriori infor-mazioni si suggerisce di

consultare il testo in bi-bliografia Organizzarepresentazioni efficaci(Bollini, Greco, 2008)28. Effetto di sfumaturache permette la simula-zione dellarrotondamen-to delle lettere e cerca

di simulare rotondit ovariazione dello spesso-re dei tratti per esempiodelle grazie. In genere, larenderizzazione a moni-tor di un font, in assenzadi questa correzione visi-va risulta un disegno ge-

ometrico scalettato
http://www.will-harris.com/verdana-georgia.htmhttp://www.will-harris.com/verdana-georgia.htmhttp://www.will-harris.com/verdana-georgia.htmhttp://www.will-harris.com/verdana-georgia.htm


101/141

il digitale. I modelli sono sicuramente i grandiclassici sia tra i bastoni, Helvetica tra tutti e igraziati il Times, ma lelaborazione originale co-niuga le qualit storico espressive con le esigen-ze particolari di rendering su un medium in cuilinchiostro, il piombo e la carta sono scomparsi.

059. Arial - Verdana,

Times - Georgia

059


102/141

Ma la scelta del carattere implica non solo de-gli accorgimenti tecnici, ma anche precise scelteespressive e di significato oltre che di caratteriz-zazione del messaggio. Pur nella limitatezza deisupporti di una presentazione digitale esiste unaforte relazione tra la scelta del carattere spazio

compositivo e senso (Testa, 2004).La scelta del carattere risponde cio a due esi-genze distinte e coesistenti:

aspetto funzionale: a livellostrumentale come veicolo del-la parola e dellinformazione iltesto deve assolvere a regoledi leggibilit; aspetto espressivo: a livellodi percezione conferisce alla

composizione ritmo, gerarchiae personalit.


103/141

Le dimensioni contano

Limplementazione dei CSS e dei nuovi browserha permesso un sempre maggio controllo da par-te dellutente finale anche sulla visualizzazionedel testo di un sito: infatti possibile aumentareo diminuire a piacimento la dimensione del corpodel carattere a seconda del contesto di fruizionein cui ci si trova e in base alle proprie esigenze.Questo rende meno problematica da parte del de-

signer la stima dellipoteticadimensione settata di defaultnelle preferenze del browser eche diventa il parametro di ri-ferimento per tutto il resto deldimensionamento dei caratte-

ri nella pagina. Daltro cantoperch ci sia possibile si deverinunciare alluso di unit dimisura fisse convenzionalicome i pixel e o punti tipogra-

fici in favore di un dimensio-namento fluido e percentuale


104/141

o meglio ancora in .em del testo stesso.Il concetto che sta alla base di una buona gerar-chia tipografia in questo senso quello di rappor-to proporzionale e dimensionale piuttosto che didimensione fissa. Non bisogna dimenticare che lapercezione della grandezza del carattere dipende

anche dalla risoluzione dello schermo. Il concet-to da tener presente perci quello relativo dipi piccolo o pi grosso nella gerarchia comples-siva della schermata.

Formattazione esemantica

Oltre alla scelta del font ab-biamo anche a disposizione,

per creare gerarchie di letturail trattamento stesso del testo.Con la separazione del codicestrutturale e presentaziona-le questo pu generare taloraconfusione tra quanto indicato

a livello di semantica del codi-


105/141

ce con un tag specifico e le aspettative di visua-lizzazione, gestibili invece con i CSS. Leffetto digrassetto o bold come sono attual-mente tra banditi dal W3C proprio per la com-ponente visiva anzich semantica dellindicazio-ne di markup stato sostituito da :

un tag che pone accento dal punto di vista dellagerarchia e dellimportanza della stringa di testoin esso racchiusa, di default, poi molti browserlo interpretano visivamente come grassetto (tra-

mite CSS potremmo gestire lasua formattazione in manieratotalmente difforme mante-nendo tuttavia salvo il suo si-gnificato strutturale).Analogamente il corsivo cor-

risponde a cio allenfa-si: meno leggibile a monitor,viene utilizzato per isolaresingole parole dal contesto,indicandone per esempio un

uso particolare, la necessit dispiegarne il significato in quel


106/141

particolare contesto.Il tutto maiuscolo utilizzato soprattutto per ti-tolazioni o parole da mettere in evidenza rendela lettura pi difficoltosa: la mancanza di ascen-denti e discendenti toglie infatti gli elementi diancoraggio ottico che il nostro occhio utilizza

per scandire la lettura, fondamentali nelle pagineweb fluide e variabili. Inoltre secondo la Neti-quette equivale ad urlare!Infine, pur esistendo il tag , la sottolineatura

ereditata dalla macchina dascrivere, sinonimo in genere dicorsivo va riservata tassati-vamente ai collegamento iper-testuale essendo lelementografico visivo che contraddi-

stingue fin dalle origini i linkallinterno di un ipertesto.


107/141

Interlinea

Studi condotti sulla percezione e sulla lettura a mo-nitor hanno dimostrato che uninterlinea superiorerispetto a quella tipografica classica aiuta la letturasui supporti digitali29.Normalmente linterlinea il 120% del corpo(14/16,8 pt); a monitor linterlinea ottimale trail 130-150% del corpo in funzione della lunghezzadelle righe di testo (14/18,2 pt).

Inoltre uninterlinea troppo ri-dotta, utilizzata magari per ri-sparmiare spazio di scrolling,rende le righe troppo compatte,magari con una sovrapposizionetra le ascendenti e le discenden-

ti tra righe successive, creandoconfusione e difficolt di lettu-ra. Viceversa uninterlinea trop-po grande, con cui si cerca disopperire al vuoto, produce un

effetto di dispersione che rendedifficile al nostro occhio scorre-

29. Si veda il lavoro in bi-bliografia Grids for theInternet and other digital

media (Gtz, 2002)


108/141

re la sequenza delle righe: in questo caso sarebbemeglio piuttosto giocare sulla giustezza del testoche non sullinterlineatura.

I paragrafi: giustezza del testo

Le righe di testo dovrebbero contenere indicativa-mente una cinquantina di caratteri per mantenereun buon rapporto proporzionale con la dimensionedel carattere stesso. Al di sotto il rischio che le

frasi risultino troppo frammen-tate con una difficolt di coglie-re intuitivamente il senso. Unalunghezza eccessiva invece co-stringe a scomodi movimenti

del capo e rischi di far perdere ilfilo della lettura nella sequenzadelle righe.Per quello che riguarda gli al-lineamenti dei paragrafi stessi,

ferme restando le indicazionie le consuetudini adottate nel-


109/141

la tipografia tradizionale, su web andrebbe sempreevitato il giustificato. Lallineamento regolare sulbordo destro dei paragrafi, quello che il nostro oc-chio scorre prima di riprendere il filo sulla riga suc-cessiva, rende estremamente difficile mantenere ilsegno soprattutto in caso di scroll.

La variabilit del margine allineato a bandiera, oltread ovviare al problema della mancata sillabazione,crea degli ancoraggi ottici che aiutano la fluidit dilettura anche in condizioni dinamiche come nel casodel web.

060. Ancoraggio visivo

060


110/141

I link

I link sono testi che svolgono la funzione diaction triggerscio permettono di scatenare delleazioni, come accedere ai collegamenti ipertestua-li, avviare una procedura di registrazione, il re-cupero di una password, linvio di una mail etc.allinterno di una pagina web.La loro visibilit deve perci essere rafforzatarispetto agli altri elementi testuali ed emergere

rispetto al contesto grafico ecognitivo della pagina.Diversi sono i modi conven-zionali e/o progettabili divolta in volta per rendere ge-rarchicamente evidenti ed ap-

prezzabili i link:

Sottolineati: tradizional-mente gli elementi linkatie/o cliccabili nel web erano, in

assenza di altre possibilit diformattazione grafica, sottoli-


111/141

neati. Questo segno visivo inequivocabile, visibi-le anche a basse risoluzioni, in piccole dimensionie su schermi monocromatici aiuta sicuramente areperire a colpo docchio gli elementi ipertestualidella pagina, a patto che venga utilizzato in ma-niera univoca. Pur avendo a disposizione TAG e

elementi per la formattazione CSS in questo sen-so lunderline va tassativamente riservato ai link.Come segno di enfasi editoriale (un tempo alter-nativo e sinonimo di corsivo, per esempio nei ti-

toli dei libri e delle pubblica-zioni) va preferito pernon generare ambiguit dicomportamento e non tradirele aspettative dellutente.

Colorati: un altro elementodi enfasi che permette di evi-denziare e di far emergere dalnero, ovvero dalla texture ti-pografica della pagina, gli ele-

menti linkati luso del colore.Di default e tradizionalmente


112/141

i link testuali appaiono di colore bluette, violase sono gi stati consultati (visited link) e rossinel momento in cui vengono cliccati (active link).Sebbene questo schema cromatico non sia pinecessariamente lunico riconosciuto dagli utenti(come sosteneva relativamente di recente ancora

Nielsen30) bene individuare un set riconoscibi-le allinterno di ciascun progetto, coerentemen-te con le scelte cromatiche di insieme, ma in cuiil significato connotativo del colore dei link sia

univoco e riconoscibile. Me-glio ancora se per esempio ilcolore usato per i link viene ri-servato solo a questa tipologiadi testo e conseguentemente aveicolare questo tipo di infor-

mazione, anche se attualmentecon i CSS possibile formatta-re diversamente ogni singolatipologia di link.30. Per ulteriori informa-

zioni si suggerisce di con-sultare il testo in biblio-grafia Web Usability

(Nielsen, 2000)


113/141

Visivamente rafforzati: qualunque sia la stra-tegia che si intende adottare per mettere in evi-denza i link sia la sottolineatura, magari alleg-gerita nella sua versione tratteggiata, il colore,o il peso tipografico della scritta limportan-te che lelemento emerga chiaramente dal te-

sto. Non basta che il cursore del mouse cambida freccia a manina quando casualmente lutentescorre la pagina perch in un sistema ancora pro-fondamente basato sulla visione (Graphical UserInterfaces) sono gli elementi grafico-visibili a

fornire le informazioni operative.

Infine ricordiamo che importante anche cosa silinka al fine di rendere la pagina usabile: NON linkare unintera frase NON linkare testo generico e uguale per pilink (clicca qui!) linkare una parola significativa per lutente (es.:scarica la brochure) dare indicazioni significative sul cosa succedecliccando.


114/141

Titolo di capitolo

KEYWO

RD


115/141

Lintervista


116/141

Andrea Braccaloni nasce a Bolognanel 1973. un visual designer, che vive e lavoraa Milano citt in cui ha fondato, con tre soci nel1995, lo studio di comunicazione visiva Leftloft.In esso si occupa di consulenza e design dellacomunicazione, design editoriale e di segnaleti-ca, branding e disegno di caratteri tipografici. socio professionista AIAP e membro AtypI. Dal2001 titolare di un Laboratorio di Comunica-zione Visiva al Politecnico di Milano presso laFacolt di Design.

061. Andrea Braccaloni,

visual designer 061


117/141

Lintervista al visual designer Andrea Braccalo-ni stata realizzata il 24/02/2011 presso lo studio

Leftloft di Milano.
http://vimeo.com/26599575


118/141

Ci sar sempre bisogno di nuove forme di carat-tere perch un modo per esprimere dei conte-

nuti attraverso la forma delle lettere

Andrea Braccaloni


119/141

Lorem ipsumpublishing packages andweb page editors now use Lorem Ipsum as theirdefault model text, and a search for lorem ip-sum will uncover many web sites still in theirinfancy. Various versions have evolved over the

years, sometimes by accident, sometimes on pur-pose (injected humour and the like).Lorem ipsumis simply dummy text of the printing and typeset-ting industry. Lorem Ipsum has been the industrys

standard dummy text ever sin-ce the 1500s, when an unknownprinter took a galley of typeand scrambled it to make a typespecimen book. It has survivednot only five centy unchan-

ged. It was popularised in the1960s with the release of Le-traset sheets containing LoremIpsum passages, and more re-cently with desktop publishing

software like Aldus PageMakerincluding versions.


120/141

Riferimenti


121/141

Bibliografia

1. Anon. (2005). Spazio ai caratteri. Il libro della scuoladel libro. Raccolto.

2. Bandinelli Angiolo, Giovanni Lussu, and RobertoIacobelli. (1990). Farsi un libro: propedeutica dellauto pro-

duzione: orientamenti e spunti per unimpresa consapevole: oper una serena rinuncia.Biblioteca del Vascello.

3. Bernstein Marta, Luciano Perondi, and Silvia Sfli-giotti. (2008). Italic 2.0. Il disegno di caratteri contempo-raneo in Italia-Contemporary type design in Italy. De Ago-

stini.4. Blackwell Lewis, and David Carson. (2000). Theend of print: the grafik design of David Carson. LaurenceKing Publishing.

5. Bollini Letizia, and Riccardo Cova. (2009). Basic WebDesign 2: standard e strumenti per la progettazione web.Milano.

6. Bollini Letizia, and Massimo Greco. (2008). Orga-nizzare presentazioni efficaci. Progettare e realizzare dia-

positive per parlare in pubblico.Hoepli.


122/141

7. Bollini Letizia, and Federica Pomati. (2005). Culturae strumenti per il visual design. Laboratorio di grafica vet-toriale. Maggioli.

8. Bringhurst Robert. (2001). Gli elementi dello stile ti-pografico. Sylvestre Bonnard.

9.Bryan Marvin. (1998). Tipografia digitale: evoluzione

tecnica dei caratteri.McGraw-Hill.

10. Clarke Andy. (2008). Oltre i CSS. La sottile arte delweb design.Pearson Italia S.p.a.

11. Fioravanti Giorgio. (1984). Grafica & stampa: notiziestoriche e informazioni tecniche per chi stampa e per chi fastampare.Zanichelli.

12. Gallavrini Alfredo. Tipocomposizione.

13. Gill Eric. (2005). Sulla tipografia. (cur. Passerini Lu-cio). Sylvestre Bonnard.

14. Gtz Veruschka. (2002). Grids for the Internet andother digital media. AVA.

15. Heller Steven, and Seymour Chwast. (1988). Il parti-colare nella progettazione grafica. (trad. Girardello 1997).

16. Knuth Donald Ervin. (1999). Digital typography.CSLI Publications.


123/141

17. Di Leo Brigida. (2000). Larte della tipografia.Lupet-

ti.

18. Meynet Roland. (2004). Norme tipografiche per lacomposizione dei testi con il computer. Pontificia Univ.Gregoriana.

19.Morison Stanley. (2008). I principi fondamentali della

tipografia. (cur. Serra Fabrizio. trad. Cesana Roberta).Fabrizio Serra.

20. Museo bodoniano di Parma. (2009). Il progetto tipo-grafico del libro: Bodoni e i Tallone.(cur. De Pasquale An-drea, Tallone Enrico). Museo Bodoniano.

21. Mller-Brockmann Josef. (2007). Grid systems ingraphic design: a visual communication manual for graphic

designers.Ram Pubns U S A.

22. Nielsen Jakob. (2000). Web usability. (trad. Vanini

W.). Apogeo Editore.

23. Novarese Aldo. Il segno alfabetico: giuda allo studio edal disegno del carattere.

24. Postai Sofia. (2001). Siti che funzionano. TecnicheNuove.


124/141

25. Pring Roger. (2001). WWW.type. Tecniche tipograficheefficaci per il World Wide Web. Apogeo Editore.

26. Rattin Manuela, and Matteo Ricci. (1997). Questionidi carattere: la tipografia in Italia dallUnit nazionale agli

anni Settanta. Stampa alternativa.

27.Samara Timothy. (2006). Guida agli stili tipografici.

Il Castello.

28. Spiekermann Erik, and E. M. Ginger. (2003). Stopstealing sheep and find out how type works.Adobe Press.

29. Steinberg Siegfried H. (1968). Cinque secoli di stam-pa. Einaudi.

30. Testa Annamaria. (2004). Le vie del senso: come direcose opposte con le stesse parole. Carocci.


125/141

Sitografia

1. Abc typography: a virtual type museumhttp://abc.planet-typography.com/

2. Adobe fontshttp://www.adobe.com/type/

3. Alist aparthttp://italianalistapart.com/

4. A Guide To Typography On the Webhttp://pelfusion.com/fonts/a-guide-to-typography-on-the-web/

5. Archive for category: Typographyhttp://blog.fawny.org/category/typography/

6. Awesome Fontstacks Font: PT Serif Italichttp://fontstacks.r10.railsrumble.com/

7. Classificazione dei caratterihttp://www.liceocaravaggio.com/e-lac/materiali/rete/caratteri.pdf

8. Classificazione dei caratteri Lineare Museovirtuale della Stampa

http://www.scuolaeditoria.it/pubblicazioni/museo_virtuale/caratteri/classificazione/classi/07_lineare.htm
http://abc.planet-typography.com/http://www.adobe.com/type/http://italianalistapart.com/http://pelfusion.com/fonts/a-guide-to-typography-on-the-web/http://pelfusion.com/fonts/a-guide-to-typography-on-the-web/http://blog.fawny.org/category/typography/http://fontstacks.r10.railsrumble.com/http://www.liceocaravaggio.com/e-lac/materiali/rete/caratteri.pdfhttp://www.liceocaravaggio.com/e-lac/materiali/rete/caratteri.pdfhttp://www.scuolaeditoria.it/pubblicazioni/museo_virtuale/caratteri/classificazione/classi/07_lineare.htmhttp://www.scuolaeditoria.it/pubblicazioni/museo_virtuale/caratteri/classificazione/classi/07_lineare.htmhttp://www.scuolaeditoria.it/pubblicazioni/museo_virtuale/caratteri/classificazione/classi/07_lineare.htmhttp://www.scuolaeditoria.it/pubblicazioni/museo_virtuale/caratteri/classificazione/classi/07_lineare.htmhttp://www.scuolaeditoria.it/pubblicazioni/museo_virtuale/caratteri/classificazione/classi/07_lineare.htmhttp://www.scuolaeditoria.it/pubblicazioni/museo_virtuale/caratteri/classificazione/classi/07_lineare.htmhttp://www.liceocaravaggio.com/e-lac/materiali/rete/caratteri.pdfhttp://www.liceocaravaggio.com/e-lac/materiali/rete/caratteri.pdfhttp://fontstacks.r10.railsrumble.com/http://blog.fawny.org/category/typography/http://pelfusion.com/fonts/a-guide-to-typography-on-the-web/http://pelfusion.com/fonts/a-guide-to-typography-on-the-web/http://italianalistapart.com/http://www.adobe.com/type/http://abc.planet-typography.com/


126/141

9. Come conoscere ed utilizzare i caratteri tipografi-

ci. Le classificazioni stilistichehttp://digilander.libero.it/sitographics/st_file/clasifi-caz_silistiche.pdf

10. Come nacquero i primi alfabeti. Tutte le scritturedel mondo

http://www.parodos.it/scrittura/15.htm

11. Curiosit sui caratterihttp://www.scantype.it/storia_dei_caratteri_pag1.html

12. Dafont.comhttp://www.dafont.com/en/

13. Elementi di tipografia digitalehttp://www.cs.unibo.it/~cianca/wwwpages/cdd/2.pdf

14. Fonts

http://developer.apple.com/fonts/

15. Font design Frank Hinman Pierponthttp://www.linotype.com/434/frankhinmanpierpont.html

16. For a beautiful webhttp://forabeautifulweb.com/
http://digilander.libero.it/sitographics/st_file/clasificaz_silistiche.pdfhttp://digilander.libero.it/sitographics/st_file/clasificaz_silistiche.pdfhttp://www.parodos.it/scrittura/15.htmhttp://www.scantype.it/storia_dei_caratteri_pag1.htmlhttp://www.scantype.it/storia_dei_caratteri_pag1.htmlhttp://www.dafont.com/en/http://www.cs.unibo.it/~cianca/wwwpages/cdd/2.pdfhttp://developer.apple.com/fonts/http://www.linotype.com/434/frankhinmanpierpont.htmlhttp://www.linotype.com/434/frankhinmanpierpont.htmlhttp://forabeautifulweb.com/http://forabeautifulweb.com/http://www.linotype.com/434/frankhinmanpierpont.htmlhttp://www.linotype.com/434/frankhinmanpierpont.htmlhttp://developer.apple.com/fonts/http://www.cs.unibo.it/~cianca/wwwpages/cdd/2.pdfhttp://www.dafont.com/en/http://www.scantype.it/storia_dei_caratteri_pag1.htmlhttp://www.scantype.it/storia_dei_caratteri_pag1.htmlhttp://www.parodos.it/scrittura/15.htmhttp://digilander.libero.it/sitographics/st_file/clasificaz_silistiche.pdfhttp://digilander.libero.it/sitographics/st_file/clasificaz_silistiche.pdf


127/141

17. Free Fonts

http://www.free-fonts.com/font/google.html

18. Giambattista Bodoni, vita e opere in una trattazio-ne sinteticahttp://www.webfandom.com/comunicazione-visiva/giambattista-bodoni-vita-opere-una-trattazione-sinte-

tica/

19. I caratteri per i computerhttp://www.giofugatype.com/lettering/letterin.htm

20. I love Typographhttp://ilovetypography.com/

21. Interview: Andy Clarke on the CSS Elevenhttp://www.css3.info/interview-andy-clarke-on-the-css-eleven/

22. Lapidari Romani Antichi (Classificazione

Novarese)http://blog.giofugatype.com/?p=317

23. La tipografia webhttp://www.tiragraffi.it/design/2010/09/la-tipogra-fia-web/

24. Linotype.comhttp://www.linotype.com
http://www.free-fonts.com/font/google.htmlhttp://www.webfandom.com/comunicazione-visiva/giambattista-bodoni-vita-opere-una-trattazione-sintetica/http://www.webfandom.com/comunicazione-visiva/giambattista-bodoni-vita-opere-una-trattazione-sintetica/http://www.webfandom.com/comunicazione-visiva/giambattista-bodoni-vita-opere-una-trattazione-sintetica/http://www.giofugatype.com/lettering/letterin.htmhttp://ilovetypography.com/http://www.css3.info/interview-andy-clarke-on-the-css-eleven/http://www.css3.info/interview-andy-clarke-on-the-css-eleven/http://blog.giofugatype.com/?p=317http://www.tiragraffi.it/design/2010/09/la-tipografia-web/http://www.tiragraffi.it/design/2010/09/la-tipografia-web/http://www.linotype.com/http://www.linotype.com/http://www.tiragraffi.it/design/2010/09/la-tipografia-web/http://www.tiragraffi.it/design/2010/09/la-tipografia-web/http://blog.giofugatype.com/?p=317http://www.css3.info/interview-andy-clarke-on-the-css-eleven/http://www.css3.info/interview-andy-clarke-on-the-css-eleven/http://ilovetypography.com/http://www.giofugatype.com/lettering/letterin.htmhttp://www.webfandom.com/comunicazione-visiva/giambattista-bodoni-vita-opere-una-trattazione-sintetica/http://www.webfandom.com/comunicazione-visiva/giambattista-bodoni-vita-opere-una-trattazione-sintetica/http://www.webfandom.com/comunicazione-visiva/giambattista-bodoni-vita-opere-una-trattazione-sintetica/http://www.free-fonts.com/font/google.html


128/141

25. Perch pensare tipograficamente rovina il tuo

sito? (seconda parte)http://www.yourinspirationweb.com/tag/tipografia/

26. Pixel Font cosa sono e dove trovarle?http://www.4mj.it/pixelfont/

27.Recensione: Oltre i CSS di Andy Clarke

http://www.lineheight.net/blog/recensione-oltre-i-css-di-andy-clarke

28. Storia dellArte Tipograficahttp://www.artigrafichefalcone.com/storia-della-tipo-grafia.asp

29. The Elements of Typographic Style Applied tothe Webhttp://www.webtypography.net/toc/

30. The Ministry of Type

http://www.ministryoftype.co.uk/

31. Tipografia web: Regole per la scrittura testi di unsitohttp://www.spailab.net/tipografia-web-regole-per-la-scrittura-testi-di-un-sito.php
http://www.yourinspirationweb.com/tag/tipografia/http://www.4mj.it/pixelfont/http://www.lineheight.net/blog/recensione-oltre-i-css-di-andy-clarkehttp://www.lineheigh

egutenberg project - tipografia digitale

Documents