In breve
- 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.
In questa pagina
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 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 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 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 |
<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>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 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 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 trattano licenze e lingue, e le basi della tipografia trattano la scala. In Gradiently i font stanno nel tuo brand kit e si applicano a ogni nuovo design.
Le domande più frequenti
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.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo
