Font Pairing
Trova combinazioni di font perfette per heading e body text.
Combinazioni (15)
Personalizza
Preview - Inter + Merriweather
Il Foxtrotto Veloce Salta oltre il Cane Pigro
Il design tipografico è l'arte di disporre i tipi per rendere il linguaggio visivo leggibile, leggibile e attraente quando è visualizzato. Ogni scelta tipografica comunica un messaggio.
CSS da copiare
/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Merriweather:wght@400;700&display=swap');
/* Tipografia */
h1, h2, h3, h4, h5, h6 {
font-family: 'Inter', serif;
font-weight: 700;
}
body, p {
font-family: 'Merriweather', sans-serif;
font-weight: 400;
font-size: 17px;
line-height: 1.7;
}<head> del tuo HTML oppure usa @import nel tuo CSS.Come utilizzare Font Pairing
Filtra le coppie per stile
Usa i filtri per stile (moderno, classico, tecnico, elegante, giocoso) per restringere le 15 combinazioni di font disponibili a quelle più adatte al tuo progetto.
Seleziona una coppia e osserva l'anteprima live
Clicca su una coppia per vederla applicata all'anteprima con titolo e paragrafo di testo reale, e regola le dimensioni di heading e body con gli slider dedicati.
Personalizza il testo di prova (opzionale)
Sostituisci il testo di esempio con il tuo titolo e paragrafo reali per valutare come la coppia di font renderizza i tuoi contenuti specifici.
Copia il CSS generato
Copia lo snippet CSS pronto, che include l'import Google Fonts e le regole per heading e body con i pesi corretti, e incollalo nel tuo foglio di stile.
Suggerimenti
- Limita il numero di font caricati per pagina a 2 (uno per i titoli, uno per il corpo): ogni font aggiuntivo aumenta il tempo di caricamento e può peggiorare le performance web.
- Verifica sempre la leggibilità del font del body a dimensioni piccole (14-16px): un font che sembra elegante nei titoli grandi può risultare poco leggibile nel corpo del testo.
Domande frequenti
Come vengono scelte le combinazioni di font proposte?
Le 15 coppie sono curate a mano abbinando un font per i titoli (spesso con più carattere o peso) a un font per il corpo del testo (leggibile a dimensioni piccole), scelte tra i font di Google Fonts più usati per ogni categoria di stile (moderno, classico, tecnico, elegante, giocoso).
Devo caricare i font manualmente per usarli?
Sì, il CSS generato include un @import verso Google Fonts, ma puoi anche incollare il link Google Fonts corrispondente direttamente nell'head del tuo HTML: entrambi i metodi caricano i font necessari nel browser prima che vengano applicati.
Perché heading e body hanno pesi (font-weight) diversi nel CSS?
Ogni coppia è pensata con un peso specifico per il titolo (spesso 600-800, più marcato) e uno per il corpo (di solito 400, più leggero) per creare un contrasto visivo tra i due livelli di testo e migliorare la gerarchia tipografica della pagina.
Posso usare queste combinazioni anche fuori dal web, ad esempio per un documento?
Sì, la maggior parte dei font mostrati (es. Montserrat, Playfair Display, Lora) sono font open source disponibili anche per desktop tramite Google Fonts: puoi scaricarli e installarli localmente per usarli in editor di documenti o software di design.
Come scelgo la categoria di stile più adatta al mio progetto?
Ogni coppia indica un caso d'uso suggerito (es. "Blog, dashboard, SaaS" oppure "Magazine, luxury brand"): parti da quello che più si avvicina al tono del tuo progetto, poi affina con l'anteprima live usando il tuo testo reale.