Il messaggio finale di un progetto grafico si comunica molto attraverso i testi, che incrociano l’effettivo significato delle parole effettive con la loro rappresentazione visiva. Nella gran parte dei casi, quest’ultima consiste nel font (o carattere tipografico).
I caratteri tipografici posseggono un notevole potere comunicativo, in grado di trasmettere emozioni e messaggi attraverso le forme. La scelta dei font determina se la persona proseguirà la lettura di un articolo, se riconoscerà un logo a prima vista, se verrà colpita da un messaggio pubblicitario.
Quando il progetto grafico incrocia molti testi, e deve quindi utilizzare più font o più versioni di essi, i caratteri tipografici hanno ancor più responsabilità. La buona riuscita passa per l’abbinamento di questi font, da scegliere e combinare. E per aiutarci in questa operazione, ecco una guida pratica in 8 regole su come abbinare i font, in modo corretto ma anche creativo.
Indice delle regole
- Cura la gerarchia del testo
- Abbina font in contrasto
- Usa pochi font
- Usa font della stessa famiglia
- Sfrutta i caratteri complementari
- Non usare font simili
- Evita i conflitti tra font
- Rispetta il contesto
1. Cura la gerarchia del testo
Durante l’impaginazione dobbiamo considerare due elementi: qual è il messaggio più importante tra tutti quelli presenti, e in che ordine l’occhio dovrebbe leggere i diversi messaggi. Ad esempio, per l’articolo di una rivista vogliamo sia letto prima il titolo, poi il sottotitolo principale, e infine il corpo (coi sottotitoli dei paragrafi ad anticiparne il contenuto). In un volantino, invece, faremo risaltare prima la foto prodotto col prezzo.
Prima di impaginare, bisogna distinguere le informazioni disponibili secondo una scala d’importanza, chiamata gerarchia del testo. In tal modo, nel riportarle in pagina si potranno utilizzare i molti elementi tipografici (peso, dimensione, colore, orientamento) per rendere visivamente i livelli di rilevanza, e guidare così l’occhio del lettore. Sceglieremo quindi un font che rispetti gli elementi di ogni livello di testo.
![Esempi su come abbinare i font - Gerarchia del testo](https://www.shinyblog.it/wp-content/plugins/lazy-load/images/1x1.trans.gif)
Poiché questi due elementi sono molto complessi e profondi (e verranno usati come base per ogni regola successiva), per approfondirli abbiamo una guida tutta dedicata a gerarchia del testo, livelli ed elementi tipografici!
2. Abbina font in contrasto (con e senza grazie)
Nella scelta di più font sulla stessa pagina, potremmo pensare di usare sempre il medesimo stile… E invece no, in virtù di quanto detto prima: le parti del testo devono differenziarsi per rendere una gerarchia. Abbinare un font con grazie a uno senza grazie, mettendoli quindi in contrasto, rende piacevolmente visibile la texture del testo, e ne aumenta la leggibilità.
Opporre un font con grazie a uno senza grazie, comunque, non basta: il contrasto perfetto si ottiene anche tramite le combinazioni di elementi tipografici. Pensiamo a spaziature e dimensioni differenti, a una diversa gestione dello spazio bianco, all’uso del maiuscolo; e nei casi più creativi, a cambiare il colore e l’orientamento del testo.
![Esempi su come abbinare i font - Contrasto](https://www.shinyblog.it/wp-content/plugins/lazy-load/images/1x1.trans.gif)
3. Usa pochi font
Usare sapientemente le differenze e le variazioni crea il giusto contrasto e aiuta la creatività, certo. Ma eccedere, combinando molti font nello stesso progetto grafico, sortisce l’effetto opposto: genera confusione, disordine, spaesamento visivo. E anche una malcelata sensazione di dilettantismo, totalmente da evitare!
All’interno di uno stesso progetto grafico, è bene limitare la scelta a due o al massimo tre font diversi. Non sarà decisiva la quantità di caratteri diversi che fanno a pugni tra loro, bensì la qualità con cui si sceglie ognuno di essi. Solo così comunicheranno il messaggio all’unisono, e aiuteranno la gerarchia.
4. Usa font della stessa famiglia
I font a disposizione sono quasi illimitati, e di fronte alla loro lunga lista, l’indecisione è una sensazione comune. Quando accade, possiamo provare a sfruttare la stessa famiglia di font, per assicurare coerenza all’interno del progetto grafico.
Comunque, la coerenza da sola potrebbe non bastare a rispettare le necessità di cui abbiamo parlato (contrasto e gerarchia del testo). Per unire i due bisogni, adoperiamo le diverse variazioni della stessa famiglia di font, che di solito vanno da extralight a black. Grazie alla scala di pesi e ad altri elementi tipografici come dimensione e colore, creiamo le differenze richieste.
![Esempi su come abbinare i font - Usa pochi font o font della stessa famiglia](https://www.shinyblog.it/wp-content/plugins/lazy-load/images/1x1.trans.gif)
5. Sfrutta i caratteri complementari
Ogni carattere tipografico ha una sua personalità, che può essere seria o allegra, discreta o sfarzosa, introversa o estroversa. Queste sensazioni vengono sfruttate sia per adattarsi al significato effettivo del testo, sia per creare un buon contrasto, aiutando il lettore col sistema gerarchico.
Per le combinazioni di più font possiamo avvalerci di font dalla personalità complementare. In generale, i caratteri “introversi” ed “estroversi” si bilanciano reciprocamente quando vengono accostati. Un font dalla personalità forte (o font di visualizzazione), come quello di un titolo, si abbina meglio a un carattere più neutro e discreto, in modo da non togliergli risalto e favorirne la preponderanza nella lettura. Inoltre, il design complessivo ne guadagnerà in equilibrio.
6. Non usare font simili
La visualizzazione di molteplici font nella stessa pagina deve essere molto chiara. Il lettore deve subito distinguerli o accomunarli: se abbiamo scelto come appena detto la stessa famiglia (per coerenza e chiarezza), deve subito notare che sono consequenziali; se abbiamo scelto font diversi (per contrasto e gerarchia), deve subito accorgersi delle differenze.
Evitiamo di accostare font troppo simili, perché possiederanno sì delle differenze, ma saranno troppo poco percettibili all’occhio umano. Il lettore avrà uno sgradevole (e da noi indesiderato) effetto: noterà qualcosa di strano, di vagamente diverso, ma istintivamente non capirà cosa. Meglio desistere, in quanto salterebbero anche le idee di gerarchia e di armonia visiva. Per questo, l’immagine che riportiamo di seguito è un esempio da NON seguire.
![Esempi su come abbinare i font - Non usare font simili](https://www.shinyblog.it/wp-content/plugins/lazy-load/images/1x1.trans.gif)
7. Evita i conflitti tra font
Il contrasto nella combinazione dei font ha un senso e uno scopo ben precisi, ma attenzione. L’abbinamento di caratteri estremamente diversi in spazi, peso e grazie non crea automaticamente un contrasto gradevole. Si rischia, anzi, di ricadere nell’effetto opposto: uno sgradevole conflitto.
Anche nella ricerca del contrasto, è bene privilegiare accoppiamenti di font che condividono alcune caratteristiche. Ad esempio la stessa altezza dei caratteri minuscoli, una compatibile spaziatura (kerning) tra le lettere, e delle proporzioni simili – o almeno associabili all’occhio.
8. Rispetta il contesto
Per quanto possiamo divertirci ad abbinare in modo libero e creativo i font, l’obiettivo resta sempre esaltare gli scopi del testo e del progetto grafico. Durante tutto il processo creativo, quindi, dobbiamo sempre rispettare il contesto in cui la grafica verrà inserita. Tenerlo sempre a mente aiuterà a impostare sin dall’inizio le parti imprescindibili del progetto.
Ecco qualche elemento contestuale della grafica che potremmo tenere in considerazione:
- Che dimensioni reali avrà (formato biglietto, volantino, poster, cartellone);
- Da quale distanza verrà vista (da pochi centimetri, da un metro, da molti metri);
- In che ambiente visivo verrà inserita (all’aperto, al chiuso, luminoso, scuro);
- Per quanto tempo si potrà vedere (molto perché si conserva con sé o è sempre consultabile, medio perché è in un luogo esterno in cui si può stare fermi, poco perché è in un luogo esterno di solo transito);
- A quale pubblico sarà rivolta (età, interessi, abitudini, eventuali difficoltà visive);
- Che scopo finale avrà (illustrare, spiegare, rassicurare, emozionare, decorare).