Guida definitiva alla tipografia dei siti web: design per la leggibilità
Selezionare un font è facile: tutto ciò che deve fare è aprire il menu a discesa e cliccare su un nome. La scelta del font giusto, invece, non è così semplice. Comporta un lungo elenco di considerazioni ed è una delle decisioni più importanti che prenderà durante il processo di progettazione del suo sito web.
I designer professionisti di solito imparano le basi della tipografia come parte dei loro studi. Tuttavia, dato che sempre più persone stanno imparando a conoscere la Costruttore di siti web o strumenti simili sono coinvolti nella creazione di siti web, la comprensione della tipografia di un sito web sta diventando sempre più importante anche per i non designer. Pertanto, per rispolverare le basi della tipografia di un sito web, questo articolo fornisce dei suggerimenti che può utilizzare quando sceglie un font per il suo sito web, per garantire la migliore esperienza di lettura al suo pubblico.
Che cos'è la tipografia di un sito web?
Ogni sito web ha del testo, e dove c'è il testo, c'è la tipografia. In generale, la tipografia di un sito web definisce l'aspetto del testo sul sito. Si tratta del modo in cui le parole appaiono sulla pagina, sia dello stile (il carattere, la dimensione, la spaziatura) che del modo in cui il testo appare sulla pagina.
La combinazione di tutti questi elementi deve avere come obiettivo la facilità di lettura del testo. Inoltre, la tipografia del sito web deve tenere conto anche di quanto segue:
- Tempi di attenzione più brevi, soprattutto online;
- Accessibilità, perché le persone interagiscono con i testi online in modi diversi;
- Scorribilità, poiché spesso le persone non hanno il tempo di leggere l'intero testo;
- Dimensioni dello schermo diverse, poiché gli utenti navigano sui siti web su dispositivi diversi.
La cosa più importante da sapere sulla tipografia è questa: Se funziona, non la noterà. Se non funziona, probabilmente non resterà sul sito abbastanza a lungo.
Termini di tipografia web
Per comprendere meglio la tipografia web e, infine, introdurla nel suo sito web, esaminiamo prima alcuni termini tipografici di base e capiamo come possono essere applicati alla tipografia web.
1. I font
Un font è un aspetto specifico e un insieme di caratteristiche applicate a un gruppo di elementi alfabetici, numerici e di punteggiatura. Se la sua prima domanda è stata "Ma questi non sono i font?", non è la sola: si tratta di un'idea sbagliata comune.
Il font è un'istanza specifica di un carattere; sono parti del carattere. Si distinguono poi per il loro peso (bold o light), la loro dimensione (14px o 24px) o altre stilizzazioni (corsivo, sottolineato, ecc.). Per fare un esempio, Helvetica Bold (16px) e Helvetica Regular Italic (24px) sono font e fanno parte del font Helvetica. I font sono spesso indicati anche come famiglie di font, in quanto si tratta di un termine ampio per i font con caratteristiche simili.
Molti font corrispondono solo a due tipi di carattere: serif e sans-serif. I font serif di solito contengono piccoli ornamenti alla fine, i font sans-serif no. Ecco un modo semplice per distinguerli: "Sans" significa senza in francese.
Oltre a questi due, sono disponibili anche altri font, tra cui Script. Tuttavia, questi tipi sono utilizzati meno frequentemente sul web, perché sono più difficili da leggere sugli schermi.
2. Sottosquadro
La crenatura è lo spazio orizzontale tra i due caratteri di una parola. I diversi font hanno crenature diverse per migliorare la leggibilità ed evitare spazi vuoti imbarazzanti nelle parole. La crenatura può anche differire tra i diversi caratteri della stessa parola per gli stessi scopi.
Nel secondo caso, la crenatura viene aggiunta tra le T ripetute per migliorare la leggibilità.
3. Tracciamento
Simile alla crenatura, anche il tracking è la distanza tra le lettere. Tuttavia, invece dello spazio tra due singoli caratteri, il tracking è lo spazio tra tutte le lettere di una parola o di una riga. E come il kerning, viene regolato per migliorare la leggibilità, enfatizzare una parola o soddisfare altri scopi.
4. spaziatura delle righe
L'interlinea o altezza delle linee è il termine che indica l'interlinea nella tipografia e svolge un ruolo essenziale nel rendere leggibile il testo del suo sito web. Aumentando l'interlinea, si aumenta lo spazio tra le righe, il che generalmente migliora la leggibilità. Per una buona leggibilità, l'interlinea dovrebbe essere generalmente di circa 30 % più grande della dimensione del carattere. Ad esempio, se la dimensione del carattere è di 20 pixel, si consiglia un'interlinea di 26 pixel.
L'uso corretto degli spazi bianchi nel testo dovrebbe migliorare la comprensione del testo, in quanto separa visivamente il contenuto in parti digeribili e non ingombra la pagina.
5. Gerarchia
La gerarchia è l'ordine del testo sul suo sito web. La maggior parte dei siti web, soprattutto quelli ad alto contenuto di testo (come i post di un blog), cercano di dividere il testo in sezioni più piccole per renderlo più digeribile e gestibile. Queste sezioni sono chiamate intestazioni.
La gerarchia del testo permette ai lettori di saltare attraverso il testo e di guardare le sezioni più importanti o che stanno cercando. Inoltre, consente di evidenziare quali parti del testo sono critiche, mentre altre sono informazioni secondarie.
Nei siti web, la gerarchia del testo può essere enfatizzata da diversi caratteri, dimensioni, colori o altre caratteristiche. Ad esempio, in questo articolo, i termini di tipografia web sono un Heading 2 (H2,) mentre i termini citati sono Heading 3 (H3). Queste sezioni H3 diventano sempre più specifiche e il loro aspetto indica che si tratta di una sottosezione di un argomento più generale. Il titolo del blog è solitamente l'intestazione 1 (H1). Ecco un esempio della gerarchia del testo visualizzata nel nostro editor di testo.
Selezione del carattere migliore per la lettura sullo schermo
Il design digitale si sta evolvendo rapidamente. Mentre solo pochi anni fa c'era solo una manciata di font tra cui scegliere, oggi la scelta è di migliaia. Questi font sono stati creati per lo schermo e presentano sfumature e dettagli che li rendono leggibili su diversi dispositivi.
Detto questo, ci sono alcune cose da tenere a mente quando sceglie un font per il suo sito web. Renderanno l'esperienza di lettura sul suo sito web molto più piacevole e offriranno una migliore esperienza al cliente.
1. limitare il numero di font utilizzati al minimo.
Una buona regola è quella di attenersi a una o due famiglie di caratteri. Se supera questo numero, il suo testo e il suo sito web appariranno poco strutturati, poco professionali e talvolta persino confusi. Lo stesso vale per le dimensioni dei caratteri: Troppe dimensioni, soprattutto se mescolate tra loro, possono creare un'esperienza visiva piuttosto caotica.
Una volta scelte le famiglie di caratteri, si attenga ad esse per tutto il sito web. Se sceglie due famiglie di font, è importante assicurarsi che siano complementari o almeno armonizzate tra loro.
Dia un'occhiata ai seguenti esempi di combinazioni di font. Sebbene i font nella prima immagine appartengano a famiglie di font diverse e appaiano piuttosto differenti, nessuno dei font mette in ombra l'altro. I due font sono ben bilanciati e creano una combinazione armoniosa.
Ora diamo un'occhiata a un altro abbinamento di font. In questo esempio di combinazione Baskerville + Impact, Impact supera di gran lunga Baskerville. Attira l'attenzione su di sé e crea la possibilità che la prima parte del testo venga ignorata.
2. cerchi di attenersi ai font standard
Ci sono migliaia di font disponibili attraverso piattaforme come Google Fonts, che le offrono l'opportunità di provare qualcosa di nuovo ed emozionante. Tuttavia, una cosa può andare storta: I font troppo complicati possono distrarre i visitatori del suo sito web. Per evitare questo, cerchi di attenersi ai font standard, a meno che non ci sia un'occasione davvero speciale che richieda dei font personalizzati. Sperimentare con i font è divertente, ma è importante ricordare che l'obiettivo di una buona tipografia è far sì che le persone leggano il contenuto.
3. utilizzi un font che si veda bene su diversi dispositivi
Le persone accedono al suo sito web da diversi dispositivi, dagli smartphone e tablet ai PC. Per garantire che il suo sito web rimanga accessibile ai lettori, scelga dei font che abbiano un bell'aspetto e siano leggibili su schermi diversi. Inizi con l'utilizzo di un font che risulti gradevole a diverse dimensioni. Un esempio è il font Roboto mostrato nell'immagine sottostante.
Eviti i font in corsivo o ornati. Sono molto belli, ma con la diminuzione delle dimensioni diventano sempre meno leggibili, come nel caso del font Comforter Brush qui sotto.
Abbinamento dei caratteri per il suo sito web
Ora diamo un'occhiata ad alcune bellissime coppie di font che può utilizzare per il suo sito web per ottenere un aspetto equilibrato e bello.
1° Lora e Merriweather
2. Roboto & Archivo Black
3° Bebas New & Old Standard TT
Conclusione
Armato di questi consigli e conoscenze sulla tipografia del sito web, ora ha una conoscenza sufficiente per iniziare a sperimentare. Giochi con la tipografia del suo sito web per trovare combinazioni di caratteri e stili che siano di bell'aspetto e che garantiscano ai suoi visitatori un'ottima esperienza. Se dispone di risorse, organizzi un test utente per vedere come le persone reagiscono alle sue scelte tipografiche. Oppure chieda semplicemente un feedback ad alcuni amici. In questo modo potrà capire la leggibilità dei suoi testi e se raggiungono l'obiettivo desiderato.
