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 Nacci Jessica 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 XV sec. 1454 1796 XIX sec. 1886-1889 1984 XXI sec. Xilografia Tipografia moderna Litografia Stereotipia Linotype & Monotype Macintosh Grafica digitale …

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 & Monotype Il 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) Monotype (1889) 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 rivisitata Gli 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 Macintosh Il 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?

Il carattere, invece, è la lettera intesa come forma o grafismo 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 … Cosa sono le grazie? I tipi di font si dividono in due macro-categorie: Serif (dal francese con grazie) Sans Serif (dal francese senza grazie) Cosa sono le 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.

Le famiglie di caratteri Classificazione 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

BODONIANI MEDIEVALI FANTASIA SCRITTI LAPIDARI TRANSAZIONALI LINEARI Ricordano la tipografia pura dell’inizio del XIX secolo Rimandano all’alfabeto gotico tedesco medievale Fortemente espressivi, astorici e molto artistici Emulano la scrittura calligrafica Traggono ispirazione dalle iscrizioni monumentali dell’antichità La forma richiama i tipi di scrittura utilizzati nel XVIII secolo Forme geometriche e squadrate Si ispirano al carattere romano, rinnovato durante il Rinascimento LINEARI Tutti i sans serif, privi di grazie Nascono nei monasteri amanuensi, sono usati principalmente come capolettera

Le parti del carattere

le parti che possiamo trovare in un carattere sono 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 ascendenti Linea delle maiuscole Linea delle minuscole Linea di base Linea delle discendenti Occhio superiore: Si trovano le maiuscole e le lettere minuscole con ascendenti Occhio medio: Si trovano tutte le lettere basse senza ascendenti né discendenti Occhio 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 enfasi Il 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 carattere Il 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 secolo La 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 …

il web svolge una funzione centrale Il nostro occhio si concentra su: 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 digitale E’ 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…

Un buon carattere può costare anche più di 100 euro 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

GOOGLE WEB FONTS (www.google.com/fonts) LIBRERIE ON LINE GOOGLE 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.

Le più famose famiglie di caratteri simili sono: 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 Apps Esistono, 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

Sitografia http://www.treccani.it/lingua_italiana/speciali/chiaro_scuro/Carrada.html http://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/fonts http://www.fonts.com/font/microsoft- corporation/calibri?QueryFontType=Web&src=GoogleWebFonts http://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-problems https://it.wikipedia.org/wiki/Tipografia#Storia http://www.tipografialeone.net/approfondimenti/font-caratteri-tipografia-grafica-tipi-misure- caratteristiche/ http://www.dafont.com/it/ http://www.grafigata.com/

THE END