Abbinamenti di Google Fonts: 25 combinazioni che funzionano

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 spiega perché il contrasto batte la somiglianza, e serif o sans serif racconta che cosa porta ogni famiglia.

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.

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.

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.

Abbinamenti amichevoli e arrotondati

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 e i font per titoli vanno più a fondo.

Abbinamenti tecnici e di lusso

Errori che rovinano un abbinamento

Come aggiungere un abbinamento di Google Fonts al tuo sito

1. 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. 2

   Copia l’incorporamento

   Seleziona le famiglie su Google Fonts e copia il link che ti dà, oppure adatta il codice qui sotto.

3. 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. 4

   Prova con testi veri

   Controlla un paragrafo lungo, un titolo di due righe e il nome di prodotto più lungo prima di decidere.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@600&family=Inter:wght@400;600&display=swap" rel="stylesheet">

<style>
  :root {
    --font-heading: "Fraunces", Georgia, serif;
    --font-body: "Inter", system-ui, sans-serif;
  }
  h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; }
  body { font-family: var(--font-body); font-weight: 400; }
</style>

Google Fonts è gratuito per l’uso commerciale, ma leggi le licenze dei font 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 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, e il Designer li usa quando imposta un design.