CodeKitHubChe cos'è questo strumento?
L'abbinamento di font consiste nello scegliere due (a volte tre) caratteri tipografici da usare insieme in una pagina, tipicamente uno per i titoli e uno per il corpo del testo, così da dare gerarchia visiva alla pagina senza farla sembrare sbilanciata o monotona.
Ogni abbinamento qui sotto mostra un campione renderizzato dal vivo: il font del titolo sopra, il font del corpo sotto, usando i file reali di Google Fonts, quindi ciò che vedi è esattamente ciò che otterrai sul tuo sito.
Ogni abbinamento include un tag di incorporamento `<link>` di Google Fonts pronto all'uso e uno snippet CSS corrispondente con le dichiarazioni `font-family` per titoli e corpo del testo: copia entrambi e hai finito.
Perché usarlo?
- 28 abbinamenti selezionati a mano, non una lista generata automaticamente: ognuno è stato scelto perché i due caratteri si completano davvero a vicenda.
- Anteprima dal vivo: ogni abbinamento viene renderizzato con i font reali caricati da Google Fonts, non un'immagine statica o una supposizione basata sul nome del font.
- Filtra per mood — Moderno, Elegante, Audace, Minimal, Classico — per restringere la scelta al carattere che serve al tuo progetto.
- Copia con un clic sia del tag di incorporamento `<link>` sia delle regole CSS `font-family`.
- Gratuito, funziona nel browser, non richiede account né login.
Come si usa
- Facoltativamente, clicca su un filtro mood (Moderno, Elegante, Audace, Minimal, Classico) per restringere l'elenco, oppure lascia selezionato "Tutti" per sfogliarli tutti.
- Scorri le card con anteprima dal vivo: la riga superiore mostra il font del titolo, quella sotto il font del corpo.
- Apri un abbinamento che ti piace e clicca per espandere la sezione del codice di incorporamento.
- Copia il tag `<link>` nell'`<head>` del tuo HTML e lo snippet CSS nel tuo foglio di stile per applicare i font a titoli e corpo del testo.
Esempio
Input
Blog eleganteRisultato
Playfair Display (titoli) + Source Sans Pro (corpo)Filtrando per "Elegante" emergono titoli serif ad alto contrasto abbinati a un corpo sans-serif pulito e molto leggibile: una combinazione comune per layout editoriali e blog.
Principi di un buon abbinamento di font
- Contrasto invece di somiglianza: due font quasi identici (ad esempio due sans-serif geometriche simili) tendono a sembrare un errore più che una scelta deliberata. Abbina un serif a un sans-serif, o un font display pesante a uno di testo più leggero, così la differenza si legge come intenzionale.
- Fai corrispondere altezza della x e proporzioni: font le cui minuscole hanno un'altezza visiva simile tendono a sembrare appartenenti alla stessa pagina, anche quando gli stili differiscono: un'altezza della x disallineata è uno dei motivi più comuni per cui un abbinamento sembra "sbagliato".
- Limitati a due famiglie (a volte tre): una per i titoli, una per il corpo del testo e al massimo una terza per accenti come pulsanti o etichette. Oltre a questo, la pagina inizia a sembrare non pianificata.
- Considera il mood, non solo la forma: un sans-serif arrotondato e amichevole abbinato a un serif formale invia segnali contrastanti anche se le forme delle lettere tecnicamente funzionano insieme: scegli font che concordino anche nel tono, oltre che nella struttura.
- Testa a dimensioni reali: un abbinamento che sembra ottimo in un'anteprima grande può perdere contrasto alla dimensione del corpo del testo, oppure un font display può diventare illeggibile a dimensioni piccole: controlla sempre entrambi gli estremi.
Scegliere un abbinamento in base all'uso
Le landing page e i siti di marketing traggono solitamente vantaggio dai filtri "Audace" o "Moderno": un font per il titolo forte e ad alto contrasto attira l'attenzione nella parte superiore della pagina, abbinato a un font per il corpo pulito e neutro che rende facile scorrere testi lunghi.
I blog e i contenuti editoriali spesso si leggono meglio con abbinamenti "Elegante" o "Classico": un titolo serif raffinato segnala una voce curata ed editata, mentre un corpo serif o sans-serif confortevole mantiene leggibili gli articoli lunghi durante sessioni di lettura prolungate.
I siti e-commerce e di prodotti tendono a preferire abbinamenti "Minimal": font sobri e neutri mantengono l'attenzione sulle foto dei prodotti e sui prezzi piuttosto che sulla tipografia stessa, il che conta quando decine di card prodotto appaiono su una pagina.
I portfolio e i siti creativi hanno il margine maggiore per sperimentare: abbinamenti "Audace" o "Elegante" con più personalità funzionano bene, dato che il pubblico è lì in parte per valutare il gusto visivo.
Note su prestazioni e licenze
Il tag di incorporamento `<link>` carica i font dal CDN di Google, che è veloce e già in cache su molti siti che i tuoi visitatori hanno probabilmente già visitato, ma aggiunge comunque una richiesta esterna. Per i siti in cui ogni millisecondo conta, scaricare i file dei font e ospitarli tu stesso (con `font-display: swap` impostato manualmente) elimina questa dipendenza esterna al costo di un po' di lavoro di configurazione in più.
Tutti i font di Google Fonts sono open source e gratuiti per uso commerciale senza obbligo di attribuzione, anche se dare credito al type designer è una cortesia gradita quando è facile da fare.
Domande frequenti
Cosa rende due font "ben abbinati"?
I buoni abbinamenti bilanciano contrasto e armonia. Il contrasto — abbinare un serif a un sans-serif, o un font display in grassetto a un font di testo semplice — crea gerarchia visiva così titoli e corpo risultano nettamente distinti. L'armonia — altezza della x simile, spessore dei tratti comparabile e un grado condiviso di formalità o giocosità — evita che i due si scontrino. Gli abbinamenti qui sono stati selezionati tenendo conto di entrambi gli aspetti.
Titoli e corpo del testo devono sempre usare font diversi?
No, usare un'unica famiglia tipografica per entrambi (come l'abbinamento "Rubik + Rubik" di questo strumento) funziona bene, purché il font abbia abbastanza variazione di peso per distinguere i titoli dal corpo. È una scelta minimal valida, non un errore.
Come applico concretamente un abbinamento al mio sito?
Copia il tag di incorporamento `<link>` nell'`<head>` della tua pagina per caricare i font dal CDN di Google, poi copia lo snippet CSS nel tuo foglio di stile: imposta `font-family` per i titoli (h1, h2, h3) e per il corpo del testo (body, p). Adatta i selettori CSS se il tuo markup è diverso.
Caricare Google Fonts rallenterà il mio sito?
Ogni file di font aggiuntivo aggiunge una richiesta di rete e un certo rischio di bloccare il rendering. Limitati a un peso per il titolo e uno o due per il corpo, usa `display=swap` (già incluso nel codice di incorporamento) così il testo viene mostrato con un font di riserva mentre il webfont si carica, e valuta di ospitare tu stesso i file dei font per i siti in produzione che richiedono il caricamento più veloce possibile.
Questi font sono utilizzabili gratuitamente per scopi commerciali?
Sì. Tutti i font di Google Fonts, compresi tutti gli abbinamenti mostrati qui, sono concessi in licenza SIL Open Font License o Apache License, entrambe le quali consentono l'uso commerciale gratuito, la modifica e la ridistribuzione senza royalty.