Come strutturare una gerarchia tipografica efficace

Organizzare in modo efficace i contenuti all'interno di un progetto in modo che sia facile da capire e consumare è uno dei lavori più importanti di un designer. E poiché gran parte dei designer di contenuti con cui lavorano è basata sul testo, la creazione di un'efficace gerarchia tipografica è una delle cose più importanti che un designer può imparare.

Mentre esercitarsi e sperimentare con la creazione di una gerarchia efficace è il modo migliore per padroneggiare davvero l'abilità, ci sono una serie di linee guida che i progettisti dovrebbero imparare prima, prima di mettersi in proprio. Dopotutto, è impossibile infrangere le regole in modo efficace senza prima sapere quali sono.

Che cos'è la gerarchia tipografica?

I designer principianti a volte sottovalutano la necessità di utilizzare una gerarchia tipografica. Eppure guarda questo esempio:

Le stesse informazioni vengono trasmesse su entrambi i lati, ma a sinistra è impossibile dire che ci siano un'intestazione, un sottotitolo e un corpo del testo. Sulla destra, è immediatamente evidente che esiste una gerarchia per le informazioni fornite.

La gerarchia tipografica mostra al lettore su quali informazioni concentrarsi, quali sono le più importanti e quali semplicemente supportano i punti principali.

Ci sono una varietà di cose che compongono la gerarchia tipografica sul web. Questi includono:

Dimensione. La dimensione è generalmente la prima cosa a cui si rivolgono i nuovi designer quando cercano di creare una gerarchia tipografica. E per una buona ragione: è immediatamente, facilmente identificabile dai lettori. Più grande = più importante, più piccolo = meno importante. Ma le dimensioni possono diventare una stampella quando ci sono così tante altre opzioni per creare una gerarchia.

Peso. Rendere un carattere tipografico più audace o più sottile è un altro modo facilmente riconoscibile per creare una gerarchia facilmente identificabile anche dai non designer.

Colore. Il colore è spesso trascurato come un modo per creare una gerarchia, ma è un'opzione fantastica. Anche l'utilizzo di tonalità più chiare e più scure di un determinato colore può creare una gerarchia più distinta. La creazione di un maggiore contrasto tra il tipo e il suo sfondo può anche aggiungere alla gerarchia tipografica.

Contrasto. Oltre ai colori contrastanti, anche il contrasto tra le diverse dimensioni, pesi e stili dei caratteri è fondamentale per creare una gerarchia tipografica. Una differenza di solo uno o due punti nella dimensione del tipo non creerà un contrasto sufficiente per rendere evidente la gerarchia alla maggior parte degli utenti. Invece, i designer dovrebbero utilizzare dimensioni, pesi e stili facilmente distinguibili per creare facilmente contrasto tra elementi come intestazioni o corpo del testo.

Caso. Sebbene l'uso delle maiuscole non sia generalmente una buona idea dal punto di vista della leggibilità, l'utilizzo di caratteri maiuscoli nelle intestazioni o nei sottotitoli può aiutare a differenziare intestazioni diverse o altro tipo.

Posizione e allineamento. Il posizionamento di intestazioni e sottotitoli, insieme ad altri tipi che un designer vuole mettere in evidenza, può avere un grande impatto su dove il tipo rientra in una gerarchia. Il tipo di centraggio, ad esempio, tende a farlo risaltare. L'impostazione del tipo al di fuori dei margini regolari di una pagina può anche far risaltare quel tipo all'interno della gerarchia di una pagina.

Come creare una gerarchia tipografica (e organizzare visivamente il tuo design)

I designer hanno molte opzioni quando si tratta di creare una gerarchia tipografica. Ma solo sapere cosa serve per creare una gerarchia da solo non aiuterà necessariamente i designer a creare una gerarchia efficace.

Una delle prime cose da considerare è quanti livelli di gerarchia dovrebbe avere un progetto. Come regola generale, ogni progetto dovrebbe includere tre livelli di gerarchia: intestazione, sottotitolo e corpo del testo. Da lì, spetta al progettista considerare livelli aggiuntivi che potrebbero essere necessari. Questi potrebbero includere didascalie, sottotitoli aggiuntivi, citazioni pull e meta informazioni (per cose come autori o date su un articolo).

Da lì, è fondamentale capire come distinguere tra le diverse parti della gerarchia. Va da sé, ma i titoli dovrebbero essere più prominenti dei sottotitoli, che dovrebbero essere più prominenti del body copy. Le didascalie dovrebbero generalmente essere meno prominenti del body copy e le virgolette pull dovrebbero trovarsi da qualche parte tra il body copy e i sottotitoli.

Tipo Dimensione

Esistono scale tipografiche tradizionali per aiutare i designer a iniziare. Ma questi sono solo un punto di partenza e i designer dovrebbero sentirsi liberi di sperimentare pesi e stili diversi mentre si discostano da queste bilance tradizionali. La maggior parte basa la propria scala sulla dimensione del corpo del testo e si espande da lì.

La classica scala tipografica di The Elements of Typographic Style è familiare alla maggior parte dei designer poiché tendono ad essere le impostazioni predefinite offerte dalla maggior parte dei programmi di elaborazione testi quando si selezionano le dimensioni dei caratteri. La scala è:

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60 e 72.

Ci sono ulteriori esempi di scala tipografica là fuori che seguono varie equazioni matematiche per il calcolo di dimensioni crescenti.

I progettisti hanno la tendenza a impostare per impostazione predefinita una dimensione del corpo del testo di 12 punti, ma aumentandola a 14 o 16 (o anche fino a 24) può aumentare la leggibilità a seconda del carattere tipografico utilizzato. Il sito Web personale di Jeffrey Zeldman, ad esempio, utilizza una dimensione del carattere di 24px per la copia del corpo, mentre Vogue.com utilizza una dimensione del testo del corpo di 19px.

Prima di finalizzare la scala effettiva, tuttavia, i progettisti dovrebbero assicurarsi che i caratteri tipografici utilizzati nel progetto siano stati finalizzati. Diversi tipi di carattere possono apparire significativamente più grandi o più piccoli anche quando tecnicamente hanno le "stesse" dimensioni.

Scelta dei caratteri tipografici di coordinamento

Ciò che spesso distingue un design "professionale" da sforzi più dilettantistici è la combinazione di caratteri tipografici. Combinare efficacemente i caratteri tipografici è in parte istinto e in parte scienza, ma ci sono alcune linee guida che i designer possono seguire per combinare caratteri tipografici di famiglie diverse.

In primo luogo, mescolare serif con sans serif è significativamente più facile che combinare due serif o due sans serif. Ma non è così semplice come afferrare qualsiasi serif e qualsiasi sans serif e metterli insieme in un progetto.

Considera il contesto in cui verranno utilizzati i caratteri tipografici. Ad esempio, se il design dovrebbe essere leggero e divertente, assicurati che i caratteri si adattino a quell'umore. Se il design è più serio, i caratteri tipografici dovrebbero rifletterlo. In altre parole, l'umore di qualsiasi carattere tipografico venga combinato dovrebbe corrispondere.

Anche i designer dovrebbero usare il contrasto a loro vantaggio. La combinazione di caratteri tipografici sottili e spessi spesso funziona meglio rispetto alla combinazione di due che hanno un peso molto simile.

Cerca caratteri tipografici con altezza x simile (la distanza tra la linea di base e la linea media delle lettere minuscole in un carattere). Questo aiuta a prevenire il conflitto tra i caratteri tipografici. Altre cose che aiutano a prevenire i conflitti includono crenatura e forme dei caratteri simili. I caratteri con caratteri molto rotondi non devono essere combinati con caratteri più quadrati.

Sebbene le linee guida possano essere utili nella creazione di combinazioni di caratteri tipografici, nulla sostituirà la sperimentazione e la pratica. I designer dovrebbero dedicare del tempo a sperimentare con i caratteri tipografici ed esercitarsi a combinarli il più spesso possibile. Trovare alcune combinazioni di caratteri di fallback che possono funzionare in una varietà di contesti è utile anche per i progetti in cui il budget e le risorse disponibili non consentono un sacco di tentativi ed errori.

Con queste linee guida in mano, i designer possono seguire il processo in quattro fasi che la fonte tipografica Web Better Web Type stabilisce per creare combinazioni efficaci:

1. Trova un font di ancoraggio per il tuo corpo di testo principale
2. Trova alcuni caratteri secondari per possibili combinazioni
3. Valuta le combinazioni
4. Elimina/scegli le combinazioni di caratteri

Considerazioni aggiuntive

Sperimentare stili e pesi diversi dopo aver selezionato i caratteri tipografici finali può creare livelli di gerarchia aggiuntivi senza dover creare intestazioni principali di grandi dimensioni. Mantenere i caratteri tipografici all'incirca della stessa dimensione, ma rendere in grassetto l'intestazione più importante, mentre si rende corsivo quello meno importante, crea una gerarchia visiva definita.

Lo stesso può essere fatto con il colore. Un sottotitolo con un colore accento risalterà più di un sottotitolo dello stesso colore del corpo del testo. I designer dovrebbero giocare con il colore nei sottotitoli per distinguere il testo più importante senza fare affidamento esclusivamente sulla dimensione del testo.

La spaziatura può essere utilizzata anche per separare intestazioni e sottotitoli importanti. Creare più spazio intorno ai titoli in modo che si distinguano dal corpo del testo di accompagnamento li rende ancora più importanti. Al contrario, i sottotitoli con la stessa spaziatura del corpo del testo vengono resi meno importanti.

Anche la spaziatura tra i caratteri può essere utilizzata per creare una gerarchia. La spaziatura dei caratteri può rendere più prominente una linea particolare. Ciò è particolarmente efficace se combinato con le lettere maiuscole. I designer dovrebbero fare attenzione a non esagerare, poiché può anche sembrare amatoriale se abusato.

Conclusione

La sperimentazione e la pratica sono i modi migliori per padroneggiare la gerarchia tipografica, ma l'apprendimento di queste linee guida aiuterà i designer a iniziare con il piede giusto. Imparare come dimensioni, colore, spaziatura, peso e altri fattori contribuiscono a una gerarchia efficace è il primo passo.

Una volta che queste basi sono state stabilite nella mente (e nella pratica) di un designer, possono creare in modo più intuitivo gerarchie visive che seguono o infrangono le "regole" secondo necessità al fine di creare design unici che siano ispirati e piacevoli 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
• Design Foundations: una guida alla gerarchia visiva (con infografica)
• Stili di caratteri per il Web e il design di stampa
• Potenzia la tua UX con una chiara gerarchia visiva