Leader: lo spazio è importante tanto quanto le parole
Un componente chiave per la progettazione di qualsiasi sito Web è il tipo. La selezione di caratteri, dimensioni e colori può essere una parte importante del modo in cui delinei il tuo sito. Altrettanto importante delle lettere stesse, è la spaziatura attorno a quelle lettere e in particolare il principale utilizzato nei blocchi di testo.
Più il tipo si usa, più diventa importante la guida. Dietro carattere e dimensione, è uno dei fattori chiave da considerare quando si guarda al tipo leggibile.
Le specifiche principali utilizzate per un logo o una schermata iniziale potrebbero essere molto diverse da quelle utilizzate per il tipo in un post del blog.
Anche altri elementi di design hanno un impatto sul modo in cui dovresti usare la guida. Le dimensioni del tipo, la larghezza delle colonne e persino il colore di sfondo possono aiutarti a fare scelte guida sagge.
In particolare, il modo in cui utilizzi la leading entra in gioco per grandi blocchi di testo.
Cosa sta conducendo?
Leading - ledding pronunciato - è la spaziatura tra le righe di tipo. Il piombo veniva tradizionalmente misurato in punti (proprio come i caratteri). Il termine è stato originato da una stampa di lettere vecchio stile, quando il tipo è stato impostato a mano. Le strisce di piombo sono state posizionate tra le linee di tipo per mantenere tutto perfettamente allineato.
Dall'avvento dell'editoria digitale, la guida è stata spesso confusa con l'altezza della linea. L'altezza della linea è tutto lo spazio da una linea di base - il piano immaginario su cui si trovano lettere come "a", "x" e "n" - al successivo. Al primo posto, al contrario, c'è lo spazio dal fondo di una lettera su una riga, verso l'alto di una lettera sulla successiva: è letteralmente l'altezza della linea meno l'altezza del testo.
Nella tipografia digitale, in particolare nella tipografia web, i termini "leading" e "line height" sono spesso usati in modo intercambiabile. Ad esempio, nei CSS non esiste un valore guida, al contrario utilizziamo l'altezza della linea.
Mentre una volta il protagonista era un valore fisico misurabile, ora è più comunemente usato come concetto: l'impressione visiva dello spazio tra due linee.
Il modo in cui il lead viene utilizzato in un blocco di testo può influire sulla leggibilità. C'è una linea sottile tra il tipo troppo ravvicinato e troppo distanziato. O estremo può essere duro agli occhi di un lettore. Il ruolo principale è di alterare la densità del tipo. La chiave è capire quale messaggio si intende che il tuo tipo trasmetta e che corrisponda di conseguenza.
Nessuna soluzione perfetta
Non esiste una formula magica perfetta per determinare quanto ti servirà. Sono coinvolti una combinazione di fattori: dimensione del tipo, colore, effetto desiderato e, soprattutto, leggibilità.
Come regola generale, il punto di partenza per il comando è solitamente uguale alla dimensione in punti del carattere che si sta utilizzando. Alcuni software, in particolare i browser Web, lo fanno un po 'più lontano e impostano il valore predefinito che porta un po' più in alto rispetto alla dimensione del punto, usando comunemente un valore predefinito del 120 percento. Quindi i blocchi che includono il testo di 10 punti avranno 12 punti di vantaggio.
Questa filosofia funziona perfettamente per grandi blocchi di testo, come i post di blog, che utilizzano caratteri tipografici comuni senza stravaganti ascendenti, discendenti o legature su sfondi di colore chiaro e neutro (si pensi al tipo di nero su bianco o beige). Si ha la sensazione che tutte le linee del testo vanno insieme mentre si aggiunge nello spazio sufficiente che è facile per gli occhi.
I blocchi di testo sono più facili da leggere quando l'interlinea è più ampia della spaziatura delle parole. Questa proporzione aiuterà l'occhio a muoversi attraverso la pagina e poi verso il basso, seguendo il flusso naturale di spaziatura da scuro a chiaro.
Questa altezza di linea "normale" si sentirà anche appropriata per cose che richiedono molta lettura. È lo standard utilizzato da molti siti Web e pubblicazioni di stampa.
Tienilo stretto
Il vantaggio stretto o negativo si verifica quando le righe di tipo sono più vicine rispetto alla dimensione in punti del tipo. Ad esempio, se il tuo tipo ha una dimensione di 14 punti, qualsiasi vantaggio inferiore a 14 punti viene considerato stretto, anche se non appare troppo ravvicinato sullo schermo.
Una guida stretta può creare una sensazione di costrizione. Può anche essere usato per creare il caos. D'altra parte, la guida più stretta può essere utilizzata come metodo per riunire bit di tipo o per creare un senso distinto di organizzazione. Per molti anni in stampa e online, le organizzazioni di notizie hanno utilizzato alcune delle specifiche più stringenti per il tipo di corpo. In stampa, questo era per conservare lo spazio; online è mantenere il senso di credibilità e l'aspetto associato alle organizzazioni e ai loro partner di stampa.
Pensa a caso e lettere che si trovano sopra e sotto l'altezza x quando si impostano le specifiche dell'altezza della linea. Quando si lavora in maiuscolo non ci sono ascendenti o discendenti, quindi potrebbe essere necessario stringere l'interlinea, come ad esempio la tecnica usata da Regenerate Music Co. Lo stesso vale per i font che hanno ascender e discender più brevi.
Il tipo usato in dimensioni più grandi, come titoli o loghi, può a volte beneficiare anche di una guida più stretta.
Allentare
Lo sciolto, o positivo, che porta è l'aggiunta di spaziatura in modo che l'interlinea sia maggiore della dimensione in punti utilizzata per il tipo. Ad esempio, se il tuo tipo ha una dimensione di 14 punti, qualsiasi spazio di 15 o più punti sarebbe considerato sciolto. Con alcuni caratteri tipografici, la spaziatura potrebbe non apparire sciolta sullo schermo anche se è classificata in questo modo.
Una guida allentata può rendere la pagina leggera e ariosa. È uno stratagemma collaudato nel tempo per i progettisti di aggiungere un tocco in più quando il testo risulta troppo pesante o pesante sulla pagina. Guidare è troppo lento, anche se può essere difficile da leggere e seguire se viene usato un sacco di testo; è meglio riservato per poche parole.
La maggior parte dei progettisti ha tendenza a utilizzare leader più deboli per il tipo di corpo principale nei blog e per altri grandi blocchi di testo. Sciolto, ma non troppo largo, la guida può essere facile da leggere e seguire. Può rendere il testo più piccolo apparire leggermente più grande di quello che è e aiutare a bilanciare righe di testo estremamente lunghe. Nota l'uso del leader nel blog A List Apart, il carattere più grande per il corpo usa una specifica mentre il tipo più piccolo nella barra laterale destra è molto più flessibile, rendendo il tipo più piccolo più facile da seguire e bilanciamento con gli altri elementi della pagina .
Molti progettisti optano anche per leader più sciolti quando utilizzano i caratteri sans serif. Può essere un'opzione particolarmente utile quando si lavora con font con fioriture esagerate o legature. Lo spazio extra consente alla stanza delle lettere di respirare senza sovrapposizioni.
Anche una guida allentata è una considerazione importante se si prevede di utilizzare un sacco di caratteri in grassetto, colorati o tipi di carattere con pesi elevati. Il blog Bloggess utilizza una combinazione di colori, grassetto e cappucci in tutto il sito, rendendo il punto di partenza positivo uno strumento di leggibilità necessario. In questo caso, l'assenza di direzione aiuta anche ad attirare l'attenzione sulle parti importanti del testo, che sono a colori e in grassetto.
Colori di sfondo e leading
Il colore e il contrasto sono particolarmente importanti quando si sceglie un'altezza della linea.
Su sfondi scuri, potresti voler usare un po 'più di quello che potresti su uno sfondo più chiaro per alleviare la sensazione di massa. I colori scuri possono aggiungere peso al tuo design come può avere un vantaggio stretto, ma scegliendo di usare solo uno o l'altro puoi creare più equilibrio.
Lo stesso è vero quando si usa il tipo di un colore. I colori, oltre ai grigi neri e scuri, possono aggiungere diversi pesi al tuo progetto. A seconda del colore di sfondo, alcuni testi possono anche avere l'aspetto di un'emorragia sullo sfondo - questo accade per alcune persone, specialmente quando si leggono caratteri rossi su uno sfondo bianco. L'aggiunta di leader può aiutare a rendere più leggibili questi tipi di testo.
Cambiare le larghezze e condurre
La progettazione reattiva rende ancora più importante la comprensione (e il tipo in generale).
Con diverse risoluzioni e forme dello schermo, le specifiche del tipo devono essere regolate di conseguenza per garantire che un sito rimanga leggibile. Mentre il testo si restringe (o cresce) sullo schermo, il leader deve adattarsi di conseguenza.
Ricordarsi di tenere a mente le proporzioni dell'altezza della linea quando si effettuano queste regolazioni. Perché il tipo sarà più piccolo per dispositivi mobili e altri dispositivi di piccolo schermo. Prendi in considerazione l'aumento dell'altezza della linea del 20 percento rispetto a ciò che hai usato per il design in scala reale. Il maggiore vantaggio dovrebbe aiutare la leggibilità se abbinato a un tipo più piccolo.
Pertanto, quando si determinano le specifiche principali per il proprio sito, sono necessari diversi set di soglie: uno per la progettazione di base del sito Web, uno per dispositivi di medie dimensioni come l'iPad e altri tablet e uno per i telefoni cellulari. Ciascuno può avere un diverso insieme di proporzioni utilizzate per l'altezza da riga di testo.
Conclusione
Ora che sei armato di una serie di suggerimenti e strumenti all'avanguardia, da dove inizi?
Non c'è una lista di controllo. La soluzione migliore è dare un'occhiata al tipo e vedere come ci si sente (utilizzare il buon vecchio test dell'occhio). Lascia che si sieda per un po 'e ritorna di nuovo più tardi. Ti senti ancora allo stesso modo riguardo al testo? La sensazione che si ottiene corrisponde alla sensazione che hai in mente per il design del tuo sito?
Si noti che questo è più efficace quando il blocco di testo contiene una copia effettiva anziché un testo segnaposto. Si desidera ottenere una visualizzazione realistica e le opzioni segnaposto a volte contengono numeri dispari di lettere che non vengono utilizzate tutto ciò spesso in copia reale.
Giocaci. Mostra il tuo progetto di testo a qualcun altro per opinioni extra. Chiedi loro come si sentono a riguardo.
Assicurati anche di accoppiare il tuo blocco di testo con il resto degli elementi nel disegno. Questo potrebbe non essere il primo passo, ma a volte mettere tutto insieme può creare effetti indesiderati. Assicurati di superare nuovamente il test dell'occhio.