CONDIVIDI
Web design: come usare la tipografia per creare una gerarchia di contenuti
Che cos'è una gerarchia di contenuti, e perché è così importante nel web design moderno?
Nel contesto del web attuale, dove alle poche righe informative su un prodotto o un servizio deve necessariamente essere sostituito un testo corposo e tale da aiutare il posizionamento organico dei nostri prodotti, non è più pensabile scrivere un contenuto relativo alla promozione (o alla spiegazione: i termini tendono a divenire sinonimi) di un prodotto o un servizio come un unico muro di parole. Occorre dunque elaborare, all'interno del testo, una gerarchia dei contenuti, che diventi una sorta di guida in grado di aiutare il lettore a leggere il testo, facendogli comprendere quando una sezione inizia e finisce, e aiutandolo a isolare delle specifiche informazioni che altrimenti si perderebbero immancabilmente nel flusso del discorso.
Creare una gerarchia strutturata in questo modo, però, sarebbe inutile, se non fosse ben definita. Insomma, non basta creare la gerarchia (e magari renderla visibile a Google utilizzando gli heading tags: H1, H2...), bisogna anche mostrarla, e far sì che non vi siano dubbi su quale sia l'organizzazione del testo che stiamo proponendo ai nostri lettori.
L'unico modo possibile per creare una siffatta gerarchia all'interno dei nostri contenuti testuali sul web è il ricorso ad una tipografia significativa: a scelte, cioè, di modificatori che rendano i caratteri dei nostri titoli e sottotitoli immediatamente riconoscibili come "di livello superiore" rispetto al testo, che andrà a sua volta diviso in blocchi e sottoblocchi per favorirne la lettura e la User Experience.
Quali sono, nella pratica, i fattori di differenziazione in grado di gerarchizzare un testo?
Non sono moltissimi, in effetti. Vediamoli insieme.

Dimensione

La dimensiione del carattere è un ovvio fattore di differenziazione e gearchizzazione. Forse è quello più universalmente utilizzato, per la sua immediata decifrabilità. È ovvio, infatti, che un testo di corpo 14 avrà maggiore importanza rispetto a uno di corpo 12, e ceramente meno di uno di corpo 18.
Il problema delle dimensioni del testo è che essa risulta evidente solo per scarti significativi. In altre parole, non è sempre facile distinguere un titolo in corpo 15 da uno in corpo 14:
Questo è un corpo 14
Invece questo è 15
La dimensione può quindi diventare un ostacolo, laddove si vogliano creare gerarchie complesse (a 4 o 5 livelli, ad esempio), perché si incorre nel rischio di creare testi e titoli sovradimensionati ed esteticamente inappropriati.
Proprio per questo, si ricorre spesso all'aiuto di altri fattori di differenziazione.

Peso

Il peso di un carattere corrisponde alla sua grossezza (il termine ha ovviamente origini antiche, agli albori della litografia). Il peso del carattere, in combinazione con la dimensione, può fornire un'ottima indicazione della gerarchia di un testo.
Alcuni font, tuttavia, possono essere sprovvisti di tutte i pesi di cui potremmo avere bisogno, o averne di  inadeguati. Ancora una volta, potrebbe essere necessario (o semplicemente utile, a livello estetico e di design) ricorrere a soluzioni alternative o integrative.

Spaziature

Le spaziature sono a questo proposito molto utili.
Le spaziature orizzontali (tra caratteri o tra parole), meno usate e da usare comunque con parsimonia sul web, possono dare al testo un effetto "arioso" e aumentare l'evidenza e la leggibilità dei font più grandi. Tuttavia, è facile cadere nell'illeggibilità e nell'impossibilità di distinguere le singole parole.
Una spaziatura verticale che separi le righe dei titoli dai blocchi di testo è invece quanto di più necessario nella gerarchizzazione dei testi. Raccomando, a questo proposito, di dare sempre una spaziatura in alto maggiore di quella in basso, per rendere il titolo più distante dal paragrafo che precede e più vicino al paragrafo che intende invece introdurre e separare.

Colore

Molto spesso, nel design dei temi utilizzati di solito sul web (a partire da quelli per WordPress) il colore è uno strumento di gerarchizzazione e differenziazione tipografica.
Verranno evidenziati con l'uso del colore (in genere del colore preminente nel tema) i titoli principali, gli sfondi dei blocchi di citazione, gli hyperlink: tutti gli elementi che, in sostanza, richiedono una visibilità "diversa" rispetto al testo base.
La scelta di usare il colore (e di come usarlo, se come colore del carattere o come colore del background sul quale viene "sfondato" il carattere) va valutata attentamente, poiché l'uso del colore nella tipografia di un sito web potrebbe costituire un meraviglioso arricchimento o il peggiore dei boomerang. Un bravo web designer sa quando poter utilizzare il colore nel testo senza esagerare e senza ottenere un effetto arlecchino che renderebbe il tuo sito web pacchiano e sgradevole.

Tipografia  web: l'importante è non eccedere

Tutti i metodi suggeriti qui andranno usati separatamente o insieme per ottenerre l'effetto voluto di una gerarchizzazione efficace del testo. L'importante, come al solito, è non eccedere e ricordare sempre che alla base dei nostri sforzi ci devono essere sempre funzionalità e sobrietà, al fine di garantire ai nostri utenti la migliore user experience.
Tutto il resto è fronzolo.

CIAO! Grazie per essere arrivato a leggere fino a qui.

Porto avanti questo blog solo per passione, senza voler fare altro se non avviare un confronto con chi condivide con me l'interesse per tutto ciò che è marketing. Se ti è piaciuto questo post, la soddisfazione più grande che potrai darmi sarà quella di condividerlo sui social media e di lasciare un tuo commento.

Se poi vuoi rimanere sempre aggiornato, iscriviti subito alla newsletter!

Inserisci qui il tuo indirizzo e-mail:

Delivered by FeedBurner

NO COMMENTS

LEAVE A REPLY