Migliori abbinamenti di font Google per siti web (6 coppie che funzionano)

Un buon abbinamento di font è un font per i titoli e uno per il testo abbastanza diversi da lavorare in squadra, ma con lo stesso mood. Un punto di partenza sicuro è un titolo con grazie e un testo in sans-serif pulito, come Playfair Display + Source Sans 3. Qui sotto trovi sei coppie di Google Fonts, una per mood, e un modo gratuito per provarle sul tuo sito prima di toccare il codice.

Cosa rende due font una buona coppia

Pensa a una band. Il cantante è il tuo font per i titoli e i musicisti dietro di lui sono il font per il testo, quello dei paragrafi. Se tutti urlano insieme, nessuno capisce le parole. Una buona coppia ha una voce che si fa notare e una che la sostiene. Tre regole semplici ti portano quasi fino in fondo:

• Contrasto, non scontro. Scegli due font chiaramente diversi, come uno con grazie (lettere con piccoli piedini alle estremità, come in un libro stampato) accanto a uno senza grazie (lettere senza). Due font quasi uguali sembrano solo un errore.
• Un solo mood. Un font giocoso e arrotondato accanto a uno rigido e formale manda segnali confusi. Scegli font che starebbero bene nella stessa stanza.
• Due font, non di più. Uno per i titoli, uno per il testo. Aggiungi varietà con dimensione e peso (quanto sono sottili o spesse le lettere), non con un terzo font.

Classico: Playfair Display + Source Sans 3

Playfair Display è un font con grazie dai tratti netti e molto contrastati, che ricorda un po’ la prima pagina di un giornale. Source Sans 3 è un sans-serif calmo e facile da leggere, che non vuole farsi notare. Va bene per blog, riviste, portfolio e tutto ciò che vuole ispirare fiducia.

Elegante: Cormorant Garamond + Montserrat

Cormorant Garamond è un font con grazie leggero ed elegante, dalle linee lunghe e delicate. Montserrat è un sans-serif largo e geometrico che le dà un pavimento moderno su cui poggiare. Pensa a moda, bellezza, matrimoni e ristoranti. Un consiglio: Cormorant diventa sottile quando è piccola, quindi tienila per i titoli grandi.

Moderno: DM Serif Display + DM Sans

DM Serif Display è un font con grazie robusto, fatto per i titoloni. DM Sans è un sans-serif pulito e amichevole dal tocco morbido simile, quindi i due si fondono bene. Una buona scelta per startup, agenzie e landing page che vogliono sembrare fresche ma non fredde.

Deciso: Oswald + Open Sans

Oswald è alto e stretto, quindi in una riga entrano molte parole che gridano comunque. Open Sans è largo, aperto e molto leggibile, il che la bilancia. Utile per notizie, sport, eventi e ovunque il titolo debba catturare.

Tecnico: Space Grotesk + Inter

Space Grotesk ha un look geometrico un po’ bizzarro che dice «noi costruiamo cose». Inter è stato disegnato per gli schermi e resta leggibile anche piccolo, quindi regge i paragrafi. Una scelta naturale per software, dashboard e strumenti per sviluppatori.

Amichevole: Quicksand + Nunito

Quicksand e Nunito hanno entrambi estremità dolcemente arrotondate, quindi sembrano fatti l’uno per l’altro. Il risultato è caldo e accessibile. Una buona scelta per istruzione, bambini, app, cibo e siti di community.

Come provare un abbinamento sul tuo sito

Leggere di una coppia non è come vederla sulle tue pagine, con le tue parole. FontMee è un’estensione gratuita di Chrome, un piccolo componente che dà al browser una funzione in più, e ti lascia provare i font su un sito vero, solo sul tuo schermo. Ha perfino gli abbinamenti incorporati: 32 coppie di titolo e testo scelte a mano, comprese le sei qui sopra. Il video mostra il pannello in azione.

1. Installa FontMee. Aggiungila dal Chrome Web Store. È gratuita e non chiede un account. Clicca sull’icona del puzzle di Chrome e bloccala in alto, così è sempre a un clic.
2. Apri il tuo sito e clicca sull’icona di FontMee. Il pannello si apre accanto alla pagina. Puoi anche premere Alt + Shift + F. Le pagine di Chrome stesso (Nuova scheda, il Web Store, le pagine chrome://) non si possono modificare.
3. Clicca sul pulsante Abbinamenti di font. Vedi un elenco di coppie, ognuna mostrata nei suoi font veri con un’etichetta di mood come Classico, Deciso o Tecnico.
4. Premi Usa questa coppia. Il font dei titoli e quello del testo cambiano subito sulla pagina. Se avevi già scelto un font, FontMee ti propone prima dei partner per lui, sotto Per e il nome del font.
5. Confronta e regola. Passa da Font originale ad Anteprima FontMee (o premi Alt + Shift + O) e usa Regola per dimensione, peso, altezza di riga e spaziatura delle lettere. Prova due o tre coppie, perché quella che vince su una scheda di esempio non sempre vince sulla tua pagina. Mantieni sul sito conserva la tua scelta a ogni visita e Reimposta tutto rimette la pagina com’era.

Quattro cose da controllare prima di decidere

• Usa le tue parole. Una coppia che sta benissimo su un breve slogan può cambiare con i nomi veri dei tuoi prodotti o con un paragrafo lungo.
• Guarda il testo piccolo, e sul telefono. Il testo dei paragrafi si legge molto più dei titoli, quindi deve essere comodo anche in piccolo.
• Controlla le lettere che ti servono. Accenti come é, ç e ş, e lettere cirilliche o vietnamite non sono in tutti i font. FontMee ha un filtro Scrittura che mostra solo i font con le lettere che ti servono.
• Controlla la licenza. Google Fonts è open source e gratuito per uso commerciale, ma altri font potrebbero non esserlo.

È il tuo sito? Allora provare una coppia è solo metà del lavoro. Quando te ne piace una, premi Copia CSS e incolla le regole nel foglio di stile del tuo sito, il file che comanda l’aspetto del sito (in WordPress è sotto Aspetto, Personalizza, CSS aggiuntivo). FontMee mostra anche la licenza di ogni font e può scaricare uno ZIP dei font da ospitare in proprio, così i browser dei tuoi visitatori li caricano dal tuo server e non da Google. Un sito ha anche bisogno di una casa in cui vivere, e un costruttore di siti è il modo più rapido per averla senza codice.

Scarica l’estensione

FontMee è gratuita, con oltre 1.900 font, 32 coppie già pronte, Copia CSS e il caricamento dei tuoi font. Senza account, senza abbonamento. Aggiungila dal Chrome Web Store o leggi prima la pagina di FontMee.

Da sapere prima di iniziare

Domande frequenti