Crenatura, tracciamento e guida: una guida semplice per scrivere in modo efficace

Quando si progetta per il Web, è necessario tenere sempre a mente una cosa: la leggibilità. Non importa quanto sia bello il design, quanto sia bello il tuo layout o quanto geniale sia il tuo uso del colore. Se le persone non possono leggere le parole sullo schermo (e questo presuppone che ci siano parole sullo schermo, ovviamente), il sito web non può svolgere la sua funzione. Tre degli elementi più importanti della leggibilità per il testo sono crenatura, tracciamento e guida, anche se molte persone li confondono o semplicemente non capiscono come usarli in modo efficace. Abbiamo intenzione di risolverlo oggi.

Crenatura, tracciamento e guida

Se riduci questi tre ai fondamentali assoluti, stai guardando la spaziatura tra i caratteri su entrambi gli assi X e Y. Scavando, vedrai che c'è dell'altro, ma in sostanza, stai guardando la relazione tra i caratteri del testo. È importante comprendere la relazione tra questi tre attributi perché il buon design e la leggibilità dipendono dal loro utilizzo al meglio delle proprie capacità.

E questo arriva con il tempo e la pratica. Ma una volta che inizi a prestare attenzione a loro, noterai come crenatura, tracciamento e guida vengono utilizzati sia in modo efficace che male su tutto ciò che leggi e vedi ogni giorno. Scaviamo.

Regolazione di crenatura, interlinea e tracciamento (e altro!)

In realtà, prima di approfondire, esaminiamo come si modificano e si regolano queste impostazioni. Sebbene la maggior parte dei programmi di elaborazione testi abbia opzioni per regolarli, la maggior parte delle persone non ne avrà mai bisogno quando scrive testi o testo tipico. È quando stai progettando il testo che diventa più di un problema, quindi programmi come Photoshop, Illustrator, ecc. avranno le opzioni di cui hai più bisogno.

Nei prodotti Adobe, devi solo aprire il pannello dei caratteri del livello di testo e hai tutto ciò di cui hai bisogno. Il V/A è crenatura, il VA in una casella è il tracciamento e le A sottolineate e verticali sono iniziali. Puoi anche regolare barrato, peso, dimensioni, apice/pedice e molto altro in questo pannello. Vale la pena abituarsi a tenerlo aperto.

Basta posizionare il cursore dove è necessario regolare la spaziatura e andare.

Cos'è Kerning?

Cominciamo con la crenatura . Kerning è il più semplice dei tre, davvero. È lo spazio tra due caratteri affiancati. In una parola, puoi avere crenatura variabile perché lo spazio tra le prime due lettere può essere diverso da quello tra le ultime due (e così via).

Nei caratteri a spaziatura fissa, ogni carattere occupa esattamente la stessa quantità di spazio orizzontale senza sovrapposizioni. La A ha la stessa larghezza della B della J della K. La regolazione della crenatura tra queste lettere tende ad essere più semplice rispetto ai caratteri a spaziatura variabile, in cui le lettere potrebbero sovrapporsi e stampare con larghezze diverse.

Nell'esempio sopra, abbiamo tre righe che sono state copiate e incollate utilizzando il carattere a spaziatura fissa Courier New . La crenatura della riga superiore è impostata su 0, che è l'impostazione predefinita e utilizza la spaziatura scelta dal designer del font. La seconda riga è impostata equamente tra le lettere (e gli spazi) a 200. Come puoi vedere, gli spazi sono uniformi tra i caratteri lungo la riga. Infine, la terza riga è stata crenata a caso con spaziatura positiva e negativa all'interno di ogni singola parola. Come puoi vedere, ogni personaggio può avere una crenatura diversa su ogni lato.

Che cos'è il monitoraggio?

Il tracciamento è simile alla crenatura, ma non è crenatura. Laddove la crenatura è lo spazio tra due singoli caratteri, il tracciamento è lo spazio uniforme tra ogni singola parola o riga. Invece di preoccuparti di come le cose sono messe insieme lettera per lettera come con la crenatura, assicurati che l'intera riga sia spaziata uniformemente. Guardando indietro all'immagine di esempio precedente, la seconda riga avrebbe potuto essere eseguita in un modo molto più semplice.

Quello che ho fatto per la crenatura è stato posizionare il cursore tra ogni singolo carattere e adattarlo a 200. In sostanza ho tracciato l'intera linea. Che è quello che dovresti fare. Evidenzia semplicemente ciò di cui hai bisogno per tracciare e regolarlo nel pannello Personaggio.

Tieni presente, tuttavia, che alcuni caratteri e script potrebbero diventare illeggibili man mano che il tracciamento viene modificato.

I caratteri per la scrittura a mano e i caratteri corsivi sono impostati con una crenatura specifica e, se si regola il tracciamento, si otterranno spazi vuoti in una linea altrimenti ininterrotta. O andando nella direzione opposta per comprimere le righe, potresti semplicemente rendere illeggibile lo script.

Che cos'è il leader?

Con Leading, non hai più a che fare con la spaziatura tra i caratteri. Leader è lo spazio tra le righe.

L'uso efficace dell'interlinea ti consente di utilizzare efficacemente gli spazi bianchi nei tuoi progetti. Linee ristrette, anche con crenatura/tracking corretti e ben fatti, possono creare un'esperienza miserabile per i lettori.

In alcuni punti, potresti vedere l'interlinea chiamato line height , ma sono più o meno la stessa cosa. Una buona regola è assicurarsi di lasciare almeno un po' di spazio sopra e sotto i personaggi. Come puoi vedere nell'esempio in alto, un font di 40 pixel ha un'altezza della linea di 48 pixel. Ciò significa che non importa cosa, ci sarà spazio tra le lettere. Se lo imposti a una dimensione del carattere o ad un valore inferiore, otterrai una sovrapposizione di caratteri.

Inoltre, questa è l'altezza della linea su cui siedono i personaggi. Questa non è l'altezza del personaggio . Proprio come la crenatura e il tracciamento non rendono i personaggi più grassi o più sottili, il tracciamento non li rende più bassi o più alti. È semplicemente lo spazio intorno a loro.

Come puoi vedere, tuttavia, le opzioni sotto la crenatura/tracking nel pannello dei caratteri di Photoshop regolano la larghezza/altezza dei caratteri indipendentemente dalla crenatura, dal tracciamento e dall'interlinea.

Scorciatoie da tastiera di Photoshop/Illustrator

L'unico inconveniente del pannello dei personaggi è che diventa piuttosto fastidioso quando hai bisogno di regolazioni fini. Per fortuna, ci sono scorciatoie da tastiera che rendono la crenatura, il monitoraggio e la guida un gioco da ragazzi da usare.

Queste scorciatoie sono per la suite Adobe Creative Cloud, quindi potrebbero essere diverse in Gimp o Paint.NET o in un altro programma.

• Crenatura – Con il cursore tra due caratteri, tieni premuto ALT (o Opzione su Mac) e usa le frecce sinistra/destra per regolare la crenatura
• Tracciamento : con la parola/riga evidenziata, tieni premuto ALT (o Opzione su Mac) e usa le frecce destra/sinistra per regolare il tracciamento del testo evidenziato
• Interlinea : evidenzia le linee che desideri regolare, tieni premuto ALT (o Opzione su Mac) e usa le frecce su/giù per regolare lo spazio tra le righe

Mentre puoi posizionare il cursore o evidenziare il testo e digitare i valori nel pannello dei caratteri, le scorciatoie da tastiera rendono l'intero processo molto meno noioso e dispendioso in termini di tempo. Inoltre, ottieni un controllo più granulare, così puoi anche realizzare progetti migliori in questo modo.

(Per inciso, se non utilizzi regolarmente le scorciatoie da tastiera di Photoshop/Illustrator/Premier, ecc., ti consigliamo vivamente di imparare, poiché rende il tuo flusso di lavoro molto più fluido, più divertente e anche più produttivo.)

Avvolgendo

Crenatura, tracciamento e guida sono i fondamenti del testo leggibile nel web design (e nel design in generale). Imparare la differenza e come utilizzare ciascuno di essi in modo efficace ti renderà un designer molto migliore. Può sembrare un po' strano che qualcosa di così semplice come la spaziatura tra le lettere e le righe possa avere un impatto così grande, ma una volta che ci occuperai anche solo per un po', non guarderai mai più siti web, pubblicità, loghi o cartelloni pubblicitari di nuovo allo stesso modo.

Quali sono i tuoi suggerimenti e trucchi per ottenere il tracciamento, la crenatura o la guida in un design perfetti?

Immagine in primo piano dell'articolo di BarsRsind / shutterstock.com