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 e a utilizzare il font giusto per il tuo progetto web.

Il primo 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:

Il modo in cui il sito web viene visualizzato nel tuo browser non dipende dal sito web, ma dal sistema operativo che stai utilizzando. E se hai apportato 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 sono evidenti:

• La rappresentazione adeguata su diversi dispositivi può degenerare in un noioso lavoro di dettaglio.
• Le parole non possono essere scoperte o tradotte utilizzando 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. 

Interessanti nozioni di base su FOUT e FOIT (quando il font viene caricato) sono fornite da Robin Rendle nel suo articolo Loading Web Fonts with the Web Font Loader.

Puoi trovare maggiori informazioni su questo argomento qui:

• https://www.filamentgroup.com/lab/font-events.html
• https://css-tricks.com/almanac/properties/f/font-size-adjust/

Da dove proviene il tuo font?

Ora che hai affrontato il background tecnico e i font di ripiego, rimane un aspetto molto importante. In particolare, da dove viene caricato il font. Come già detto, ogni sistema operativo ha i suoi font standard. Inoltre, ogni utente può installare dei font sul proprio computer. È quindi impossibile sapere quali font sono disponibili o meno. 

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 è evidente: le restrizioni che abbiamo utilizzando i font standard vengono 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 privacy portano più spesso a cercare un'alternativa a Google. Non ci sono solo font da incorporare, ma anche piattaforme che ospitano i tuoi 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 diversi 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 osservare e che ti aiuteranno a scegliere il font giusto.

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.

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 l'interlinea descrive la distanza generale tra le lettere, per crenatura intendiamo la distanza tra alcune lettere. Questa spaziatura può essere maggiore rispetto ad altre, a causa della forma naturale delle lettere:

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

.kerning {font-kerning: normal;}

.spacing {letter-spacing: 0.1em;}

Terminali, ascendenti e discendenti

I terminali sono presenti nelle lettere a, ä, c, f, j, r e y:

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

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 utilizzati nei paragrafi, e sono più adatti ai titoli.

Grassetto e corsivo

Quando scegliete i tuoi 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)

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).

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

Serif, Sans Serif e Monospace

Esiste un'ampia gamma di categorie per i font. I tre più comuni sono probabilmente

• Serif, ad esempio Times New Roman
• Sans Serif, ad esempio Arial
• Monospace, ad 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 per i titoli, ma cambia il peso, l'interlinea e la dimensione, ad esempio Lato:

2. Combina un font Serif e un font Sans Serif, per esempio Baskerville e Open Sans:

Esiste anche uno strumento online che ti aiuta a scoprire e provare rapidamente diverse combinazioni di font: https://fontjoy.com/#.

Conclusione sulla tipografia sul web

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.

Ulteriori risorse sull'argomento

• Per saperne di più sulla teoria del colore: https://rb001.dev.360vier.net/blog/webdesign-development/web-design-principles/
• Tutto sulla tipografia web professionale: https://prowebtype.com/
• Caratteri variabili per il design reattivo: https://alistapart.com/blog/post/variable-fonts-for-responsive-design/