Abbinatore di Font
Trova la combinazione di font perfetta per il tuo progetto. Esplora abbinamenti popolari di Google Fonts con anteprima dal vivo e copia il codice CSS istantaneamente.
Funzionalita principali
- Sfoglia combinazioni popolari di Google Fonts
- Anteprima live con testo di titolo e corpo
- Copia del codice CSS con un clic
- Abbinamenti professionali suggeriti
Guide
L'accoppiamento dei font e la pratica di selezionare due o piu caratteri tipografici che funzionano insieme in un design. L'obiettivo e l'armonia visiva: titoli, corpo del testo, didascalie ed elementi UI dovrebbero sembrare parti dello stesso sistema anziche selezioni casuali. Un cattivo accoppiamento dei font crea attrito. Un buon accoppiamento dei font e invisibile. I lettori assorbono il contenuto senza notare la tipografia, che e esattamente il punto. Questa guida tratta i principi alla base di un accoppiamento efficace dei font, i metodi pratici per trovare combinazioni e le considerazioni tecniche per l'implementazione web. Ogni carattere tipografico porta con se una personalita visiva. Un sans-serif geometrico come Futura comunica modernismo e precisione. Un serif umanista come Garamond suggerisce tradizione ed eleganza. Un slab serif come Rockwell sembra robusto e industriale. Uno script scritto a mano come Pacifico e informale e giocoso. Quando accoppi i font, stai combinando queste personalita. La combinazione deve avere senso per il tuo progetto. Un sito web di uno studio legale che usa Pacifico per i titoli e Comic Sans per il corpo del testo trasmette il segnale sbagliato indipendentemente dall'esecuzione tecnica. Inizia ogni decisione di accoppiamento definendo il tono che vuoi comunicare: professionale, amichevole, autorevole, creativo, minimalista, lussuoso, tecnico o giocoso. La strategia di accoppiamento piu affidabile e il contrasto con compatibilita. Vuoi font sufficientemente diversi da creare gerarchia visiva ma che condividano abbastanza DNA strutturale da sembrare coerenti. L'accoppiamento di due font della stessa classificazione (due sans-serif geometrici, ad esempio) produce spesso un risultato piatto perche non c'e abbastanza contrasto. L'accoppiamento di font di classificazioni diverse (un titolo serif con un corpo sans-serif) crea un contrasto naturale. La chiave e trovare il giusto grado di differenza. Troppo simili sembrano ridondanti. Troppo diversi sembrano caotici. La compatibilita strutturale deriva da proporzioni e altezza della x condivise. L'altezza della x e l'altezza delle lettere minuscole come x, a, e e o rispetto alle lettere maiuscole. Font con altezze della x simili sembrano equilibrati quando posti vicini, anche se i loro stili differiscono. Se il font del titolo ha un'altezza della x alta ma il font del corpo ne ha una bassa, la relazione dimensionale tra titoli e paragrafi sembrera sbagliata anche con le giuste dimensioni in punti. Quando valuti un accoppiamento, imposta entrambi i font alla stessa dimensione e confronta le lettere minuscole fianco a fianco. Font come Inter e Merriweather hanno altezze della x simili nonostante appartengano a classificazioni diverse, il che e uno dei motivi per cui si accoppiano bene. Serif piu sans-serif e la classica formula di accoppiamento, e funziona perche il contrasto e integrato. Le grazie (piccoli tratti alle estremita dei caratteri) rispetto alla loro assenza crea una distinzione visiva chiara. All'interno di questa ampia categoria, hai molte opzioni. Un serif transitorio ad alto contrasto (come Playfair Display) abbinato a un sans-serif neutro (come Source Sans Pro) crea un look elegante ed editoriale. Uno slab serif robusto (come Roboto Slab) abbinato al suo fratello sans-serif (Roboto) crea un sistema moderno e coerente. Un serif calligrafico (come Cormorant Garamond) abbinato a un sans-serif geometrico (come Montserrat) crea una tensione tra forme organiche e meccaniche che puo essere molto efficace nei contesti di moda, arte e lifestyle. L'accoppiamento con superfamiglia e l'approccio piu sicuro per i principianti. Una superfamiglia e una famiglia di caratteri progettata con versioni sia serif sia sans-serif che condividono la stessa struttura scheletrica. Gli esempi includono Roboto e Roboto Slab, Noto Sans e Noto Serif, Source Sans Pro e Source Serif Pro, PT Sans e PT Serif, IBM Plex Sans e IBM Plex Serif. Queste coppie sono garantite per funzionare insieme perche un unico designer le ha create come compagne. Il compromesso e che le coppie di superfamiglia possono sembrare prevedibili. Mancano dell'energia che deriva dalla combinazione di caratteri tipografici non correlati. Il contrasto di peso e importante quanto il contrasto di stile. Se il font del titolo e impostato su peso bold o black, il font del corpo dovrebbe tipicamente essere impostato su peso regular o book. L'uso del grassetto sia per i titoli sia per il corpo del testo elimina la gerarchia di peso che aiuta i lettori a scansionare il contenuto. La maggior parte dei caratteri professionali e disponibile in una gamma di pesi da thin a black. Avere accesso a piu pesi all'interno di ciascun font ti offre la flessibilita di creare gerarchia solo attraverso il peso, utile nei design minimalisti in cui vuoi usare un unico carattere per tutto. L'accoppiamento a famiglia singola usa un unico carattere per tutto, affidandosi a variazioni di peso, dimensione e stile per creare gerarchia. Questo approccio funziona bene con grandi famiglie di caratteri che hanno molti pesi e larghezze. Un titolo in Raleway Extra Bold a 36px, un sottotitolo in Raleway Semi Bold a 24px e il corpo del testo in Raleway Regular a 16px crea una chiara gerarchia da un'unica famiglia. Il risultato e estremamente coerente ma richiede scelte attente di dimensioni e pesi per mantenere l'interesse visivo. I caratteri tipografici con almeno sei variazioni di peso sono i piu adatti per questo approccio. Inter, con i suoi nove pesi da Thin (100) a Black (900), e un candidato eccellente per i system a famiglia singola. I font display sono progettati per dimensioni grandi: titoli, banner hero, loghi e pull quote. Spesso hanno dettagli decorativi, contrasto di peso estremo o proporzioni insolite che sembrano ottime a 48px ma diventano illeggibili a 14px. I font per il corpo del testo sono ottimizzati per la lettura prolungata a piccole dimensioni: spessori dei tratti uniformi, controlettere aperte (gli spazi racchiusi all'interno di lettere come o, e e d), spaziatura generosa e alta leggibilita a 14px-18px. Un errore comune di accoppiamento e usare un font display per il corpo del testo. Sembra a posto in un mockup in cui leggi tre parole, ma si sfalda in un paragrafo reale. Prova sempre il tuo font del corpo alla dimensione piu piccola che prevedi di usare con un blocco di testo effettivo, non solo con poche parole di esempio. L'abbinamento dell'umore attraverso la classificazione dei caratteri aiuta a restringere rapidamente le opzioni. Per un sito web tecnologico o di una startup, sans-serif geometrici (Montserrat, Poppins, DM Sans) abbinati a un serif pulito o monospace per gli accenti comunicano innovazione e chiarezza. Per un marchio di lusso o di moda, serif ad alto contrasto (Playfair Display, Cormorant) abbinati a un sans-serif sottile (Lato Light, Raleway Thin) comunicano raffinatezza. Per un sito educativo o di notizie, serif umanisti leggibili (Merriweather, Lora) abbinati a un sans-serif neutro (Open Sans, Roboto) comunicano fiducia e autorevolezza. Per un portfolio creativo, font display espressivi abbinati a un font del corpo semplice lasciano parlare il lavoro mantenendo il testo accessibile. La lunghezza della riga e l'accoppiamento dei font interagiscono in modi che i designer spesso trascurano. Un sans-serif ampio ed espansivo come Inter o Open Sans si legge comodamente a lunghezze di riga maggiori (fino a 75 caratteri per riga). Un serif stretto e compatto come Times New Roman diventa faticoso alla stessa lunghezza di riga. Quando scegli un font del corpo, provalo alla tua larghezza di contenuto effettiva. Se il tuo layout usa testo a colonna singola larga, scegli un font progettato per la lettura prolungata. Se il tuo layout usa colonne strette (come un layout di rivista multicolonna), puoi usare font piu compatti. La lunghezza di riga ottimale per il corpo del testo e di 45-75 caratteri. La tua scelta di font dovrebbe essere comoda alla tua lunghezza di riga effettiva. Google Fonts fornisce la piu grande libreria gratuita di font web, ma il gran numero di opzioni crea paralisi decisionale. Un approccio pratico consiste nell'iniziare con font workhorse collaudati e costruire da li. Per il corpo del testo sans-serif, Inter, Open Sans, Roboto, Lato e Source Sans Pro sono tutti ottimi punti di partenza con alta leggibilita, pesi multipli e ampio supporto linguistico. Per il corpo del testo serif, Merriweather, Source Serif Pro, Lora e Noto Serif funzionano bene. Per i titoli display, Playfair Display, Montserrat, Raleway, Poppins e Oswald sono popolari a buona ragione. Iniziare con queste opzioni collaudate e poi esplorare alternative e piu produttivo che sfogliare oltre 1500 font in cerca della corrispondenza perfetta. I variable font stanno cambiando il modo in cui funziona l'accoppiamento dei font sul web. Un variable font contiene un'intera gamma di pesi, larghezze e altri assi in un singolo file. Invece di caricare file separati per Regular, Semi Bold, Bold ed Extra Bold, carichi un unico file variable font e accedi a qualsiasi peso tra 100 e 900 usando CSS font-variation-settings o la proprieta standard font-weight. Questo riduce le dimensioni del file e ti offre un controllo preciso. Inter, Roboto Flex e Source Sans Variable sono esempi. Quando usi un variable font, puoi creare un intero sistema tipografico da un singolo file con una singola richiesta HTTP. Alcuni variable font includono anche assi di larghezza e dimensione ottica, consentendoti di affinare il font per diverse dimensioni e contenitori. Le prestazioni sono un fattore critico nella selezione dei font per il web. Ogni file di font aggiunge tempo al caricamento della pagina. Un peso di font tipico e da 20KB a 50KB per il formato WOFF2. Caricare due font con quattro pesi ciascuno significa otto file per un totale di 160KB-400KB. Questo influisce direttamente sui Core Web Vitals, in particolare Largest Contentful Paint e Cumulative Layout Shift. Limitati a un massimo di due famiglie di font. Carica solo i pesi che usi effettivamente. Usa il formato WOFF2 (il piu compresso). Aggiungi font-display: swap alle tue regole @font-face in modo che il testo venga riprodotto immediatamente in un font di fallback e sostituito con il web font quando si carica. Precarica il tuo file di font piu importante usando <link rel="preload" as="font" type="font/woff2" crossorigin>. Il subsetting dei font riduce le dimensioni del file includendo solo i caratteri necessari. Se il tuo sito e in inglese, non hai bisogno dei set di caratteri cirillici, greci o vietnamiti. Google Fonts gestisce questo automaticamente tramite la suddivisione unicode-range, ma se ospiti i font autonomamente, strumenti come glyphhanger o pyftsubset ti consentono di creare subset personalizzati. Un subset solo latino di un font che include tutti gli script potrebbe essere 25KB invece di 80KB. Per i siti multilingua, carica i subset di caratteri in modo incrementale: il subset latino si carica per primo (coprendo l'inglese e la maggior parte delle lingue europee) e i subset aggiuntivi si caricano solo quando necessario in base alla lingua rilevata. L'implementazione CSS delle coppie di font segue un pattern prevedibile. Definisci i tuoi font nelle custom property CSS o direttamente nel tuo foglio di stile. Imposta il font del titolo sugli elementi da h1 a h6 e il font del corpo sull'elemento body. Usa uno stack di font con font di fallback appropriati. Ad esempio: font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif per un corpo sans-serif oppure font-family: 'Merriweather', Georgia, 'Times New Roman', serif per un corpo serif. I font di fallback dovrebbero avere metriche simili al tuo web font per ridurre al minimo lo spostamento del layout quando il web font si carica. Strumenti come fontpie e Capsize aiutano ad abbinare le metriche del font di fallback al tuo web font. Le regolazioni della spaziatura sono spesso necessarie quando si combinano font di designer diversi. Ogni font ha una letter-spacing (tracking) e una line-height (interlinea) integrate che potrebbero non armonizzarsi con il font accoppiato. Il corpo del testo ha tipicamente bisogno di un'interlinea tra 1,5 e 1,75 per una lettura confortevole. I titoli possono usare un'interlinea piu stretta (1,1-1,3) perche sono brevi. Le regolazioni della letter-spacing sono piu sottili: il testo in maiuscolo spesso beneficia di un tracking aggiuntivo da 0,05em a 0,1em, mentre il testo display grande a volte sembra migliore con un tracking leggermente negativo (-0,01em a -0,02em). Questi valori di spaziatura sono per-font: cio che funziona per Montserrat potrebbe non funzionare per Poppins. Le varianti italico e grassetto fanno parte della tua valutazione di accoppiamento. Non ogni font ha forme italiche ben progettate. Alcuni Google Fonts offrono solo pesi regular e bold senza vero italico. Quando un browser incontra uno stile italico su un font senza variante italica, applica un falso italico (inclinazione obliqua) che sembra scadente. Prima di impegnarti con un font, verifica che abbia i pesi e gli stili che il tuo design richiede. Un font del corpo senza vero italico e un ostacolo insormontabile per i siti con molti contenuti dove enfasi e titoli sono frequentemente in italico. Testare la tua coppia di font in contesti diversi e essenziale prima di impegnarsi. Controllala a ogni livello di intestazione (da h1 a h6), nel testo dei paragrafi, in grassetto e in italico, negli elenchi, nelle citazioni, nei menu di navigazione, nei pulsanti, nelle etichette dei moduli e nei caratteri piccoli come didascalie e testo a piè di pagina. Controllala su sfondi sia chiari sia scuri. Controllala su schermi mobili dove i font vengono riprodotti in modo diverso rispetto al desktop. Controllala alle dimensioni effettive che userai, non solo in un'anteprima del campione tipografico. Un accoppiamento che sembra ottimo in un confronto fianco a fianco a 72px potrebbe fallire nel corpo del testo a 14px. Il rendering dei font differisce tra sistemi operativi. macOS usa l'anti-aliasing subpixel che fa sembrare i font piu smussati e leggermente piu pesanti. Windows usa ClearType, che priorizza la nitidezza e puo far sembrare i font sottili troppo leggeri. Il rendering Linux varia in base alla distribuzione e alla configurazione. Un accoppiamento di font progettato su Mac potrebbe sembrare diverso su Windows. Prova su entrambe le piattaforme. I font con spessori dei tratti medi e forme delle lettere coerenti tendono a essere riprodotti in modo piu coerente tra i sistemi operativi rispetto ai font con contrasto estremo sottile/spesso. Le considerazioni culturali e linguistiche influenzano l'accoppiamento dei font per i siti multilingua. Non ogni font con script latino supporta tutte le lingue. Il turco richiede glifi specifici per la i puntata e non puntata. Il vietnamita richiede un ampio supporto dei segni diacritici. Il polacco, il ceco e il rumeno necessitano di caratteri accentati specifici. Se il tuo sito serve piu lingue, verifica che entrambi i font nella tua coppia supportino tutti i set di caratteri richiesti. Per i siti che includono contenuti CJK (cinese, giapponese, coreano) o arabo, avrai probabilmente bisogno di stack di font separati per quegli script, accoppiati per armonizzarsi visivamente con i tuoi font latini. Noto Sans e Noto Serif coprono praticamente ogni sistema di scrittura, rendendoli scelte sicure per i siti globali. I requisiti di accessibilita influenzano le scelte dei font. Le WCAG non impongono font specifici, ma la leggibilita e centrale per l'accessibilita. I font con una chiara distinzione tra caratteri simili (I maiuscola, l minuscola e numero 1; O maiuscola e numero 0) sono piu accessibili. I font sans-serif sono generalmente piu facili da leggere sullo schermo per gli utenti con dislessia, sebbene cio vari da individuo a individuo. Una dimensione del font adeguata (minimo 16px per il corpo del testo sul web), un'interlinea sufficiente e un forte contrasto tra testo e sfondo contano piu dello specifico carattere tipografico scelto. Non impostare mai il corpo del testo sotto i 14px indipendentemente dalla scelta del font. I font monospace hanno un ruolo specifico nell'accoppiamento dei font. Non sono tipicamente usati per il corpo del testo o i titoli ma appaiono in blocchi di codice, documentazione tecnica, tabelle di dati ed elementi UI dove l'allineamento a larghezza fissa conta. L'accoppiamento di un font proporzionale con un font monospace richiede attenzione all'abbinamento di dimensioni e pesi. I caratteri monospace sono inherentemente piu larghi dei caratteri proporzionali alla stessa dimensione del font, quindi spesso devi ridurre la dimensione del font monospace del 10-15% per ottenere un equilibrio visivo. I font monospace popolari per il codice includono JetBrains Mono, Fira Code, Source Code Pro e IBM Plex Mono. Ciascuno ha un fratello proporzionale nella sua famiglia che si accoppia naturalmente. La creazione di una scala tipografica genera coerenza matematica tra le dimensioni dei titoli e del corpo. Una scala tipografica e una sequenza di dimensioni dei font derivata da un rapporto. Il rapporto major third (1,25) produce dimensioni come 16, 20, 25, 31,25, 39 e 48,8. Il rapporto perfect fourth (1,333) produce 16, 21,3, 28,4, 37,9 e 50,5. I rapporti piu piccoli producono gerarchie piu strette adatte a interfacce dense. I rapporti piu grandi producono gerarchie drammatiche adatte a pagine editoriali e di marketing. La tua coppia di font dovrebbe funzionare su tutta la tua scala tipografica. Se il font del titolo sembra ottimo a 48px ma goffo a 25px (un h3 in una scala major third), ti serve un font diverso o una scala diversa. La tipografia responsive regola le dimensioni dei font attraverso le larghezze del viewport. La funzione CSS clamp() fornisce una scala fluida: font-size: clamp(1rem, 0.5rem + 2vw, 2.5rem) crea una dimensione del font che si ridimensiona in modo smussato tra 16px e 40px. La tua coppia di font deve funzionare a entrambi gli estremi. Un font display che sembra elegante a 40px sul desktop potrebbe sembrare stipato a 20px sul mobile. Prova il tuo accoppiamento alle dimensioni piu piccole e piu grandi nella tua scala responsive per verificare che regga sull'intero intervallo. I design token per la tipografia codificano le tue decisioni di accoppiamento dei font in un sistema riutilizzabile. Definisci token per la famiglia di font (--font-heading, --font-body, --font-mono), le dimensioni dei font (--text-xs a --text-4xl), i pesi dei font (--weight-normal, --weight-medium, --weight-bold), le interlinee (--leading-tight, --leading-normal, --leading-relaxed) e la spaziatura delle lettere (--tracking-tight, --tracking-normal, --tracking-wide). Questi token diventano i mattoni per ogni elemento di testo nella tua applicazione. Cambiare l'accoppiamento dei font significa aggiornare alcuni valori dei token anziche cercare tra centinaia di dichiarazioni CSS. Le considerazioni su email e multipiattaforma influenzano l'accoppiamento dei font per progetti oltre i siti web. I client di posta hanno un supporto limitato per i font: la maggior parte usa per default font di sistema come Arial, Times New Roman o il font predefinito della piattaforma. I web font possono essere incorporati nelle email ma il supporto varia ampiamente tra i client. Se il tuo marchio usa web font personalizzati sul sito web, definisci un accoppiamento di fallback che usi font di sistema ampiamente disponibili per l'email e altri contesti vincolati. Lo stack di font di sistema (system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif) riproduce il font nativo di ciascuna piattaforma, che e sempre altamente leggibile. Errori comuni di accoppiamento da evitare: usare piu di tre font in una singola pagina (crea rumore visivo), scegliere font troppo simili (Helvetica e Arial, per esempio, non offrono alcun contrasto significativo), selezionare un font del corpo con scarsa leggibilita a piccole dimensioni, ignorare le prestazioni di caricamento dei font, usare font decorativi o di script per il corpo del testo, accoppiare due font display insieme e non testare su dispositivi e browser. Ciascuno di questi errori e facile da commettere durante il design ma evidente agli utenti nel prodotto finale. Lo strumento di accoppiamento dei font ti consente di visualizzare in anteprima le combinazioni in tempo reale, regolando dimensioni, pesi e testo di esempio per vedere come le coppie funzionano insieme prima di scrivere qualsiasi CSS. Usalo come punto di partenza: restringi le tue opzioni a due o tre candidate, quindi prova quelle candidate nel tuo layout effettivo con il tuo contenuto effettivo. Le decisioni tipografiche prese con contenuto reale in un layout reale superano sempre le decisioni prese con lorem ipsum in uno strumento di anteprima.
Domande frequenti
Come scelgo font che funzionano bene insieme?
Abbina un font di titolo decorativo o serif a un font di corpo sans-serif pulito. I nostri abbinamenti suggeriti seguono questo principio per la massima leggibilità.
Posso usare questi font gratuitamente?
Sì, tutti i font mostrati provengono da Google Fonts, gratuiti per uso commerciale e personale.
