Analysis

CREATIVE COMMONS

Il presente materiale è pubblicato con licenza Creative Commons.

“Attribuzione - Non commerciale – Condividi allo stesso modo”.

La licenza non si estende alle immagini provenienti da altre fonti e agli screenshoots, cui diritti restano in capo ai rispettivi

proprietari

A cura di …

Federica NacciJessica Amelotti

Davide Garavaglia

LA TIPOGRAFIA

Dal greco τύπος, “impronta” e γράφειν, “scrivere”

Tecnologia per produrre testi stampati Svolge diverse funzioni:

Disegno dei font Impaginazione Stampa del supporto Confezionamento

E’ un ottimo strumento per un’efficace strategia di comunicazione e nel design in particolare è la manifestazione visuale della lingua …

L’arte della tipografia è lo strumento appropriato in vista d’un obiettivo essenzialmente utilitario, e che non è estetico se non accidentalmente, poiché il piacere degli occhi è raramente la preoccupazione principale del lettore.

Stanley Morrison

Messaggio tipografico Ha il compito di trasmettere un valore

estetico Ha la capacità di comunicare un

significato

La tipografia può essere usata come immagine e il significato delle parole diventare parte integrante di questa

Un po’ di storia

XilografiaTipografia moderna

StereotipiaLitografia

Linotype&

Monotype Macintosh

Grafica digitale …

XV sec.

1454 1796 XIX sec. 1886-1889

1984 XXI sec.

Xilografia Dal greco ξύλον, “legno” e γράφω,

“scrivo” Consiste in incisioni di immagini su

tavolette di legno inchiostrate e incise su carte, mediante stampa su torchio

Tipo di incisione a rilievo Primi casi in Europa agli inizi del 1400

Tipografia Moderna Invenzione della

stampa a caratteri mobili da parte di Johannes Gutenberg

Primo libro stampato fu la Bibbia a 42 linee tra il 1448-54

La tecnica consiste nell’allineare e assemblare i tipi creando pagine complete di testo Sistema economico e rapido

Conseguenze … Moltiplicazione dei libri stampati Sperimentazione di sempre nuovi

caratteri con l’obiettivo di migliorare la leggibilità del testo

Nascita del corsivo (1501) Introduzione di nuovi caratteri standard

(1700) grazie ai tipografi Baskserville; Didot; Bodoni

Litografia Dal greco λίθος “pietra” e γράφειν,

“scrivere” E’ una tecnica di riproduzione meccanica

delle immagini inventata da Alois Senefelder

E’ una stampa piana a mezzo di pietra calcarea con la capacità di assorbire acqua e grasso

Stereotipia

La Rivoluzione industriale portò anche uno sviluppo delle tecniche tipografiche. Così la pressa in legno venne sostituita dalla pressa con struttura in metallo

In questo contesto nasce la Stereotipia: una tecnica di riproduzione della pagina mediante calco su lastra metallica, attraverso una pressione piana

Linotype & MonotypeIl XIX sec. Fu caratterizzato da uno sviluppo

esponenziale delle tecnologie. In particolar modo le migliori innovazioni nel campo della tipografia furono introdotte dai giornali.

Ad esempio il Times adottò la pressa piano-cilindrica a vapore che permise di aumentare le copie da 300 a 1.100 all’ora.

Linotype (1886) Ottmar

Mergenthaler Macchina per

composizione a caldo; permette di creare una linea intera di caratteri in metallo

Prima macchina automatica

Monotype (1889) Tolbert Lanston Macchina

articolata, in essa c’è una sola matrice per lettera perciò si fonde un solo carattere alla volta

Tipografia rivisitataGli anni Ottanta furono la culla della

Rivoluzione informatica. Si assistette infatti a un ulteriore sviluppo nel campo tipografico. I pionieri di questa svolta furono:

IBM: Lanciò il primo personal computer Apple: Mise sul mercato nel 1984 il

Macintosh

Conseguenze … Avvento di sistemi operativi e interfacce

web di facile utilizzo Sviluppo di software per la grafica Democratization of type Nascita di imprese per il trasferimento dei

font in formato digitale ( Adobe, Emigre, Itc)

Il caso MacintoshIl Macintosh 128k fu il primo personal computer con interfaccia grafica (GUI) e mouse, lanciato da Apple nel 1984.

Rispetto al precedente Apple Lisa ebbe un grandissimo successo …

La grande svolta di Apple

Introduce importanti novità nell’interfaccia grafica, come le icone e la scrivania

Utilizza programmi di disegno grafico (MacPaint)

Utilizza programmi di videoscrittura (MacWrite)

Fu in grado di dare ad ogni carattere la propria proporzione nello spazio e introdusse nuovi font come il Chicago, creato appositamente per Apple

Utilizza PageMaker, il primo programma per il desktop publishing

Prima grande rivoluzione della tipografia

Il nuovo secolo Diffusione e sviluppo dei personal

computer Avvento della grafica digitale che porterà

allo sviluppo di nuovi software e applicazioni

Espansione del mercato dei font. Gli utenti sono sempre più liberi di scegliere (Web 1.0)

Con l’avvento del web 2.0 gli utenti hanno la possibilità, attraverso diverse app, di realizzare i propri font

COS’E’ IL FONT?

In italiano il termine font viene tradotto come “tipo di carattere” ma è una definizione fuorviante, in quanto:

Il font è l’insieme delle lettere e dei segni d’interpunizione disegnati in un determinato stile

Il carattere, invece, è la lettera intesa come forma o grafismo

Ancora diverso è il lettering. Ovvero tutto ciò che riguarda il carattere, la composizione del testo e il rapporto che esiste tra il linguaggio scritto e l’immagine

Una prima differenza …I tipi di font si dividono in due macro-

categorie: Serif (dal francese con grazie) Sans Serif (dal francese senza grazie)

La grazia è quell’allungamento, solitamente ortogonale, all’estremità del carattere. Nascono dal carattere lapidario romano, dove le grazie erano funzionali per una più facile incisione su pietra. Vengono utilizzate per rendere il carattere più elegante e leggibile.

Cosa sono le grazie?

Le famiglie di caratteriClassificazione morfologica di Aldo Novarese, celebre teorico della forma alfabetica e rinomato disegnatore di font tipografici.

La classificazione parte dallo studio delle terminazioni delle aste, cioè dal disegno delle grazie.

Oggi è diventato sempre più difficile classificare i font perché i nuovi prodotti sono astorici, astilistici, multiformi e destrutturati

BODONIANIMEDIEVALIFANTASIASCRITTILAPIDARI

TRANSAZIONALI

LINEARI

Ricordano la tipografia pura dell’inizio del XIX secoloRimandano all’alfabeto gotico tedesco medievale

Emulano la scrittura calligrafica

Traggono ispirazione dalle iscrizioni monumentali dell’antichitàLa forma richiama i tipi di scrittura utilizzati nel XVIII secoloForme geometriche e squadrate

Si ispirano al carattere romano, rinnovato durante il RinascimentoTutti i sans serif, privi di grazie

Nascono nei monasteri amanuensi, sono usati principalmente come capolettera

Fortemente espressivi, astorici e molto artistici

Le parti del carattere

Ricapitolando,le parti che possiamo trovare in un carattere

sono Apice Asta trasversale (16) Montante Gancio (14) Ascendente (18) Grazie (15 e 17) Collegamento (12) Coda (13) Discendente Spaziatura (11)

Il corpo del carattere

Linea delle ascendentiLinea delle maiuscoleLinea delle minuscoleLinea di baseLinea delle discendenti

Occhio superiore: Si trovano le maiuscole e le lettere minuscole con ascendentiOcchio medio: Si trovano tutte le lettere basse senza ascendenti né discendentiOcchio inferiore: Si trovano tutte le minuscole con discendenti

Il contrasto Il contrasto di un carattere è

sostanzialmente la differenza di spessore tra le linee spesse e quelle sottili

Nell’ambito della teoria della Gestalt un font con alto contrasto è molto più leggibile quando usato in grandi dimensioni, mentre uno a basso contrasto garantisce una buona lettura per corpi piccoli

Il Bodoni MT è un classico esempio di font ad alto contrasto

Il Lucida Fax è un classico esempio di font a minore contrasto

Kerning & Tracking Il kerning (o

crenatura) è lo spazio tra le singole lettere all’interno di un font

Rende la composizione più fluida perché alcune lettere (come A e V) possono essere avvicinate tra loro senza sovrapporsi

Il tracking è lo spazio bianco tra le diverse parole

Permette di garantire al cervello una rapida individuazione dell’inizio e della fine di una parola in un testo e quindi una maggiore leggibilità

Legibility & Readability E’ la leggibilità di un

carattere E’ connessa alla struttura

grafica del singolo carattere tipografico

E’ una caratteristica oggettiva e non legata a gusti personali

Un font ornamentale non ha una buona leggibilità perché progettato per essere attrattivo

E’ la leggibilità di un testo

Tutte quelle caratteristiche di forma, tracking, kerning, colore e tutte le altre proprietà che collaborano nel creare un aspetto complessivo che può essere più o meno leggibile

Strategie per una buona leggibilità

Bisogna fare attenzione ad alcune caratteristiche del testo per renderlo il più leggibile possibile:

Allineare il testo a bandiera e possibilmente a sinistra

Evitare testi centrati o giustificati (se non per frasi brevi)

Dividere in paragrafi per rendere ordinato il testo e per creare “pause programmate”

Scegliere un font adeguato al messaggio Dare rilevanza all’interlinea tra le righe del testo

Come utilizzare i font?Al fine di eseguire un buon testo tipografico che

riesca a comunicare esattamente il messaggio che avete in mente è bene tenere in considerazione alcuni punti:

Tone of voice Scelta del font Punti di enfasi Corpo del carattere Supporto sul quale verrà letto il messaggio

Tone of voice

E’ l’intonazione e il registro con cui ci si rivolge al pubblico

Prima di scegliere il font dobbiamo capire cosa vogliamo dire, per conto di chi e a quale scopo

Ogni scelta, dal font alla composizione del testo, dalle immagini fino ai segni grafici deve essere sempre coerente con il tone of voice scelto

La scelta del font “Ogni carattere ha un suo carattere”. Tutti

i font comunicano uno stato d’animo e delle sensazioni perciò vanno utilizzati nel contesto adeguato

Ad esempio i font calligrafici creano la sensazione di discorso diretto; quelli “graziati” sono più inclini a un discorso formale; i comic si rifanno al mondo dei cartoon; i medievali rimandano a scenari misteriosi e lontani; i font moderni, fantasiosi e asimettrici sono più adatti per un messaggio dinamico e vivace

I punti di enfasiIl destinatario della comunicazione va

guidato, catturato e stimolato come e dove vogliamo noi

Per rendere più semplice questo passaggio la tipografia ci viene in auto con l’enfasi.

Essa corrisponde all’intonazione particolare che, nel parlato, si mette su alcune parole

Nella tipografia alcuni elementi d’enfasi possono essere: il capolettera, una parola che spicca per variazione di font, di dimensione, di colore, di inclinazione o segni grafici.

Corpo del carattereIl corpo del carattere (la grandezza) deve

essere adatto al tipo e al luogo della comunicazione

Solitamente, nell’editoria, le parti del testo hanno dimensioni standard:

Da 6 a 8 punti per le note

Da 8 a 9 per le didascalie

Da 10 a 14 per i testi stampati come i libri

Da 12 a 16 per gli occhielli

Da 24 punti in poi per i titoli

Da 72 punti in su per i titoli “urlati” e per i manifesti

Stampa vs Schermo Per i lunghi testi,

come i libri, vengono più spesso utilizzati i graziati

I graziati sono più facilmente distinguibili dal nostro cervello

Il 90% dei libri è stampato in Simoncini Garamond

Per la scrittura su schermo sono consigliati i font sans serif

I dettagli dei serif, che su carta rendono distinguibili i caratteri, su schermo si perdono perché la risoluzione del video è minore che su stampa

Qualche esempio … OpenDyslexic è un font open

source nato nel 2011 per facilitare la lettura e la comprensione dei testi

E’ diverso dagli altri font perché utilizza linee pesanti, giocando su altezze e inclinazioni, cosicchè ogni lettera abbia una forma unica

Bianconero è la prima font italiana ad alta leggibilità messa sul mercato a scopi non commerciali

Questo è il font script ChàvezPro ideato dal designer Marcelo Volpe in onore dell’ex presidente venezuelano Hugo Chàvez, noto per spiegare le sue idee scrivendo a mano sulla lavagna durante le trasmissioni televisive.

Il carattere è ottenuto dalla digitalizzazione della sua scrittura

I font del XX secoloLa storia dei caratteri segue quella della

società. Oggi si richiedono tipi di scrittura per display, orologi digitali, leedscreen, etichettatrici ecc …

Fu il primo carattere studiato ad hoc per i computer. E’ un carattere molto schematico e rigido in quanto doveva adattarsi alle limitate possibilità dei primi computer

La grafica digitale

La nascita del web 2.0 2004 Tim O’Reilly Evoluzione del WWW

Nuova visione di internet Interattività Cambia il nostro modo di lavorare e di

interagire con le informazioni in rete Appeal colori + animazioni = impatto

visivo Utente attivo: blog, forum, chat …

Percezione del testo il web svolge una funzione centrale

Il nostro occhio si concentra su: Titoli e sottotitoli Grassetti e corsivi Parole tra virgolette o tra parentesi Parole in colore Parole con l’iniziale maiuscola

all’interno del testo. La lettura dal web è immediata, ma riduce la

capacità di concentrazione in quanto è “saltellante”. La lettura su carta, generalmente, è più lenta

Grafica digitaleE’ un settore della produzione artistica che

si occupa di creare elementi e prodotti per la comunicazione visiva; consiste nella trasmissione di un messaggio attraverso le immagini.

Sostanzialmente …

Raster & Vettoriale

Raster Prende il nome dal termine inglese che

significa griglia Nella grafica raster, o bitmap, l’immagine è

composta da una griglia di punti, detti pixel di forma quadrata

Ogni pixel possiede informazioni di colore che nell’insieme creano l’immagine

La proprietà più importante è la risoluzione Si utilizza come unità di misura il pollice

inglese (2,54 cm) e quindi il rapporto dot per inch, DPI, cioè punti per pollice

Photoshop E’ il principale programma di grafica raster E’ un software proprietario prodotto dalla

Adobe Systems Incorporated, specializzato nell’elaborazione di fotografie e, più in generale, di immagini

La prima versione risale al 1990 ad opera dei fratelli Thomas e John Knoll, figli di un fotografo, che idearono il programma per agevolare il lavoro del padre

Prende corpo dall’applicativo esistente Display, sviluppato nel 1987 per MacPlus

Vettoriale Si basa su forme geometriche come

linee, punti, curve e poligoni E’ possibile ingrandire le immagini

all’infinito senza perdere minimamente risoluzione, poichè si basano su equazioni matematiche

Le immagini occupano minor spazio e rendono le modifiche più semplici perché le informazioni contenute sono davvero minime

Per ottenere immagini vettoriali di qualità sono necessarie dei software potenti

Illustrator E’ il principale programma di grafica

vettoriale E’ un software per l’elaborazione di

illustrazioni e per la grafica, prodotto da Adobe Systems Incorporated

Apple Macintosh rilasciò la prima versione nel 1986; invece Windows nel 1989, ma non ebbe successo

I lavori più sviluppati con Illustrator sono: costruzione di loghi, prodotti pubblicitari e anche layout per siti web

Il colore tipografico La scrittura può aggiungere colore alla

pagina, e di conseguenza lo stile tipografico influisce sull’interpretazione del messaggio

La base sono scale di colori e mescolanze: Additiva o sintesi (RGB) Sottrattiva (CMYK)

Mescolanza additiva E’ tipica dei monitor Si riferisce ai colori primari della luce

(rosso, verde, blu) Se miscelati tra loro generano tutti i colori

presenti nello spettro, mentre se sommati in parti uguali (da qui il termine additivo) producono luce bianca

Mescolanza sottrattiva È tipica delle stampanti Utilizza colori primari dei pigmenti che

hanno la capacità di assorbire in modo selettivo solo alcune lunghezze d’onda della luce. Le altre parti vengono riflesse e determinano il colore

Il colore di un pigmento è dato dalla sottrazione di radiazioni della luce bianca e da qui l’aggettivo sottrattivo

I colori primari sono ciano, magenta e giallo a cui viene aggiunto il nero

Curiosità Il nostro occhio riconosce uno spettro di sette

colori chiamati anche i colori dell’arcobaleno (rosso, arancio, giallo, verde, azzurro, indaco, violetto)

Caso a sé sono il bianco e il nero, detti colori neutri

I colori complementari, invece, sono particolari in quanto se avvicinati provocano un effetto “tremolio” e affaticano la vista, rendendo difficile la lettura

Ai fini della leggibilità …

I colori web safe I primi computer

possedevano schede video e monitor in grado di visualizzare soltanto 256 colori, gestiti in maniera differente a seconda dei diversi sistemi operativi

Queste differenze comportano la lettura di soltanto 216 colori comuni, chiamati anche colori “web safe”

L’identità del font La scelta di un particolare font da parte di

un’azienda rappresenta un momento decisivo in quanto rende il marchio unico e riconoscibile

Anche lo stile del font esprime un messaggio chiaro e diretto al consumatore

E’ stato dimostrato che nomi brevi sono più semplici da memorizzare

Vediamo se queste aziende sono riuscite a rendere il loro font unico e riconoscibile …

I PROBLEMI DELL’OPEN SOURCE

I font installati sui computer degli utenti non sono uguali per tutti.

I caratteri a disposizione dipendono da diverse variabili:

Sistema Operativo Software installati sul pc Caratteri installati manualmente

Quindi:

nella scelta dei font da utilizzare, bisogna tener presente che non tutti gli utenti avranno installato un certo font sul proprio computer

WEB SAFE FONTS

vs

FONT PROPRIETARI

WEB SAFE FONTS:

Sono caratteri standard, compatibili e trasversali a tutti i sistemi operativi

Font con licenza open source Sono talmente numerosi da soddisfare le

esigenze estetiche di qualsiasi utente Sono la soluzione per ovviare alla

problematica dell’interoperabilità tra i sistemi operativi

I più noti fonts web safe sono: Arial, Courier, Georgia, Times New Roman, Verdana, etc…

FONT PROPRIETARI:

Definiti anche font liberi sono protetti da licenza, quindi a pagamento

Caratterizzati da una grafica più elaborata perché progettati da designer professionista

Un buon carattere può costare anche più di 100 euro

www.myfonts.com

LIBRERIE ON LINEGOOGLE WEB FONTS (www.google.com/fonts)

DAFONT (www.dafont.com)

GOOGLE WEB FONTS Archivio on line più ampio in assoluto, costituito

da più di 600 font. Tutti open source Altri due archivi open source, anche se più

limitati, sono FreeTypography e OpenFontLibrary

DAFONT

Archivio on line che offre sia font proprietari che font open source Un altro esempio è FontSquirrell

Font-stackÈ un’alternativa al web safe per rendere compatibile la pagina web su qualunque sistema operativo.Si basa sulla proprietà del font-family del CSS e consente di inserire una lista di caratteri da utilizzare nella pagina, nel caso in cui quel determinato carattere non fosse leggibile.

L’idea principale del font-stack consiste nell’utilizzare famiglie di caratteri simili. Ad esempio se il font Times New Roman non fosse presente nel sistema operativo verrebbe in automatico sostituito da un secondo simile, come Georgia.

Le più famose famiglie di caratteri simili sono:

SERIF: come Georgia e Times New Roman

SAN SERIF: come Arial e Verdana

MONOSPACE: come Courier e Courier New

Typography AppsEsistono, in rete, numerose applicazioni gratuite dove è possibile creare o scaricare font per pc e mobile…

Font Forge (per creare il tuo font personale)

Fontomizer e Ifont (Android); Cool Font e Font Studio (Apple) per scaricare nuovi font sul tuo smartphone

Sitografiahttp://www.treccani.it/lingua_italiana/speciali/chiaro_scuro/Carrada.htmlhttp://www.html.it/articoli/i-colori-e-il-loro-uso-nel-web-1/http://bestcreativity.com/blog/it/font-logo-facebook-twitter-linkedin-social-network/http://www.bitdesign.it/ditelo-con-un-font/https://www.google.com/fontshttp://www.fonts.com/font/microsoft-corporation/calibri?QueryFontType=Web&src=GoogleWebFontshttp://www.partitaivaonline.com/tipografia-e-grafica-web-levoluzione-della-specie/http://www.libreitalia.it/font-e-interoperabilita/http://windows.microsoft.com/it-it/windows-vista/troubleshoot-font-problemshttps://it.wikipedia.org/wiki/Tipografia#Storiahttp://www.tipografialeone.net/approfondimenti/font-caratteri-tipografia-grafica-tipi-misure-caratteristiche/http://www.dafont.com/it/http://www.grafigata.com/

THE END