Abbinare i font – coppie per titoli e testo

Scegli una coppia di font e vedi subito come titolo e testo funzionano insieme, anche con un tuo testo. Ogni coppia usa solo font di sistema preinstallati: nulla da scaricare, nessuna richiesta a Google o ad altri server. Per ogni coppia trovi la motivazione, l’altezza x misurata e la disponibilità per sistema operativo.

Coppia di font

Dimensione del testo

Il titolo viene mostrato 1,8 volte più grande.

I dati inseriti vengono salvati solo in questo browser.

Anteprima

L’arte di un buon titolo

Una buona tipografia passa inosservata. Guida lo sguardo con calma nel testo, stabilisce una gerarchia chiara e lascia parlare il contenuto – sullo smartphone come su un grande monitor.

Il tuo titolo (facoltativo)Il tuo testo (facoltativo)

Il tuo testo resta in questa finestra del browser – non viene salvato, non viene inviato e non finisce nell’indirizzo della pagina.

CSS da copiare

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.2;
}
body {
  font-family: Verdana, Tahoma, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

Tutte le coppie di font

Risultato

Coppia di font: Georgia + Verdana
Perché funziona: Contrasto classico tra grazie e bastoni: Georgia per i titoli, Verdana per il testo. Matthew Carter ha disegnato entrambi per lo schermo, quindi proporzioni e ritmo si sposano bene. Verdana ha un’altezza x molto grande ed è larga: riduci il testo di circa 1 px.
Altezza x (misurata): Georgia: 0,481 em · Verdana: 0,545 em – a parità di corpo il testo appare circa il 13% più grande
Disponibilità per sistema operativo: Sistema Titolo Testo
Windows 10/11 Georgia Verdana
macOS Georgia Verdana
iPhone/iPad Georgia Verdana
Android Noto Serif (sostituto) Roboto (sostituto)

Sistema	Titolo	Testo
Windows 10/11	Georgia	Verdana
macOS	Georgia	Verdana
iPhone/iPad	Georgia	Verdana
Android	Noto Serif (sostituto)	Roboto (sostituto)

Come si calcola

Come abbinare i font

Due font funzionano bene insieme quando sono chiaramente diversi ma costruiti in modo simile. La via più sicura è contrapporre un grazie a un bastoni: uno per i titoli, l’altro per il testo. Due grazie simili o due bastoni simili, al contrario, sembrano facilmente un errore.

Altrettanto importante è l’altezza x – l’altezza delle minuscole rispetto al corpo del font. I font con altezza x grande (Verdana: 0,545 em) appaiono decisamente più grandi a parità di corpo rispetto a quelli con altezza x piccola (Calibri: 0,464 em). Se le altezze x di una coppia sono molto diverse, compensa con la dimensione del font. I valori mostrati provengono dalla tabella OS/2 dei file dei font di Windows 11.

Perché solo font di sistema?

I font di sistema sono già installati sul dispositivo: le pagine si caricano più in fretta, il testo non salta durante il caricamento e nessuna richiesta parte verso un server terzo. Caricare web font direttamente da un CDN invia l’indirizzo IP di ogni visitatore a quel fornitore – un problema di privacy rispetto al GDPR in Europa. Per font personalizzati, meglio ospitarli da soli.

Stack di font: perché più nomi?

Nessun font è installato su tutti i sistemi. Per questo il CSS elenca più font in fila (uno stack di font): il browser usa il primo installato, e una famiglia generica come serif o sans-serif copre il resto. La tabella mostra quale font compare davvero su Windows, macOS, iPhone/iPad e Android, in base alle liste font di Microsoft e Apple e alla configurazione font di Android (verificate il 27/09/2026). Android non ha Georgia né Verdana e mostra invece Noto Serif o Roboto; le distribuzioni Linux includono font diversi a seconda dell’installazione.

Consigli per un testo leggibile

Imposta il testo a schermo su 16 px o più, idealmente 17–20 px, con un’interlinea di circa 1,5–1,7.
Rendi i titoli decisamente più grandi (1,6–2 volte) e più marcati del testo – così basta anche una sola famiglia di font.
Limita le righe a circa 60–80 caratteri.
Controlla il contrasto dei colori: il grigio su bianco diventa presto troppo tenue – usa un verificatore di contrasto colore.

Domande frequenti

Quali font stanno bene insieme?

Le coppie tra grazie e bastoni sono una scelta sicura, come Georgia con Verdana, Palatino con il font di sistema o Cambria con Calibri. Conta il contrasto netto e altezze x simili.

Quanti font dovrebbe usare un sito?

Al massimo due: uno per i titoli, uno per il testo. Un terzo, ad esempio un font monospace per il codice, solo se ha un ruolo proprio.

Georgia e Verdana sono disponibili su ogni dispositivo?

Su Windows, macOS e iOS sì. Android non le include e mostra Noto Serif o Roboto – ecco perché ogni stack di font dovrebbe terminare con una famiglia generica come serif o sans-serif.

Che cos’è l’altezza x?

L’altezza di una x minuscola rispetto al corpo del font. Un’altezza x grande rende il testo più leggibile a parità di corpo ma richiede un po’ più di interlinea.

Perché non usare semplicemente web font da un CDN?

Ogni visualizzazione invia allora l’indirizzo IP del visitatore al fornitore del font e aggiunge un download prima che il testo compaia. I font di sistema evitano entrambi i problemi; i font personalizzati possono essere ospitati da soli.

Il mio testo di anteprima viene salvato?

No. Il tuo titolo e testo restano solo in questa finestra del browser. Vengono ricordati solo la coppia scelta e la dimensione del font.

Fonti e riferimenti normativi

Aggiornato al: 27 settembre 2026