Ogni progetto richiede un sistema e una gerarchia per gli elementi di testo. Pensa a tutti i piccoli pezzi di testo che vengono utilizzati in tutto il design: 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 senza intoppi a quello successivo? Oggi ti condurremo passo passo attraverso la costruzione di un sistema di gerarchia tipografica che può essere utilizzato per quasi tutti i progetti di design. (E stiamo accoppiando i suggerimenti con bellissimi esempi di grande tipografia per aiutarti a raccogliere un po 'di ispirazione.)
1. Inizia con una comoda copia del corpo
Mentre si potrebbe voler iniziare con un trattamento di titolo fresco, il punto di partenza è in realtà nel mezzo. Stabilire per prima cosa un carattere tipografico, dimensioni e spaziatura confortevoli per la copia del corpo principale.
Questo dovrebbe avere senso perché questa è la maggior parte del testo nel design. Sia che tu stia costruendo un sito web o una brochure, questo concetto è lo stesso. La leggibilità ideale per la copia del corpo è da qualche parte 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 regolare contro condensato o lastra).
2. Costruisci una scala
Una volta che sai come sarà la copia del corpo, puoi impostare una scala attorno ad essa per tutti gli altri elementi di testo nel disegno. Può essere facile trascurare certi blocchi di testo; crea un elenco di ogni utilizzo diverso per il testo nel tuo progetto.
- Copia del corpo
- Notizie
- Sottotitoli
- didascalie
- Blocca citazioni
- 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 costruiscilo nel tuo CSS per i siti web o i file di stile per i documenti di lavoro.) Ci sono diversi modi per creare la scala, ma la percentuale di dimensioni può essere un buon punto di partenza. Puoi anche stabilire una scala basata sulla matematica dietro una griglia di riferimento o visivamente.
Ecco una semplice scala per iniziare:
- Dimensione della copia del corpo
- I titoli sono le dimensioni della copia del corpo volte del 220%
- Sottotitoli sono le dimensioni della copia del corpo volte del 150%
- Gli elementi di navigazione sono le dimensioni della copia del corpo volte 80%
- Piè di pagina / copia legale è la dimensione del corpo volte 80%
3. Pensa dal più grande al più piccolo, dall'alto in basso
Questa regola è piuttosto semplice: il testo più grande e più importante dovrebbe essere nella parte superiore e le dimensioni dovrebbero diminuire man mano che leggi la pagina o lo schermo.
Questo non vuol dire che non si può infrangere questa regola di tanto in tanto con un certo tocco di design, ma dovrebbe sempre essere il punto di partenza per lo sviluppo della gerarchia tipografica. (Chi sta davvero scorrendo fino alla fine di una pagina web per il titolo e poi torna all'inizio per iniziare a leggere?)
4. Stabilisci le regole per lo spazio
Altrettanto importante della dimensione del lettering è lo spazio tra e intorno ad esso. I fattori che determinano lo spazio includono l'altezza (o l'altezza della linea), i rientri (o meno), gli avvolgimenti e le grondaie e l'allineamento.
Considerare le proporzioni di spaziatura che rispecchiano la scala utilizzata per ridimensionare il testo. Anche la dimensione della tela è molto importante qui. Le tele più grandi sono leggibili con spaziatura più stretta rispetto alle tele di piccole dimensioni. (Questo è il motivo per cui molti progetti hanno specifiche di spaziatura molto più sciolte per dispositivi come telefoni cellulari e regole più severe per i desktop.)
Proprio come con le dimensioni dei caratteri tipografici, le regole di spaziatura dovrebbero essere impostate in anticipo per l'intera struttura del progetto. La spaziatura costante e pulita è una delle piccole cose che possono creare o distruggere un progetto.
5. Imposta regole per grassetto e corsivo
Mentre grassetto e corsivo non sono elementi o dimensioni di tipo diverso, l'utilizzo è importante. (Basta immaginare come sarà il design se ogni altra parola è in grassetto.)
Ciò rende particolarmente importanti le linee guida per grassetto e corsivo. Invece di considerare le dimensioni o lo spazio, la considerazione è molto più contestuale. Le specifiche di utilizzo possono indicare che solo così tante parole o frasi (o parole o frasi specifiche) possono avere questo trattamento. È un errore comune abusare di grassetto e corsivo; quando dubita, non usarlo.
6. Creare 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 all'altro della linea fino alla fine e poi torneranno a l'angolo di partenza e attraverso la linea in uno schema ripetuto.
Usa questo flusso naturale posizionando gli elementi di testo sullo schermo. Questa forma Z è il motivo per cui la maggior parte delle marche posiziona il proprio logo nell'angolo in alto a sinistra. È il primo punto in cui l'occhio atterra quando legge.
7. Considerare il peso visivo
Le dimensioni non sono l'unico fattore quando si tratta della grandezza di un elemento di testo sullo schermo. Il peso visivo è altrettanto importante e può influire sul modo in cui crei una scala tipografica.
I caratteri tipografici appariranno più grandi quando:
- Includono pesi a corsa pesante
- Includono svolazzi o abbellimenti
- Sono larghi
- Sono caratteri tipografici di base della novità
- Hanno altezze x più alte
- Sono usati come tutti i tappi
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. Creare accenti
Ci sono alcune parole che vorrete evidenziare che cadono un po 'al di fuori della normale scala tipografica. Aggiungere un accento alle lettere può farlo risaltare senza dover regolare la dimensione o il carattere tipografico.
Gli accenti comuni includono:
- Colore
- Sottolineare
- Evidenziare
- Testo in un pulsante o forma
- Animazione semplice
- Cambia in caso di altro tipo di stessa dimensione
La cosa bella di qualsiasi accento all'interno di una gerarchia di tipi è che si tratta di un'immediata cattura d'attenzione. Questi elementi dovrebbero essere usati con parsimonia per il massimo impatto e per gli elementi chiave del design.
9. Usa il? Eye test?
Infine, ogni regola ha un'eccezione (o due). È lì che il test dell'occhio? entra. Basta guardare la scala sullo schermo. Come ti sembra e ti sembra il testo? C'è un flusso logico? È facile da leggere?
Se si sente in qualche modo, prendere in considerazione la possibilità di apportare modifiche alla scala. A seconda del tipo di carattere utilizzato e di altri elementi nel disegno, 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 migliore risposta. Il design è un'arte visiva, che fa il test dell'occhio? un'opzione imprecisa ma abbastanza affidabile.
Conclusione
Dopo aver impostato una gerarchia tipografica per un progetto, la cosa migliore che puoi fare è documentarla. Stabilire la scala con CSS per i siti Web o creare file di stili quando si lavora su progetti stampati.
Per progetti su larga scala o marchi, mettere la scala e le specifiche in forma scritta 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ù veloce, più facile e, per non dire più coerente, mentre vai avanti con i progetti successivi.