9 consigli per una migliore gerarchia tipografica
Ogni progetto richiede un sistema e una gerarchia per gli elementi di testo. Basti pensare a tutti i piccoli pezzi di testo utilizzati in tutto il progetto: titoli, copia del corpo, elementi di navigazione, informazioni legali, didascalie e così via.
Ma come si crea quella gerarchia in modo che ogni elemento di testo scorra uniformemente verso il successivo? Oggi ti guideremo passo passo nella costruzione di un sistema di gerarchia tipografica che può essere utilizzato per quasi tutti i progetti di design. (E stiamo abbinando i suggerimenti con splendidi esempi di grande tipografia per aiutarti a raccogliere un po 'di ispirazione.)
Esplora Envato Elements
1. Inizia con una comoda copia del corpo
Mentre potresti voler iniziare con un trattamento interessante, il punto di partenza è in realtà nel mezzo. Stabilire innanzitutto un carattere, una dimensione e una spaziatura confortevoli per la copia del corpo principale.
Questo dovrebbe avere senso perché questa è la maggior parte del testo nel progetto. Che tu stia costruendo un sito Web o una brochure, questo concetto è lo stesso. La leggibilità ideale per la copia del corpo è compresa tra 50 e 60 caratteri per riga (o colonna), secondo il Baymard Institute. Questa linea guida ti aiuterà a impostare una scala per il testo che è leggibile e tiene conto di diversi tipi di caratteri tipografici (come normale o condensato rispetto al solaio).
2. Costruisci una scala
Una volta che sai come apparirà la copia del corpo, puoi impostare una scala attorno ad esso per tutti gli altri elementi di testo nel disegno. Può essere facile trascurare alcuni blocchi di testo; fai un elenco di ogni utilizzo diverso per il testo nel tuo progetto.
- Copia del corpo
- Notizie
- Sottotitoli
- didascalie
- Virgolette di blocco
- Elementi di navigazione
- Informazioni a piè di pagina
- Copia legale o dichiarazioni di non responsabilità
Ora crea una scala che detta carattere tipografico, intervallo di dimensioni e utilizzo per ciascuno di questi elementi. (E inseriscilo nel tuo CSS per siti Web o file di stili per documenti di lavoro.) Esistono diversi modi per creare la scala, ma la percentuale delle dimensioni può essere un buon punto di partenza. Puoi anche stabilire una scala basata sulla matematica dietro una griglia di base o visivamente.
Ecco una semplice scala per iniziare:
- Dimensione della copia del corpo
- I titoli sono dimensioni della copia del corpo volte 220%
- I sottotitoli hanno dimensioni della copia del corpo volte del 150%
- Gli elementi di navigazione hanno dimensioni della copia del corpo volte dell'80%
- Piè di pagina / copia legale ha una dimensione del corpo dell'80%
3. Pensa dal più grande al più piccolo, dall'alto verso il basso
Questa regola è piuttosto semplice: il testo più grande e più importante dovrebbe essere in alto e le dimensioni dovrebbero diminuire mentre leggi la pagina o lo schermo.
Questo non vuol dire che non puoi infrangere questa regola di tanto in tanto con un po 'di raffinatezza progettuale, ma dovrebbe sempre essere il punto di partenza per lo sviluppo della gerarchia tipografica. (Chi scorrerà davvero fino alla fine di una pagina Web per il titolo e poi torna all'inizio per iniziare a leggere?)
4. Stabilire le regole per lo spazio
Altrettanto importante della dimensione dei caratteri è lo spazio tra e intorno ad esso. I fattori per la determinazione dello spazio includono la quota iniziale (o l'altezza della linea), i rientri (o meno), gli avvolgimenti, le grondaie e l'allineamento.
Considera la spaziatura delle proporzioni che rispecchiano la scala utilizzata per il dimensionamento del testo. Anche qui le dimensioni della tela sono piuttosto importanti. Le tele più grandi sono leggibili con una spaziatura più stretta rispetto alle tele piccole. (Ecco perché molti progetti hanno specifiche di spaziatura molto più ampie per dispositivi come telefoni cellulari e regole più severe per i desktop.)
Proprio come con le dimensioni dei caratteri tipografici, le regole di spaziatura devono essere impostate in anticipo per l'intero framework di progettazione. La spaziatura coerente e pulita è una delle piccole cose che possono creare o rompere un disegno.
5. Impostare le regole per grassetto e corsivo
Mentre grassetto e corsivo non sono elementi o dimensioni di tipi diversi, l'uso è importante. (Basta immaginare come sarà il design se ogni altra parola è in grassetto.)
Ciò rende particolarmente importanti le linee guida per il grassetto e il corsivo. Invece di guardare alle dimensioni o allo spazio, la considerazione è molto più contestuale. Le specifiche di utilizzo possono indicare che solo un numero così elevato di parole o frasi (o parole o frasi specifiche) può avere questo trattamento. È un errore comune abusare di grassetto e corsivo; in caso di dubbio, non utilizzarlo.
6. Crea una "Z"
Il modello di lettura comune ha la forma di una Z. Sia che tu stia progettando per una lingua che legge da sinistra a destra o da destra a sinistra (capovolgi la Z), gli utenti leggeranno da un angolo attraverso la linea fino alla fine e poi torneranno a l'angolo iniziale e attraverso la linea in uno schema ripetuto.
Utilizzare questo flusso naturale quando si posizionano elementi di testo sullo schermo. Questa forma a Z è il motivo per cui la maggior parte dei marchi posiziona il proprio logo nell'angolo in alto a sinistra. È il primo punto in cui l'occhio atterra durante la lettura.
7. Considera il peso visivo
La dimensione non è l'unico fattore quando si tratta della dimensione di un elemento di testo sullo schermo. Il peso visivo è altrettanto importante e può influire sul modo in cui si crea una scala tipografica.
I caratteri tipografici appariranno più grandi quando:
- Includono pesi a corsa spessa
- Includono svolazzi o abbellimenti
- Sono larghi
- Sono caratteri tipografici di base novità
- Hanno altezze x più alte
- Sono usati come maiuscole
I caratteri tipografici appariranno più piccoli quando:
- Sono condensati
- Includono larghezze di corsa leggere o sottili
- C'è poco contrasto con lo sfondo
- Sono usati con lettere minuscole
8. Crea accenti
Ci sono alcune parole che vorresti evidenziare che non rientrano nella normale scala tipografica. L'aggiunta di un accento alle lettere può farla risaltare senza dover regolare le dimensioni o il carattere tipografici effettivi.
Gli accenti comuni includono:
- Colore
- Sottolineare
- Evidenziare
- Testo in un pulsante o una forma
- Animazione semplice
- Cambia nel caso da un altro tipo della stessa dimensione
La cosa bella di qualsiasi accento all'interno di una gerarchia di tipi è che è un elemento che attira immediatamente l'attenzione. Questi elementi dovrebbero essere usati con parsimonia per il massimo impatto e per gli elementi chiave del progetto.
9. Utilizzare il "Eye Test"
Infine, ogni regola ha un'eccezione (o due). È qui che entra in gioco il "test dell'occhio". Basta guardare la scala sullo schermo. Come ti appare il testo? C'è un flusso logico? È facile da leggere?
Se si sente in qualche modo, considera di apportare modifiche alla scala. A seconda del carattere tipografico utilizzato e di altri elementi del progetto, dalle immagini al colore al contrasto, la scala richiederà una regolazione da parte dell'utente. È solo un punto di partenza quando non sei sicuro di cosa vuoi fare.
E chiedi anche altri occhi. Crea una o due versioni con gerarchie diverse per vedere quale versione ottiene la risposta migliore. Il design è un'arte visiva, che rende la "prova dell'occhio" un'opzione imprecisa ma abbastanza affidabile.
Conclusione
Una volta impostata una gerarchia tipografica per un progetto, la cosa migliore che puoi fare è documentarlo. Stabilisci la scala con CSS per i siti Web o crea file di stili quando lavori su progetti stampati.
Per progetti su scala più grande o marchio, inserire la scala e le specifiche per iscritto in una guida di stile. La creazione di una gerarchia di tipi richiede un po 'di lavoro sul back-end, ma rende il completamento del progetto più rapido, facile e per non parlare di più coerente, man mano che procedi con i progetti successivi.
