# Abbinamenti di Google Fonts: 25 combinazioni che funzionano [Canonical HTML page](https://gradiently.design/it/guide/google-fonts-pairings) Ogni coppia è gratuita su Google Fonts ed è scelta per come si comporta in titoli e testi veri. Divise per sensazione, con i pesi che fanno funzionare ciascuna. ## The short version - Un buon abbinamento di Google Fonts dà a titolo e testo compiti nettamente diversi, di solito contrapponendo un carattere display o serif a un semplice sans. - Le coppie della stessa superfamiglia, come DM Serif Display con DM Sans o IBM Plex Sans con IBM Plex Mono, sono il punto di partenza più sicuro. - Il testo corrente richiede un font con un’altezza della x generosa e forme aperte in un peso regular di 400; i titoli possono avere più personalità. - I font di Google Fonts sono rilasciati con licenze aperte che consentono l’uso commerciale, anche in loghi, prodotti e lavori per clienti. - Carica solo i pesi che usi e aggiungi display=swap per tenere veloci le pagine. I migliori **abbinamenti di Google Fonts** contrappongono un carattere di titolo con personalità a un carattere di testo silenzioso e leggibile: Fraunces con Inter, Playfair Display con Source Sans 3, Space Grotesk con Inter o DM Serif Display con DM Sans. Qui sotto trovi 25 combinazioni divise per atmosfera, ciascuna con i pesi che la fanno funzionare e a chi sta bene. Sono tutte gratuite, tutte consentono l’uso commerciale e tutte si caricano con una sola riga di codice. Scegli prima un gruppo in base alla sensazione, poi una coppia in base all’uso. ## Come leggere questi abbinamenti Ogni coppia è titolo prima, testo dopo. Il peso del titolo è quello da usare nei corpi grandi; il testo resta a 400, con 600 o 700 per l’enfasi. Se il ragionamento ti è nuovo, l’[abbinamento dei font](https://gradiently.design/it/guide/font-pairing) spiega perché il contrasto batte la somiglianza, e [serif o sans serif](https://gradiently.design/it/guide/serif-vs-sans-serif) racconta che cosa porta ogni famiglia. Un post verticale in stile editoriale con un grande titolo display sopra un testo di supporto più piccolo e calmo Un abbinamento dà alla pagina due voci. Il titolo attira; il testo spiega. Non devono mai competere. ## Abbinamenti editoriali: titoli serif con testo sans La struttura classica. Un titolo serif aggiunge calore e autorevolezza; un testo sans rende facile la lettura lunga sugli schermi. | # | Titolo | Testo | Ideale per | | --- | --- | --- | --- | | 1 | Playfair Display 700 | Source Sans 3 400 | Riviste, ristoranti, matrimoni | | 2 | Fraunces 600 | Inter 400 | Cibo, brand artigianali, newsletter | | 3 | DM Serif Display 400 | DM Sans 400 | Agenzie, portfolio, landing page | | 4 | Instrument Serif 400 | Instrument Sans 400 | Editoria moderna, studi, moda | | 5 | Cormorant Garamond 600 | Work Sans 400 | Bellezza, interni, hotel boutique | | 6 | Libre Baskerville 700 | Libre Franklin 400 | Editoria, studi legali, letture lunghe e ponderate | Fraunces ha un asse di dimensione ottica: nei corpi grandi i dettagli si affinano. Cormorant Garamond è delicato sugli schermi, quindi limitalo ai titoli. ## Abbinamenti sans moderni per tecnologia e prodotto Per software, startup e tutto ciò che deve sembrare attuale. Il titolo porta il carattere con la forma, la larghezza o dettagli stravaganti, mentre il testo è un cavallo da tiro. | # | Titolo | Testo | Ideale per | | --- | --- | --- | --- | | 7 | Space Grotesk 700 | Inter 400 | Strumenti per sviluppatori, fintech, dashboard | | 8 | Syne 700 | Manrope 400 | Studi creativi, eventi, musica | | 9 | Sora 600 | Figtree 400 | App, siti SaaS, onboarding | | 10 | Unbounded 600 | Plus Jakarta Sans 400 | Brand futuristici, gaming, lanci | | 11 | Archivo Black 400 | Archivo 400 | Pagine prodotto decise, sport, retail | Unbounded e Syne sono larghi e rumorosi: tieni i titoli brevi. Archivo si abbina a se stesso perché il suo peso black è tutta un’altra bestia rispetto al regular. ## Titoli sans con testo serif La struttura inversa si adatta alla lettura lunga: un titolo sans pulito segnala le sezioni e un testo serif ha un tono da libro e rallenta piacevolmente lo sguardo. | # | Titolo | Testo | Ideale per | | --- | --- | --- | --- | | 12 | Poppins 600 | Lora 400 | Blog, coaching, siti personali | | 13 | Montserrat 700 | Merriweather 400 | Guide, no profit, report | | 14 | Bricolage Grotesque 700 | Newsreader 400 | Saggi, media indipendenti | | 15 | Outfit 600 | Source Serif 4 400 | Documentazione, materiali per corsi | ## Abbinamenti amichevoli e arrotondati | # | Titolo | Testo | Ideale per | | --- | --- | --- | --- | | 16 | Fredoka 600 | Nunito 400 | Brand per bambini, giocattoli, caffè per famiglie | | 17 | Quicksand 700 | Mulish 400 | Benessere, animali, servizi gentili | | 18 | Rubik 600 | Karla 400 | App di comunità, servizi locali, associazioni | I caratteri arrotondati sembrano accessibili ma morbidi. Quicksand appare leggero sotto il 600; usa i pesi più pesanti per tutto ciò che deve leggersi. ## Abbinamenti display decisi per manifesti e social I caratteri display condensati e pesanti fanno entrare parole grandi in inquadrature piccole, ed è per questo che dominano miniature e manifesti. Hanno bisogno di un compagno calmo. Il [testo nelle miniature](https://gradiently.design/it/guide/typography-for-thumbnails) e i [font per titoli](https://gradiently.design/it/guide/headline-fonts) vanno più a fondo. | # | Titolo | Testo | Ideale per | | --- | --- | --- | --- | | 19 | Anton 400 | Roboto 400 | Miniature, sport, post in stile notizia | | 20 | Bebas Neue 400 | Montserrat 400 | Palestre, eventi, menu decisi | | 21 | Oswald 600 | Lato 400 | Manifesti, campagne, saldi | | 22 | Abril Fatface 400 | Poppins 400 | Post di moda, bevande, vita notturna | ## Abbinamenti tecnici e di lusso | # | Titolo | Testo | Ideale per | | --- | --- | --- | --- | | 23 | IBM Plex Sans 600 | IBM Plex Mono 400 | Documentazione per sviluppatori, dati, ricerca | | 24 | Space Grotesk 500 | Space Mono 400 | Software indipendente, zine, portfolio | | 25 | Bodoni Moda 500 | Jost 400 | Gioielli, profumi, retail di fascia alta | Nel 24 il mono è il testo: va bene per brevi note ed etichette, non per i saggi. Gli attacchi sottili di Bodoni Moda stanno meglio in grande, sopra i 32 px circa. ## Errori che rovinano un abbinamento ### Da evitare - Due sans serif simili, che sembrano un errore - Due caratteri display che si contendono l’attenzione - Un serif sottilissimo per il testo sugli schermi - Caricare tutti i pesi di entrambe le famiglie - Un terzo font per un solo titolo speciale ### Da fare - Un chiaro contrasto di struttura, peso o larghezza - Un carattere rumoroso e uno silenzioso - Testo a 400 in un carattere con un’altezza della x generosa - Solo i due-quattro pesi che usi - Usare peso o dimensione dei tuoi due font ## Come aggiungere un abbinamento di Google Fonts al tuo sito 1. **Scegli i pesi** Di solito un peso per il titolo e due per il testo. Ogni peso in più è un altro file da scaricare. 2. **Copia l’incorporamento** Seleziona le famiglie su Google Fonts e copia il link che ti dà, oppure adatta il codice qui sotto. 3. **Assegna i ruoli in CSS** Dai a titoli e testo le loro variabili di famiglia di font, così un cambio futuro è una modifica di una sola riga. 4. **Prova con testi veri** Controlla un paragrafo lungo, un titolo di due righe e il nome di prodotto più lungo prima di decidere. ```html ``` L’abbinamento 2, Fraunces con Inter, che carica solo tre pesi. Cambia i nomi delle famiglie con una qualsiasi delle coppie qui sopra. Google Fonts è gratuito per l’uso commerciale, ma leggi le [licenze dei font](https://gradiently.design/it/guide/font-licensing) prima di modificarne uno o venderlo come parte di un prodotto. Per far durare la scelta in tutto il brand, trasformala in un [sistema tipografico](https://gradiently.design/it/guide/brand-typography-system) con ruoli con un nome. Per post social e presentazioni, imposta la tua coppia una volta sola in un kit del brand di Gradiently (parte del piano Pro), che contiene un font per i titoli e uno per il testo e accetta [file di font caricati](https://gradiently.design/it/guide/custom-fonts-upload), e il Designer li usa quando imposta un design. ## FAQ ### Quali sono i migliori abbinamenti di Google Fonts? Punti di partenza affidabili sono Fraunces con Inter, Playfair Display con Source Sans 3, DM Serif Display con DM Sans e Space Grotesk con Inter. ### Quale font sta bene con Montserrat? Merriweather per il testo dà un classico contrasto tra sans e serif. Bebas Neue sopra Montserrat funziona come titolo deciso da manifesto. ### Che cosa si abbina bene a Playfair Display? Un sans semplice e aperto per il testo, come Source Sans 3, Lato o Inter. Evita di abbinarlo a un altro serif ad alto contrasto. ### Google Fonts è gratuito per l’uso commerciale? Sì. I font di Google Fonts usano licenze aperte, per lo più la SIL Open Font License, che consentono l’uso commerciale, anche per loghi, siti web, stampa e lavori per clienti. Leggi la licenza nella pagina di ogni font se pensi di modificare o ridistribuire i file. ### Quanti font dovrebbe usare un sito web? Due bastano per la maggior parte dei siti: uno per i titoli e uno per il testo, solo nei pesi che servono.