Share
Quando si utilizza la tipografia sul Web, ci sono molte cose da tenere a mente al fine di creare una pagina che fornisce un accesso chiaro al contenuto e lo presenta in modo leggibile. In genere questo può essere suddiviso in due bucket: leggibilità e Leggibilità. La leggibilità si riferisce al modo in cui parole e blocchi di tipo sono disposti su una pagina. La leggibilità si riferisce a come è stato progettato un carattere tipografico e quanto bene un singolo personaggio può essere distinto da un altro. Per il bene di questo articolo, parlerò un po 'di entrambi, suggerendo alcune tecniche specifiche per migliorare la tua tipografia.
Parliamo prima di tutto della leggibilità. È importante capire che cosa rende un carattere tipografico più leggibile di un altro. Quando si sceglie un carattere tipografico, tutto dipende da come si prevede di usarlo. Porsi alcune domande di base: a che taglia sarà usato il testo? Apparirà come copia del corpo o come titolo? Ha bisogno di essere un cavallo di battaglia o sarà usato più come un piacere per gli occhi? Sarà accoppiato con un altro font? L'aspetto del carattere è complementare all'argomento?
È anche importante tenere a mente che i diversi tipi di carattere sono stati progettati per diversi usi. Ad esempio, il Garamond originale è stato progettato per essere altamente leggibile quando stampato in un grande corpo di testo. Alcuni dicono anche che era il font più ecologico del suo tempo, conservando l'utilizzo di inchiostro. Bell Centennial è un carattere tipografico commissionato da AT & T negli anni '70, progettato per essere utilizzato negli elenchi telefonici. Queste directory sono state realizzate con carta a basso costo e per questo motivo Bell Centennial è stato progettato in modo da adattarsi alla diffusione dell'inchiostro durante il processo di stampa. Sul lato digitale, ci sono caratteri che sono stati progettati specificamente per lo schermo come Georgia e Verdana. Azura è un font relativamente recente progettato specificamente per leggere il testo sullo schermo.
In breve, aiuta a conoscere il contesto previsto del carattere tipografico che stai considerando di utilizzare. Alcuni tipi di carattere sono infatti abbastanza flessibili, includono diversi pesi e possono essere utilizzati in diversi modi. Altri sono più limitati, progettati per essere utilizzati in modo molto specifico.
Questo ci porta nella prima di alcune cose da ricordare riguardo la leggibilità di un carattere tipografico:
Alcuni caratteri tipografici sono stati progettati per essere utilizzati di grandi dimensioni, ad esempio nei titoli. Di solito questi caratteri sono meno leggibili a dimensioni più piccole e non dovrebbero essere usati per la copia del corpo. Questi sono chiamati mostra i volti. Il carattere tipografico mostrato di seguito, Knockout, è uno dei miei volti di visualizzazione preferiti.
Altri caratteri tipografici sono progettati specificamente per essere utilizzati in ampie aree di copia del corpo più piccola. Questi sono chiamati facce di testo o di corpo.
Ci sono molte varianti in mezzo. Tipicamente, quello che faccio è trovare una faccia che ritengo sia appropriata per il compito, tenendo presente che ho intenzione di accoppiarlo con un altro font e provarlo. Ho già filtrato tutti i tipi di carattere che non credo siano appropriati per l'attività, ma se hai appena iniziato, potrebbero essere necessari alcuni tentativi ed errori.
Quindi, che è più leggibile: caratteri tipografici serif o sans-serif? La storia ci dice che i volti serif sono sempre stati considerati più leggibili, poiché sono stati quasi sempre usati in stampa per grandi passaggi di testo. Le facce serif permettono all'occhio di scorrere più facilmente sul testo, migliorando la velocità di lettura e diminuendo l'affaticamento degli occhi.
Detto questo, ci sono molte facce sans-serif leggibili. Online sembra che i volti sans-serif vengano usati più che mai per il corpo del testo. Penso che ci siano diverse ragioni per questo. Le forme di lettera più semplici sembrano funzionare meglio con le tendenze attuali del design e possono sembrare più moderne. Inoltre, in genere non leggiamo grandi passaggi di testo su un sito Web, quindi i caratteri sans-serif funzionano bene in blocchi di copia più corti.
Va notato che vi è un dibattito su questo argomento - un punto di vista è che le facce serif non riducono bene sullo schermo essenzialmente diminuendo la leggibilità. Altri credono che non ci sia differenza. La posizione che prendo sempre è, ti sembra giusto? Potrei leggere una sezione di tipo impostare il modo in cui l'ho progettata?
Un'altra caratteristica da notare è l'altezza x. Questo in genere si applica all'utilizzo del tipo a dimensioni del testo del corpo. L'altezza x è, beh, la misura dell'altezza della "x" minuscola in un determinato font. Non tiene conto dell'altezza degli ascensori o dei discensori. Potresti essere sorpreso di sapere quanta differenza c'è in altezza x da una faccia all'altra. Quando vengono utilizzati piccoli, i caratteri tipografici con altezze x più grandi sono generalmente più leggibili.
La leggibilità riguarda l'organizzazione di parole e gruppi di parole in un modo che consenta ai lettori di accedere al contenuto facilmente e in un modo che abbia un senso. È davvero una forma d'arte che viene affinata nel tempo quando vengono trovate combinazioni di successo.
Nella mia esperienza, questo tende ad essere uno dei concetti più difficili da comprendere per gli sviluppatori e i designer principianti. Persino i designer esperti a volte hanno difficoltà a trovare il modo migliore per organizzare la tipografia in un layout. Ora che queste due designazioni stanno iniziando a fondersi quando si tratta di web design, è importante iniziare a cogliere il concetto di leggibilità. Ecco alcune cose da tenere a mente:
Uno degli "errori" tipografici più comuni che vedo oggi sul web è la spaziatura dei caratteri non corretta. Quello a cui mi riferisco qui sono casi in cui a un testo a blocchi non viene dato abbastanza margine, sottotitoli e testo del corpo correlato che non sono raggruppati visivamente, e così via. Una corretta spaziatura (combinata con la gerarchia) consente al lettore di scansionare il testo e accedervi nei punti desiderati.
Non è una regola dura e veloce, ma mi sembra che la relazione tra spaziatura dei paragrafi (spaziatura aggiuntiva posizionata prima o dopo un paragrafo), lo spazio intorno a un blocco di tipo e la spaziatura delle lettere possano essere correlati proporzionalmente alla linea altezza di un paragrafo. L'altezza della linea è definita come la distanza verticale tra le righe di testo. Ad esempio, se l'altezza della linea di un paragrafo è impostata su 2em e un paragrafo con lo stesso testo di dimensioni è impostato su 1.5em, il primo paragrafo richiederà più spaziatura tra i paragrafi e probabilmente più margine attorno ad esso.
Gran parte di questo viene fatto a occhio piuttosto che una formula esatta, ma io uso una buona regola empirica quando si tratta della relazione tra la spaziatura del paragrafo e l'altezza della linea. Generalmente faccio la spaziatura tra i paragrafi (che sul web si traduce in margine o imbottitura posizionata nella parte superiore o inferiore di un paragrafo) a circa metà dell'altezza della linea. Questo tende ad aiutare i passaggi di testo "tenere insieme" piuttosto che utilizzare un ritorno completo tra ogni paragrafo, creando grandi quantità di spazio tra i paragrafi.
Ovviamente, occorre fare attenzione per assicurarsi che il testo non sia presentato troppo piccolo. È anche importante ricordare che l'età del tuo pubblico può variare, quindi la qualità della loro vista. Generalmente, è meglio rimanere intorno a 13px o .813em al minimo. Attualmente, con l'implementazione più ampia di siti Web reattivi, c'è una tendenza verso una copia del corpo più grande. In RWD, è anche importante tenere a mente che le diverse dimensioni del testo per dispositivi diversi possono avere senso. Ad esempio, potrebbe essere sensato aumentare le dimensioni della copia del corpo su una larghezza del telefono cellulare rispetto alla larghezza del desktop.
Un'altra pratica comune che ostacola la leggibilità del tipo consente alle linee orizzontali di tipo su una pagina di diventare troppo ampie. Questa distanza è indicata come misura (anche a volte la lunghezza della linea). Se una riga di tipo è troppo lunga, è una lettura noiosa e un tratto per l'occhio del lettore di tornare al limite sinistro del blocco di testo per la riga successiva. È anche intimidatorio vedere un blocco di testo disposto in questo modo e alcuni lettori potrebbero anche non tentare di leggerlo.
Quindi qual è la larghezza massima che dovrebbe essere un blocco di testo? Bene, tutto dipende dalla dimensione del testo. Più grande è il testo, più lunga può essere la linea (quella intera proporzione di nuovo). A mio parere, in genere circa 70 caratteri è il tempo che desideri. In media, per testo di dimensioni corporee, cerco di rimanere entro 45 giorni.
La spaziatura delle lettere (indicata anche come tracciamento) è il costante aumento o diminuzione della distanza tra le forme delle lettere in una parola o in un blocco di testo. Non va confuso con il kerning, che si riferisce alla regolazione della distanza tra i singoli personaggi. La spaziatura delle lettere può essere utilizzata per regolare la densità di un blocco di testo o di un titolo o sottotitolo individuale.
Ovviamente, la spaziatura delle lettere influisce sulla leggibilità del testo. Troppo o troppo poco e la leggibilità saranno compromesse. Tuttavia, ci sono momenti in cui, a mio parere, è necessaria la spaziatura delle lettere. Come puoi vedere nel grafico sottostante, mi piace aggiungere una generosa spaziatura delle lettere a sottotitoli o frasi di testo maiuscolo. Trovo più facile leggere il testo in maiuscolo quando i personaggi hanno uno spazio aggiuntivo intorno a loro. Inoltre, a seconda del tipo di carattere utilizzato, mi piace aumentare leggermente la spaziatura delle lettere nella copia del corpo.
Può sembrare ovvio che un buon contrasto di tipo sia essenziale per la leggibilità. Il fatto è che i designer (me compreso) stanno sempre spingendo i confini del contrasto. Potrebbe essere che vogliamo che una certa sezione di testo sia meno prominente, o per creare "strati" di gerarchia nella nostra progettazione. In ogni caso, tieni presente che il contrasto dello schermo, specialmente quando si tratta di forme piccole e sottili come il corpo del testo, varia notevolmente da una schermata all'altra. È meglio sbagliare sul lato di un contrasto un po '"troppo".
Come già discusso in questa serie, la gerarchia gioca un ruolo importante nella leggibilità dei contenuti. Una gerarchia di successo organizza il contenuto in parti digeribili e consente al lettore di scansionare e accedere facilmente al testo.
Inizia a pensare di utilizzare questi concetti di leggibilità e leggibilità nei tuoi progetti. Più lo fai meglio otterrai.
Accentsconagua