Niente è più importante della leggibilità quando si tratta del testo sul tuo sito web.

Assolutamente niente.

Se non riesci a leggere le parole, allora cosa stai facendo? Chi sta ricevendo il tuo messaggio?

Altrettanto importante delle parole stesse è il design del testo - dai caratteri, alla sillabazione, a come è tutto organizzato sullo schermo. Parte del design include le parole stesse, il modo in cui componi le "parole grosse" sul tuo sito può fare la differenza.

Selezione dei caratteri

Ci sono solo tanti caratteri tra cui scegliere. Può essere abbastanza travolgente.

Non lasciarlo essere La cosa migliore che puoi fare quando si tratta di leggibilità è di mantenerla semplice.

Seleziona uno o due caratteri tipografici per il tuo sito. Un buon punto di partenza è con un font per la copia del corpo principale e un altro per le parole grandi, come intestazioni, banner e testo di breakout. Usare un font diverso per ogni elemento è fonte di distrazione, confusione e difficoltà di lettura.

Inizia con un font sans serif per la copia del corpo principale. I sans serif sono i più facili da guardare quando si parla di lettura dello schermo e tendono a funzionare bene anche con dimensioni più piccole. I font Serif possono iniziare a "correre insieme" o perdere i loro serif in base alle dimensioni del font, alla risoluzione dello schermo e persino al contrasto cromatico tra testo e sfondo.

Typecast

Tieni presente che la tua copia del corpo sarà la cosa più letta sul sito e deve essere facile da digerire su schermi di computer, tablet o dispositivi mobili. Va bene usare diversi stili di questo carattere all'interno della copia, ma non impazzire. Il grassetto e il corsivo sono ottimi per i punti di enfasi, ma i grandi blocchi di questi stili possono essere difficili da leggere.

Se hai bisogno di aiuto per selezionare un carattere tipografico, prova ad associare i caratteri con strumenti online come Google Web Fonts o Typecast.

Google webfonts

Sillabazione

La sillabazione è cattiva. È brutto. È inefficace e confuso. (E questi problemi si amplificano su tutte le piattaforme.)

Hyphenation

Stammi lontano.

Nel caso in cui sia necessario un aggiornamento, la sillabazione si verifica quando una parola viene divisa alla fine di una riga e fa apparire una parte di una parola alla fine di una riga e il resto della parola appare all'inizio del successivo. L'uso della sillabazione è praticamente passato di moda quando si parla di web design, ma lo si incontra di tanto in tanto. (Viene usato regolarmente nelle pubblicazioni stampate, come i giornali.)

Il pensiero alla base dell'uso dei trattini era di consentire al testo di spaziare correttamente (e in modo uniforme) attraverso le linee. Quando si lavora con testo giustificato, è possibile incorrere in problemi di spaziatura dispari quando la sillabazione viene rimossa.

Ma i trattini che spezzano le parole possono rendere il testo difficile da leggere. La lettura di un trattino può far inciampare o interpretare erroneamente una parola. L'uso di trattini può anche inavvertitamente modificare l'enfasi di alcune parole o il loro impatto nel resto della copia. Inconsciamente un trattino dice al lettore che la parola è un po 'meno importante delle altre parole che sono interamente rese.

Prenota i trattini solo per le parole che ne hanno bisogno, ad esempio con i modificatori, e non per spezzare le linee. Il testo apparirà più pulito e professionale e avrà una maggiore leggibilità senza tutti quei fastidiosi trattini all'estremità delle linee.

Bad Racket

Giustificazione

Come la sillabazione, la piena giustificazione è caduta fuori dalla moda del web design, sebbene sia ancora usata comunemente nella stampa.

Justification

Digitare utilizzando la regolazione completa riempie completamente ogni riga da un margine sinistro al margine destro in modo che ogni riga abbia la stessa larghezza. L'uso della giustificazione completa crea (e chiude) spazi tra le parole in modo che la spaziatura non sia distribuita in modo uniforme. L'utilizzo di questo tipo di allineamento del testo può funzionare per alcuni siti Web, ma non è sempre l'opzione più attraente. Dai un'occhiata al modo in cui il tuo testo si rompe e prova a leggerlo alcune volte per valutare se la giustificazione completa sia un'opzione praticabile.

Esistono anche altri tipi di "giustificazione" o allineamento del testo. È possibile impostare il testo in modo che si allinei sul margine sinistro, sul margine destro o in basso al centro.

Per i siti web in lingua inglese, la giustificazione a sinistra è la pratica più comune. Il testo si allinea al margine sinistro e ha un bordo destro irregolare. La sensazione è amichevole e facile da leggere. Poiché questa tecnica è così comune, molti lettori non si accorgeranno nemmeno di come è stato impostato il testo. Questa è la tua migliore opzione per lavorare con grandi blocchi di testo.

Nanozoom

L'allineamento a destra è un'altra opzione ma non funziona così bene per blocchi di testo. Con il testo allineato al margine destro e irregolare a sinistra, i punti di partenza e di arresto si trovano goffamente sullo schermo. L'ordine di lettura naturale è invertito e solo il pensiero di leggere il testo in questo modo (specialmente in grandi quantità) può rendere un lettore scomodo. Riservare il testo allineato a destra per piccoli breakout se si desidera incorporarlo nel proprio schema di progettazione.

The paper mill

Il testo centrato è uno strumento abbastanza popolare anche se non è raccomandato per blocchi di testo di grandi dimensioni. (Certo lo troverai usato in questo modo su tutto il web.) Le insidie ​​dell'allineamento centrale sono molto simili a quelle associate al testo allineato a destra - non ha "naturali" avviamenti e arresti e può sembrare imbarazzante sulla pagina. Il testo allineato al centro può sembrare un po 'formale (perché viene spesso utilizzato per oggetti come gli inviti) e dovrebbe essere riservato a piccoli frammenti di testo in cui l'enfasi è importante. Non è una buona scelta per blocchi di grandi dimensioni.

Altri effetti di tipo

Tratti o contorni

Usare con moderazione su elementi di testo più grandi come punto di enfasi, ma evitare in caratteri di piccole dimensioni.

Barrato o sottolineando

Entrambi sono comunemente usati: barrato come notazione che qualcosa non è più valido e sottolinea per enfasi. Continua a utilizzare questi strumenti, ma usali con parsimonia. Entrambi funzionano per piccoli bit di testo, ma causano enormi problemi di leggibilità quando si parla di più di poche parole.

53

Inclinazione o distorsioni

Questi effetti sono grandi quando si utilizza la tipografia come forma d'arte. Non sono così efficaci quando stai cercando di trasmettere un messaggio. Dovresti evitare manipolazioni del testo e distorsioni sulla copia del corpo principale.

Colore

hip2save

L'uso del colore può essere un ottimo strumento per dare risalto a una singola parola in un blocco di testo. (Le combinazioni di colori più comuni e visivamente accattivanti per i blocchi di testo sono il nero o il grigio scuro su bianco o bianco su uno sfondo scuro.) Puntare su colori che stiano in netto contrasto con lo sfondo in modo che siano facili da vedere e leggere. I colori super-luminosi (si pensi al giallo o al fucsia) possono essere difficili da leggere a meno che non vengano utilizzati con un carattere grande e spesso. Considerare il tipo in grassetto con il colore per ulteriore enfasi, ma riservare questa tecnica per un numero limitato di parole.

Mantenere pulito il testo di grandi dimensioni

Sebbene la sillabazione possa essere considerata una questione di preferenza nella copia del corpo, dovrebbe sempre essere evitata in caratteri grandi. Gli stili di giustificazione semplici sono un must; a sinistra, o testo allineato al centro sono le migliori opzioni.

Intestazioni, striscioni, breakout e altri tipi di mobili di grandi dimensioni devono essere facili da leggere. Non solo queste parole sono usate per la navigazione, ma devono anche essere lette per mantenere le persone in movimento attraverso il contenuto sul tuo sito web.

I trattini sono ostacoli.

L'allineamento dispari non aiuterà la navigazione.

Ci sono alcune altre cose a cui pensare anche quando si traccia il design per il tuo tipo grande.

Pensa alle dimensioni del tipo in proporzione alla copia del corpo principale. Titoli e intestazioni significativamente più grandi e più audaci parleranno a voce alta ai lettori, mentre i mobili più piccoli e sottili sussurrano.

Dewey's Pizza

Il contrasto è della massima importanza per le parole grandi. Quando scegli i font, scegli qualcosa per mobili che non sia troppo simile alla copia del corpo. Si consideri un font serif, tenendo presente che i serif funzionano meglio a grandi dimensioni in modo che i terminali e i dettagli su ciascuna lettera non vadano persi nei pixel. Un'altra opzione è quella di scegliere il colore per stabilire uno stile e una gerarchia distinti per i mobili.

Ethical Studios

Pensa anche allo spazio intorno alle parole grosse. Assicurati che le parole grandi restino vicino alla copia che descrivono. Aggiungi spazio extra sopra ogni intestazione o titolo e condensa lo spazio tra esso e la copia.

Scrivi per adattarsi

Infine, pensa alla forma.

Guarda come si allinea il testo dopo aver scritto la copia per le parole grosse. Riempie la linea? Quante linee?

Visivamente vuoi andare per le intestazioni che hanno un aspetto coerente. Questo vale sia per lo stile del tipo sia per quanto tempo sono le parole. Evita gli oggetti che riempiono completamente una riga e solo una frazione della riga successiva. Pensa ai mobili in termini di piccoli rettangoli; vuoi che tutto si adatti alla cornice senza spazi vuoti.

modernerd

Crea uno stile per le parole grosse, che si tratti di una semplice intestazione contenente solo poche parole o pensieri completi su due righe sopra ogni sezione di testo. Considera parte di questo stile il tipo di titolo che utilizzi: farà una domanda, sarà una dichiarazione di fatto, dirà ai lettori cosa fare, mostrerà come fare qualcosa o sarà più indiretto e carino con le parole e il fraseggio?

Prova a scrivere intestazioni e titoli con una sola riga (due al massimo), usa parole attive.

Crafting Type

Questo può essere difficile da realizzare e diffidare di trucchi. Non afferrare un dizionario dei sinonimi e sostituire una parola grossa per un breve solo per fare le cose in forma. (Correrai il rischio di usare la parola sbagliata o usare un termine che i tuoi lettori potrebbero non conoscere il significato di). Pensa in modo colloquiale quando scrivi. Componi le parole e poi rivedi (taglia o aggiungi) in modo da mantenere l'integrità di ciò che vuoi esprimere e produrre una copia pulita e di facile lettura.

Conclusione

La copia pulita è molto più di semplici caratteri e trattini. Si tratta di scrivere una copia che abbia senso e presentarla in modo leggibile.

Pensa al tuo pubblico quando metti tutto insieme. Dovresti usare una tecnica e uno stile diversi quando scrivi post sui blog sulle idee per matrimoni (sensazione tradizionale, femminile) rispetto al blogging sui tatuaggi (probabilmente più tagliente e scuro). Il tuo pubblico ha un impatto sulle immagini, e dovrebbe avere un impatto anche sulla tua copia.

Ma soprattutto, pensate a come tutto si concentra. Rimuovi tutto il resto del design del tuo sito, lasciando solo il tipo dietro. È facile da leggere? Devi ingrandire o rimpicciolire? Stai socchiudendo lo schermo? Queste sono le vere domande a cui devi rispondere perché alla fine della giornata, la leggibilità è ciò che conta di più.

Quale testo trovi difficile da leggere online? Quali tecniche usi per mantenere leggibile il tuo testo? Fateci sapere nei commenti.

Immagine in primo piano / miniatura, immagine del testo via Shutterstock.