F*NT U! by Lorenzo Dolfi

Politecnico di Torino

Lorenzo Dolfi

2014

Come scegliere i font adatti e non impazzire.

TECNOLOGIE — Font vs Typeface “La maniera in cui spiego ai miei studenti la differenza fra typeface e font è il paragone fra canzone e MP3” — Nick Sherman

Il font è il formato digitale attraverso il quale è possibile utilizzare il carattere tipografico.

POSTSCRIPT Molto valido per la stampa di qualità elevata come libri e riviste. È limitato a 256 caratteri per file.

TRUETYPE Questo formato contiene in un solo file sia le informazioni per schermo che quelle per stampa, risultando così molto versatile, oltre che semplice da installare.

OPENTYPE È il formato più recente. Ha come punti di forza la compatibilità tra i sistemi operativi e una maggiore estensione del set di caratteri di base. Può contenere fino a 65.535 caratteri o glifi in un unico file.

ANATOMIA 5

1. Altezza della minuscola (x-height): è l’area compresa tra la linea di base e la linea immaginaria che segna l’altezza delle lettere minuscole. Il riferimento è la lettera x. 2. Altezza della maiuscola (cap-height): è l’area compresa tra la linea di base e la linea immaginaria che segna l’altezza delle lettere maiuscole.

3. Linea di base: è la linea immaginaria su cui poggiano le lettere. Normalmente, alcune lettere arrotondate o appuntite si estendono leggermente al di sotto della linea di base. 4. Discendente: è la parte di una lettere che si estende al di sotto della linea di base. Appartiene alle lettere g, j, p, q, e y.

5. Asta: l’asta di una lettera è il principale tratto verticale. 6. Occhiello: è lo spazio chiuso nella parte superiore di una lettera. 7. Asse: ogni carattere ha un proprio asse sul quale vengono disegnate le lettere. Il modo più semplice per individuare l’asse del carattere è osservare la lettera O.

10 8

8. Orecchio: è una breve sporgenza della lettera g. In base al tipo di carattere si può trovare anche sulle lettere p e r. 9. Pancia: è la parte curva di una lettera che racchiude un area bianca tipica delle lettere a, d, b, o, D, B.

10. Ascendente: è la parte della lettera che si estende al di sopra dell’altezza della x. Si trova nelle lettere b, d, f, h, k, l, t. In alcuni casi l’ascendente supera l’altezza della lettera maiuscola. 11. Spalla: parte arrotondata di una lettera minuscola che collega due aste o tratti verticali. 12. Grazia: tratto terminale di un’asta che contraddistingue i caratteri serif (graziati).

Nel ventesimo secolo la creazione continua di nuovi caratteri rivelò dei limiti, così molti designer tentarono di elaborare schemi di classificazione. Ad oggi quello di Aldo Novarese ha avuto più successo ed è ritenuto il più convincente dal punto di vista didattico in Italia.

LAPIDARI Il nome deriva dal tipo di incisione che veniva fatta in periodo romano sul marmo con martello e scalpello. Per questo motivo possiedono delle grazie molto geometriche. Trajan Pro MEDIEVALI Il riferimento Ă¨ la scrittura gotica degli amanuensi.

Fraktur VENEZIANI Riprendono la scrittura umanistica del periodo rinascimentale.

Garamond VENEZIANI I loro elementi indicano la transizione tra romani antichi e romani moderni. Nascono tra la fine del XVII e il XVIII e non presentano particolari innovazioni rispetto ai caratteri Veneziani. Baskerville BODONIANI Creati da Bodoni in Italia nel 1789 e da Didot in Francia. Hanno grazie ridotte a un filetto piatto e orizzontale, e aste e curvature di uno spessore accentuato. Bodoni

SCRITTI Imitano i tratti della scrittura a mano.

ORNATI

Bickham Script

Caratteri con decorazioni che trasformano la scritta in un fregio ornamentale, presentando perciĂ˛ svolazzi, figure floreali o astratte. Sono costituiti spesso dalle sole iniziali. COTTONWOOD EGIZIANI Hanno grazie esasperate, squadrate e molto pesanti, in alcuni casi dello stesso spessore della verticale base, a differenza dei bodoniani che, pur avento grazie pronunciate, hanno un forte contrasto. Rockwell LINEARI Detti anche bastoni o sans-serif, hanno aste di spessore quasi uniforme, privi di grazie terminali e definiti da forme essenziali e lineari. Univers FANTASIA Di questo gruppo fanno parte quei caratteri che non posseggono regole costruttive per essere inclusi nelle altre categorie.

Bauhaus

CON GRAZIE O SENZA GRAZIE? QUAL È PIÙ LEGGIBILE?

SERIF VS SANS-SERIF

Si dice in giro che i serif siano più adatti per la stampa e i sans-serif per il web. Questo deriva dal fatto che i primi hanno una lunga tradizione e i secondi sono più recenti. In realtà le differenze di leggibilità sono veramente insignificanti, bisogna invece fare attenzione agli allineamenti, alle spaziature, alla dimensione, dopodiché occorre valutare a seconda del contesto e del messaggio che si vuole trasmettere.

L’IMPORTANZA DELLA FAMIGLIA STILI Regular Italic Oblique

LARGHEZZE

CONDENSED

Light Regular Bold PESI

EXTENDED

CLASSIFICAZIONE FUNZIONALE

Il numero sempre crescente di font rende ancora validi i vecchi strumenti di identificazione? Grazie al metodo funzionale di classificazione si può subito individuare un ambito di lavoro e il percorso di scelta può partire più velocemente. Per realizzare questa classificazione si prendono in considerazione 4 gruppi riguardanti una composizione tipografica: i testi, i titoli, l’infografica e il web. A questi si aggiunge un ultimo gruppo: l’immagine coordinata.

4+1 —

01–Testi

Fanno parte di questa categoria le linee guida che orientano alla scrittura di un testo, inteso come un insieme di parole piĂš o meno fitto. Non vi Ă¨ un numero preciso di parole o di pagine per identificare i testi appartenenti a questa categoria, ma si intendono tutti quelli per cui Ă¨ richiesta una certa attenzione nella lettura. Da una piccola relazione fino ad un saggio o ad un libro molto voluminoso.

Versione Normal, Regular o Book X-height medio Contrasto medio Larghezza simile tra le lettere Lettere d-b e p-q con disegno diverso (non specchiate)

Adobe Caslon

Praesent non sapien eget odio posuere pretium. Phasellus sed dolor non mauris interdum commodo. In quis quam a arcu molestie aliquam et quis nunc. Aliquam cursus nec libero a dictum. Suspendisse bibendum lorem vitae congue dapibus. Nam porta et nisi vitae pellentesque.

Adobe Garamond

Bembo

Gill Sans

Trade Gothic

FF Scala Sans

A sinistra sono riportati esempi serif e sansserif che funzionano su piccole dimensioni. Gli esempi sottostanti dimostrano invece che quando c’è troppo contrasto nei tratti, o quando è quasi inesistente la lettura è meno fluida.

Bodoni

Futura

02â&#x20AC;&#x201C;Titoli

Questo gruppo comprende titoli di giornale, di magazine, di articoli, di pubblicità, insomma tutto quello che precede un testo più ricco e ne riassume il significato, e che deve catturare l’attenzione del possibile lettore. Ciò che devi mettere in primo piano è la distanza di lettura.

Peso elevato / Bold, Semibold, ExtraBold, Black Buona leggibilità alla distanza effettiva di lettura Serif, sans-serif e ma anche di fantasia con svolazzi, se la leggibilità non è compromessa Armonia / con il messaggio trasmetto e il contesto Contrasto / rispetto agli altri testi

CATTURARE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat nec lectus sit amet tristique. Donec eget congue justo, consectetur convallis elit. Nulla pretium sem ac mollis cursus. Nulla facilisi. Aenean sollicitudin lacinia lacus a maximus. Morbi feugiat convallis dignissim. Quisque eget dolor non

metus rutrum venenatis a quis mi. In at tincidunt mi. Curabitur laoreet mattis velit quis tristique. Nunc ullamcorper porttitor felis, ac eleifend magna semper vel. Phasellus hendrerit nunc id pulvinar aliquam. Nullam fringilla dignissim lacus, at varius augue. Suspendisse eu dui ac

eros maximus scelerisque vel sed eros. Morbi at arcu ac nunc suscipit dictum. Praesent ut cursus massa, in posuere sem. Quisque vulputate purus enim, vitae ullamcorper metus luctus at. In orci lectus, faucibus ac felis finibus, lacinia faucibus massa. Nunc hendrerit tortor eget arcu commodo, eu

Lâ&#x20AC;&#x2122;ATTENZIONE consequat felis aliquam. Donec fermentum eros sem, ac viverra sapien maximus in. Vivamus consectetur ut metus nec viverra. Vestibulum et vestibulum libero. Maecenas sed laoreet libero. Donec ultricies venenatis sollicitudin. Vivamus sagittis a sapien nec dictum. Nunc lobortis et mauris eu rhoncus. Vivamus a dui sed mauris maximus cursus non quis nunc. Nulla egestas ligula neque, vitae laoreet nunc tempor tempor.

Donec scelerisque libero at nisl semper, in tincidunt sem ullamcorper. Fusce vulputate massa eu bibendum eleifend. Fusce ac felis viverra, sollicitudin nibh in, fermentum lacus. In lacinia nisi ac gravida ultrices. Vestibulum fermentum lectus quam, sed posuere justo rutrum eget. Vivamus efficitur urna quis nulla suscipit egestas. Curabitur euismod erat et nunc euismod, ac blandit tellus porttitor. Ut metus lectus, blandit quis arcu quis, conse-

quat facilisis ipsum. Quisque sit amet commodo nunc, quis consequat dui. Duis quis felis a libero malesuada feugiat nec posuere ligula. Sed condimentum. lectus ac tristique tempus, ex tortor egestas erat, sit amet suscipit ante quam at dolor. Fusce ut gravida ligula, eu consectetur lorem. Proin euismod consequat gravida. Aenean eget consequat lacus, vitae convallis justo. Integer dapibus. porttitor nulla, nec mollis ipsum. Suspendisse

CONTRASTO E GERARCHIA TRA GLI ELEMENTI

03窶的nfografica

Nota anche come information design, l’infografica si occupa di tradurre in forma grafica dati e informazioni. Molto utilizzata in ambito giornalistico, in riviste, saggi, ma anche nei libri di testo. Il problema principale è lo spazio ristretto rispetto ad una grande quantità di informazioni. Per questo potrai orientarti con le seguenti linee guida.

Compattezza / Condensed Sans-serif / neutralità dei dati Qualità del disegno dei numeri Descrizioni in piccole dimensioni: vedere sez. 01

04–Web

Compatibilità. Il problema che può sussistere in questa categoria risiede nell’interpretazione del supporto tecnologico delle informazioni relative ai font. I browser, ad esempio, devono leggere un codice, interpretarlo, e restituirlo all’utente, e il risultato non è sempre lo stesso su tutti i supporti.

Di sistema / per tutte le piattaforme Google Font / caricati su server Google Webfont Generator / es. fontsquirrel.com Serif, sans-serif o fantasia a seconda del contesto e della lunghezza dei testi

Arial (tutti i sistemi)

Times New Roman (tutti i sistemi)

Verdana (tutti i sistemi)

Lato (Google Font)

Open Sans (Google Font)

PT Serif (Google Font)

05窶的mmagine coordinata

A questo gruppo, oltre alla parte tecnica, è legata anche una componente emotiva. Dobbiamo chiederci quale messaggio vuole trasmettere l’azienda o il progetto all’utente finale. È una categoria aggiuntiva, molto estesa e complessa che non si vuole ridurre a poche righe, ma di seguito puoi trovare qualche spunto iniziale.

Leggibilità da piccolo a grande / no svolazzi Famiglia ampia / ad ogni variante una funzione Armonia con i valori dell’azienda/progetto Vasto set di caratteri Licenza commerciale o libera da vincoli

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, dapibus tristique magna ac, dignissim lacinia enim. Donec commodo, dui in interdum euismod, sem lacus facilisis leo, ut vulputate urna urna et magna. Integer facilisis vel magna nec pellentesque. Nam arcu nulla, vestibulum ut vulputate eget, tempus nec massa. Pellentesque nec molestie mi. Integer ac quam ut est varius aliquet. Quisque consectetur lacus nisl. Suspendisse tristique nibh at risus mollis ullamcorper. Aliquam nisl turpis, scelerisque eu purus non, dignissim sagittis nulla. Aliquam mauris tortor, sodales quis cursus eget, eleifend in nibh. Etiam vitae tellus bibendum, fermentum enim gravida, mattis dolor. Morbi cursus blandit libero, ut rhoncus sem dapibus et. Nulla tincidunt erat quis nisi tincidunt, vel maximus nulla pellentesque. In et rhoncus elit, bibendum posuere quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus a diam sed nisl semper imperdiet. Aliquam erat volutpat. Fusce porttitor sapien eu metus rutrum euismod. Mauris finibus ut lacus ac sollicitudin. Nam at felis sit amet arcu efficitur imperdiet. Quisque vitae consectetur neque. Aenean a purus a dolor sodales pulvinar. Aliquam eget convallis nisl. In laoreet ligula vel vulputate tristique. Nam a sem at ligula tincidunt vehicula auctor a sem. Ut lacinia malesuada justo id blandit. Duis efficitur gravida venenatis. Aenean malesuada convallis augue eget finibus. Nulla rhoncus justo vel metus ultricies ultricies. Proin a malesuada massa. In faucibus ipsum id rhoncus efficitur. Quisque ultrices nunc massa, ac pretium mi vehicula in. Nunc ultrices aliquam ipsum. Integer iaculis blandit justo nec tincidunt. Etiam id posuere nunc. Vivamus gravida suscipit aliquet. Etiam accumsan orci metus, eu luctus sapien imperdiet ac. Maecenas tempus ligula id nisl mattis, ac auctor elit ultrices. Praesent tincidunt in dui sit amet imperdiet. Duis nisi nunc, lobortis nec sodales id, suscipit sed ante. Cras vel odio ac sapien convallis laoreet. Mario Rossi Firma

Via Mario Rossi 1 10121 Torino, Italy T. 0123456789

FONT U! Via Mario Rossi 1 10121 Torino, Italy T. 0123456789

Font Logo: Colfax Bold Font Testi: Colfax Regular Colfax Italic Colfax Medium Licenza: Commerciale

ABBINARE I FONT

Limita a uno-due, massimo tre-quattro font a seconda della grandezza del progetto.

Non sempre è necessario abbinare più font. In alcuni casi puoi giocare con dimensioni, distanze, maiuscole e minuscole.

1.1 Una sola variante

Una sola variante

UNA SOLA VARIANTE

In alcuni contesti, si può utilizzare un solo carattere in un’unica variante, creando gerarchizzazione tramite la distanza, le dimensioni, il maiuscoletto e il maiuscolo.

Varianti della stessa famiglia In questo caso la scelta è limitata a due font, coordinati nelle forme e nel disegno perché appartenenti alla stessa famiglia.

VARIANTI DELLA STESSA FAMIGLIA In questo caso la scelta è limitata a due font, coordinati nelle forme e nel disegno perché appartenenti alla stessa famiglia.

Varianti della stessa famiglia In questo caso la scelta è limitata a due font, coordinati nelle forme e nel disegno perché appartenenti alla stessa famiglia.

Tre varianti, stessa famiglia Lorem ipsum dolor sit amet, consectetur adipiscing Praesent non sapien eget odio posuere pretium. Phasellus sed dolor non mauris interdum commodo. In quis quam a arcu molestie aliquam et quis nunc. Aliquam cursus nec libero a dictum. Suspendisse bibendum lorem vitae congue dapibus. Nam porta et nisi vitae pellentesque. Donec at auctor nulla. Maecenas finibus leo eget aliquet congue. Nam at scelerisque ex. Sed nibh lectus, vestibulum nec felis vitae, condimentum accumsan justo. Curabitur quis ante ac libero blandit tincidunt. Vivamus congue mauris quis consequat vehicula. Mauris accumsan venenatis sapien eu maximus. Nulla ac erat varius, vestibulum eros non, fringilla libero. Fusce enim enim, porta non lectus ac, posuere bibendum nulla.

CREARE CONTRASTO

Helvetica e Univers hanno disegni simili, non si crea perciĂ˛ gerarchia.

Font simili Lorem ipsum dolor sit amet, consectetur adipiscing Praesent non sapien eget odio posuere pretium. Phasellus sed dolor non mauris interdum commodo. In quis quam a arcu molestie aliquam et quis nunc. Aliquam cursus nec libero a dictum. Suspendisse bibendum lorem vitae congue dapibus. Nam porta et nisi vitae pellentesque. Donec at auctor nulla. Maecenas finibus leo eget aliquet congue. Nam at scelerisque ex. Sed nibh lectus, vestibulum nec felis vitae, condimentum accumsan justo. Curabitur quis ante ac libero blandit tincidunt. Vivamus congue mauris quis consequat vehicula. Mauris accumsan venenatis sapien eu maximus. Nulla ac erat varius, vestibulum eros non, fringilla libero. Fusce enim enim, porta non lectus ac, posuere bibendum nulla.

Se decidi di abbinare un font che non appartiene alla stessa famiglia, scegli un disegno completamente diverso. Funziona bene lâ&#x20AC;&#x2122;accostamento serif e sans-serif.

Helvetica e Bembo hanno disegni molto differenti, in questo caso lâ&#x20AC;&#x2122;accostamento funziona.

Font in contrasto Lorem ipsum dolor sit amet, consectetur adipiscing Praesent non sapien eget odio posuere pretium. Phasellus sed dolor non mauris interdum commodo. In quis quam a arcu molestie aliquam et quis nunc. Aliquam cursus nec libero a dictum. Suspendisse bibendum lorem vitae congue dapibus. Nam porta et nisi vitae pellentesque. Donec at auctor nulla. Maecenas finibus leo eget aliquet congue. Nam at scelerisque ex. Sed nibh lectus, vestibulum nec felis vitae, condimentum accumsan justo. Curabitur quis ante ac libero blandit tincidunt.Vivamus congue mauris quis consequat vehicula. Mauris accumsan venenatis sapien eu maximus. Nulla ac erat varius, vestibulum eros non, fringilla libero. Fusce enim enim, porta non lectus ac, posuere bibendum nulla.

Quando i font utilizzati sono molto vicini, nella stessa riga, nello stesso paragrafo o in un logo, le proporzioni sono fondamentali. Nel caso in cui i font non abbiano proporzioni adeguate, occorre modificarle manualmente. Modifica manualmente lâ&#x20AC;&#x2122;x-height di uno dei due font in modo da eguagliare o risultare armonioso con lâ&#x20AC;&#x2122;altro.

Helvetica Bold + Adobe Garamond Regular

Trade Gothic Bold + Bembo Regular

Bebas Neue Bold + Minion Pro Regular

Montserrat Bold + PT Serif Regular

PT Serif Bold + Lato Regular

Lorem ipsum dolor

LOREM IPSUM DOLOR

Museo 900 + Univers Roman

Futura Bold Oblique + Courier New Regular

Clarendon Bold + Trade Gothic Regular

Bauer Bodoni Bold + Futura Book

Intro Regular + Helvetica Neue Roman

Lorem ipsum dolor

LOREM IPSUM DOLOR

TIPS 02 Le virgolette non sono un doppio apostrofo: hanno una forma differente quando vengono aperte e quando vengono chiuse. Ricordiamoci i numeri 66 e 99.

01 Non usare il MAIUSCOLO allâ&#x20AC;&#x2122;interno di una frase. Per enfatizzare una parte di testo usa lâ&#x20AC;&#x2122;italic. Oppure, per abbreviazioni, acronimi, estensioni di file, usa il maiuscoletto.

03 Allâ&#x20AC;&#x2122;interno di una frase usa i numeri nella forma lowercase (se sono presenti nel font, si attivano con il maiuscoletto o dal pannello glifi), come 1234567890. Se i numeri vanno invece incolonnati o inseriti in tabelle usiamo le figure lineari, che appoggiano sulla linea di base e occupano il medesimo spazio, e sono 1234567890.

04 Una legatura è la combinazione visiva di due o tre lettere in un’unica forma, come ad esempio le combinazioni ff, fi, fl, ffi. Le legature servono principalmente a far sì che le forme delle lettere non si sovrappongano tra loro e migliorano la leggibilità e l’estetica del testo.

05 Usa i pallini o i puntini centrati anziché i trattini. I pallini e i puntini centrati fanno parte del set standard di ogni carattere.

affinity affinity - Straight 3 miles - Left at 22nd - Soft right at Howard - 300 feet to destination · Straight 3 miles · Left at 22nd · Soft right at Howard · 300 feet to destination

WWW. dafont.com

myfonts.com

Dafont può essere uno strumento tanto utile quanto confusionario. Nella maggior parte dei casi, i font gratuiti all’interno non hanno una buona qualità e un buon set di caratteri, ma, se si sa valuta a seconda del lavoro e delle caratteristiche e limitazioni del font si può trovare qualcosa di interessante.

MyFonts è un portale che rivende font a pagamento, ma può servire a valutare e confrontare alcuni caratteri, data la vastità di collezioni al suo interno e un buonissimo uso dei tag e categorie. Inoltre ha uno strumento che in molti casi ci può tornare utile: WhatTheFont, che ci permette di caricare un immagine con un testo per poi trovarne il font utilizzato.

fontshop.com

fontfeed.com

fontsquirrel.com

FontShop è uno dei più grandi rivenditori di font digitali, che rilascia frequentemente dei font gratuiti. Ciò che lo rende un ottimo mezzo per i principianti è la parte dedicata all’educazione. Contiene infatti tutorial, miniguide e pdf con consigli e trucchi da utilizzare in lavori tipografici.

FontFeed è un progetto parallelo a FontShop, ma è strutturato come un blog. Contiene numerosi articoli, che quotidianamente aggiornano sulle novità del mercato, consigliano font, illustrano delle tecniche tipografiche e mostrano dei lavori da cui prendere ispirazione.

Fontsquirrel è un altro portale che propone font gratuiti e font almost free. Da considerarsi alla stregua di Dafont ma con una selezione più accurata. Tra i migliori distributori di font gratuiti, ha un’ottima applicazione, quella del web generator, che permette di creare il codice del font scelto pronto per un utilizzo sul web.

LICENZE Sei sicuro di poter utilizzare quel font per il tuo lavoro?

PREINSTALLATI I font che troviamo già nei software sono gratuiti? Assolutamente no. Non li abbiamo pagati singolarmente ma assieme al software. Così per i sistemi operativi. Le licenze di tali font scadranno nel momento in cui scadrà il software e non saranno più utilizzabili, e occorre quindi acquistare una nuova licenza se si vuole continuare ad utilizzarli.

FREEWARE

SHAREWARE

FREE COMMERCIAL

Disponibili a costo zero, ma nella maggior parte dei casi sono limitati all’uso personale e non commerciale, perciò, per alcuni tipi di lavoro, bisogna acquistare la licenza completa commerciale. Ci sono poi font free molto più liberi da vincoli ma, in ogni caso, controlla sempre il file della licenza e leggilo attentamente per capire se risponde alle esigenze.

Sono gratuiti ma con un set limitato di caratteri o con un periodo limitato di prova. Possiamo considerarli dei trial, dei quali l’utente si serve per giudicarne l’acquisto. Sono meno comuni dei freeware poiché richiedono due archivi differenti, di cui uno con caratteri mancanti, e questo può risultare negativo sia per la casa di produzione sia per l’utente.

Alcuni designer o case produttrici distribuiscono dei font completamente free, anche per uso commerciale. Si basano sull’idea che per un buon lavoro siano necessari più pesi e larghezze, e quindi rilasciano una o poche variazione di quella famiglia. Queste però hanno la stessa licenza dei font commerciali e non sono limitate nel set di caratteri o nel periodo di utilizzo.

Well done!

Guida realizzata da Lorenzo Dolfi Politecnico di Torino 2014 www.fontu.it