Uno degli elementi più importanti per le persone che guardano tutto ciò che si progetta è il tipo. Deve essere chiaro e leggibile e dovrebbe indirizzare gli utenti attraverso un design, dagli elementi più importanti ai meno.
E questo, in poche parole, spiega la gerarchia tipografica. Ma per padroneggiare veramente l'arte del tipo, è necessario capire come applicare il tipo di livello a un disegno per ottenere il massimo impatto. Continua a leggere per imparare come padroneggiare la gerarchia tipografica e creare un tipo efficace in ogni progetto.
Cos'è la gerarchia tipografica?
La gerarchia tipografica è un'altra forma di gerarchia visiva, una sotto gerarchia di per sé in un progetto di progettazione generale. La gerarchia tipografica presenta caratteri in modo che le parole più importanti vengano visualizzate con la massima incisività, in modo che gli utenti possano scansionare il testo per ottenere informazioni chiave.
Senza una gerarchia tipografica, ogni lettera, ogni parola e ogni frase in un disegno apparirebbero uguali. Riesci a immaginare di leggere qualcosa in cui tutto è lo stesso font, dimensioni e colore? Da dove inizi? Come fai a sapere cosa conta di più?
La gerarchia tipografica crea contrasto tra gli elementi. I progettisti ottengono ciò attraverso l'uso di caratteri, dimensioni, peso, lettere maiuscole e minuscole, grassetto o corsivo, orientamento e colore. Combinazioni di questi strumenti di progettazione vengono utilizzate per creare un tipo che rientra in livelli distinti.
Livello primario
Il livello principale di tipografia è tutto del tipo grande. Sono titoli e mazzi - noti anche come "mobili"? - che attraggono i lettori nel design. Questo è il tipo più grande nel design (a meno che non si stia utilizzando l'arte tipografica).
Livello secondario
Il livello secondario di tipografia sono le pepite di informazioni scansionabili che aiutano i lettori a rimanere nel design. Ciò include elementi come sottotitoli, didascalie, virgolette, infografiche e altri piccoli blocchi di testo che aggiungono informazioni al livello principale del testo. Il design di questi blocchi di testo è sul lato grande, ma in genere molto più piccolo del lettering nel livello primario di tipografia.
Livello terziario
Il livello terziario di tipografia è il testo principale del tuo progetto. Spesso è uno dei tipi più piccoli del design, ma deve essere abbastanza grande da essere completamente leggibile da tutti i potenziali utenti. Il carattere tipografico dovrebbe essere semplice e coerente nel design, nella spaziatura e nell'uso generale.
Altri livelli
Gli altri livelli di tipografia includono effetti applicati per digitare il livello terziario per piccole aree di impatto. Effetti come grassetto, corsivo, sottolineatura e colore possono attirare l'attenzione su aree specifiche del testo principale. Questi effetti funzionano meglio se applicati a un testo della stessa dimensione e tipo di carattere utilizzato nel livello terziario. Gli effetti sono usati con parsimonia e solo per poche parole in sequenza. Esempi di altri livelli includono collegamenti sottolineati, parole in grassetto per impatto o corsivo o colore per enfasi.
Gerarchia nei progetti di stampa
La gerarchia visiva nei progetti di stampa è strettamente visiva. Usando dimensioni, colori e altri effetti per far sì che alcuni bit di tipo appaiano grandi e più importanti e il ridimensionamento di conseguenza è tutto ciò che devi fare per iniziare bene.
Osservando l'esempio passo-passo sopra, è possibile vedere chiaramente diversi livelli di gerarchia tipografica e come rende il design più facile da leggere e più attraente visivamente. Puoi applicare questa stessa tecnica a qualsiasi progetto di design aggiungendo enfasi nelle aree chiave.
Crealo
Esistono vari modi per creare un senso di gerarchia. Ecco alcune delle tecniche più comuni:
- Selezione del carattere tipografico: I caratteri più interessanti possono apparire più grandi e attirare l'attenzione più rapidamente di quelli con meno intrighi visivi. Quando si utilizzano caratteri di novità, script o elaborati, prestare attenzione ai problemi di leggibilità e assicurarsi che il tipo sia molto grande.
- Taglia: È quasi inutile dirlo, ma più grande è il tipo, più veloce sarà l'occhio ad esso. Il dimensionamento del tipo deve essere correlato all'ordine di importanza nella lettura del testo.
- Peso: Lo spessore delle lettere può far sembrare il testo più grande (grassetto, spesso) o più piccolo (tipografico sottile o compresso).
- Lettere maiuscole e minuscole: Hai sentito che inviare un'e-mail in lettere maiuscole è come urlare a qualcuno. Lo stesso vale per tutti i tappi nel design. Diffidare dell'uso. Le lettere maiuscole appaiono più grandi e vengono in primo piano mentre le lettere minuscole appaiono più piccole e spesso cadono sullo sfondo.
- Grassetto: Il grassetto è un buon punto di enfasi per una singola parola o frase. Funziona particolarmente bene nel livello terziario di tipo.
- Corsivo: Le scritte in corsivo possono evidenziare una singola parola o frase in un modo meno drammatico e più sottile di quello in grassetto. Funziona particolarmente bene nel livello terziario di tipo.
- Orientamento: Girare le lettere dalla loro parte, capovolte o con qualsiasi altro orientamento orizzontale che può avere un impatto visivo immediato, perché sono collocati in un modo diverso da quello che ci si aspetta. Questo può funzionare bene per brevi parole o frasi nel livello principale del testo.
- Colore: L'aggiunta di colore alle lettere che in genere non hanno colori crea un interesse specifico e immediato. Questo effetto può funzionare in qualsiasi livello di testo, ma dovrebbe essere deliberato in modo da non creare problemi di leggibilità o confusione.
- Posizionamento: Dove il testo si trova sulla tela può stabilire anche la gerarchia. In genere si legge dall'alto verso il basso (una sorta di gerarchia naturale), ma questo può essere modificato utilizzando alcune delle tecniche sopra riportate.
Gerarchia nei progetti digitali
Tutti gli strumenti utilizzati nei progetti di stampa si applicano anche ai progetti digitali, con alcune aggiunte. La gerarchia tipografica digitale deve includere anche la considerazione per l'HTML nella creazione del tipo di web.Questo ulteriore livello di pensiero garantisce che i tuoi livelli visivi si traducano in altri utenti sullo schermo.
Crealo
Assicurati di utilizzare le convenzioni comuni, inclusi gli stili di intestazione, corpo e grassetto quando lavori a progetti che saranno pubblicati online. Ognuna di queste definizioni di stile comunemente utilizzate rientra in carote () nell'HTML.
- Titolo (titolo): Definisce il titolo del documento per i web crawler e gli utenti.
- Corpo (corpo): Definisce il corpo del testo in un documento.
- Intestazioni (da h1 a h6): Definisce diversi livelli di stili di intestazione. H1 è in genere il più grande e il più importante, spostandosi verso il basso attraverso H6. Hai solo bisogno di usare quante ne vuoi.
- Grassetto (forte): Definisce un testo più pesante e più importante.
- Corsivo (em): Definisce il testo con un'inclinazione per l'enfasi.
Gerarchia e usabilità
Quando si tratta di applicazioni mobili, è necessario pensare alla gerarchia tipografica visiva, alla gerarchia tipografica HTML e all'usabilità nella gerarchia tipografica. Il testo non deve solo avere un bell'aspetto e funzionare correttamente, ma deve anche essere progettato in modo tale che gli utenti sappiano cosa fare e interagisca come previsto.
Questa tipografia basata sull'azione include alcune cose fondamentali per i progettisti. Il tipo deve essere abbastanza grande da essere toccato, distanziato in modo tale che ogni oggetto in grado di battere sia chiaramente definito e gli elementi utilizzabili abbiano una sorta di definizione visiva (come un pulsante).
Crealo
La cosa da tenere a mente quando si crea una gerarchia tipografica utilizzabile è quella di separare gli elementi di tipo con cui gli utenti interagiranno da quelli che non lo faranno e gli uni dagli altri. Considerazioni importanti includono:
- Spazio: Dai a ogni elemento che dovrebbe essere toccato o tappato, molto spazio. Considera la dimensione dello spazio e la quantità di spazio necessario per un dito per toccarlo. Gli utenti possono essere rapidamente frustrati se il tipo è così vicino da fare clic sull'elemento sbagliato.
- Colore: Creare una tavolozza di colori per l'usabilità. Considera di rendere ogni parola destinata al tocco di un colore diverso rispetto al testo principale.
- Shadows: Le ombre esterne sono un indicatore comune di un pulsante che può essere premuto in qualche modo.
- Frontiere: Prendi in considerazione l'aggiunta di bordi a elementi indipendenti con cui desideri interagire gli utenti. Assicurati che siano separati dallo sfondo. (I pulsanti Trendy? Ghost? Sono un buon esempio di questo, come nell'esempio del sito web di Spacecraft sopra.)
- Animazione: Spostare il testo, mentre è difficile da usare, può essere un modo rapido per aiutare ad attirare l'attenzione su determinate parole.
- Direzione: Ricordarsi di dire agli utenti cosa fare sullo schermo, toccando per scorrere gli inviti all'azione.
Conclusione
È probabile che tu progetta con una sorta di gerarchia tipografica anche senza pensarci. Ma considerando come il tipo si allineerà in una grande immagine può migliorare la progettazione generale.
Utilizza la gerarchia tipografica per aggiungere enfasi, impatto e creare inviti all'azione che gli utenti possono vedere e reagire rapidamente. Ricordarsi di considerare la leggibilità, la scansione e la comprensione generale quando si prendono decisioni su carattere tipografico, dimensioni ed effetti applicati ad esso. I tuoi lettori (o utenti) ti ringrazieranno.