Esploratore di abbinamenti di font

Cos'è Esploratore di abbinamenti di font?

L'Esploratore di abbinamenti di font è uno strumento gratuito nel browser per web designer, sviluppatori e creatori di contenuti che vogliono una combinazione curata di titolo e corpo senza scandagliare le librerie di font. Due selettori indipendenti e ricercabili permettono di filtrare 48 Google Fonts selezionati per serif, sans, display o mono e di scegliere un font per ogni ruolo, mentre i controlli per ruolo impostano peso, dimensione, interlinea e spaziatura. Un'anteprima dal vivo rende il tuo titolo e il tuo paragrafo con i font reali, e un pulsante mescola propone abbinamenti casuali quando serve ispirazione. Quando ti piace, copia il CSS generato nel formato che preferisci — una regola @import, un tag HTML link o import in stile Fontsource — e portalo in una landing page, un tema per blog, una presentazione o un sistema di design.

Come usare Esploratore di abbinamenti di font

1. Nel selettore del titolo filtra per serif, sans, display o mono, digita per cercare e fai clic su un font per selezionarlo.
2. Fai lo stesso nel selettore del corpo per scegliere un font complementare per il testo del paragrafo.
3. Apri le impostazioni per definire peso, dimensione, interlinea e spaziatura di ogni ruolo.
4. Digita il tuo titolo e una frase nel campo di esempio, oppure lascialo vuoto per il testo predefinito; premi Mescola per idee di abbinamento casuali.
5. Scegli il formato di output — @import, <link> o Fontsource — e copia il CSS generato nel tuo foglio di stile o progetto.

Esempi

Titolo: Playfair Display 700 · Corpo: Source Sans 3 400

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');

Formato: <link>

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

Domande frequenti

Come scelgo i due font?

Ogni ruolo ha il proprio selettore. Filtra il catalogo per serif, sans, display o mono, digita parte del nome di una famiglia per cercare e fai clic su un risultato per selezionarlo. Titolo e corpo si scelgono in modo indipendente e il pulsante Mescola sceglie una coppia casuale per te.

Posso controllare peso, dimensione, interlinea e spaziatura?

Sì. Apri le impostazioni per definire peso, dimensione in pixel, interlinea e spaziatura (in em) separatamente per titolo e corpo. Ogni modifica appare sia nell'anteprima dal vivo sia nel CSS copiato.

Quali formati di output posso copiare?

Tre: una regola CSS @import, un tag HTML <link> con suggerimenti preconnect e import npm in stile Fontsource (npm i @fontsource/… più righe di import per peso). Tutti e tre includono le stesse regole font-family, peso, dimensione, interlinea e spaziatura per h1–h3 e body.

Da dove provengono i font e il mio testo è privato?

Quando scegli un abbinamento, il tuo browser carica solo quelle due famiglie direttamente dall'API pubblica di Google Fonts CSS su fonts.googleapis.com — una richiesta a terzi fatta dal tuo browser, non tramite i nostri server. Il tuo testo di esempio e le impostazioni restano interamente sul tuo dispositivo.

Quali font sono inclusi?

Una raccolta curata di 48 Google Fonts popolari tra serif, sans-serif, display e monospace — tra cui Playfair Display, Merriweather, Inter, Roboto, Poppins, Montserrat, Oswald, Space Grotesk, JetBrains Mono e altri.