Come abbinare i font (guida per designer)

Shares

Come abbinare i fontScegliere un font è un processo complicato e richiede un’attenta analisi del tuo progetto. Ma sapere come abbinare i font può essere ancora più difficile. Quante volte ti sei trovato nella situazione di dover scegliere una coppia di font (o di più) e hai iniziato a scorrere a casaccio la tendina dei font? Sei curioso di sapere alcuni metodi per riuscire a combinare font nel modo migliore?

In questo articolo ti voglio dare una serie di consigli utili e testati personalmente da me e da molti designer affermati nel mondo su come accoppiare i font. Troverai consigli sia per chi è alle prime armi con la tipografia, sia per i “ninja” ovvero per coloro che hanno già conoscenze approfondite in merito.

Si comincia!

Molto spesso si sottovaluta l’importanza di una buona scelta del font ma, come ho spiegato bene in questo articolo su come scegliere il font più adatto, uno o più font scelti nel modo giusto possono determinare il successo o il fallimento di un intero progetto grafico.

Questo articolo è una sorta di continuazione e approfondimento della guida alla scelta dei font che ti ho appena linkato, ti consiglio quindi di dare un’occhiata anche a quell’articolo, se non l’hai già letto. Puoi farlo sia prima sia dopo la lettura di questo (tranquillo, non ti spio! eheh) però ti consiglio davvero di leggerli entrambi perché si completano a vicenda.

Ma adesso andiamo subito al nocciolo della questione: come abbinare i font?

7 consigli BASE per abbinare i font

Per spiegarlo ho preparato una serie di consigli utili per combinare al meglio i caratteri tipografici.

Partiamo dai consigli di base per abbinare i font. Ma ricorda che, anche se “di base”, sono consigli utilissimi per chiunque lavori nell’ambito della grafica e del design. Poi proseguirò con i consigli per ninja, ma ci arriviamo 🙂

Quali sono quindi le basi per combinare i font?

1. Combina un serif e un sans serif

Sicuramente una delle combinazioni di font più popolari in assoluto è quella di utilizzare un sans serif (o bastoni) con un serif (o graziato). Questa combinazione è un classico assoluto ed è davvero molto difficile sbagliare seguendo questo consiglio.

Molto spesso si sceglie il sans serif per il titolo e il serif per il corpo del paragrafo, ma perché? Per una questione di leggibilità. I sans serif, infatti sono (in linea generale) molto più apprezzabili in corpo grande e quindi in grossi titoli e slogan, mentre i serif garantiscono una migliore leggibilità. Ma non è assolutamente una regola e anzi, non sempre è una buona scelta fare così.

In questo primo esempio, ti mostro come utilizzando due caratteri a bastoni sia per il titolo che per il paragrafo si viene a creare un conflitto visivo. Il carattere usato per il titolo è il Myriad Pro Bold, molto pulito e neutrale, mentre per il testo ho utilizzato il Bell Gothic, che invece sembra urlare “datemi più spazio! Guardate come sono vivace!“. Si viene quindi a creare una tensione visiva.

Myriad Pro + Bell Gothic

Sostituendo al Bell Gothic un serif come il Minion Pro, l’effetto cambia totalmente! Myriad + Minion è infatti una delle accoppiate di font più popolari e apprezzate.

Myriad Pro + Minion Pro

Il blog Stepto & Son inserisce questa coppia di font tra le 10 migliori combinazioni serif + sans-serif per il web design.

2.  Crea una gerarchia visiva tra i font

Questo è un punto fondamentale. Prima ancora di iniziare a girovagare sui siti di font o a rotellare col mouse nella tendina dei font, devi decidere che funzione avranno i caratteri che sceglierai. Ad esempio: te ne può servire uno per i titoli, uno per i paragrafi e uno per le didascalie delle immagini. Dovrai quindi creare una gerarchia visiva.

Creare una gerarchia visiva tra i font è necessario per rendere chiaro il tuo messaggio. (twittami!)

Nell’esempio qua sotto ho utilizzato il Rockwell per il titolo principale, il Bembo per i testi dei paragrafi e il Gill Sans per i titoli secondari. Sono tutti di tre categorie diverse: rispettivamente slab serif, serif e sans serif. Gli slab serif (i font con le grazie spesse e perpendicolari) e i sans serif “eclettici” come il Gill Sans sono perfetti per titoli, slogan, ecc.

Rockwell + Bembo + Gill Sans

Tre font di tre diverse categorie ma che funzionano alla grande insieme perché ognuno di essi ha un preciso e ben definito ruolo gerarchico.

La strutturazione di una gerarchia visiva è utilizzatissima nell’ambito editoriale ma non si deve assolutamente limitare a quello: può essere utilizzata per ogni progetto di design!

A qualsiasi progetto tu stia lavorando cerca di chiederti “Quale elemento del layout voglio che sia il primo ad essere visto dal lettore?”. Può essere, come detto, il titolo di un giornale, ma anche il nome di una compagnia su un biglietto da visita o un’offerta speciale su un volantino.

Insomma, creare una gerarchia è importante per ogni progetto che coinvolge i font.

3. Usa font della stessa famiglia

Le famiglie di font sono una risorsa importantissima. Allora perché non sfruttarla?

Le famiglie di font sono quei font che, al loro interno, comprendo delle grandi varianti di peso e larghezza. Come ad esempio la famiglia Meta progettata nel 2003 da Erik Spiekermann che comprende 28 pesi e larghezze diversi o l’Univers di Adrian Frutiger del 1956 che ne aveva 24.

Riprendendo il precedente discorso delle gerarchie, puoi utilizzare i diversi pesi di una famiglia di font per i diversi ruoli gerarchici che hai deciso di avere nel tuoi progetto. Ad esempio Univers Extra Black per il titolo principale, Univers Bold Oblique per i titoli secondari e Univers Roman per i testi, come in questo esempio:

Univers con diversi pesi

L’effetto rimane comunque piacevole anche se si utilizza un unico font grazie alle meravigliose proprietà del font stesso.

4. Evita di usare font troppo simili

Se utilizzare lo stesso font in ruoli gerarchici diversi può risultare piacevole perché garantisce coerenza, utilizzare invece font diversi ma con caratteristiche troppo similari può creare una confusione quasi impercettibile ma in realtà molto fastidiosa.

In particolare questo avviene quando si mescolano font della stessa categoria come un serif con un serif, un sans con un altro sans serif e così via.

Ti ripropongo l’esempio utilizzato al punto 1 però, questa volta con font diversi rispetto al Myriad e al Bell Gothic utilizzati prima. Ho deciso di usare Univers ed Helvetica, che, per un principiante del mondo della tipografia, possono apparire uguali ma in realtà non lo sono affatto. Rimangono, però, troppo simili per stare bene insieme (un po’ come succede per alcune coppie, no? 🙂 ).

Univers + Helvetica

5. Non creare conflitto visivo

Questo consiglio raggruppa molti aspetti dei precedenti consigli. Quando cerchi di abbinare un font, devi puntare al contrasto, non al conflitto. Bisogna quindi sempre evitare font che fanno a pugni tra loro.

Solo perché due font sono diversi non significa che possano stare bene assieme. (twittami!)

Un esempio di coppia di font con un alto potenziale di conflitto è l’accoppiata Impact e Garamond, due font radicalmente diversi tra loro, sia per forme, sia per altezza dell’occhio, sia per spaziatura che per periodo storico ed utilizzo primario. Insomma, troppo, veramente troppo diversi e conflittuali.

Impact + Garamond

6. Limita il numero di font scelti

Un modo per evitare il nascere di conflitti visivi e anche per semplificare il processo di scelta dei font è quello di limitarne il numero. Si consiglia sempre di scegliere al massimo due o tre caratteri per un progetto e di non spingersi oltre.

Questa “regola”, però, può essere violata tranquillamente se il progetto lo richiede e se lo si fa in modo cosciente e volontario.

Ad esempio, se hai bisogno di creare un manifesto in stile “epoca Vittoriana” o Ottocentesca, potresti trarre spunto proprio dai manifesti di quell’epoca che facevano largo utilizzo di svariati font (specialmente slab serif, nati proprio in quell’epoca) nello stesso progetto.

Poster epoca vittoriana

7. Crea contrasto

Una volta che hai definito le gerarchie del tuo progetto, hai bisogno di capire anche quanta importanza dare a ciascun elemento gerarchico. Per distinguere bene i vari elementi e dare più o meno importanza ad essi in base alla loro gerarchia, devi creare contrasto sia di grandezza che di peso ma anche tramite spaziature e colori.

Il contrasto di grandezza è molto immediato: un testo di maggior grandezza spiccherà maggiormente di un testo di grandezza minore. È per questo che i titoli sono più grandi dei testi, ovviamente.

Il contrasto di peso è un discorso simile. Solitamente, in un testo, per dare più risalto a specifici passaggi o parole, questi vengono scritti in grassetto o in corsivo.

Sfruttare i diversi pesi di un font può essere un ottimo modo per “giocare” con la gerarchia del tuo progetto.

In questo esempio ho proprio fatto questo. Ho “giocato” con i pesi e con la grandezza del font Helvetica, creando un effetto volutamente spiazzante nell’osservatore. Infatti, la seconda scritta ha un corpo più grande ma un peso minore rispetto alla prima scritta.

Helvetica diversi pesi

È un “rompere le regole” in modo consapevole (cosa che amo e che amo fare nel graphic design).

OK. I consigli DI BASE su come abbinare i font sono conclusi. Adesso passiamo ai consigli NINJA!

Ma prima, ti voglio chiedere di comprendere quanto tempo io abbia impiegato per scrivere e condividere con te questa guida su come combinare font. Fare ricerche, scrivere l’articolo (circa 3000 parole!) e fare tutte le grafiche illustrative mi hanno impiegato quasi 5 giorni di lavoro.

Ma tranquillo! Non ti voglio chiedere nulla in cambio, solamente di fare un piccolo +1 su Google Plus, che a te non costa assolutamente nulla però, per me, è una grandissima soddisfazione! 🙂

 

 

Grazie mille! E adesso continuiamo con i 5 consigli per NINJA su come combinare i font!

Altri 5 consigli NINJA per abbinare i font

Questi sono consigli leggermente più specifici e dedicati a coloro che hanno già una buona base di conoscenze sulla scelta dei font e sulla tipografia in generale. Insomma, sono consigli per Ninja dei font!

8. Sfrutta gli “umori” dei font

Un tipico e ricorrente errore tipografico è quello di non rendersi conto dell’intrinseco portato emozionale di un carattere, del suo umore.

I font hanno una personalità! Comprendendo ciò, si può migliorare il proprio progetto. (twittami!)

La personalità dei font può cambiare appena appena da un contesto ad un altro ma, in realtà, è più vero il contrario e cioè che i font stessi, con il loro portato emozionale, tendono a cambiare il contesto stesso. Non interpretare bene l’umore del font utilizzato può quindi portare il fruitore del tuo progetto a non interpretare bene, di conseguenza, il progetto stesso.

In questo esempio ho utilizzato Franklin Gothic, un font solido e robusto ma anche elegantemente raffinato, con il Souvenir, un font quasi giocoso, casual e disinteressato. Questi due font insieme non stanno proprio per niente bene uno insieme all’altro perché trasmettono due personalità diverse.

Franklin Gothic + Souvenir

Qui invece proviamo a sostituire al Franklin Gothic, un Futura Bold, molto più adatto a stare assieme al Souvenir. Il Futura è infatti un font dalla personalità molto sfaccettata e variabile ma è più adatto come partner per il Souvenir per molti motivi: altezza dell’occhio simile, forme dei singoli caratteri molto ampie e circolari (vedi le due “o”) ed entrambi hanno una personalità peculiare ma non prevaricante. Sono quindi complementari.

Futura Bold + Souvenir

Utilizzare una combinazione di font dall’umore non combaciante può far concentrare i lettore sulla tipografia invece che sul messaggio, generando quindi un cattivo design.

Certo, se invece l’obiettivo del progetto è quello di fare uno sfoggio tipografico, il contrasto tra due font non combacianti può essere un’interessante scelta progettuale ma, come dico sempre, la rottura delle regole deve essere consapevole a deve portarsi dietro un importante bagaglio di conoscenze.

9. Usa font dello stesso periodo storico

Questo è un altro consiglio davvero importante e che richiede una grande conoscenza della Storia della GraficaCombinare due font dello stesso periodo storico è un modo quasi sicuro per evitare conflitti dal punto di vista della personalità (ovviamente rispettando tutti gli altri paletti di cui ti ho parlato nei punti precedenti).

Due font dello stesso periodo storico spesso e volentieri hanno una personalità molto simile e complementare e bene si adattano ad essere utilizzati assieme, come veniva fatto nel loro periodo storico originale.

Un esempio può essere la coppia di font Gill Sans e Joanna, entrambi creati a cavallo tra le due Guerre mondiali dallo stesso tipografo: Eric Gill.

Gill Sans + Joanna

10. Sfrutta i colori

Un corretto utilizzo del colore è estremamente importante in un progetto: può aumentare o ridurre la leggibilità, può vanificare o esaltare le scelte gerarchiche e può annullare ogni contrasto negativo.

Un utilizzo intelligente dei colori nella tipografia è estremamente importante per rafforzare la gerarchia di una pagina. Lo puoi vedere in questo esempio comparato qui sotto. Stessa gerarchia, stessi font (Rockwell, Bembo e Gill Sans), stesso testo. Ma, se ti allontani dallo schermo, l’esempio a sinistra diventerà una massa indistinta e confusa, mentre quello a destra, che ha una scelta di colore più ponderata, manterrà comunque la sua gerarchia.

Colori tipografia

11. La tabella delle combinazioni!

Questo, più che un consiglio è una risorsa incredibilmente utile che ho creato SOLO per gli iscritti alla Newsletter di Grafigata. Una tabella che indica il grado di qualità della combinazione tra 22 tra i font più famosi della storia. Su un lato sono elencati i font utilizzabili per un testo, dall’altro gli stessi 22 font però intesi come utilizzabili per un titolo.

In base al colore del pallino (verde, giallo, rosso), potrai così capire se Futura e Gill Sans possono stare bene insieme o se l’Helvetica come titolo e il Garamond come testo siano una buona scelta progettuale.

Cosa aspetti a scaricare il file? Per tutti coloro che sono già iscritti alla newsletter basterà semplicemente inserire l’indirizzo e-mail sul quale ricevete le mail, per tutti gli altri basterà scrivere il proprio indirizzo e-mail e controllare la propria posta elettronica. Non ci metterete più di un minuto e potrete consultare la tabella dei font!

P.s.: la password del pdf è semplicemente: “grafigata”

E ora veniamo all’ultimo dei consigli!

12. Fai pratica!

Certo, conoscere regole e seguire quello che altri hanno fatto prima di te è estremamente importante per formare una base culturale ma prima o poi dovrai fare le tue scelte. E allora fai pratica! Sperimenta nuove combinazioni di font! Accoppia font che non hanno nulla a che vedere l’uno con l’altro e cerca di capire cosa funziona e cosa non funziona! Chiedi feedback e parlane con amici e con altri designer!

A volte ti potrà capitare di trovare un abbinamento di font che a livello tecnico fa a pugni con tutte le regole imparate ma che, cavolo, invece funziona!

Diventare competenti o esperti in qualcosa comporta il dover per forza di cose passare attraverso esperimenti, tentativi e, soprattutto, errori.

Quindi rischia, sperimenta, pratica, prova! Usa l’intuito e la creatività! (twittami!)

Risorse utili

Se vuoi approfondire ancora l’argomento c’è tantissimo materiale disponibile per studiare i font, le loro caratteristiche e le loro combinazioni. Ho deciso quindi di prepararti una lista dei miei libri preferiti sui font e sulla tipografia e una lista di articoli utili ad approfondire l’argomento.

Font-Ninja: il corso online per designer

Racchiudere in un solo articolo tutto quelli che si può sapere su font e tipografia è impossibile. Proprio per questo ho creato Font-Ninja, il primo corso online per designer su font e tipografia!

Banner Fine articoli

Libri

  • Sei proprio il mio typo di Simon Garfield. Non è la prima volta che lo nomino e non sarà sicuramente l’ultima. È un ottimo libro pieno di storie, aneddoti e curiosità su alcuni dei font più famosi della storia. È talmente venduto che attualmente è disponibile solo in versione e-book e quindi può essere letto solo tramite Kindle o applicazioni apposite su smartphone e tablet.
  • Caratteri, testo, gabbia. Guida critica alla progettazione grafica di Ellen Lupton. Anche questo stra-consigliato. Un must assoluto per conoscere storia e caratteristiche della tipografia e dei font. Da avere e da leggere assolutamente.
  • Abecedario del grafico di Michele Spera è uno di quei libri presenti nelle librerie di tutti i graphic designer italiani. Ha interi capitoli totalmente dedicati alla tipografia e alle sue regole schematiche, ai caratteri, all’impaginazione e a molto, molto altro. Inutile dire che consiglio pure questo!!
  • Storia del design grafico di Daniele Baroni e Maurizio Vitta è un’altra pietra miliare della mia formazione come graphic designer. Non riguarda soltanto i font ma racconta l’intera storia di tutto il graphic design in modo chiaro e approfondito.

Articoli

Per approfondire l’argomento della tipografia ti consiglio anche gli altri articoli che ho scritto in merito su questo blog:

Ti posto anche alcuni articoli di vari blog. Sono tutti in lingua inglese perché in lingua italiana è difficilissimo trovare materiale tecnico o di approfondimento di qualità relativo alla grafica (ed è uno dei tanti motivi per cui ho creato Grafigata!).

Conclusioni

Spero che questo articolo ti sia piaciuto e che, soprattutto, ti sia utile per i tuoi progetti. Ricorda sempre che l’obbiettivo di una buona scelta tipografica non è far vedere quel font ma far trasparire in modo ottimale il messaggio che vuoi trasmettere. Il font è un mezzo non un fine.

Se questo articolo ti è piaciuto, che ne dici di condividerlo con i tuoi amici cliccando su uno dei pulsanti che trovi qui sotto? E fammi anche sapere che cosa ne pensi nel box dei commenti qua sotto! In particolare sono curioso di sentire le vostre coppie di font preferite, le vostre scoperte e le vostre opinioni sul mondo dei font e della tipografia!

Alla prossima,

Lorenzo.

Shares
  • Paolo t.

    Wow.. Questa volta assolutamente niente da dire, ottimo articolo Lorè!!.
    La tabella dei font sto anche pensando di stamparla qui in ufficio!!

    • Ciao Paolo!
      Eheh per fortuna che mi hai graziato 😀 Grazie mille davvero per questo commento e si, stampala pure dovunque tu voglia, senza problema! 🙂
      L.

  • Sonia Crisafulli

    Articolo interessantissimo!Complimenti! 🙂

    • Ciao Sofia!
      Grazie mille davvero 🙂
      L.

  • IlFabbricanteDiSpade

    Ottima guida Lorenzo 🙂

    • Ciao, grazie mille! Spero ti sia stata utile la lettura 🙂
      L.

      • IlFabbricanteDiSpade

        una ripassata ogni tanto non fa mai male, no? 😉

  • Complimenti, bell’articolo. Sempre a proposito di font, per chi fosse interessato, abbiamo realizzato un articolo e un’infografica con gli errori più comuni (e gravi) in grafica e tipografia.

    http://umanastudio.com/tipografia-questa-sconosciuta-8-errori-imperdonabili-da-evitare-assolutamente/

  • Marco Mambelli

    Complimenti per l’articolo, volevo lanciare il mio sito internet e volevo che la testata con il nome del sito sia il logo stesso. il problema era la scelta del font per il titolo principale da accoppiare con pay off, e grazie a questo articolo mi sono chiarito le idee. Alla fine ho scelto futura + souvenir! Spettacolo! Grazie mille Marco

    • Ciao Marco! Sono davvero contento che ti sia servito questo articolo proprio a livello pratico! Futura e souvenir buonissima applicazione, approvo! 🙂
      L.

  • Alexis Ftakas

    Ciao Lorenzo, sono capitato oggi sul tuo blog, e che dire, complimenti e grazie davvero per condividere la tua esperienza e conoscenza. Sono un fotografo di professione da sempre incuriosito e attratto dall’universo della grafica, spesso e volentieri mi capita di ricevere commissioni di lavori semplici di grafica sulle fotografie (oramai le nostre professioni si stanno ibridando sempre più). Ho studiato da autodidatta e qui nel tuo sito mi sembra di essere in classe con un professore che passo per passo mi guida negli argomenti! Grazie 🙂

    • Ciao Alexis!
      Ti rispondo dopo tantissimo tempo semplicemente perché ammetto di essermi “perso” questo commento! 🙂
      Grazie davvero tantissimo per questo feedback e per i tuoi complimenti che, venendo dall’area fotografica, sono davvero importanti per me!
      Grazie e spero di risentirti!
      Un abbraccio.

  • Elisa Ciuffardi

    Buongiorno, mi sono appena iscritta alla newsletter, ero interessata alla tabella per abbinare i font ma quando la apro ne vedo solo una parte, è possibile vederla per intero? È urgente.
    Grazie in anticipo

    • A me sembra che sia tutto a posto col file Elisa! 🙂

  • Silvia Gaia

    Grazie Lorenzo, la tabella dei font è utilissima (sarà il mio vademecum), così come i link, soprattutto quello sulle 10 migliori combinazioni di font! Per la mia tesi ho scelto Georgia + Verdana, non voglio sbagliare 😉

  • Gianluca Farina

    Complimenti anche per questo.

  • Ciao Lorenzo, grazie per il tuo interessante articolo è davvero stato utile. Ti chiedevo secondo la tua esperienza, Un Raleway bold come titolo (solo la prima maiuscola), sta proprio male con un Open Sans Regular come testo? Grazie

  • Pietro

    Ciao, non mi intendo di font. Cercavo solo una semplice combinazione. Per il titolo Verdana, per il testo Georgia, ma non so cosa usare per i sottotitoli e se cambiare font per il corsivo o fare Georgia Italic. Qualcuno potrebbe darmi consigli? Grazie. (Font usabili su Google Docs e “comuni”)

    • Come scrivo nell’articolo: limitati a 2 font! Georgia+Verdana va bene. Niente terzo font per i sottotitoli, semplicemente usa lo stesso font del titolo ma più piccolo 😉

      • Pietro

        Okay, grazie.

  • Luca Ganimede

    https://typeanything.io segnalo questo link! molto molto utile! sopratutto per il web design

    • Che bomba! Grazie Luca utilissimo 🙂

  • Federica Fusi

    Ciao Lorenzo!
    Intanto ti ringrazio per le tue bellissime lezioni di grafica! Sono veramente ben fatte!!
    Mi sono appena iscritta alla newsletter ma quando provo a scaricare la tabella mi chiede una password, che però non trovo nella mail che mi è arrivata.. trovo scritto questo:

    “4. Contenuti premium per gli iscritti

    Essendoti iscritto a questa newsletter hai accesso ai contenuti PREMIUM, solitamente allegati agli articoli:…”

    clicco sul link ma comunque continua ad apparirmi la richiesta dellla password…
    Cosa sbaglio???

  • Marta Emmepi

    che dire… Bravo!