Mini Tutorial: una guida alle combinazioni di caratteri

"La tipografia è un'architettura bidimensionale, basata sull'esperienza e l'immaginazione, e guidata da regole e leggibilità." — Herman Zapf

Solo pochi anni fa, i designer erano fortemente limitati nella scelta dei caratteri web. Le opzioni erano generalmente limitate ai caratteri di sistema e speravano che i visitatori del sito avessero installato quei caratteri.

Sebbene i caratteri web fossero tecnicamente possibili alla fine degli anni '90, non sono stati ampiamente utilizzati fino al 2009, quando il formato WOFF è diventato disponibile e faceva parte degli standard aperti del W3C. Ciò ha aperto un mondo completamente nuovo di opzioni tipografiche per i designer.

E qui sta il dilemma: ora che ci sono letteralmente migliaia di caratteri tipografici disponibili per i web designer, come si fa a creare combinazioni di caratteri che funzionino bene insieme e supportino il contenuto presentato?

Una buona tipografia e l'utilizzo delle migliori combinazioni di caratteri elevano un design rispetto ai suoi colleghi e creano un'esperienza utente più piacevole. Combinazioni di tipi efficaci aggiungono interesse visivo a un design che può mantenere un visitatore sulla pagina più a lungo.

Il tipo sbagliato, al contrario, può rendere i contenuti più difficili da leggere e meno piacevoli per la persona che li legge.

Imparare a combinare i caratteri in modo efficace è un importante trampolino di lancio nella formazione di un designer e dovrebbe essere continuamente perfezionato e migliorato. I designer che padroneggiano la tipografia possono rendere più efficace anche il design più semplice. Seguire le linee guida tipografiche di base per la combinazione dei caratteri è il miglior punto di partenza. Una volta che queste "regole" sono state padroneggiate, i designer possono espandersi e sperimentare per creare combinazioni tipografiche che piegano o infrangono quelle regole.

Tipo Caratteristiche

Con le centinaia di migliaia di caratteri tipografici disponibili, cercare di capire da dove cominciare può essere travolgente, anche per i designer esperti. Comprendere le caratteristiche dei diversi caratteri tipografici è il primo passo per imparare a combinarli in modo efficace.

Imparare come queste caratteristiche si relazionano tra loro consente ai designer di combinare i caratteri con sicurezza e di sperimentare combinazioni inaspettate. La sperimentazione e la pratica sono il luogo in cui i designer possono veramente affinare le proprie capacità di combinazione di caratteri e creare design che li distinguono dagli altri esperti. A volte, ascoltare la loro intuizione è il modo migliore per creare un abbinamento di caratteri tipografici che brilli davvero.

Classificazione

La classificazione dei caratteri tipografici è uno dei concetti più fondamentali da comprendere. Ci sono quattro classificazioni principali da imparare: serif, sans serif, script e decorativo.

I caratteri tipografici Serif e sans serif sono adatti sia per i titoli che per il corpo del testo. Gli script (a volte chiamati anche caratteri per la scrittura a mano) e i caratteri tipografici decorativi, tuttavia, sono generalmente accettabili solo per titoli e titoli o altri piccoli frammenti di testo.

I caratteri Serif sono considerati più leggibili per lunghi blocchi di testo (come il corpo del testo), in particolare nei progetti di stampa, dove la funzione serif può aiutare a guidare l'occhio del lettore lungo ogni riga. Ma i caratteri sans serif possono anche essere altamente leggibili ed eccellere in dimensioni più piccole (come quelle utilizzate per didascalie o metainformazioni).

I sans serif sono anche più popolari per l'uso sul Web e si ritiene che siano più leggibili dei caratteri tipografici serif. Parte di ciò deriva dai primi giorni dell'informatica, quando gli schermi a risoluzione inferiore rendevano i caratteri serif un po' sfocati, a seconda delle dimensioni. Con i moderni schermi HD e Retina, questo è un problema minore e i caratteri serif e sans serif possono essere utilizzati entrambi in modo efficace.

La combinazione di caratteri tipografici di diverse classificazioni è spesso più semplice rispetto alla combinazione all'interno di classificazioni, poiché esiste un livello di contrasto tra i caratteri già integrato. Detto questo, è anche possibile combinare efficacemente i caratteri tipografici nella stessa classe, purché vengano considerate altre caratteristiche.

Peso

Il peso si riferisce allo spessore di un carattere all'interno di un carattere tipografico. Thin, regular, semigrassetto, grassetto e nero sono esempi di pesi.

Il contrasto tra i pesi è essenziale quando si combinano i caratteri tipografici. Combinare un carattere molto spesso con uno molto leggero spesso risulta sbilanciato. Ma anche combinare caratteri tipografici dello stesso peso può essere una sfida.

Invece, soprattutto quando si inizia con le combinazioni di caratteri, è più facile trovare caratteri tipografici che presentano differenze di peso evidenti ma non estreme. I designer possono espandersi da lì in distinzioni più importanti.

Stile

Sebbene lo stile sia talvolta usato in modo intercambiabile con la classificazione, in questo caso si riferisce a un carattere normale , corsivo o obliquo .

Quando si combinano caratteri in cui vengono utilizzati stili diversi, è importante assicurarsi che gli stili corsivo o obliquo funzionino bene insieme come lo stile normale. A volte gli stili corsivo sono molto diversi dallo stile normale dello stesso carattere, il che può far scontrare improvvisamente caratteri che altrimenti funzionerebbero bene insieme.

Contrasto

Il contrasto nella combinazione di caratteri tipografici può essere complicato. Troppo poco contrasto può creare conflitti tra i caratteri, mentre troppo contrasto può fare lo stesso.

Il contrasto quando si combinano i caratteri si riferisce a qualsiasi modo in cui i caratteri sono diversi, inclusi classificazione, peso, stile e struttura.

All'inizio, è meglio concentrarsi sul contrasto tra solo una o due di queste cose, assicurandosi che le altre siano molto simili. Il peso è uno dei modi più semplici per creare contrasto tra i caratteri. Come già accennato, troppo contrasto di peso può essere tanto stridente quanto troppo poco.

Un altro modo semplice per creare contrasto è combinare diverse classificazioni dei caratteri, come sans serif e serif o script e serif, ecc. In questi casi, assicurarsi che l' atmosfera dei due caratteri corrisponda è essenziale.

Ad esempio, la combinazione di un carattere più casual come Amatic SC con un carattere molto formale come Baskerville risulterà in conflitto anziché in contrasto. Ma combinare qualcosa come Amatic SC con un altro font casual come Josefin Slab funziona magnificamente.

Altezza X

L'altezza X si riferisce all'altezza dei singoli caratteri all'interno di un carattere tipografico, in particolare la x minuscola. I caratteri tipografici con altezze x simili funzioneranno meglio insieme rispetto a quelli con altezze x variabili.

Struttura

La struttura sottostante di un carattere tipografico include tutte le sue caratteristiche, oltre a cose come la forma di base dei caratteri e la loro spaziatura. Creare contrasto con la struttura dei caratteri è un metodo consolidato per combinare i caratteri. Ma è una buona idea scegliere caratteri che abbiano almeno alcuni elementi strutturali in comune (come l'altezza x o il peso dello stile "normale") piuttosto che quelli che sono molto diversi.

Umore

L'umore è una delle aree più soggettive della tipografia. Si riferisce a quanto sia formale o informale un carattere tipografico, nonché se è giocoso, femminile, maschile, casual, serio, ecc.

Ad esempio, Comic Sans è un font estremamente informale che è inappropriato per l'uso nella maggior parte delle situazioni. Bickham Script, d'altra parte, è molto formale ma dà l'impressione sbagliata per cose come la corrispondenza commerciale.

Quando si combinano i caratteri, è importante trovare caratteri tipografici con stati d'animo simili. Combinare un carattere giocoso con uno molto serio sarà stridente per gli occhi.

Decorazione, colore e consistenza

Queste cose non sono caratteristiche intrinseche dei caratteri tipografici, ma sono utili quando si combinano i caratteri. Unificare (o creare più contrasto) attraverso il colore, la decorazione (come la sottolineatura) e la trama può essere una tecnica molto efficace.

Combinazioni di caratteri efficaci

C'è una scorta apparentemente infinita di siti con una bella tipografia là fuori, insieme a una scorta altrettanto infinita di quelli con caratteri scadenti o semplicemente poco brillanti. Studiare siti che funzionano bene è un ottimo modo per imparare a combinare i caratteri quando i designer stanno iniziando o cercano di portare le loro abilità al livello successivo.

Work Notes combina il carattere tipografico serif Adobe Caslon Pro con il sans serif Interstate per creare una combinazione di caratteri che richiama la tradizione senza sentirsi stantia o antiquata. La combinazione di pesi e stili diversi aggiunge ulteriore interesse visivo e rende la tipografia più complessa di quanto non sia in realtà.

Adjuvant Capital utilizza il carattere tipografico serif moderno e leggermente stravagante Orpheus Pro combinato con il moderno carattere tipografico GT America sans serif. Per un'azienda di servizi finanziari, questa è una scelta molto moderna, ma funziona bene con la loro missione di investimento globale socialmente responsabile.

Bloomscape utilizza il carattere tipografico serif casual Morion insieme al sans serif Raisonne per creare un design tipografico sorprendente e moderno. Morion non sarebbe necessariamente una scelta ovvia per il tipo di corpo a causa delle sue forme delle lettere più decorative, ma se usato a una dimensione appropriata (come è qui), è ottimo per pezzi più brevi di corpo del testo. Raisonne ha forme delle lettere similmente decorative, il che fa sì che i due caratteri web funzionino magnificamente insieme.

Vogue utilizza il moderno ed elegante carattere tipografico Savoy serif abbinato al grottesco sans serif Franklin Gothic, originariamente progettato nel 1902. La combinazione dei due crea un design di tipo elegante che fa appello al pubblico colto a cui la rivista si rivolge.

La rivista di lifestyle del sud Garden & Gun ha una tipografia più complessa sul proprio sito rispetto alle altre incluse qui, il che la distingue davvero. Il sito utilizza quattro caratteri tipografici principali in tutto: I titoli degli articoli principali sono il Domaine Display serif; il corpo del testo e alcuni titoli sulla homepage sono il font serif Domaine Text; metainformazioni, navigazione e intestazioni di sezione utilizzano sans serif Avenir Next; e le intestazioni di sezione aggiuntive sulla home page sono in Domaine Sans Display.

L'uso di più caratteri all'interno di una famiglia di caratteri più ampia è un modo collaudato per creare un design tipografico complesso che si coordina perfettamente. L'aggiunta di Avenir Next interrompe le cose e aggiunge ulteriore interesse visivo.

La scelta del carattere tipografico è importante quanto quello che ci fai.

— Bonnie Siegler

Conclusione

Combinazioni di caratteri efficaci sono un segno distintivo di un buon design. I designer devono padroneggiare questa abilità se vogliono creare design eccezionali che li distinguano dai loro contemporanei.

Considera le linee guida incluse qui come punti di partenza per esplorare come combinare i caratteri in modo efficace. Una solida base consente una sperimentazione più efficiente, senza spendere ore in combinazioni del tutto inadatte. Da qui, i designer possono esercitarsi a creare il proprio stile e metodi per combinare in modo efficace i caratteri, deviando dalle linee guida se necessario con maggiore sicurezza che il loro prodotto finale sarà un piacere per gli utenti.

Ulteriori letture sul blog di Toptal Design:

• Progettare per la leggibilità: una guida alla tipografia Web (con infografica)
• Comprendere le sfumature della classificazione dei caratteri tipografici
• Sezionare le complessità dell'anatomia tipografica (con infografica)
• Come strutturare una gerarchia tipografica efficace
• Stili di caratteri per il Web e il design di stampa