Come mantenere il testo pulito

tradotto dall’articolo originale di Carrie Cousins

Non c’è niente più importante della leggibilità quando si parla del testo del tuo sito.

Assolutamente niente.

Se non riesci a leggere le parole, allora cosa stai facendo di buono? Chi riceve il tuo messaggio?

Tanto importante quanto le parole stesse è il design del testo – dai font, ai trattini di unione, a come il tutto è organizzato sullo schermo. Parte del design include anche le parole stesse, il modo in cui componi le “parole grandi” sul sito può anch’esso fare la differenza.

Scelta dei font

Ci sono talmente tanti font tra cui scegliere. Può diventare una cosa più grande di noi.

Non lasciamo che succeda. La cosa migliore da fare nel caso della leggibilità è farla semplice.

Scegli uno o due caratteri per il sito. Un buon punto di partenza è un font per il corpo del testo principale e un altro per le parole grandi, come le intestazioni, banner e testi d’impatto. Usare un font diverso per ogni elemento distrae, confonde e li rende difficili da leggere.

Comincia da un font sans serif per il testo del corpo centrale. I sans serif sono i più facili per l’occhio nel caso della lettura a video e tendenzialmente funzionano bene anche a piccole dimensioni. I font serif possono cominciare a “andare insieme” o perdere le grazie a seconda della dimensione del font, della risoluzione dello schermo e anche il contrasto di colore tra il testo e lo sfondo.

Tenete a mente che il corpo del testo sarà la cosa più letta su sito e deve essere facile da digerire sugli schermi di computer, tablet o dispositivi mobile. Va bene usare differenti stili di questo carattere nel testo, ma non impazziteci. Grassetto o corsivo sono ottimi per enfatizzare qualcosa, ma grandi porzioni di testo in questo stile possono risultare difficili da leggere.

Se avete bisogno di aiuto nella selezione del font provate ad accoppiarli con strumenti online come Google Web Fonts o Typecast.

Trattini di separazione

I trattini di separazione sono il male. Sono brutti. Sono inefficaci e confondenti. (E questi problemi si ingrandiscono tra piattaforme diverse).

Statene alla larga.

Nel caso vi serva un ripasso, il trattino di separazione è quando una parola viene divisa alla fine di un rigo, facendo sì che una parte della parola appaia alla fine del rigo e il resto di essa appaia all’inizio del successivo. L’utilizzo del trattino è praticamente passato completamente di moda nel web design, ma lo si può ancora incontrare di tanto in tanto. (E’ usato regolarmente nelle pubblicazioni stampate, come i quotidiani)

Il pensiero dietro l’uso del trattino era di permettere al testo di avere una spaziatura corretta (e uniforme) tra le righe. Quando si lavora con il testo giustificato, si può incappare in strane spaziature quando si rimuove il trattino.

I trattini che rompono le parole, tuttavia, possono rendere il testo difficile da leggere. Leggere con un trattino può far inceppare la lettura o portare a mal interpretare una parola. L’uso dei trattini può anche involontariamente cambiare l’enfasi di una certa parola e il suo impatto sul resto del testo. In modo subconscio un trattino dice al lettore che la parola è un po’ meno importate di altre parole che sono rese intere.

Tenete il trattino solo per le parole che ne hanno bisogno, come per gli aggettivi qualificativi, e non per spezzare le righe. Il testo risulterà più pulito e più professionale e avrà una leggibilità migliore senza tutti quei fastidiosi trattini alla fine delle righe.

Giustificato

Come per il trattino di separazione, il giustificato pieno è fuori moda nel web design, anche se è ancora comunemente usato nella carta stampata.

Il carattere che usa l’aggiustamento pieno completa ogni linea dal margine sinistro al margine destro completamente così che ogni linea ha la stessa larghezza. L’uso della giustificazione piena crea (e chiude) gli spazi tra le parole così che la spaziatura non è più distribuita. L0utilizzo di questo tipo di allineamento può andare bene per alcuni siti web, ma non è sempre l’opzione visivamente più bella. Guardate come il testo si divide e provare a leggerlo un paio di volte per misurare se la giustificazione piena è un’opzione plausibile.

Ci sono altri tipi di “giustificazione” o anche di allineamento del testo. Si può impostare il testo così che si allinei al margine sinistro, a quello destro o al centro.

Per i siti di lingua inglese, la giustificazione a sinistra è la cosa più comune. Il testo si allinea al margine sinistro e ha il bordo destro frastagliato. La sensazione è piacevole e facile da leggere. Siccome questa tecnica è molto comune, molti lettori non noteranno neanche la configurazione del testo. Questa è l’opzione migliore quando si lavora con grossi blocchi di testo.

L’allineamento a destra è un’altra opzione ma non funziona così bene per i pezzi di testo. con il testo allineato al margine destro e frastagliato a sinistra, i punti di inizio e di fine sono posizionati in maniera strana sullo schermo. L’ordine naturale di lettura è invertito e solo il pensiero di leggere il testo in questo modo (specialmente per grandi quantità) può essere fastidioso per il lettore. Tenete l’allineamento a destra per piccoli annunci se volete incorporarlo nel vostro schema di design.

Il testo centrato è uno strumento abbastanza comune anche se questo non è consigliabile quando ci sono grandi porzioni di testo. (Garantito che lo troverete usato in questa maniera in tutto il web.) Gli svantaggi dell’allineamento centrale sono molto simili a quelli del testo allineato a destra – non ha un inizio e una fine “naturali” e può sembrare strano sulla pagina. Il testo con allineamento centrale può sembrare in qualche modo formale (perchè spesso viene usato per cose come gli inviti) e dovrebbe essere riservato a piccole porzioni di testo dove è importante porre enfasi. Non è una buona scelta per pezzi lunghi.

Altri tipi di effetti

Bordi o contorni

Da usare con moderazione in testi lunghi come punti di enfasi ma da evitare in testi brevi.

Barrato o sottolineato

Entrambi sono usati comunemente – il barrato come nota per qualcosa che non è più valida e la sottolineatura per dare enfasi. Continuate ad usare questi strumenti ma utilizzateli con parsimonia. Entrambi vanno bene per piccoli pezzi di testo ma causano terribili problemi di lettura se riguardano più di poche parole.

Inclinazioni e distorsioni

Sono fantastiche quando si usa la tipografia come una forma d’arte. Non sono così efficaci quando si tratta di trasmettere un messaggio. Bisognerebbe evitare la manipolazione del corpo del testo principale.

Colore

L’utilizzo del colore può essere un ottimo strumento per dare enfasi ad una singola parola in un blocco di testo. (Le combinazioni di colore più comuni e visivamente belle dei blocchi di testo sono il nero o il grigio scuro sul bianco o il bianco su sfondo nero.) Puntate a colori che abbiano un forte contrasto con lo sfondo così che siano facili da vedere e da leggere. Colori super-luminosi (pensate al giallo o al fuchsia) possono essere difficili da leggere a meno che non siano utilizzati con un font grande e spesso. Si può pensare al grassetto combinato con il testo colorato per aggiungere altra enfasi, ma riservate questa tecnica per un numero limitato di parole. 

Mantenere pulito il testo grande

Anche se il trattino può essere considerato un elemento da preferire nel corpo del testo, dovrebbe essere sempre evitato nei caratteri grandi. Giustificazioni del testo semplici sono un must; il testo allineato a sinitra, o al centro sono le scelte migliori.

Le intestazioni, i banner, gli annunci e altri caratteri grandi o altri accessori devono essere di facile lettura. Non solo queste parole vengono usate per la navigazione, devono anche essere lette per far sì che le persone si spostino tra il contenuto del vostro sito. 

I trattini sono dei blocchi che fanno inciampare. 

Allineamenti strani non aiutano la navigazione. 

Ci sono anche alcune altre cose a cui pensare quando si progetta il design per i caratteri grandi. 

Pensate alla dimensione del carattere in proporzione al corpo del testo. Le intestazioni e le testate che sono significativamente più grandi e marcate parleranno più forte ai lettori, mentre le più piccole, sottili accessorie sussurreranno. 

Il contrasto è la cosa più importante per le parole grandi. Quando si scelgono i font, sceglietene uno per il testo accessoria che non sia troppo simile a quello del corpo del testo. Prendete in considerazione un font serif, tenendo a mente che i serif funzionano meglio a dimensioni grandi così che le terminazioni e i dettagli di ogni lettera non si perda tra i pixel. U’altra opzione è scegliere un colore che stabilisca uno stile diverso e una gerarchia per il testo accessorio.

Pensate anche allo spazio attorno alle grandi parole. Assicuratevi che le parole grandi stiano accanto al testo che descrivono. Aggiungete spazio in più sopra ogni header o intestazione e condensate lo spazio tra essa e il testo. 

Scrivete perché si adatti

Alla fine pensate alla forma. 

Guardate come il testo si allinea una volta che avete scritto il testo per le parole grandi. Riempie la riga? Quante righe?

Visivamente sceglierete header che hanno un look coerente. Questo si applica sia allo stile del carattere sia alla lunghezza delle parole. Evitate elementi che completino una riga completamente e solo metà della riga successiva. Pensate al testo accessorio come a piccoli rettangoli; dovete ottenere che tutto stia nella cornice senza lasciare spazi bianchi. 

Create uno stile per i titoli, sia che sia un’intestazione semplice contenente solo poche parole o un pensiero completo di due righe sopra ogni sezione di testo. Considerate il tipo di titolo che userete parte di questo stile – porrà una domanda, sarà un’affermazione, dirà ai lettori cosa fare, mostrerà come farlo o sarà più indiretta e gentile con le parole e la formulazione?

Cercate di scrivere le intestazioni e i titoli che siano lunghi solo una riga (al massimo due), usate parole attive. 

Questo può essere difficile da fare e state attenti ai tranelli. Non prendete un dizionario dei sinonimi e sostituite le parole lunghe con quelle corte solo per far sì che si stiano. (Correrete il rischio di usare la parola sbagliata o di usare un termine di cui i vostri lettori magari non conoscono il significato.) Pensate colloquialmente quando scrivete. Componete le parole e poi rivedetele (tagliatele o aggiungetene) così da mantenere l’integrità di ciò che volete esprimere e da produrre un testo pulito e facile da leggere. 

Conclusioni

Il testo pulito è un po’ più che un font semplice e i trattini. E’ scrivere un testo che abbia senso e presentarlo in maniera leggibile. 

Pensate al vostro pubblico quando lo componete. Userete una tecnica e uno stile diversi quando scrivete un post per un blog su idee per il matrimoni (uno stile tradizionale e femminile) piuttosto che scrivere un post sui tatuaggi (probabilmente più tagliente e cupo). Il vostro pubblico ha un impatto su ciò che è visivo, e dovrebbe averlo anche sul testo. 

Ma ancora più importante, pensate a come tutto viene messo insieme. Tagliate via tutto il resto del design del sito, lasciate indietro solo il testo. E’ facile da leggere? E’ necessario ingrandirlo o ridurlo? Vi fa strizzare gli occhi guardare lo schermo? Queste sono le vere domande a cui dovete rispondere perchè alla fine della fiera, la leggibilità è la cosa più importante. 

Quale testo trovate difficile da leggere online? Quali tecniche usate per far sì che il vostro testo risulti leggibile? Fatemelo sapere nei commenti.

Carrie Cousins è una scrittrice freelance con più di 10 anni di esperienza nel settore della comunicazione, compreso scrivere per pubblicazioni stampate e online, e design e editing. Potete mettervi in contatto con Carrie su Twitter @carriecousins