Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Sulla tipografia per il web

Come scegliere e abbinare al meglio i font
Come scegliere e abbinare al meglio i font
Link copiato negli appunti

Questa è la traduzione dell'articolo On Web Typography di Jason Santa Maria, pubblicato originariamente su A List Apart il 17 Novembre 2009. La traduzione viene qui presentata con il consenso dell'editore (A List Apart Magazine) e dell'autore.

Ci sono molti libri e articoli sulla tipografia, ma pochi epslorano l'argomento della selezione dei font e del loro abbinamento. Ora che abbiamo l'opportunità di adottare sul web tantissimi font liberamente disponibili, scegliere il carattere giusto come complemento al design di un sito dovrà diventare un aspetto primario da considerare per il web designer. Ma da dove iniziare?

Finora, usare un font al di là di quelli installati di default sui sistemi operativi dei computer ha significato ricorrere a immagini, a Flash o a qualche altro trucco. Ma i produttori di browser hanno colto il problema implementando la proprietà CSS @font-face che consente ai designer di collegare il file di un font ad una pagina e renderlo disponibile all'utente tramite il download.

Ciò ha chiamato in causa i produttori di font. Essi hanno nella stragrande maggioranza dei casi rifiutato di concedere la licenza sull'uso dei loro font nelle pagine web per timore della pirateria. L'implementazione di @font-face ha portato con sé questa preoccupazione, spingendo tutte le parti in causa a trovare insieme una possibile soluzione in grado di accontentare le esigenze di tutti. Molte di queste soluzioni sono state già approntate, sul altre si sta lavorando. Si va da accordi ad hoc sulle licenze a servizi per la distribuzione di font come Typekit, Typotheque e Kernest. I web designer hanno a disposizione più opzioni per i font, i produttori ricavano denaro dalle loro creazioni. Problema risolto, dunque? Più o meno.

Un mondo tutto nuovo

Finora, c'erano molte probabilità che inserendo del testo su una pagina web usando uno dei font di sistema ad una dimensione ragionevole quel testo risultasse leggibile. Inoltre, consociamo i pro e i contro di tutti i font che siamo stati costretti a usare. Ma molti nuovi caratteri a cui avremo presto accesso non sono nati per essere usati sullo schermo, sia perché sono esteticamente poco adatti sia perché semplicemente illeggibili.

I problemi tecnici con i font per il web si approfondiscono. Una resa inconsistente tra browser e piattaforme è uno degli ostacoli principali, così come lo è il dover distribuire dei font o una famiglia di font attraverso un server. Il peso di una pagina può aumentare anche di 100kb e oltre. Ma facciamo finta per un attimo che questi problemi saranno presto risolti uno ad uno. Concentriamoci su quello che accade dopo, su quello che dobbiamo fare a livello di design.

Ci sono molte possibilità che ottenendo l'accesso a tante librerie di font si abbia un effetto simile a quello del vaso di Pandora. Molte persone che lavorano oggi sul web hanno una certa conoscenza della tipografia, ma sono quasi sicuro che molti designer avranno difficoltà nell'affrontare la sfida che li attende.

Contesto e significato

Essere un web designer richiederà presto una comprensione più approfondita della tipografia e del modo in cui i caratteri tipografici funzionano. Mentre ci muoviamo in questa direzione, in un primo momento le nostre opzioni potranno essere limitate, ma poi col tempo tenderanno a crescere. E come sappiamo, più potere richiede più responsabilità. Il fatto che possiamo usare un font che ci pare bellissimo, non significa che dobbiamo usarlo.

I font di sistema che usiamo comunemente, come Georgia, Verdana e Arial, sono divenuti così ubiqui che ogni tipo di associazione che potremmo avere con essi fuori dal web è praticamente scomparsa. L'espressione estetica che non eravamo in grado di ottenere a causa della scelta limitata a noi concessa, ci ha consentito almeno di ottenere buoni risultati a livello di leggibilità. Ma senza poter avere mai quel controllo assoluto sulla tipografia che si ha nella carta stampata.

Scegliere

Usare un carattere tipografico perché sembra interessante e bello può portare a risultati accettabili, ma praticare seriamente l'arte della tipografia consiste nel capire i font e cosa significano. Scegliere un font sufficientemente buono non è così difficile, ma sceglierne uno appropriato che si adatti a certi vincoli di natura sociale e tecnica può essere molto difficile.

La grande designer di font Zuzana Licko una volta ha detto: "Leggiamo meglio quello che leggiamo di più."

Questa nozione suone come veritiera per il nostro comportamento istruito, ma rivela anche la ragione di quella che è la sfida più dura in ambito tipografico: leggere è un atto soggettivo e personale. Leggere un lungo passo in un font blackletter che era considerato leggibile secoli fa ci costerebbe molto più tempo di quanto sarebbe necessario se fosse scritto in un font serif di base. La maggior parte di quanto leggiamo oggi è impostato in semplici caratteri serif o sans-serif, sia su carta stampata sia sul web.

Al di là della questione legata alla leggibilità, la tipografia dipende molto da cose come il contrasto e la forma. I dettagli di un font possono dare significato nel contesto di un design. Linee sottili e riempimenti pesanti, ad esempio, possono essere utili per materiali delicati o per dare un'aria di eleganza e dignità. Quegli stessi attributi possono essere giustapposti con contenuti di altro genere per produrre un effetto di ironia.

Quella che segue è una lista di qualità e metodi da tenere a mente quando ci si avventura nel vasto e misterioso mondo della tipografia.

Quando ci avventuriamo nella scelta nel contesto di nuove selezioni di font, è sempre meglio partire da una base solida: trovare caratteri tipografici che siano leggibili, almeno quanto quelli che usiamo e leggiamo ogni giorno. Tutto ciò che rientra nei punti di questa specie di "spettro della leggiblità" che andremo a costruire sarà adatto, e sarà più facile da leggere. Più ci spostiamo da questo spettro, più il nostro design sarà difficile da leggere.

Contrasto

Il contrasto è forse la cosa più importante da tenere a mente. Quando si abbinano font, è importante essere in grado di dire che ci sono due diversi caratteri tipografici in gioco, ma il contrasto può essere usato in modi differenti. Caratteri molto diversi possono entrare in contrasto in modi complementari oppure resistere l'un l'altro per creare una sorta di tensione, mentre caratteri che appaiono troppo simili possono indebolire il messaggio e confondere il linguaggio visuale del design.

Le basi del corpo del testo

Figura 1 - Bobulate.com usa il font TypeTogether's Skolar servito via Typekit
screenshot

Quando si tratta di scegliere dei font, a me piace iniziare selezionando il carattere per il corpo principale del testo, dal momento che è la parte su cui chi legge passerà la maggior parte del suo tempo. Per il corpo principale del testo, cercate font che siano evidenti e leggibili a dimensioni molto piccole e quelli che hanno un buon contrasto tra i caratteri.

I migliori caratteri tipografici hanno in genere una certa personalità, ma non tanta da distrarci dal contenuto o dall'esperienza della lettura. Caratteri che hanno molta personalità vanno meglio per brevi porzioni di testo, dal momento che possono diventare confusi da leggere in passaggi più lunghi.

Termina qui la prima parte. Nella seconda affronteremo i temi legati alla leggibilità, all'abbinamento tra serif e sans-serif, alle famiglie di font più adatte a certi contesti.

Leggibilità

Le convenzioni usate nella scelta dei caratteri tipografici si adattano anche all'uso su schermo, ma, a causa della disparità in termini qualitativi tra lo schermo e la stampa, quelle convenzioni dovrebbero essere seguite con maggiore rigore per un ambito come lo schermo di un computer, anche a costo di esagerare un po'. Alti valori di altezza della x e un carattere con un corpo accentuato aiutano a mantenere il testo leggibile, anche a piccole dimensioni. Per esempio, Verdana e Georgia, entrambi apprezzati font per lo schermo, hanno un'altezza della x più grande e un po' più di spazio tra le lettere, così che il testo mantiene la sua chiarezza anche a piccole dimensioni.

Figura 2 - Man mano che il testo diventa più piccolo, un buon contrasto e un'altezza della x maggiore aiutano la leggibilità
screenshot

Qual è il messaggio?

Figura 3 - Questo poster usa molti font e stili diversi, ma lo fa per imitare i tipici poster di certi film di azione degli anni '70
screenshot

Un modo utile per capire lo scopo per cui si sta realizzando un certo design consiste nello scrivere una descrizione generale delle qualità del messaggio che state provando a comunicare e nel considerare poi i font che possiedono quelle qualità. Se state lavorando su qualcosa di estremamente serio, un carattere con un divertente stile a mano libera non funzionerà. Ma un font solido come Franklin Gothic potrebbe invece comunicare stabilità e forza, dando al design un'aria di importanza.

Un carattere può essere sufficiente per esprimere quello che avete bisogno di dire, due sono più che sufficienti. Se usate più di un carattere, fatelo avendo una buona ragione (per esempio il voler ottenere un certo risultato estetico), per esempio replicare il look di una vecchia scatola, di una locandina cinematografica o di una copertina di disco.

Un serif, un sans-serif

Figura 4 - Bodoni e Futura hanno lettere dalla forma molto diversa, ma la loro struttura è basata sugli stessi principi geometrici
screenshot

Uno dei modi più semplici per creare rapidamente contrasto ed equilibrio nella tipografia è quello di scegliere un abbinamento con un font serif e uno sans-serif. È una combinazione semplice, facile da gestire che può dare al testo un aspetto coerente se si scelgono i font giusti.

Non è una regola valida sempre e in ogni caso, ma caratteri creati dallo stesso designer possono talvolta funzionare molto bene se abbinati. Come nei dipinti di uno stesso artista, a volte è possibile scorgere in due font la mano del loro creatore. I font Perpetua e Gill Sans creati da Eric Gill, funzionano bene insieme perché condividono alcuni tratti dei riempimenti e delle curve. Allo stesso modo, caratteri che sono stati creati per essere abbinati, come Meta Sans e e Meta Serif, funzionano spesso bene insieme.

Combinare più di un font di tipo display o script è in genere una cattiva idea. Ci sono eccezioni ad ogni regola, ma questi caratteri in genere hanno così tanta personalità che uno è più che sufficiente e due possono confondere il look generale del testo.

Cercate dunque caratteri che siano stati progettati in base a principi simili. Per esempio, sebbene possano sembrare molto diversi, Bodoni e Futura possono essere una grande accoppiata perché sono stati ispirati da forme geometriche semplici.

Figura 5 - Baskerville e Futura, "giustapposizione" del vecchio al "nuovo"
screenshot

In alternativa, trovare due caratteri divergenti può creare un nuovo tipo di significato o una giustapposizione interessante, sempre che il contrasto sia forte. Abbinando un font di transizione come Baskerville con un carattere più moderno come Futura, possiamo ricreare visivamente l'idea del vecchio contrapposto al nuovo.

Esplorare stili differenti

Figura 6 - Famiglie tipografiche come Proxima Nova di Mark Simonson contengono una varietà di pesi che possono essere utili nel creare un design con diverse e flessibili possibilità tipografiche
screenshot

Scegliere famiglie di font che hanno una buona selezione di pesi e stili, può darci più flessibilità senza dover ricorrere all'uso di più caratteri. Possiamo giocare il contrasto mettendo a fianco grassetto e corsivo, oppure provando con uno stile tutto in maiuscolo o minuscolo con un po' spaziatura tra le lettere per un sottotitolo. Se scegliete famiglie di font che hanno un solo peso, potreste trovare difficoltoso creare il contrasto che una certa porzione di testo richiede per distinguere adeguatamente le varie sezioni.

In biblioteca!

Molti caratteri tipografici hanno un'evidente connessione culturale con un certo periodo storico. A seconda di quello che state creando, ciò potrebbe essere un vantaggio o uno svantaggio. È sempre meglio investigare sulle potenzialità visuali di un certo font andando a scoprire dove, quando e perché è stato creato. A volte un carattere può avere il giusto look ma evocare le connotazioni sbagliate. Per esempio, il font Trajan è stato usato come il font preferito nei film epici, thriller, romantici, nelle commedie e in ogni genere di film, sebbene abbia una storia di oltre 1900 anni e sia risalente all'epoca romana. I caratteri Blackletter sono stati a lungo legati allo stile delle band heavy metal, e comunque a tutto ciò che evoca la paura o l'oscuro. Comprendere queste implicazioni culturali significa evitarli o usarli in modo intelligente.

Questioni di soldi

Siamo stati così abituati a usare i font di sistema che molti professionisti non concepiscono nemmeno l'idea di dover pagare per un font. Ma anche quando usate i font installati sul vostro computer, state usando font per cui avete pagato una licenza, il costo è compreso in quello del sistema operativo. Ci sono molti font gratuiti in giro sul web, ma la maggior parte sono gratuiti per una ragione: vanno bene a dimensioni da schermo, ma il kerning e l'hinting potrebbero dare molti problemi, molti di questi font insomma non sono robusti abbastanza per essere usati seriamente. I font solidi, come tutte le cose di qualità, costano.

Fidarsi dell'istinto

A volte una coppia di caratteri sembra perfetta, anche se non si capisce bene perché. Quelle esposte in questo articolo sono solo linee guida, non leggi: ci sono migliaia di font e stili, e tante volte rimarrete sorpresi che certi font funzionano bene insieme anche quando la logica dice di no.

Andare avanti

Il numero di caratteri tipografici cresce ogni giorno. Se il vostro font preferito non è ancora disponibile, forse lo sarà presto, sebbene il problema delle licenze, della distribuzione e della selezione dei font per il web non sarà risolto al più presto.

Mentre nuovi font compaiono ogni giorno, noi abbiamo il dovere di capire come possono essere utili al nostro design e spingerci ancora più in avanti ad abbracciare tutte le novità. Se la maggior parte del web è fatta di testo, la tipografia per il web può essere per noi uno strumento potentissimo.

Ti consigliamo anche