# Abbinamento dei font: regole semplici che funzionano

[Canonical HTML page](https://gradiently.design/it/guide/font-pairing)

Due caratteri che stanno bene da soli possono litigare quando dividono una pagina. Poche regole e una manciata di coppie collaudate tolgono ogni congettura.

## The short version

- L’abbinamento dei font funziona meglio quando ogni carattere ha un ruolo chiaro, di solito uno per i titoli e uno per il testo corrente.
- Una buona coppia contrasta chiaramente in un solo modo, come serif contro sans serif o pesante contro leggero, condividendo proporzioni e atmosfera.
- Usare una sola famiglia con più pesi, o una superfamiglia con versioni serif e sans coordinate, è il modo più sicuro di abbinare i font.
- Due caratteri simili ma non identici, come due sans serif neutri, di solito sembrano un errore e non un abbinamento.
- Due font bastano per quasi ogni brand, post o sito; un terzo dovrebbe avere un compito ristretto, come il codice o le etichette.

Un buon **abbinamento dei font** si riduce a tre regole: dai a ogni carattere un ruolo distinto, fai contrastare i due chiaramente in un solo modo e lascia che si accordino su tutto il resto, come proporzioni e atmosfera. Un titolo serif sopra un testo sans serif è l’esempio classico. Nel dubbio, usa una sola famiglia in due pesi; non può entrare in conflitto con se stessa.

## Parti dai ruoli, non dai font

Prima di scegliere un carattere, decidi che compiti deve svolgere il testo. La maggior parte dei design ne ha due: titoli che danno il tono e testo corrente che deve essere comodo da leggere. Alcuni ne aggiungono un terzo, piccolo, come etichette o codice. Scegli prima il carattere del testo corrente, perché porta la maggior parte delle parole, poi trova un carattere per i titoli che lo completi.

| Ruolo | Il suo compito | Cosa conta di più |
| --- | --- | --- |
| Titolo | Dare il tono, essere visto per primo | Carattere, peso, come appare in grande |
| Testo corrente | Essere letto comodamente a lungo | Leggibilità, texture uniforme, un buon tondo e corsivo |
| Etichette e testo piccolo | Essere letto in fretta a dimensioni piccole | Forme chiare, spaziatura aperta, pesi robusti |
| Codice o cifre | Allinearsi e non essere ambiguo | Monospazio o numeri tabulari |

I ruoli tipografici. Due caratteri possono coprirli tutti e quattro; quello del testo corrente spesso gestisce anche le etichette.

Un post editoriale con un grande titolo, una piccola etichetta e una riga di supporto in uno stile più discreto

I ruoli resi visibili: un grande titolo con carattere, una piccola etichetta sopra e una riga di supporto discreta sotto. Il contrasto sta nella dimensione e nel ruolo prima che nel carattere.

## Contrasta in un solo modo, accordati nel resto

Un abbinamento ha bisogno di una differenza visibile, altrimenti il secondo font sembra un incidente. Ma se i due differiscono in ogni modo contemporaneamente, sembrano venire da progetti diversi. Scegli un solo asse di contrasto e tieni vicino il resto.

- **Classificazione:** un serif con un sans serif. Il contrasto più affidabile. [Serif o sans serif](https://gradiently.design/it/guide/serif-vs-sans-serif) spiega cosa porta ciascuno.
- **Peso:** un taglio display pesante con un taglio di testo regolare, anche della stessa famiglia.
- **Larghezza:** un carattere condensato per i titoli con un testo di larghezza normale.
- **Accordo di proporzioni:** altezze della x simili, cioè l’altezza delle lettere minuscole, fanno stare i due comodamente insieme su una riga.
- **Accordo di atmosfera:** un serif caldo e morbido va con un sans umanista caldo; un sans geometrico e affilato va con un serif nitido e ad alto contrasto.

## Una famiglia, o due

L’abbinamento più semplice è nessun abbinamento: una sola famiglia in due o tre pesi. È coerente per costruzione e difficile da sbagliare. Le superfamiglie vanno un passo oltre, con un serif e un sans disegnati insieme per condividere le proporzioni, così hai il contrasto di due classificazioni con l’armonia di un solo disegno.

### Una famiglia

- Contrasto solo da peso e dimensione
- Armonia garantita
- Voce più quieta e uniforme
- Esempio: titoli in Archivo Black, testo in Archivo

### Due famiglie

- Contrasto da classificazione o carattere
- Richiede proporzioni e atmosfera che si accordino
- Più espressivo, più personalità
- Esempio: titoli in Fraunces, testo in Inter

## Abbinamenti collaudati da Google Fonts

Queste coppie usano caratteri gratuiti su [Google Fonts](https://fonts.google.com/) e molto diffusi, e questo le rende facili da provare. Considerale punti di partenza: componi le tue parole con loro e giudica il risultato.

| Titolo | Testo | Contrasto | Sensazione |
| --- | --- | --- | --- |
| Playfair Display | Source Sans 3 | Serif ad alto contrasto con un sans pulito | Editoriale, classico |
| Fraunces | Inter | Serif morbido e di carattere con un sans neutro | Caldo, contemporaneo |
| DM Serif Display | DM Sans | Serif display con il suo sans compagno | Cordiale, curato |
| Instrument Serif | Inter | Serif condensato con un sans neutro | Moda, editoriale |
| IBM Plex Serif | IBM Plex Sans | Il serif e il sans di una superfamiglia | Preciso, tecnico |
| Space Grotesk | Inter | Un grottesco stravagante con uno semplice | Tecnologia, prodotto |
| Archivo Black | Archivo | Peso all’interno di una sola famiglia | Deciso, diretto |

Sette abbinamenti da Google Fonts. Ciascuno contrasta chiaramente in un modo e si accorda nelle proporzioni.

```html
<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:opsz,wght@9..144,600&family=Inter:wght@400;600&display=swap" rel="stylesheet">

<style>
  h1, h2 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    line-height: 1.1;
  }
  body {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.55;
  }
</style>
```

Caricare e applicare un abbinamento: Fraunces per i titoli, Inter per il testo, ciascuno con un ripiego sensato. Vengono richiesti solo i pesi che usi.

## Abbinamenti da evitare

### Da evitare

- Due sans serif neutri che differiscono di poco
- Due caratteri display in concorrenza per l’attenzione
- Un terzo e un quarto font per varietà
- Caratteri con altezze della x molto diverse sulla stessa riga

### Meglio

- Un sans in due pesi, oppure un serif con esso
- Un carattere display, un carattere di testo discreto
- Due font, con pesi e dimensioni per la varietà
- Caratteri con proporzioni simili

I caratteri display sono i più tentanti da abusare. Sono fatti per dimensioni grandi e righe brevi; il testo corrente composto con uno di loro stanca presto l’occhio. I [font display](https://gradiently.design/it/guide/display-fonts) spiegano dove brillano.

## Come provare un abbinamento di font in dieci minuti

1. **Usa parole vere** Componi un titolo vero e un paragrafo vero del tuo lavoro, non testo segnaposto.
2. **Impostali a dimensioni reali** Il titolo grande, il testo a dimensione di lettura, sul formato che userai davvero.
3. **Guarda la texture** Fai un passo indietro. Il testo corrente dovrebbe sembrare un grigio uniforme; il titolo dovrebbe distaccarsene chiaramente.
4. **Provalo su un telefono** Molti abbinamenti eleganti su un monitor si sfaldano alla dimensione di un telefono. [Font per i social media](https://gradiently.design/it/guide/fonts-for-social-media) tratta ciò che regge.
5. **Controlla i dettagli** Numeri, punteggiatura, corsivi e ogni lingua in cui pubblichi.

Una volta scelto, scrivilo con pesi e dimensioni perché tutti lo usino allo stesso modo; i [caratteri del brand](https://gradiently.design/it/guide/brand-fonts) trattano licenze e lingue, e le [basi della tipografia](https://gradiently.design/it/guide/typography-basics) trattano la scala. In Gradiently i font stanno nel tuo brand kit e si applicano a ogni nuovo design.

## FAQ

### Cos’è l’abbinamento dei font?

L’abbinamento dei font consiste nello scegliere due caratteri, di solito uno per i titoli e uno per il testo corrente, che contrastino chiaramente in un solo modo e si accordino per proporzioni e atmosfera.

### Quanti font dovrei usare?

Due bastano per quasi tutto. Un terzo dovrebbe avere un compito ristretto, come il codice o le piccole etichette.

### Va bene usare un solo font?

Sì. Una sola famiglia in due o tre pesi è l’abbinamento più sicuro che esista, e molti brand solidi usano proprio quello.

### Qual è un buon abbinamento di Google Fonts?

Punti di partenza affidabili sono Fraunces con Inter, Playfair Display con Source Sans 3 e IBM Plex Serif con IBM Plex Sans.

### Perché i miei due font stanno male insieme?

Di solito sono troppo simili, quindi la differenza sembra un errore, oppure differiscono in ogni modo contemporaneamente. Mantieni un solo contrasto chiaro e accorda le proporzioni.