HomeStrumenti di DesignAbbinamento Font

Abbinamento Font

Lo strumento Font Pairing mostra in anteprima 12 combinazioni selezionate di Google Fonts per titoli e testo, ti permette di abbinare i font come preferisci e copia l'@import CSS corrispondente.

The Art of Good Typography
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

Informazioni su questo strumento

Lo strumento Font Pairing mostra in anteprima 12 combinazioni selezionate di Google Fonts per titoli e testo, ti permette di abbinare i font come preferisci e copia l'@import CSS corrispondente.

Come si usa

  1. Scegli uno degli abbinamenti selezionati, oppure un font per i titoli e uno per il testo.
  2. Usa Random Pairing per esplorare nuove combinazioni.
  3. Guarda l'anteprima in tempo reale di titolo e paragrafo.
  4. Clicca Copy CSS @import per caricare i font sul tuo sito.

Da sapere

  • Un abbinamento classico mette a contrasto un serif con un sans-serif, come Playfair Display con Source Sans 3.
  • Tra gli abbinamenti ci sono Montserrat + Merriweather, Raleway + Lato, Space Grotesk + Inter e DM Serif Display + DM Sans.
  • Limitare un sito a due famiglie di font mantiene le pagine coerenti e riduce il peso dei download.
  • L'anteprima carica i font scelti da Google Fonts con i pesi 400 e 700.
  • Aggiungendo display=swap all'URL del font viene mostrato un testo di riserva mentre il web font si carica.

Funziona interamente nel tuo browser: nulla di ciò che inserisci viene caricato o salvato.

Domande frequenti

Quali font stanno bene insieme?

Di solito funzionano bene font con stili contrastanti ma proporzioni simili, come un titolo serif ad alto contrasto con un testo sans-serif pulito. Gli abbinamenti selezionati qui sono combinazioni collaudate.

Quanti font dovrebbe usare un sito?

Due famiglie, una per i titoli e una per il testo, bastano per la maggior parte dei siti. Una terza raramente serve.

I Google Fonts sono gratuiti per uso commerciale?

Sì. I font della libreria Google Fonts sono rilasciati con licenze aperte come la SIL Open Font License e possono essere usati a fini commerciali.

Come aggiungo i font al mio sito?

Incolla l'@import copiato in cima al tuo CSS, oppure convertilo in un tag link nell'head HTML, poi imposta font-family su titoli e body.