egutenberg Project Tipografia Digitale L anatomia dei Font A cura di Letizia Bollini Angela Nuzzi, Matteo Ostuni e Domenica Pontieri

Transcript

1

2 II

3 egutenberg Project Tipografia Digitale L anatomia dei Font A cura di Letizia Bollini Angela Nuzzi, Matteo Ostuni e Domenica Pontieri III

4 Tipografia Digitale egutenberg Project, Università degli Studi di Milano - Bicocca. Corso di Laurea Magistrale in Teoria e Tecnologia della Comunicazione. Corso 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 visual design. Laboratorio di grafica vettoriale. Pag , 65, 66, 68, 69, 79-84, 91-95, : Bollini L, Greco M. (2008). Organizzare presentazioni efficaci. Progettare e realizzare diapositive per parlare in pubblico. Pag : Bollini L, Cova R. (2009). Basic Web Design 2: standard e strumenti per la progettazione web. Testi parziali e immagini: Angela Nuzzi - angysg84@gmail.com Matteo Ostuni - matteo.ostuni@gmail.com Domenica Pontieri - domenica.pontieri@gmail.com Impaginazione: Domenica Pontieri - domenica.pontieri@gmail.com Copertina e concept grafico: Rinaldo de Palma - rinaldo.de.palma@gmail.com Licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 3.0 Italia License In copertina: Francesco Griffo IV

5 Indice VII Presentazione Anatomia della parola scritta 2 Misurazione del carattere 18 Tipi grafici 23 La composizione 55 La forma del testo 71 Tipografia web 89 L intervista 108 Riferimenti 113 Indice delle immagini 125 Biografie degli autori 128 V

6 VI

7 Presentazione L esperienza didattica maturata durante il corso di Graphic Design del Corso di Laurea in Teoria e Tecnologia della Comunicazione presso l Università degli Studi di Milano-Bicocca è confluita nella realizzazione di questa collana distribuita in diversi formati elettronici, articolata in sette lezioni che intendono affrontare le diverse tematiche connesse alla progettazione grafica nell ambito della comunicazione visiva, snodandosi attraverso un costante percorso di analisi dello stato dell arte, di osservazione degli interpreti più significativi e di esplorazione degli scenari più innovativi, fornendo di volta in volta strumenti, spunti ed occasioni di riflessione, confronto, partecipazione e divertimento, in uno scenario in continua evoluzione e rapido mutamento. Il carattere tipografico, la sua storia, i suoi dettagli non sono altro che la manifestazione visiva della parola, elemento centrale di ogni tipo di comunicazione. Saper comunicare visivamente un progetto dal punto di vista grafico implica l essere 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 dall analisi 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 caratteri dalla scrittura calligrafica a quella digitale. VII

8 Titolo di capitolo KEY WORD

9 Anatomia della parola scritta ESSE NCE

10 Introdurre il tema della tipografia significa dedicare uno spazio sufficientemente ampio ai caratteri e alla loro importante funzione all interno di ogni progetto grafico. Questa prima parte del capitolo è dedicata all analisi di quella che definiamo l anatomia della parola scritta, in cui si analizzerà il carattere da un punto di vista prettamente grafico. Conoscere da quali elementi è costituito un carattere è utile per progettare in maniera corretta e significativa un testo e un layout grafico. Di seguito vengono analizzati gli elementi che costituiscono e contraddistinguono i diversi tipi di carattere (asse, discendente, ascendente, apice, vertice, asta, etc). 3

11 Asse Ogni tipo, famiglia di caratteri ha un proprio asse sul quale vengono disegnate e costruite le lettere. La presenza dell asse imita il tratto di una penna, generando sezioni spesse o sottili, più o meno inclinate, come se la lettera fosse disegnata con un pennino. La O è ideale per individuare l asse di una lettera, perché ne mette chiaramente in evidenza l inclinazione Asse sulla lettera O 4

12 Linea di base La linea di base è la linea immaginaria sulla quale poggiano le lettere. Tutte le lettere discendenti, come la g, la y e la j si estendono sotto la linea di base. Normalmente nella maggior parte dei caratteri, le lettere arrotondate e appuntite, si estendono leggermente sotto la linea di base Linea di base 5

13 Discendente Il discendente è la parte di una lettera che si estende sotto la linea di base e si trova nelle lettere g, j, p, q, y. I discendenti dello stesso carattere, possono avere profondità diverse Discendente 6

14 Ascendente L ascendente è la parte di una lettera che si estende sopra l altezza della x. Si trovano nelle lettere b, d, f, h, k, l, t. In alcuni casi a seconda del disegno del carattere, l ascendente risulta essere più alto della lettera maiuscola Acendente 7

15 Apice L apice è il punto di intersezione più alto della lettera, dove si incontrano due tratti. 005 Vertice Il vertice è il punto di intersezione più basso tra due tratti, nei pressi della linea di base Apice 006. Vertice 8

16 Asta L asta di una lettera è il principale tratto verti- cale di questa, non include ornamenti di nessun tipo. 007 Asta primaria e secondaria In alcuni caratteri come nella lettera M e H, di tipo serif (con grazie), spesso sono presenti aste primarie e secondarie Asta 008. Asta primaria e secondaria 9

17 Asta trasversale L asta trasversale o incrocio, è il tratto orizzontale che attraversa un altro tratto. 009 Barra La barra è il tratto orizzontale che collega due tratti Asta trasversale 010. Barra 10

18 Braccio Il braccio è il tratto ascendente, orizzontale o diagonale, collegato alla lettera ad una estremità e libero dall altra. 011 Gamba La gamba è il tratto diagonale discendente, collegato alla lettera ad una estremità e libero dall altra Braccio 012. Gamba 11

19 Sperone Lo sperone è una breve proiezione appuntita di un asta o di un tratto di un carattere serif (graziato). 013 Svolazzo Lo svolazzo è il tratto terminale decorativo, aggiunto al carattere, presente o meno, a seconda del tipo e dello stile del carattere utilizzato Sperone 014. Svolazzo 12

20 Spina La spina è il punto principale della curva della lettera S, s. 015 Collo Il collo è il tratto che collega la sezione superiore a quella inferiore della lettera g. Ricordiamo che può essere anche molto diverso da carattere a carattere Spina 016. Collo 13

21 Anello/Gancio L anello è il tratto discendente della lettera g. Quando è completamente chiuso è detto anello, quando è aperto è detto gancio. 017 Orecchio L orecchio è una breve sporgenza della lettera g. In base allo stile di carattere potrebbe trovarsi anche nelle lettere p ed r Anello/Gancio 018. Orecchio 14

22 Coda La coda è il prolungamento che si estende da una lettera verso il basso, normalmente sotto la linea di base. Si presenta sempre attaccata ad una estremità e libera dall altra, come nelle lettere Q e j. 019 Occhiello L occhiello è lo spazio chiuso nella parte superiore della lettera Coda 020. Occhiello 15

23 Spalla La spalla è la parte arrotondata di una lettera minuscola che collega due aste o due tratti verticali. 021 Contorno interno Il contorno interno è l area della lettera interamente racchiusa da un contorno Spalla 022. Contorno interno 16

24

25 Misurazione del carattere DIME NSION

26 1. Per ulteriori aggiornamenti sui sistemi di misurazione del carattere, si suggerisce di consultare il testo in bibliografia Farsi un libro (Bandinelli, Lussu, Iacobelli, 1990) La dimensione del carattere è detta corpo del carattere e viene espressa e misurata in punti tipografici (pt) per quello che riguarda la grafica a stampa. Per le misure tipografiche ci si avvale del tipometro, uno strumento in plastica trasparente, composto da varie scale graduate in cui sono presenti le misure in centimetri e in millimetri e le corrispondenti misure tipografiche. Nel 1770 F. A. Didot introdusse il sistema di misura basato sul punto tipografico, che corrisponde a mm. Il sistema venne adottato da quasi tutti i Paesi europei, tranne che da Inghilterra e Stati Uniti che assunsero come unità di misura un punto pari a 0,351 mm 1. A partire dal 1980, la parola font è stata usata in alternativa con la parola carattere, per indicare la rappresentazione di tutti i caratteri costituenti uno specifico stile. All interno del font sono con- 19

27 tenuti anche i valori predefiniti degli attributi del carattere, come spaziature e interlinee, anche se è possibile intervenire in qualsiasi momento per modificarli. I font sono inoltre raggruppati in famiglie, che ne descrivono le varianti di stile (condensed, extended, etc) e di spessore (bold, medium, light, etc) 2. I font standard includono 26 lettere (maiuscole e minuscole), numeri (compresi tra 0 e 9) e caratteri aggiuntivi (segni di punteggiatura, accenti, 2. Per ulteriori aggiornamenti sulle font, si suggerisce di consultare il testo in bibliografia Grafica & Stampa (Fioravanti, 1984) caratteri o simboli particolari, segni di paragrafo, etc). Non tutte le categorie di font contengono però le stesse lettere: nei font per titolazione ad esempio, utilizzati solo in grandi dimensioni, potrebbero mancare alcuni caratteri presenti nei font di testo. Vi sono poi i set di caratteri speciali, come font ornamentali o 20

28 simbolici, che normalmente non includono alcuna lettera, ma solo simboli tipici del particolare set di carattere. Ricordiamo che è sempre necessario comunicare al tipografo che dovrà stampare il progetto, la piattaforma utilizzata per creare il documento (Windows o Macintosh) e inserire, insieme al progetto, anche una cartella con tutti i font utilizzati all interno del documento. Le font verranno caricate sul sistema operativo in modo da non avere problemi nella stampa finale del documento. In alternativa si possono convertire i testi in tracciati vettoriali. 21

29

30 Titolo Tipi di capitolo grafici SERIF KEY WORD SANS

31 Il linguaggio scritto si è evoluto nel corso dei millenni, facendo evolvere i caratteri dalla scrittura calligrafica degli amanuensi ai caratteri industriali a piombo fino a quelli odierni digitali. Per organizzare questo patrimonio sono state ideate numerose classificazioni degli stili di carattere 3. Di seguito vengono citati alcuni tra i più significativi sistemi di classificazione. 3. Per ulteriori aggiornamenti sui sistemi di classificazione delle categorie di caratteri, si suggerisce di consultare il testo in bibliografia Questioni di carattere (Rattin, Ricci, 1997) Aldo Novarese In Italia, Aldo Novarese, studioso di estetica del carattere e designer per la fonderia Nebiolo, propose una classificazione in dieci gruppi, secondo criteri storici e formali (tipo di grazie). Questa classificazione comprende i caratteri: lapidari, medioevali, veneziani, transizionali, bodoniani, scritti, ornati, egiziani, lineari e fantasie. 24

32 Lapidari Il carattere lapidario, chiamato anche capitale quadrata e maiuscola elegante, nasce per essere usato per le epigrafi e per le iscrizioni sui monumenti. Aspetto riconoscibile di questi caratteri sono le grazie, le quali terminano formando un angolo di 30 e la base completamente piatta 4. Un esempio è quello presente in una stele del basamento della Colonna Traiana, eretta a Roma nel 4. Per approfondimenti consultare l articolo in sitografia Come conoscere ed utilizzare i caratteri tipografici. Le classificazioni stilistiche 5. Per approfondimenti consultare l articolo in sitografia Lapidari - Romani Antichi (Classificazione Novarese) 114 d.c.. Si tratta di caratteri le cui grazie sono triangolari e formano un angolo acuto con la linea di base. Il carattere Trajan, maiuscolo e maiuscoletto, disegnato da Carol Twombly è quello che meglio rappresenta la digitalizzazione del carattere lapidario 5. 25

33 Carattere Trajan 024. Dettaglio della Colonna Traiana, Roma 26

34 Medioevali I caratteri medioevali (chiamati anche gotici) sono caratteri tipici del periodo di Gutenberg, che oggi sono considerati di difficile lettura proprio per la loro pesantezza visiva. Si tratta di caratteri derivati dalle varie scritture usate nell Alto Medioveo e nel Rinascimento. Sono caratterizzati dalle estremità allungate che terminano con angoli accentuati che imitano le forme eseguite con la penna d oca. Le maiuscole hanno spesso terminali molto svolazzanti. Le grazie di questa tipologia di carattere sono anche definite a punta di lancia rivolta verso il basso Carattere Old London

35 Veneziani I caratteri veneziani derivano dai caratteri romani antichi, sono caratterizzati dall estremità arrotondata delle grazie e dal piede dell asta leggermente concavo. Il carattere «Garamond» è il più adoperato, ma vi sono altre tipologie di Veneziani: «Bembo», «Poliphilus Roman» «Blado Italic», «Jenson», «Garaldus», «ITC Galliard», «Golden», «Caledonia», «Centaur», «De Roos», «Elzevir», «Sabon», «Vendôme», «Romulus», «Trajanus», «Meno», «Minion», «Van Dijck», «Bitstream Iowan Old Style», «Serlio», «Aurelia», «Dante» Per approfondimenti consultare l articolo in sitografia Veneziani - Rinascimentali (Classificazione Novarese) 026. Carattere Garamond

36 Transizionali I caratteri transizionali sono tutti quei caratteri nati tra il periodo degli Old Style e dei Moderni quindi tra la fine del XVII e il XVIII secolo. Le caratteristiche che contraddistinguono questi tipi di carattere riguardano le grazie le quali non hanno quasi mai inclinazione e si uniscono all asta verticale con una piccola curva, mentre la base è quasi completamente piatta 7. Un esempio di carattere transizionale è lo Scotch Roman creato, probabilmente, da Richard Austin (n m. 1830) e poi digitalizzato dalla Monotype. 7. Per approfondimenti consultare l articolo in sitografia Transizionali - Barocche (Classificazione Novarese) e Come conoscere ed utilizzare i caratteri tipografici. Le classificazioni stilistiche 027. Carattere Scotch Roman

37 Bodoniani I bodoniani sono caratteri classici ispirati a Giovanbattista Bodoni. Sono caratterizzati da un rapporto di spessore esasperato tra le aste e dal contrasto tra gli spessori delle grazie e delle aste. Le grazie si uniscono con l asta verticale della lettera, formando un evidente angolo retto e sono solitamente ridotte a un filetto completamente piatto. Vengono molto utilizzati sia in editoria che in pubblicità Carattere Bodoni 30

38 Scritti Gli scritti sono detti anche calligrafici in quanto si avvicino alla scrittura a mano. Hanno caratteristiche eterogenee e variabili a seconda del tipo di strumento di scrittura che si imita. Si distinguono in calligrafici legati o non legati. Alcuni esempi sono: Bo Chen Font, Desyrel, Elliot Six, Gorri Sans Per approfondimenti consultare l articolo in sitografia 12 Font Scritti a Mano per Uso Commerciale e 50 Beautiful Hand-Drawn Web Design 029. Carattere Desyrel 31

39 Ornati I caratteri ornati sono caratteri con decorazioni accentuate e ombreggiature che di solito vengono utilizzati come capilettera e sempre affiancati ad altri caratteri 9. Un esempio di tale carattere è l Ornate Initial Styles Two Std ideato da Gerald Gallo Per approfondimenti consultare l articolo in sitografia Come conoscere ed utilizzare i caratteri tipografici. Le classificazioni stilistiche 030. Carattere Ornate 32

40 Egiziani I caratteri egiziani nascono a seguito del ritrovamento della stele di Rosetta oggi esposta al British Museum. Hanno molta forza espressiva. Sono riconoscibili per le grazie ad angolo retto Carattere Clarendon 032. Dettaglio geroglifico della stele di Rosetta

41 Lineari I caratteri lineari sono detti anche più comunemente 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 Carattere Futura 34

42 Fantasie 10. Per approfondimenti consultare l articolo in sitografia Come conoscere ed utilizzare i caratteri tipografici. Le classificazioni stilistiche 11. Per approfondimenti sui caratteri fantasie, si suggerisce di consultare il testo in bibliografia Tipografia digitale. Evoluzione tecnica dei caratteri (Marvin, 1998) I caratteri fantasie comprendono tutti quei caratteri che presentano degli effetti particolari o dei fregi e non rientrano nelle precedenti categorie. Sono caratteri inventati senza nessuna regola costruttiva 10. Molto spesso presentano una ricca quantità di dettagli che per essere comprensibili devono essere riprodotti in grandi dimensioni 11. Un esempio dei caratteri fantasia è il Critter, creato da Craig Fraiser, nel quale ogni lettera è rappresentata dal mondo animale, in particolare il nome di ogni animale inizia con la lettera rappresentata: per esempio la lettera Z è rappresentata da una zebra. Questo tipo di carattere è composto da sole lettere maiuscole. 35

43 034 Sistema Lawson 034. Carattere Critter Il sistema AtypI (Association Typographique Internationale) venne adottato dall associazione tipografica internazionale e indica dieci categorie: Humane (Tondi del XV sec), Garalde (Francesi del XVI sec), Réale (Transizionali), Didone (Bodoni), Mécane (con grazie squadrate), Linéale (sans serif), Incise (caratteri con grazie 36

44 triangolari), Script, Manuaire e Fractura. Il sistema DIN Schriften, fu proposto da Hermann Zapf nel 1967 e si fonda sulla classificazione in tre categorie di caratteri e relative sottocategorie: Roman (che comprende Renaissance, Baroque, Neoclassic, Free Roman, Linear, Block, Roman, Script), Blackletter e Non-roman. Il sistema Typerfinder fu proposto da Christopher Perfect e Gordon Rookledge nel 1983 e usa due categorie primarie e sedici sottocategorie. Il sistema è stato concepito per offrire una facile identificazione dei diversi stili di carattere. Le due categorie principali comprendono: stili di carattere per il corpo del testo e stili di carattere decorative. La classificazione che verrà presa in esame in questa sede è quella attuata da Lawson, integrata da alcune nuove categorie alla luce della particolare evoluzione che la scrittura ha subito nell evoluzione contemporanea 37

45 del desktop publishing e dei media digitali. Le ultime due categorie in realtà non rientrano nel sistema di classificazione Lawson, ma importanti per lo sviluppo che hanno avuto negli ultimi anni. La classificazione comprende le seguenti categorie: Blackletter, Serif (che comprende Oldstyle, Transitional e Modern), Sans Serif (che comprende Grotteschi, Geometrici e Umanistici), Script, Brush, Decorative, Pixel e Simboli (PI). Questa classificazione mette chiaramente in evidenza le diverse famiglie di caratteri, le differenze di stile e di uso proprie di ogni singola categoria. Blackletter I primi stili di carattere imitavano i tratti dei pennini e dei pennelli, utilizzati dagli amanuensi. Nei primi periodi della pubblicazione editoriale infatti, l obbiettivo del grafico-compositore era quello di creare dei documenti che apparissero il più possibile vicini ai costosi e preziosi lavori 38

46 trascritti manualmente. Questi stili che includono marcati caratteri di aspetto gotico e medioevale, hanno quindi una forte connotazione storica e una forte personalità. Poetica Chancery (disegnato da Robert Slimbach) è rappresentativo dello stile cancelleresco usato dagli amanuensi prima di Gutenberg. La famiglia di font presenta diversi svolazzi nelle lettere maiuscole e una gamma di caratteri alternati. Alcune lettere prese dal Book of Kells, rappresentano lettere di manoscritti sapientemente dipinti a colori. Esempi di lettere con forme grafiche medioevali utilizzate nei Paesi germanici fino alla Seconda Guerra Mondiale sono: il Wittenberger Fraktur (disegnato da Monotype Design Staff nel 1903), il Wilhelm Klingspor Gotish (disegnato da Rudolph Koch nel 1925) e il Fette Fraktur (disegnato da C. E. Weber nel 1875). 39

47 Il Clairvaux (disegnato da Herbert Maring nel 1981), il Duc De Berry (disegnato da Gottfried Pott nel 1990) e il San Marco (disegnato da Karlgeorge Hoefer nel 1990) invece hanno un sapore prettamente rinascimentale Caratteri Blackletter

48 Serif La parola grazia è la traduzione della parola serif, ed è un segno più o meno accentuato, disegnato per raccordare un asta o un tratto, con funzione di ornamento. Traggono la loro origine dal segno calligrafico della scrittura (pennello, penna d oca, etc). Sono i caratteri i cui estremi terminano con degli allungamenti ortogonali detti grazie che possono essere più o meno elaborate. Le grazie hanno una 12. Per approfondimenti sugli studi riguardati la leggibilità consultare l articolo in sitografia Which Are More Legible: Serif or Sans Serif Typefaces? valenza ornamentale ed estetica nel disegno del font stesso ma anche la funzione percettiva di legare visivamente tra loro le lettere. Prima si pensava che le grazie migliorassero la leggibilità perché forniscono più elementi indicativi per l occhio, ma studi più recenti 12 hanno dimostrato che le grazie sono più leggibili per coloro che sono cresciuti leggendo caratteri con esse, mentre i caratteri senza 41

49 grazie sono più leggibili per quelli che sono stati abituati in questo modo 13. I caratteri graziati vengono suddivisi in tre sottocategorie: Old Style, Transitional e Modern. 13. Per approfondimenti sulla distinzione tra caratteri bastoni e graziati visionare il video Leggibilità Trebuchet ure=player_embedded 036. Caratteri Serif

50 La categoria Old Style ebbe inizio con il primo carattere tondo disegnato da Nicholas Jensen nel 1470 e con il primo corsivo disegnato da Aldo Manunzio 14. Gli stili di carattere Oldstyle hanno l asse leggermente inclinato verso sinistra e presentano uno spessore di tratto uniforme. Fanno parte di questa categoria: Aldus, Garamound, Granjon, Caslon, Minion, Palatino e altri ancora. 14. Aldo Manunzio è il più importante editore e stampatore del Rinascimento, a lui si deve l affermazione definitiva del carattere romano sul gotico e alla diffusione dei primi testi classici. Per ulteriori approfondimenti si suggerisce di consultare i testi in bibliografia Grafica & Stampa (Fioravanti, 1984) e Cinque secoli di stampa (Steinberg, 1982) I Transitional presentano un forte contrasto tra gli spessori del tratto e le grazie, che si presentano molto sottili e diritte. L asse del carattere è quasi verticale. Fanno parte di questa categoria: New Caledonia, Fairfield, Bulmer, Times New Roman, Stone serif, New Barskeville e altri ancora. I Modern per l aspetto contrastante tra tratti spessi e sottili, viene considerata una 43

51 categoria elegante, e con molta personalità. Fanno parte di questa categoria: (Bauer) Bodoni, Linotype Didot, Didot, Walbaum, Melior, Fenice, New Century School Book e altri ancora Caratteri Old Style, Transitional e Modern 44

52 Sans Serif Gli stili di carattere Sans Serif sono senza grazie, comunemente definiti con il termine di bastoni, apparsi per la prima volta in un campionario di caratteri pubblicato da William Caslon IV nel Il design del carattere Sans Serif fu notevolmente influenzato dagli studi del designer inglese Eric Gill 16 (n m.1940), ideatore del carattere Gill Sans, i caratteri bastoni furono inoltre il campo di ricerca 15. Per approfondimenti si suggerisce di consultare il testo in bibliografia Tipografia digitale. Evoluzione tecnica dei caratteri (Marvin, 1998) 16. Per approfondimenti su Eric Gill consultare il suo sito personale www. ericgill.com 17. Per approfondimenti sulla scuola di di architettura, arte e design tedesca consultare il sito e sviluppo del linguaggio moderno e razionalista del Staatliches Bauhaus 17 ( ), la scuola architettura, arte e design diretta da Walter Gropius a Weimer Kandinskij, in Germania. La caratteristica più importante ed evidente di questa categoria è l assenza delle grazie, i caratteri Sans Serif si presentano con un tratto uniforme e sono particolarmente indicati per titoli, titoletti o intestazioni, 45

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

54 I caratteri Grotteschi nascono verso l inizio dell e prendono il nome dalle loro caratteristiche piuttosto grezze che successivamente vennero definite grottesche. Questi caratteri infatti sono caratterizzati da linee massicce e piuttosto marcate, senza la presenza di contrasto tra le linee 19. Un esempio di questa categoria di caratteri è il Monotype Grotesque realizzato nel 1926 da Monotype con il supervisione di Frank Hinman Pierpont (n m. 1937). 18. Per approfondimenti si suggerisce di consultare l articolo in sitografia Classificazionedeicaratteri Lineare Museo virtuale della Stampa 19. Per approfondimenti si suggerisce di consultare il testo in bibliografia Tipografia digitale. Evoluzione tecnica dei caratteri (Marvin, 1998) I caratteri Geometrici si basano, come suggerisce il nome stesso, sulle forme geometriche elementari. Il più noto e rappresentativo è il carattere Futura progettato nel 1928 dal tipografo e grafico tedesco Paul Renner (n m.1956). I caratteri Umanistici si basano sui manoscritti del 400 e richiamano molto le lettere romane. I caratteri distintivi riguardano i 47

55 contrasti delle linee che risultano affusolate. Il più famoso esempio di carattere umanistico è l Optima creato nel 1958 da Hermann Zapf (n. 1918) Per approfondimenti si suggerisce di consultare il testo in bibliografia Tipografia digitale. Evoluzione tecnica dei caratteri (Marvin, 1998) 039. Caratteri Grotteschi, Geometrici e Umanistici 48

56 Script, Brush Questa categoria include qualsiasi stile che sembri creato con un pennino, simulando una calligrafia o scrittura a mano libera. Le lettere presenti in questa categoria possono presentarsi come formali ed eleganti, leggere, scritte a mano. Sono spesso inclinate e tendono per questo a unirsi tra loro, il che le rende di non facile leggibilità. Fanno parte di questa categoria: Bertold script, Vivaldi, Lucida Calligraphy, English, e altri ancora per lo stile formale ed elegante. Comic sans, Mistral, Manoline script, Caflish script e altri ancora per lo stile a mano libera. 49

57 040 Decorative 040. Caratteri Script, Brush Gli stili di carattere decorative possono essere estremamente elaborati e particolareggiati e sono prevalentemente indicati per titoli di grandi dimensioni o per specifiche esigenze, non devono assolutamente essere utilizzati nel corpo dei testi. Questi stili furono resi disponibili in Inghilterra e in Francia a partire dal XVIII secolo e il loro nu- 50

58 mero aumentò notevolmente in particolar modo in risposta alla domanda degli inserzionisti. Fanno parte di questa categoria: Bremen, Broadway, Stencil, Mesquite, PepperWood, Bernard Fashion, Visigoth, Stop, Umbra, Futura Black, Christmas e altri ancora Carattere Christmas 51

59 Pixel Appartengono a questa categoria i font nati per la visualizzazione a monitor. I caratteri di questa categoria sono costituiti da veri e propri punti (pixel), il loro disegno è geometrico e squadrato, disegnato come un immagine bitmap, punto per punto e dunque non presentano alcuna curva. Grazie alla loro caratteristica di essere costituiti da singoli pixel, sono leggibili anche a dimensioni molto ridotte 21. Un esempio di questi caratteri è il Paskowy che ricorda quello utilizzato nei codici a barre. 21. Per approfondimenti si consiglia di consultare l articolo in sitografia Pixel Font cosa sono e dove trovarle? 042. Carattere Paskowy

60 Simboli (PI) I caratteri PI, spesso chiamati anche Simboli, non contengono lettere e numeri, ma solo elementi grafici, pittogrammi o icone di diverso genere, a seconda della tipologia di font selezionato. Questa famiglia di caratteri viene utilizzata quindi per inserire simboli, disegni o elementi grafici, non testuali, tipici dello stile selezionato. I tipi di carattere PI sono principalmente segni decorativi, orologi, simboli ferroviari, numeri racchiusi in cerchi ed altro. Alcuni esempi sono: Zapf Dingbats, Webdings e Wingdings Caratteri Simboli 53

61

62 La composizione FEA TURE

63 Scopo di questo paragrafo è analizzare gli attributi del testo che ne delineano l aspetto tipografico: stile, dimensione, giustezza di riga, spaziatura e interlinea, colore, giustificazione, griglia, margini, colonne e altro ancora. Questi concetti vengono spesso erroneamente trascurati, ma rivestono un importanza fondamentale nella gestione dell intero testo e dell intero layout di pagina. Prestando attenzione ad attributi come allineamenti e interlinea, il testo risulterà maggiormente leggibile e il design generale della pagina migliorerà, acquistando armonia e qualità estetica. Quando si lavora con il testo è utile conoscerne gli elementi che vanno dalla selezione di uno stile alle scelte dei relativi attributi, fino ad arrivare al suo posizionamento all interno della pagina, nella griglia di impaginazione. Quando un individuo legge un brano, compie delle 56

64 azioni percettive piuttosto articolate e complesse: il suo occhio segue la riga di testo con discontinuità, a sbalzi (scatti), questi salti si alternano a momenti di fissazione, in cui l occhio si ferma per qualche frazione di secondo. È soltanto in questo periodo di fissazione che viene percepita l informazione visiva. Nel periodo di fissazione, l occhio del lettore non registra i singoli caratteri, ma intere parole o parti di esse. Conoscere questo processo, può servire per scegliere i giusti criteri di composizione del testo 22. Interlinea 22. Per ulteriori informazioni sui sistemi di percezione visiva legati alla lettura di un testo scritto e in generale per analizzare le principali linee guida della progettazione grafica, si suggerisce di consultare il testo in bibliografia Il particolare nella progettazione grafica (Heller, Ghwast, 1988), (traduzione a cura di Girardello, 1997) Per interlinea si intende lo spazio tra le linee di testo, a partire dalla linea di base di una riga di testo superiore, a quella della riga inferiore. L interlinea viene misurata dalla linea di base di una riga, alla linea di base di un altra riga. Nella scelta dell impostazione dell interlinea è necessario tenere conto dei 57

65 criteri di leggibilità del testo e si consiglia sempre di effettuare diverse prove di stampa, per stabilire il valore più indicato, per poi passare alla composizione definitiva. Si può notare infatti come variando l interlinea, cambi l aspetto generale dello stile di carattere e di conseguenza anche della leggibilità. Molti programmi di editing di testo e di impaginazione grafica, assegnano in modo predefinito un interlinea, pari a circa il 120% della dimensione del corpo del carattere. Per cui un corpo pari a 12 pt avrà un interlinea pari a 14 pt e verrà indicata con la seguente dicitura 12/14. Ricordiamo tuttavia che ogni famiglia di carattere ha proprie caratteristiche specifiche (disegno delle lettere, dimensioni e proporzioni), si consiglia quindi di calcolare e specificare il reale valore dell interlinea che meglio si adatta alla tipologia di carattere e all uso che se ne deve fare (testo da leggere, titolazione, testo decorativo). 58

66 Spaziatura alto valore 045. Spaziatura valore standard 046. Spaziatura valore ridotto 59

67 Spaziatura La spaziatura è lo spazio tra le lettere. Quasi tutti i sistemi di impaginazione elettronica permettono di variare il valore predefinito di spaziatura. Il controllo della spaziatura è un modo eccellente per gestire ed eliminare vedove e orfane (singole parole o sillabe che ricadono nell ultima riga di testo o all inizio di una pagina o di una colonna successiva), e per ottenere effetti particolari sul testo. È necessario usarla con cautela, nei casi di testo da leggere, le lettere devono infatti essere adeguatamente distanziate, perché la loro forma possa interagire correttamente con le lettere circostanti, secondo le proporzioni ottimali e armoniche definite dal font designer. Un eccessivo avvicinamento può rendere complicata la lettura del testo, un eccessivo allontanamento rende altresì difficoltoso il pro- 60

68 cesso di lettura, nel combinare le lettere, troppo distanziate, 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 del suo inserimento all interno della griglia di impaginazione. Ma quanto deve essere lunga una riga di testo? Dipende dal tipo di carattere utilizzato, dal relativo corpo, dal layout complessivo della pagina e da tutti gli attributi impostati. Un testo troppo lungo (larghezza di riga eccessiva), rende difficoltoso il processo di lettura, una volta arrivati alla fine della riga, si trova difficoltà nel ritrovare quella successiva. Per contro, un testo troppo corto 61

69 (larghezza di riga minima), costringe l occhio ad effettuare troppi salti e troppe interruzioni di riga, rendendo anche in questo caso il processo di lettura difficoltoso e stancante. Paragrafi La giustificazione è il modo in cui viene allineato o giustificato un testo. Ci sono diversi modi per allineare un testo, i più utilizzati sono: composizione giustificata, composizione centrata e composizione a bandiera. Altri modi più personalizzati e usati in contesti particolari sono: la composizione a sagoma (quando tutte le righe del blocco di testo seguono la sagoma di un disegno o tracciato), e la composizione a giustezza crescente o decrescente (quando le righe variano in modo costante, 62

70 aumentando o diminuendo). Si consiglia di impostare il tipo di giustificazione in base al tipo di progetto e in base al layout grafico della pagina (elementi, oggetti grafici, illustrazioni e struttura dell impaginato). Composizione giustificata (a blocchetto) Nella composizione a blocchetto, le righe hanno uguale lunghezza e il testo è allineato in modo da avere entrambe i margini uguali e perfettamente regolari. In alcune applicazioni vi è la possibilità di selezionare una giustificazione centrata (l ultima riga di testo viene centrata rispetto alla larghezza del blocco di testo), oppure una giustificazione a destra (l ultima riga di testo viene allineata al margine destro del blocco). Questo tipo di composizione è la più utilizzata, per i libri e in generale per tut- 63

71 ti i documenti con lunghi passaggi di testo, perché facilita il processo di lettura. Una buona composizione di questo tipo non è facile da realizzare e va gestita con la giusta calibrazione della spaziatura fra le parole. La lettura diventa infatti sgradevole quando si vengono a creare buchi bianchi, dati da una giustificazione di tipo forzato. Composizione centrata (a epigrafe) Nella composizione a epigrafe, le righe, di diversa lunghezza, vengono centrate rispetto alla larghezza del blocco di testo, secondo un asse centrale. È preferibile usarla per brevi passaggi di testo, perché produce un affaticamento della vista nell andare sempre a cercare l inizio di ogni nuova riga. 64

72 Composizione a bandiera Nella composizione a bandiera, le righe, di diversa lunghezza, sono allineate al margine destro (bandiera spalla destra) o sinistro (bandiera spalla sinistra) del blocco di testo. In questo tipo di composizione c è il vantaggio di avere spaziature uniformi, non condizionate dall esigenza di arrivare a giustezza e di avere un allineamento stabile a sinistra o a destra, soprattutto in assenza di sillabazione delle parole (si ricorda che l allineamento a destra è più difficoltoso per la lettura, almeno nella nostra cultura occidentale, in cui l ordine di lettura è da sinistra a destra. Viene utilizzato solo in casi specifici e per brevi passaggi di testo). Lo svantaggio della composizione a bandiera è quello di non avere un punto determinato per la fine di ogni riga. 65

73 Composizione giustificata (a blocchetto) 048. Composizione centrata (a epigrafe) 049. Composizione a bandiera (sinistra e destra)

74 Margini e colonne Quando si progetta un qualsiasi prodotto editoriale (libro, catalogo, brochure, rivista, etc) è necessario prestare attenzione allo spazio occupato da testo e immagini, ma anche allo spazio vuoto circostante. Per molto tempo, nell impaginazione di libri e riviste, i margini utilizzati sono stati quelli di concezione tipicamente classica, con forti simmetrie e con un andamento decisamente regolare, ancora applicabili per una produzione sobria e raffinata. Si sono tuttavia sviluppati altri modi di composizione più moderni e a volte anche più esasperati, particolarmente adatti per l impaginazione di progetti editoriali pubblicitari, cataloghi e impaginati ricchi di illustrazioni, in cui la segmentazione della superficie non risulta più sim- 67

75 metrica e regolare, ma fluida e dinamica. Una buona regola è quella di controllare la giustezza delle colonne, in relazione all interlinea e al tipo di carattere utilizzato e lasciare spazio sufficiente affinché i caratteri non siano troppo ravvicinati al margine esterno della pagina e le colonne di testo non siano troppo attaccate tra loro (a meno di effetti esasperati, ma voluti). Tono e colore In una pagina stampata, la densità delle lettere viene chiamata colore, e indica il tono chiaroscurale della massa tipografica, che determina l impressione di nero (impressione di colore). Questa sensazione di colore può essere provocata da un paragrafo, da una colonna o da un gruppo di colonne all interno della pagina, dal tipo di font utilizzato, dal 68

76 relativo corpo, dall impostazione dei valori interlineari e di spaziatura, dal tipo di giustificazione e dall irregolarità stessa delle righe. Se si socchiudono leggermente gli occhi e si osservano i tre blocchi di testo proposti, si può notare con chiarezza il diverso impatto chiaroscurale di questi, in relazione all impostazione dei diversi attributi. Questo esercizio è utile anche per valutare il layout complessivo di una pagina: rapporti fra testo, immagini e spazi bianchi. 69

77

78 La forma del testo LEGI BILITY

79 Fino ad ora si è parlato del testo in modo puramente tecnico, definendo l anatomia dei caratteri e l aspetto tipografico, ma lettere e parole hanno un proprio stile e una propria personalità e andando ad inserirsi all interno di uno spazio, si caricano di valenze emotive molto forti. Esiste una stretta relazione tra parole e immagini e tra parole e spazio compositivo e senso. dimen- Relazioni sionali In questo paragrafo vengono analizzate le relazioni dimensionali e di senso che si vengono a creare tra testo e spazio compositivo. Ipotizziamo di scegliere un formato di pagina e di inserire al suo interno la parola egutenberg. Se si effettuano diverse prove, se si inserisce ad esempio la parola nel punto centrale della pagina con un corpo molto 72

80 piccolo (8 pt) e se si inserisce la stessa parola nello stesso punto, con lo stesso font ma di dimensioni considerevolmente superiori si potrà notare come cambiando semplicemente il corpo del carattere, si conferisce un impatto completamente diverso al layout, 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, indipendentemente dal significato delle parole inserite. Aumentando o diminuendo il corpo del testo in relazione al suo spazio, si possono ottenere effetti emotivamente e visivamente diversi. 73

81 Relazioni dimensionali tra testo e spazio 051. Relazioni dimensionali tra testo e spazio

82 Se il testo si espande su tutta la pagina, come un grosso titolo, dà un impressione di prepotenza, risalto e forza, viceversa se si presenta piccolo, a tal punto che lo spazio vuoto della pagina acquista rilievo, l impressione che si avrà sarà quella di un testo più elegante e raffinato, sottovoce, intrigante e discreto. Se il testo si muove seguendo un tracciato immaginario, il risultato sarà frivolo o personalizzato. Dall invenzione della stampa ad oggi, sono stati disegnati e prodotti migliaia di caratteri e nonostante questo ne vengono continuamente disegnati di nuovi. Gli esempi riportati, fanno capire chiaramente come la stessa scritta, possa caricarsi di significato, valenza emotiva e estetica, a seconda del tipo di carattere con la quale la si interpreta. A seconda del tipo di font utilizzato, della dimensione/corpo che gli viene attribuita in 75

83 relazione al format del documento e in base al posizionamento nel layout grafico, si ottengono diversi tipi di composizioni con un diverso impatto visivo ed emotivo. Il risultato è ovviamente sempre soggettivo e interpretabile secondo la propria esperienza e la propria sensibilità percettiva Per ulteriori informazioni sulla relazione dimensionale tra il testo scritto e lo spazio compositivo si suggerisce di consultare il testo in bibliografia Le vie del senso (Testa, 2004) 052. Valenza emotiva di scritta Bastoni

84 Valenza emotiva di scritta Decorative 054. Valenza emotiva di scritta Script

85 Linee guida per la composizione 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 tipo di carattere e che tipo di impostazioni risultano essere più adatte. È ovvio che i caratteri e le relative impostazioni, destinati ad un uso prettamente tipografico, debbano rispettare criteri diversi da quelli destinati ad usi più grafici e personalizzati. Il divario tra questi due orientamenti è piuttosto grande: l impaginazione del testo a scopo grafico è assai lontana dalla gestione di un testo ad uso lettura. Un testo scritto deve possedere un aspetto corretto, deve cioè essere costruito seguendo quelle che sono le principali linee guida, che favoriscano il processo di lettura, 78

86 memorizzazione e apprendimento. Di seguito vengono proposte alcune importanti linee guida che si rivelano utili per una corretta gestione tipografica del testo: La leggibilità di un testo diminuisce quando viene a mancare il contrasto tra testo e sfondo. Per passaggi di testo medio/lunghi è consigliabile inserire testo nero su fondo bianco, rispetta le regole classiche del processo di lettura, aiuta la leggibilità e non affatica la vista. Il contrasto testo bianco su fondo nero conferisce un aspetto elegante e raffinato, ma va usato con molta cautela perché affatica notevolmente la vista. Evitare di usare troppi caratteri diversi all interno dello stesso documento, per evitare un effetto di disordine e ambiguità, in cui nulla è realmente evidenziato e in cui non si riesce ad identificare la gerarchia 79

87 di lettura. L ideale sarebbe usare uno o al massimo due tipi di carattere, opportunamente selezionati: un graziato per i blocchi di testo e un bastoni per titoli e titoletti (vi sono dei set di caratteri bastoni molto leggeri e sottili che possono prestarsi senza particolari problemi ad essere inseriti nel corpo di testi anche medio/lunghi). Si consiglia, per creare la giusta gerarchia all interno del progetto, di giocare con diverse dimensioni e varianti di peso dello stesso carattere. Si otterrà un effetto più ordinato, gradevole e percettivamente ben organizzato. Evitare di scegliere tipi di carattere troppo spessi/scuri o troppo sottili/chiari. I caratteri troppo spessi e neri sono di difficile leggibilità e stancano l occhio, perché troppo marcati, così pure quelli troppo sottili e chiari, che si distinguono appena dallo sfondo, producono anch essi sforzo visivo. Assegnare un corpo di dimen- 80

88 sioni leggibili: il corpo di un testo leggibile varia tra 8 e 12 punti. Si tenga presente che un corpo 8 è consigliato 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 punti. Ricordiamo che ogni stile di carattere ha proprie dimensioni, in funzione dell apertura dell occhiello delle lettere: gli 8 punti di uno stile di carattere non coincidono sempre agli 8 punti di un altro carattere. A parità di corpo, un carattere con un occhiello grande è più leggibile di uno con un occhiello piccolo o stretto. Ricordiamo inoltre che è sempre utile fare delle prove di stampa. L alfabeto è provvisto di lettere maiuscole e minuscole, che devono essere combinate per formare un insieme armonico e leggibile del testo. L alternanza di maiuscole e minuscole è facilmente leggibile perché alterna lettere ascendenti e discendenti, 81

89 è quindi il modo più comune per comporre un testo ed è quello cui il lettore è maggiormente abituato. La presenza delle maiuscole, fornisce punti di riferimento (le maiuscole ad esempio, evidenziano chiaramente l inizio di una frase). L impiego esclusivo di lettere maiuscole o minuscole, produce un senso di uniformità, perché ritmicamente indistinto. L occhio non ha più punti di riferimento e il processo di lettura risulta rallentato con notevole affaticamento dell occhio. L uso del tutto maiuscolo può essere finalizzato all evidenziazione di una parola singola o di un gruppo di parole, per esempio in titoli o in corpi molto grandi. Le parti di testo che si desiderano evidenziare, vanno messe in risalto in modo corretto, senza interferire con il processo di lettura. L obbiettivo è infatti quello di chiarire il contenuto e distinguere le singole parti di testo. Per evidenziare una parola o una parte di testo in modo efficace è consigliabile usare il 82

90 corsivo, mentre per evidenziare in modo più marcato si consiglia di utilizzare il grassetto. Ci sono altri sistemi di evidenziazione: la sottolineatura, il colore, il maiuscolo e il maiuscoletto. È possibile assegnare colore al testo, purché sia netto il contrasto testo/sfondo, assegnando il colore su passaggi di testo relativamente corti, per veicolare l attenzione e per conferire senso specifico. La spaziatura fra le lettere deve essere impostata in modo corretto: è bene scegliere tipi di caratteri con una spaziatura media (impostando se necessario un grado di spaziatura adatto, non troppo espanso né troppo ristretto). L estrema espansione o condensazione può rendere difficoltoso e illeggibile il testo. La leggibilità di un testo dipende in larga misura dall impostazione dello spazio interlineare. L interlinea deve essere impostata in modo da facilitare 83

91 il movimento dell occhio tra le righe. Un insufficiente spazio interlineare rallenta e disturba il processo di lettura, perché l occhio è portato a guardare più righe contemporaneamente, per contro anche uno spazio interlineare eccessivo, disturba in quanto le righe si presentano troppo distaccate e l occhio non trova più punti di riferimento. Lo spazio interlineare serve per controllare vedove e orfane. Una vedova è una singola parola che ricade alla fine di un paragrafo, sull ultima riga. Un orfana è una singola sillaba che ricade alla fine di un paragrafo, sull ultima riga. È sempre consigliabile evitarne la presenza perché generano pagine irregolari e poco uniformi. La riga di testo è un altro elemento da non sottovalutare: le righe devono infatti essere di lunghezza appropriata, né troppo lunghe, né troppo corte. Quando la lunghezza delle righe è eccessiva, l occhio si stanca perché fatica a collegare le 84

92 righe successive, viceversa, se sono troppo corte, è costretto a continui spostamenti e sbalzi. Bisogna impostare colonne di testo di dimensioni adeguate! Scegliere il tipo di giustificazione adatto al tipo di testo che si sta manipolando e al layout grafico. Il design editoriale Abbiamo parlato di tipografia, trattando la grammatica del suo utilizzo e le principali linee guida, necessarie e utili per una corretta gestione del testo all interno del progetto grafico. Si è dato particolare risalto alle varie scelte tipografiche, che includono la scelta dei caratteri, le relative dimensioni, il colore di riempimento delle singole lettere e il colore di sfondo, in relazione al format di pagina, dando risalto al fatto che una buona gestione del testo, contribuisce ad 85

93 evidenziare il significato di ciò che è scritto e di tutto il layout di pagina. Abbiamo visto come uno stesso testo inserito in uno stesso format di pagina, possa conferire impressioni diverse a seconda delle modifiche apportate. Lo spazio in cui si sviluppa il testo può essere organizzato secondo un preciso schema, così da veicolare un preciso significato grazie alla gestione del testo stesso e delle singole lettere, nonché degli aspetti grafici complessivi. Abbiamo visto come uno dei problemi principali legati alla progettazione sia quello di inserire nel punto giusto i diversi elementi del testo, abbinandoli ad immagini, elementi grafici e colore. L obbiettivo finale è quello di mettere in ordine e creare precise gerarchie di lettura, conferendo al tutto leggibilità, estetica e valore espressivo dando il giusto valore ad ogni elemento. 86

94 Contrasto tra testo e sfondo 056. Testo nero su fondo bianco: standard di lettura 057. Testo bianco su fondo nero: forte contrasto

95

96 Tipografia web NEWSTYLE

97 Con l introduzione dei CSS e l abolizione definitiva del tag <FONT> considerato deprecated dal W3C a partire dall HTML 4.0, per la tipografia web si sono aperti nuovi scenari. Pur nella limitatezza delle risorse progettuali e delle scelte tipografiche i CSS hanno introdotto una serie di controlli sulla progettazione tipica e specifica della formattazione del testo che permettono una gamma di scelte orientata verso la ricchezza della dal 2011 anche nella versione italiana cultura tradizionale della grafica in questo settore. Sintomo di queste nuove opportunità sono per esempio l interfaccia stessa del blog di Zeldmann A list apart 24 che oltre a discutere a livello teorico delle potenzialità del web implementa e sperimenta quanto di nuovo sta succedendo. O la versione per il mondo del digitale di un classico della tipografia come The elements of Typographical Style del 90

98 25. Si veda il progetto web: Bringhurst 25 che ne estende le riflessioni teoriche al mondo del web. Il primo problema da affrontare nella scelta dei font, almeno per la parte testuale realizzata in codice di una pagina web, è quella della compatibilità tra una piattaforma e l altra, e/o le diverse versioni dei sistemi operativi che installano di default alcune famiglie di font prestabilite. Al cambiare dei sistemi operativi cambiano infatti i font installati e questo fa si che il lettering debba essere scelto sia per il giusto valore espressivo, di leggibilità, di gradevolezza e di identità rispetto alla comunicazione ma anche e soprattutto rispetto alla compatibilità tecnologia/software scelta. Possiamo scegliere di implementare delle pagine con font non browser safe, ma in assenza del font sulla macchina dell utente, quest ultima andrà a selezionare, se non diversamente da specificato nel codice, il primo font di default 91

99 disponibile sul browser o quello impostato dall utente stesso con effetti imprevedibili. In questo senso i font dovrebbero essere scelti all interno di una rosa purtroppo molto ristretta di caratteri che risultano essere presenti in pratica su ogni piattaforma/computer: bastoni: Arial e Verdana graziati: Times (Times New Roman) e Georgia monospaziati: (New) Courier Web font 92

100 26. Per approfondimenti consultare il sito www. will-harris.com 27. Per ulteriori informazioni si suggerisce di consultare il testo in bibliografia Organizzare presentazioni efficaci (Bollini, Greco, 2008) 28. Effetto di sfumatura che permette la simulazione dell arrotondamento delle lettere e cerca di simulare rotondità o variazione dello spessore dei tratti per esempio delle grazie. In genere, la renderizzazione a monitor di un font, in assenza di questa correzione visiva risulta un disegno geometrico scalettato In particolare Verdana e Georgia 26 sono stati disegnati da Mattew Carter autore tra l altro del MS Trebuchet e dei nuovi font introdotti nel nuovo sistema operativo di Microsoft Vista, anche se al momento non disponibili su MacOSX a partire dal 1994 espressamente per la massima leggibilità a monitor 27. Prendendo le mosse dalla tipografia tradizionale e dalla sua cultura espressiva Carter ha lavorato con estrema accuratezza sulla forma, la dimensione degli occhielli, la proporzione delle singole lettere ed il loro disegno in maniera tale che queste due famiglie di font mantengono buona leggibilità anche in condizioni estreme, come la visualizzazione a monitor, la mancanza di anti-aliasing 28, corpi piccoli al limite della restituzione grafica di un media a bassa risoluzione come 93

101 il digitale. I modelli sono sicuramente i grandi classici sia tra i bastoni, Helvetica tra tutti e i graziati il Times, ma l elaborazione originale coniuga le qualità storico espressive con le esigenze particolari di rendering su un medium in cui l inchiostro, il piombo e la carta sono scomparsi Arial - Verdana, Times - Georgia 94

102 Ma la scelta del carattere implica non solo degli accorgimenti tecnici, ma anche precise scelte espressive e di significato oltre che di caratterizzazione del messaggio. Pur nella limitatezza dei supporti di una presentazione digitale esiste una forte relazione tra la scelta del carattere spazio compositivo e senso (Testa, 2004). La scelta del carattere risponde cioè a due esigenze distinte e coesistenti: aspetto funzionale: a livello strumentale come veicolo della parola e dell informazione il testo deve assolvere a regole di leggibilità; aspetto espressivo: a livello di percezione conferisce alla composizione ritmo, gerarchia e personalità. 95

103 Le dimensioni contano L implementazione dei CSS e dei nuovi browser ha permesso un sempre maggio controllo da parte dell utente finale anche sulla visualizzazione del testo di un sito: è infatti possibile aumentare o diminuire a piacimento la dimensione del corpo del carattere a seconda del contesto di fruizione in cui ci si trova e in base alle proprie esigenze. Questo rende meno problematica da parte del designer la stima dell ipotetica dimensione settata di default nelle preferenze del browser e che diventa il parametro di riferimento per tutto il resto del dimensionamento dei caratteri nella pagina. D altro canto perché ciò sia possibile si deve rinunciare all uso di unità di misura fisse convenzionali come i pixel e o punti tipografici in favore di un dimensionamento fluido e percentuale 96

104 o meglio ancora in.em del testo stesso. Il concetto che sta alla base di una buona gerarchia tipografia è in questo senso quello di rapporto proporzionale e dimensionale piuttosto che di dimensione fissa. Non bisogna dimenticare che la percezione della grandezza del carattere dipende anche dalla risoluzione dello schermo. Il concetto da tener presente è perciò quello relativo di più piccolo o più grosso nella gerarchia complessiva della schermata. Formattazione e semantica Oltre alla scelta del font abbiamo anche a disposizione, per creare gerarchie di lettura il trattamento stesso del testo. Con la separazione del codice strutturale e presentazionale questo può generare talora confusione tra quanto indicato a livello di semantica del codi- 97

105 ce con un tag specifico e le aspettative di visualizzazione, gestibili invece con i CSS. L effetto di grassetto o bold <b> come <i> sono attualmente tra banditi dal W3C proprio per la componente visiva anziché semantica dell indicazione di markup è stato sostituito da <strong>: un tag che pone accento dal punto di vista della gerarchia e dell importanza della stringa di testo in esso racchiusa, di default, poi molti browser lo interpretano visivamente come grassetto (tramite CSS potremmo gestire la sua formattazione in maniera totalmente difforme mantenendo tuttavia salvo il suo significato strutturale). Analogamente il corsivo corrisponde a <em> cioè all enfasi: meno leggibile a monitor, viene utilizzato per isolare singole parole dal contesto, indicandone per esempio un uso particolare, la necessità di spiegarne il significato in quel 98

106 particolare contesto. Il tutto maiuscolo utilizzato soprattutto per titolazioni o parole da mettere in evidenza rende la lettura più difficoltosa: la mancanza di ascendenti e discendenti toglie infatti gli elementi di ancoraggio ottico che il nostro occhio utilizza per scandire la lettura, fondamentali nelle pagine web fluide e variabili. Inoltre secondo la Netiquette equivale ad urlare! Infine, pur esistendo il tag <u>, la sottolineatura ereditata dalla macchina da scrivere, sinonimo in genere di corsivo va riservata tassativamente ai collegamento ipertestuale essendo l elemento grafico visivo che contraddistingue fin dalle origini i link all interno di un ipertesto. 99

107 Interlinea Studi condotti sulla percezione e sulla lettura a monitor hanno dimostrato che un interlinea superiore rispetto a quella tipografica classica aiuta la lettura sui supporti digitali 29. Normalmente l interlinea è il 120% del corpo (14/16,8 pt); a monitor l interlinea ottimale è tra il % del corpo in funzione della lunghezza delle righe di testo (14/18,2 pt). 29. Si veda il lavoro in bibliografia Grids for the Internet and other digital media (Götz, 2002) Inoltre un interlinea troppo ridotta, utilizzata magari per risparmiare spazio di scrolling, rende le righe troppo compatte, magari con una sovrapposizione tra le ascendenti e le discendenti tra righe successive, creando confusione e difficoltà di lettura. Viceversa un interlinea troppo grande, con cui si cerca di sopperire al vuoto, produce un effetto di dispersione che rende difficile al nostro occhio scorre- 100

108 re la sequenza delle righe: in questo caso sarebbe meglio piuttosto giocare sulla giustezza del testo che non sull interlineatura. I paragrafi: giustezza del testo Le righe di testo dovrebbero contenere indicativamente una cinquantina di caratteri per mantenere un buon rapporto proporzionale con la dimensione del carattere stesso. Al di sotto il rischio è che le frasi risultino troppo frammentate con una difficoltà di cogliere intuitivamente il senso. Una lunghezza eccessiva invece costringe a scomodi movimenti del capo e rischi di far perdere il filo della lettura nella sequenza delle righe. Per quello che riguarda gli allineamenti dei paragrafi stessi, ferme restando le indicazioni e le consuetudini adottate nel- 101

109 la tipografia tradizionale, su web andrebbe sempre evitato il giustificato. L allineamento regolare sul bordo destro dei paragrafi, quello che il nostro occhio scorre prima di riprendere il filo sulla riga successiva, rende estremamente difficile mantenere il segno soprattutto in caso di scroll. La variabilità del margine allineato a bandiera, oltre ad ovviare al problema della mancata sillabazione, crea degli ancoraggi ottici che aiutano la fluidità di lettura anche in condizioni dinamiche come nel caso del web Ancoraggio visivo