046 Lo Zen e l’arte di combinare colori e font

Sarebbe interessante ascoltare qualche episodio sulle basi del design, ad esempio come scegliere la giusta combinazione dei colori e dei font. Sembra banale ma molti ci perdono un sacco di tempo. Chi dice che qualcosa è banale, spesso non si è neanche posto il problema, perché fare le cose con attenzione richiede sempre un grande sforzo. Se fai una cosa con estrema attenzione e rispetto hai un’esperienza trascendentale ed è in questo modo che voglio approcciare la questione del Font & Color pairing. Premessa. Non ho mai nascosto il fatto che gran parte del mio percorso lavorativo è stato fondato sull’ “ispirati e sostituisci”. Ho raccontato di come nel lontanissimo 1998 scaricassi pagine html e le osservassi per carpirne i segreti. Il miglior modo per selezionare un abbinamento di font è sicuramente quello di vederlo appaiato come dovrebbe essere. Niente spiega meglio un concetto che l’immagine stessa di ciò che si sta cercando. Che è poi lo scopo del nostro lavoro: trasporre in disegno grafico quello che uno vuole comunicare a parole. E poiché ormai in rete si trova di tutto e di più. Una ricerca per “Font Pairing” potrà mostrarci sicuramente degli abbinamenti vincenti al primo colpo. Il segreto nel font pairing, comunque, consiste nel non farla troppo difficile. Meglio usare non più di due font e sviluppare l’abbinamento in uno di questi tre modi: Con grazie / senza grazie Di solito si scelgono due font uno con le grazie tipo un classico Times o un Baskerville, l’altro un bastoni, decisamente più semplice tipo un Roboto o un Open sans, o un Lato etc. Più spesso / più sottile Si possono usare due font anche entrambi bastoni o entrambi con grazie, ma uno lo si usa nella versione light e l’altro nella versione bold. E quindi il contrasto avviene secondo il peso del font. Tipo Open Sans e Source Sans Pro, o Oswald e Roboto o Montserrat e Lato. È indifferente se utilizzare quello più spesso o quello più sottile per i titoli, dipende cosa si vuole comunicare, ovviamente. Font “estroso” / font sobrio Usare per i titoli, ma solo per i titoli, mai nei paragrafi altrimenti si appesantiscono tutti i testi, un font pacatamente fantasioso tipo che ne so l’Exo2 e utilizzare per i paragrafi un Open Sans, bello liscio magari anche in una versione più leggera. Ma comunque, una volta che si fa una ricerca per “font pairing” escono talmente tanti esempi che basta scorrerli per capire quale sia quello più adatto a ciò che avevamo in mente. Di solito infatti io procedo così. Mi si chiede, ad esempio, il sito per un negozio di fiori, chiudo gli occhi e mi immagino lo stile che voglio dargli: colori pastello molto materici quasi polverosi, fiori antichi, piccoli riquadri grafici magari color oro etc. A quel punto il font deve seguire questo stile, non devi cercare il font col fiorellino o che grida “Sono il font per il sito del fioraio”, sai già che devi giocare con gli spessori perché è quello lo stile che stai cercando di ricreare. Uno stile molto elegante, sobrio, nostalgico e sognante. Quindi userai un Open Sans Condensed Light per i titoli o magari un font quasi calligrafico molto sottile come se fosse stato scritto con un pennino con la punta sottile, ma poi per i paragrafi ti limiterai a un classico Lato. Senza strafare. Ecco, mai andare a cercare il font eccentrico o il Comic Sans. Quasi sempre sono illeggibili, non si riescono ad abbinare a nessun altro font e fanno subito sito amatoriale. Meglio andare sul classico, Roboto, Open Sans, Merryweather, Montserrat, Baskerville, Oswald, Lato, etc. che sono sufficienti per fare quasi tutto, basta giocare ad appaiarli tra loro, utilizzando anche le loro varianti di spessore. Per quanto riguarda i colori, invece, devo dire, che il loro abbinamento non è il mio forte. Nel senso che non ho mai trovato una regola scientifica al riguardo. Teoricamente bisognerebbe procedere in questo modo: partendo dal colore aziendale che diventa il colore primario, bisognerebbe ricavarsi il colore a contrasto ovvero il secondario seguendo lo schema dei colori e in base sempre allo schema di colore ricavarsi il resto della palette ovvero il colore success, info, warning, danger + tutta la palette dei colori neutri a sostegno dei principali. Quindi seguendo semplicemente le regole della teoria del colore, per cui abbinando due colori opposti hai un risultato, due colori affiancati ne hai un altro, e così via. Personalmente però non riesco: procedendo così mi sembra sempre di trovare dei colori pesanti e poco armoniosi. Ma soprattutto innaturali, perché sono colori che poi nel mondo non ritrovi con quella frequenza di combinazione. Per cui ho risolto in un altro modo. Tornando al sito del fioraio, vado per associazioni di immagini e mi immagino ad esempio un interno shabby chic con un vaso di fiori su un tavolo e colori per lo più chiari. Ora non fo altro che navigare alla ricerca di questa immagine. Se cerco “Shabby Chic Interior” facilmente troverò vari ambiento che mi colpiscono per i contrasti di colore. A quel punto, sceglierò l’ambiente il cui colore principale si avvicina molto al colore aziendale del mio cliente. Dopodiché non farò altro che copiare la foto e andare a prendere i colori col color picker associandoli al tono che devono avere. Per il colore principale mi limiterò ad associare quello del cliente senza catturarlo dalla foto, poi però utilizzerò tutti quelli presenti nell’immagine ovvero il secondo colore dominante per il secondario, quello più brillante ma non allarmante per il success, quello più sobrio per l’info, quello non eccessivamente squillante per il warning e quello più aggressivo per il danger. Più tutte le sfumature di grigi o di beige che saranno presenti nell’immagine fotografica. In questo modo, riesco a “traslare” le stesse sensazioni della foto sul sito e non devo preoccuparmi di trovare gli abbinamenti tra colori caldi, freddi, complementari, analoghi, complementare divergente etc. Vado a sensazione, di istinto. Cerco piuttosto di condividere un concetto, un ambiente, un’atmosfera. Alla fine il nostro lavoro consiste quasi nel creare un “luogo”, dove accogliere i nostri utenti e far comprendere loro a colpo d’occhio che stile abbiamo. Come quando entri in un ambiente di lavoro: può essere un luogo alternativo con le bici attaccate al muro e pouf colorati per accogliere i clienti o più formale con sedie di pelle nera e tubolari di metallo oppure un ambiente industrial / steampunk o ancora spazi vuoti e bianchi molto orientale / zen o all’opposto può essere lo studio dell’estetista di uno stucchevolissimo rosa shocking dove tutto grida anni ‘50… I generi sono infiniti, basta riuscire a collocare l’idea e poi colori e font seguiranno di conseguenza.