Tipografia web: come trovare il font perfetto per il tuo sito web

7 Min.
perfect-web-typography

Un font adatto rende il tuo sito web non solo visivamente molto più interessante. I caratteri hanno un'influenza decisiva sul fatto che le sezioni di testo siano ignorate o lette. In questo post, ti mostrerò come trovare il font perfetto per il tuo sito web!

Una buona tipografia è il risultato di anni di studio dei caratteri e del design. Tuttavia, alcuni consigli di base possono aiutarti ad allenare il tuo occhio di conseguenza e ad usare il font giusto per il tuo progetto web.

Migliori pratiche, consigli e linee guida nel web design

Il web design è più che estetica. Almeno altrettanto importanti sono: una buona UX, accessibilità e SEO. In questo articolo vi mostrerò le migliori pratiche per siti web di successo e utenti soddisfatti.

Il primissimo sito web ...

Oppure: cosa succede quando si carica un sito web senza CSS. In passato, i siti web venivano resi con i font integrati nel sistema operativo. Questi vengono caricati ancora oggi se il font non è accessibile. Il primissimo sito web è ancora oggi online e appare esattamente come quando è stato attivato nel dicembre 1990:

Tipografia web: come trovare il font perfetto per il tuo sito web
Il primo sito web

Il modo in cui il sito web viene visualizzato nel tuo browser non dipende dal sito web - ma dal sistema operativo che stai usando. E se avete fatto delle modifiche alle impostazioni predefinite.

Per gli utenti di Windows, i font serif sono visualizzati in Times New Roman per impostazione predefinita. Su Mac OS X, il carattere predefinito è Times o Times Roman. Arial è usato da Windows come font Sans Serif. Mac OS X usa l'Helvetica come carattere predefinito.

Zach Leatherman ha sviluppato un progetto in cui ha testato vari sistemi operativi e i font corrispondenti. Lo strumento Font Family ti dà un'interessante visione dei font di fallback - e di come appaiono alla fine. 

Georgia e Verdana

A metà degli anni '90, ai font standard si sono aggiunti Georgia e Verdana, disegnati da Matthew Carter appositamente per il web. Costruire buoni siti web con una scarna selezione di cinque font ha dato origine a una discutibile abitudine per necessità: Così, i font che di solito non esistono sul Web sono stati incorporati come file di immagine.

Gli svantaggi di questo sono ovvi:

  • La rappresentazione adeguata su diversi dispositivi può degenerare in un noioso lavoro di dettaglio.
  • Le parole non possono essere scoperte o tradotte usando la funzione di ricerca.
  • Inoltre, ogni cambio di testo rappresenta un'enorme spesa aggiuntiva.

Progettare per l'ignoto

Fortunatamente, la tecnologia è maturata molto di più nel frattempo. Nonostante tutto questo, anche qui è necessaria una conoscenza fondamentale del campo tecnico. Perché è importante capire cosa succede sul tuo sito web quando il font desiderato non è disponibile. Questo può avere varie ragioni. Per esempio, una cattiva connessione internet, che porta a un ritardo nel caricamento del tuo file CSS.

A differenza del design grafico, sul web, un cattivo carattere (inappropriato) è meglio di nessun carattere.

Così, mentre sei alle prese con quale font supporterà meglio il tuo sito visivamente, ci sono anche domande tecniche di base da fare:

  • Il tuo testo sarà visualizzato anche se il file CSS non è caricato? 
  • La tua pagina è ancora leggibile in serif standard e sans serif? 
  • Fornite un font alternativo? Come viene visualizzato? Puoi fare qualche altra impostazione che ti dia più controllo sui tuoi font di fallback?

Prima di tutto, è importante che il contenuto venga visualizzato. La leggibilità generale è l'essenziale nella scelta del refuso. 

Basi interessanti su FOUT vs. FOIT (quando il font è caricato) sono date da Robin Rendle nel suo articolo Loading Web Fonts with the Web Font Loader.

Potete trovare maggiori informazioni su questo argomento qui:

Da dove viene il tuo font?

Ora che avete affrontato lo sfondo tecnico e i font di ripiego, c'è ancora un aspetto molto importante. Vale a dire, da dove viene effettivamente caricato il vostro font. Come detto prima, ogni sistema operativo ha i suoi font standard. Inoltre, ogni utente può installare font sul suo computer. Quindi è impossibile sapere quali sono disponibili - o no. 

Per non dover visualizzare i nostri siti web solo in Arial e Times New Roman, ci rivolgiamo sempre più spesso a servizi di font basati sul web. Il vantaggio è ovvio: le restrizioni che abbiamo usando i font standard sono aggirate. La scelta dei font disponibili è aumentata.

Probabilmente i più noti sono Google Fonts (gratis) e Adobe Fonts (a pagamento). Tuttavia, ci sono altri fornitori. Perché soprattutto in Germania, le linee guida più severe sulla protezione dei dati portano più spesso a cercare un'alternativa a Google. Non ci sono solo font da incorporare, ma anche piattaforme che ospitano i vostri font per voi, in modo che non ci siano limiti alla vostra creatività. Naturalmente, il prerequisito è che tu possieda i diritti o le licenze.

Smashing Magazine ha provato vari provider e ha raccolto le sue esperienze qui.

Elementi di design dei font

Per decidere un font adatto, dovresti conoscere alcune caratteristiche delle tipografie. Qui, si può dire fondamentalmente che i paragrafi dovrebbero consistere in caratteri facili da leggere. Se diventa troppo faticoso, il visitatore smetterà di leggere la tua pagina. Le informazioni che presentate non saranno consumate. 

Un altro aspetto qui è quello di prestare attenzione a come cambia il carattere quando si riduce la dimensione. Un carattere che è leggibile sul desktop può essere difficile da leggere in un formato più piccolo su un telefono cellulare. 

Ci sono degli indicatori che puoi cercare e che ti aiuteranno a scegliere il font giusto.

Tipografia web: come trovare il font perfetto per il tuo sito web
Articolo: Cos'è la tipografia?

altezza x

Nell'esempio seguente si vedono tre esempi diversi. L'altezza x descrive l'altezza verticale della lettera x. Se è troppo piccolo, il testo diventa più difficile da accedere, specialmente con caratteri più piccoli. Se l'altezza x è troppo grande, diventa più difficile distinguere tra lettere maiuscole e minuscole.

Tipografia web: come trovare il font perfetto per il tuo sito web
Fonte:
Tipografia web professionale

Aperture

Le aperture sono le aperture che troviamo nelle lettere. In generale, più sono generosi, più è piacevole leggere lunghe sezioni di testo con questo carattere.

Spaziatura e crenatura delle lettere

Mentre la spaziatura delle lettere descrive la distanza generale tra le lettere, noi intendiamo la crenatura come la distanza tra certe lettere. Questa spaziatura può essere più grande che tra gli altri a causa della forma naturale delle lettere:

Tipografia web: come trovare il font perfetto per il tuo sito web
Articolo: Tipografia in 60 secondi

Una spaziatura uniforme rende il tuo carattere più armonioso. Questo lo rende più leggibile. A proposito, entrambi possono essere regolati via CSS, se avete la sensazione che il font che avete scelto ha ancora bisogno di miglioramenti:

.kerning {font-kerning: normal;}

.spacing {letter-spacing: 0.1em;}

Terminali, ascendenti e discendenti

I terminali si trovano nelle lettere a, ä, c, f, j, r e y:

Tipografia web: come trovare il font perfetto per il tuo sito web
Fonte:
Tipografia web professionale

Gli ascendenti e i discendenti sono simili, ma significano le estensioni a, per esempio, f, q e j:

Tipografia web: come trovare il font perfetto per il tuo sito web
Fonte:
Tipografia web professionale

Per loro vale quanto segue: più sono poco appariscenti, meno sono adatti all'uso con testi pronunciati. I font serif, in particolare, sono particolarmente ben definiti nei terminali, ascendenti e discendenti, motivo per cui questi font sono stati a lungo considerati un compromesso sicuro per sezioni di testo più lunghe.

Contrasto

I caratteri con molto contrasto (a sinistra) sono meno adatti a caratteri di piccole dimensioni, come quelli usati nei paragrafi, e sono più adatti ai titoli.

Tipografia web: come trovare il font perfetto per il tuo sito web
Fonte:
Tipografia web professionale

Grassetto e corsivo

Quando scegliete i vostri font, dovreste anche assicurarvi che siano disponibili in diversi pesi e stili. Questo perché gli stili di carattere che non sono disponibili possono essere falsificati dal browser e possono quindi apparire come questo:

(In ogni caso a destra lo stile del carattere "falsificato" dal browser)

Tipografia web: come trovare il font perfetto per il tuo sito web
Tipografia web: come trovare il font perfetto per il tuo sito web
Fonte:
Tipografia web professionale

Sulla base di questi criteri, puoi ora cercare il font del corpo per il tuo sito web. Dal momento che la scelta di questo è di solito più complicata e c'è più da considerare qui, raccomando di iniziare con la scelta del font dell'intestazione in base al font del corpo (e non il contrario).

Potete ottenere una panoramica più completa e ulteriori spiegazioni dei termini qui: https://www.shillingtoneducation.com/blog/what-is-typography/.

Serif, Sans Serif e Monospace

C'è una vasta gamma di categorie per i font. I tre più comuni sono probabilmente

  • Serif, per esempio Times New Roman
  • Sans Serif, per esempio Arial
  • Monospace, per esempio il codice sorgente

Quando si tratta di combinazioni di caratteri, ci sono due semplici procedure da seguire. Questi non sono un obbligo, ma solo linee guida che possono aiutarvi. Soprattutto se non hai molta esperienza nel combinare i font:

  1. Usa lo stesso font per il corpo e le intestazioni - ma cambia il peso, la spaziatura delle lettere e la dimensione, per esempio Lato:
Tipografia web: come trovare il font perfetto per il tuo sito web
Usa lo stesso carattere per il corpo e le intestazioni
  1. Combina un font Serif e un font Sans Serif, per esempio Baskerville e Open Sans:
Tipografia web: come trovare il font perfetto per il tuo sito web
Una combinazione di caratteri può apparire così

C'è anche uno strumento online che ti aiuta a scoprire e provare rapidamente diverse combinazioni di caratteri: https://fontjoy.com/#.

Conclusione

Un altro argomento importante che ho completamente tralasciato è l'uso dei colori. A seconda che il tuo font sia su uno sfondo chiaro o scuro, avrà naturalmente un aspetto diverso. Inoltre, è possibile creare variazioni di font prendendo lo stesso font e non solo mostrandolo in pesi diversi, ma anche in colori diversi. Quando scegliete un colore, tenete a mente la guida di stile e il branding del vostro marchio.

Oltre ad analizzare altri siti web, è anche una buona idea guardare le tendenze attuali per l'ispirazione. Noterete rapidamente che certi abbinamenti di caratteri sono sempre ripetuti qui e che c'è poco di nuovo. Tuttavia, a seconda del progetto e dei requisiti, può essere necessario ripiegare sul familiare piuttosto che essere particolarmente innovativi - potete trovare maggiori dettagli in questo articolo.

Altre risorse sull'argomento

Le tue domande: il font perfetto

Quali domande hai sulla tipografia nel web? Sentitevi liberi di usare la funzione di commento. Vuoi essere informato sui nuovi articoli sul web design e lo sviluppo? Allora seguici su Twitter, Facebook o tramite la nostra newsletter.

Dopo aver studiato Game Design e scrittura creativa, si è specializzata nel web e app designe e nel loro sviluppo. La sua attenzione è rivolta alla gamification e al capire la motivazione e l'esperienza dell'utente, insieme alla passione e alla curiosità per i trend tecnologici.

Articoli correlati

Commenti su questo articolo

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato. I campi obbligatori sono contrassegnati con *.