Sei alla ricerca di una guida per scegliere e organizzare i font del tuo sito web?
In questo articolo vediamo come scegliere, abbinare, dimensionare e organizzare i font per un progetto web.
Quando si costruisce un progetto web, come ad esempio un sito, le dimensioni degli elementi che compongono la grafica non sono mai assolute, perché devono modificarsi al variare della risoluzione degli schermi.
In parole povere, ogni singolo testo ha dimensioni differenti quando viene visto da desktop o da mobile, così da essere sempre perfettamente leggibile.
Partiamo però dalla base: quanti font possiamo utilizzare per un sito web e come possono essere eventualmente abbinati?
Come abbinare i font per un sito web
Per organizzare gerarchicamente i contenuti all’interno della pagine di un sito web possiamo utilizzare diverse caratteristiche dei font, come ad esempio:
- La dimensione: testi scritti con font più grandi tendenzialmente hanno una rilevanza maggiore;
- Il peso: font con un peso maggiore (bold) corrispondono a testi che devono avere una maggiore rilevanza;
- La tipologia di font: l’utilizzo di font diversi permette di caratterizzare contenuti differenti, come titoli e paragrafi.
Quindi, solitamente, titoli e sottotitoli utilizzano font con peso maggiore e dimensione maggiore.
Ma quanti font è corretto utilizzare all’interno della grafica di un sito web?
Il consiglio generale è di non eccedere, utilizzando al massimo 2 font diversi ed andando a variare i pesi per dare una corretta gerarchia ai contenuti.
In tantissimi casi 1 font è più che sufficiente.
E come possiamo abbinare font diversi?
Anche in questo caso non esiste una regola assoluta ma, possiamo dire, che il consiglio è abbinare font molto diversi da loro.
In questo modo il contrasto visivo tra i vari paragrafi e titoli permette agli utenti del sito web di scansionare velocemente i contenuti delle pagine per ricavare le informazioni più importanti.
Per fare questi abbinamenti è fondamentale avere almeno idea di quali sono le principali categorie di font esistenti:
- Serif, o graziati. Hanno al termine delle aste che compongono le lettere degli “ornamenti”;
- Sans serif, o senza grazie. Hanno costruzioni più o meno geometriche e non presentano le grazie;
- Slab serif, con grazie rettangolari;
- Script, Handwritten e Decorative. Riprendono la scrittura a mano sia essa calligrafica o meno.
Vediamo con alcuni esempi come possiamo abbinare questi font.
Titoli con font graziati e paragrafi con font senza grazie
Uno degli abbinamenti più classici è quello che mixa font serif e sans serif.
In progetti digitali, solitamente, i font graziati sono utilizzati per i titoli di maggiore rilevanza, come ad esempio gli H1, gli H2 e gli H3.
Mentre per il corpo del testo e per titoli secondari, come h4, h5 e h6, di solito utilizziamo font senza grazie, più in linea con l’ambiente digitale e maggiormente leggibili a schermo.
Titoli in font script e corpo del testo in Serif o Sans Serif
Quando si utilizza in font script in un progetto web è fondamentale dosarne la presenza.
Questa tipologia di font, infatti, non è molto leggibile su testi medi/lunghi e in dimensioni ridotte. Per questo motivo, solitamente, caratteri che riprendono scritte calligrafiche e fatte a mano sono utilizzate per lo più per i titoli.
Anche in questo caso, l’abbinamento classico è con font di categoria diversa, come ad esempio font serif o sans serif.
Font e dimensioni, vediamo un ordine di grandezza
Come accennato all’inizio di questo articolo, una delle criticità nella gestione dei font all’interno di un sito web è appunto il corretto dimensionamento.
Per ottimizzare i contenuti in ottica SEO, ogni sito web presenta 6 dimensioni standard per i titoli (heading 1 – heading 6) e 1 dimensione standard per i paragrafi.
I titoli più grandi, nella versione desktop del sito web, possono avere dimensioni che arrivano anche oltre i 100 px, mentre i paragrafi non possono mai scendere sotto i 16 pixel di grandezza, rischiando altrimenti di diventare illeggibili.
Da mobile la dimensione dei font, in particolare dei titoli, si riduce molto.
Un H1 (heading 1) difficilmente può avere dimensioni maggiori di 36 pixel, perché altrimenti occuperebbe troppo spazio all’interno dello schermo di uno smartphone.
La dimensione dei paragrafi invece non può ridursi, rimanendo a 16 pixel o al limite 14 pixel.
La differenza di dimensione tra i vari titoli è quindi più evidente in un sito internet visto su un desktop rispetto a un sito navigato da uno smartphone.
Font per sito web: dove scaricarli o come incorporarli
Esistono diverse librerie che permettono di scaricare ed utilizzare font per realizzare siti web.
Google Fonts ad esempio è una libreria gratuita dalla quale è possibile scaricare innumerevoli font, installarli sul computer oltre che utilizzarli all’interno di progetti web.
Diversi page builder di wordpress, come ad esempio Elementor, hanno già integrato al loro interno decine di Google Fonts.
Un’altra libreria estremamente ricca è Adobe Fonts, nella quale è possibile pescare tra centinaia di font sviluppati da typedesigner e tipografie di tutto il mondo per incorporare i font nel proprio sito web.
In questo caso per utilizzare i font è necessario però essere abbonati alla suite Adobe, che consente di utilizzare anche tutti i software di grafica dedicati, come ad esempio photoshop e illustrator.
