Share
Una delle tecniche più importanti per comunicare in modo efficace (o "onorare") il contenuto è l'uso della gerarchia tipografica. La gerarchia tipografica è un sistema per l'organizzazione del tipo che stabilisce un ordine di importanza all'interno dei dati, consentendo al lettore di trovare facilmente ciò che sta cercando e navigare nel contenuto. Aiuta l'occhio del lettore a dove inizia e termina una sezione, consentendo all'utente di isolare determinate informazioni basate sull'uso coerente dello stile in un corpo di testo.
"La tipografia esiste per onorare il contenuto." - Robert Bringhurst: The Elements of Typographic Style
Diamo un'occhiata a un esempio di contenuto con e senza una gerarchia progettata.
L'immagine qui sotto è una lista di concerti che suonano nel luogo all'aperto in fondo alla strada da casa mia. Per il piacere di questo esempio, diciamo che ho il fine settimana del 15-17 agosto gratuito, e voglio vedere se c'è un concerto che mi piacerebbe frequentare in quel periodo. Nello scenario seguente, questo è un compito molto più difficile di quanto dovrebbe essere. Senza alcun tipo di gerarchia, si deve setacciare gran parte dei dati per trovare le date dei concerti. Immagina solo di provare a guardare attraverso una lista di 50 concerti.
Ok, quindi forse sono drammatico nell'esempio, ma possiamo renderlo molto più facile.
Come puoi vedere nel prossimo esempio, titolo, data e descrizioni sono tutti stilizzati in modo univoco, coerente e isolato utilizzando la spaziatura tra paragrafi. Questo ci permette di isolare facilmente le date (o nomi di band per quella materia) in base allo stile, inoltre possiamo ottenere le informazioni di cui abbiamo bisogno. Sembra che stiamo andando allo show di Avett Brothers!
Va sottolineato che quando si progetta per il web, c'è un altro livello da tenere in considerazione. Una stessa pagina web ha una gerarchia che non solo viene letta, ma contiene l'interazione. La pagina nel suo insieme deve essere progettata in modo da comunicare chiaramente all'utente quali azioni sono disponibili e come accedere facilmente alle informazioni che cercano, come acquistare un oggetto, ecc..
Per lo scopo di questo articolo, tuttavia, stiamo parlando rigorosamente della gerarchia come si applica al tipo. Fortunatamente per noi, abbiamo il nostro pratico tag HTML che ci consente di stabilire semanticamente la gerarchia tipografica nei siti web che costruiamo. I tag di intestazione (tag H) ci consentono di specificare un ordine di importanza nei nostri contenuti: da H1 a H6, H1 è il più importante, H6 è il minimo. I motori di ricerca utilizzano questi dati per interpretare la priorità dei contenuti di una pagina web.
Ma come modelliamo efficacemente quei tag H in modo che abbiano senso con i nostri contenuti? Contento che tu abbia chiesto!
Esistono alcuni metodi di base per stabilire una gerarchia tipografica visiva:
Più comunemente questi metodi sono usati in combinazione tra loro. Nell'elenco dei concerti mostrato in precedenza, sono stati utilizzati tutti i colori, la spaziatura e il contrasto del tipo. Le combinazioni sono letteralmente infinite.
Questo è il metodo più semplice e più comune per stabilire la gerarchia.
Usare semplicemente un peso più audace di un font può aiutare a isolare.
Il colore gioca un ruolo importante in ciò che i nostri occhi vedono come primario e secondario. Parlando in generale; colori caldi scoppiano, colori più freddi si allontanano.
Laddove le sezioni di informazioni sono posizionate in relazione l'una con l'altra, è possibile stabilire una gerarchia.
Un ottimo modo per raggiungere la gerarchia consiste nell'usare caratteri tipografici contrastanti.
Come accennato in precedenza, questi metodi possono essere più efficaci se usati in combinazione l'uno con l'altro. Questa è la parte divertente - decidere quale combinazione è giusta per il contenuto e il layout!
Uno dei concetti più importanti nel type design è la spaziatura. È uno dei concetti più difficili da comprendere per i designer principianti, ma è anche uno dei più visivamente ovvi. La corretta spaziatura tipografica è fondamentale per stabilire la gerarchia; può fare la differenza tra confusione e chiarezza. È utilizzato nella maggior parte dei sistemi gerarchici ed è presente in tutti gli esempi in questo articolo.
La regola di prossimità nel design generalmente si afferma che gli articoli correlati dovrebbero apparire più vicini tra loro rispetto agli articoli che non sono correlati. Tuttavia, la spaziatura corretta richiede più di un semplice ritorno tra le sezioni di tipo. In genere, un ritorno forzato crea troppo spazio tra i contenuti nel contesto di un paragrafo. Dovrebbe essere usata la spaziatura dei paragrafi, prima o dopo. Tendo ad usare la spaziatura tra paragrafi che è uguale alla metà dell'altezza della linea (o principale). Ciò in genere consente al gruppo di contenuti di mantenere insieme fornendo al contempo un'adeguata divisione dei contenuti al suo interno.
È importante prendere in considerazione il significato di un particolare contenuto quando si pensa alla gerarchia. Qual è l'argomento del contenuto? Cosa sta cercando di comunicare? Se non lo sai, leggi prima di prendere decisioni su gerarchia e stile.
In alcuni scenari, potresti avere la libertà di utilizzare uno dei metodi di gerarchia elencati sopra, ma in altri casi potresti essere limitato a un determinato spazio verticale o orizzontale o preoccuparti di un adeguato contrasto di tipo su uno sfondo. Valutare quali metodi funzionano per la situazione e impiegare quelli che hanno senso. Il vecchio mantra "più semplice è meglio" di solito si applica qui. Ricorda, l'obiettivo è presentare il contenuto in modo organizzato.
Ora vai a creare una bellezza gerarchica. Se sei interessato, ho fornito alcune risorse interessanti relative al tipo, alla gerarchia e al web:
Accentsconagua