10 Fantastiche combinazioni di font di Google che vanno di moda nel 2021

Una lista di font alla moda scelti a mano da Google Fonts che si abbinano bene insieme e come installarli sul tuo sito web.

• Articolo di Jason Beever
• Aggiornato: 2 gennaio 2020
• Tag: tipografia, web design

La tipografia di un sito web era una pratica di design più mistificante di quanto lo sia oggi. Il complicato processo di decorare una pagina web con font personalizzati una volta richiedeva la conversione e l’incorporazione di file di font da ospitare sul server dell’utente, e la scelta dei font disponibili era limitata alla collezione dell’utente stesso o alla conoscenza della tipografia al di fuori dei font di sistema standard. Di conseguenza, la maggior parte dei siti web appariva quasi identica nella formattazione del contenuto, che si affidava a molti font sicuri per il web abusati e banali.

Tutto questo è cambiato nel 2010 con il rilascio di Google Fonts, un progetto open-source che permette di implementare molto più facilmente i font personalizzati sui siti web. L’installazione di questi font sul tuo sito web è fortunatamente un processo facile e veloce, ma dovresti essere consapevole che non tutte le combinazioni di font nella libreria di Google sono una ricetta per il successo tipografico. Con i giusti abbinamenti di font e considerazioni sull’uso, tuttavia, il tuo marchio online può trasudare professionalità, bellezza e facilità di lettura senza la necessità di costosi font personalizzati. In questo articolo, ti mostrerò come realizzare tutto questo.

Un elenco di 10 combinazioni di font di tendenza di Google

Partiamo! In nessun ordine particolare, ecco 10 delle migliori combinazioni di Google Font attualmente di tendenza:

1. Open Sans Condensed + Open Sans

• Open Sans Condensed
• Open Sans

Ecco una facile combinazione che funziona a meraviglia per quasi ogni uso applicabile. Open Sans è uno – se non il – font più versatile dell’intera collezione di Google Fonts. È estremamente facile da leggere in grandi blocchi di testo, pur essendo abbastanza sorprendente per i titoli di testa.

Semplice. Sofisticato. Familiare. Non puoi sbagliare!

Uso nel mondo reale

Non riesco a prevedere alcuno scenario in cui Open Sans sarebbe una cattiva scelta. A meno che tu non stia cercando specificamente un font serif, penso che questo servirà perfettamente alla maggior parte degli affari, blog, landing page o web app.

2. Oswald + EB Garamond

• Oswald
• EB Garamond

Oswald è un ottimo font per i titoli, indipendentemente dal peso del carattere o dall’uso delle maiuscole. La sua natura condensata lo aiuta a catturare l’attenzione, ma rende anche un testo piacevolmente unico come font del corpo principale.

EB Garamond è un elegante aggiornamento del classico font Garamond. Immediatamente riconoscibile e senza tempo nell’aspetto, questo font emana una professionalità distintiva nella tua tipografia.

Uso nel mondo reale

Questo abbinamento funziona bene per i professionisti che trattano con una clientela di alto livello, come avvocati, agenzie immobiliari, o anche boutique di lusso. La versatilità di Oswald e l’aspetto classico di EB Garamond rendono grande il testo descrittivo del prodotto dove è importante enfatizzare un articolo di alta qualità.

3. Montserrat + Merriweather

• Montserrat
• Merriweather

Montserrat è uno dei preferiti tra i designer per la sua versatilità e semplicità, e Merriweather si abbina meravigliosamente con il suo stile contrastante e la facile leggibilità. Sentitevi liberi di scambiarli come titoli o testo di paragrafo: funzionano entrambi alla grande come entrambi!

Uso nel mondo reale

Questa particolare combinazione è un buon equilibrio di design moderno e classico. Come tale, la sua varietà di usi potrebbe supportare molti tipi di business. Personalmente, sento che questi font andrebbero bene per qualsiasi tipo di fonte di notizie online o agenzia editoriale.

4. Roboto Thin + Roboto Regular

• Roboto Thin
• Roboto Regular

Il font-family Roboto è uno dei preferiti ed è anche quello che usiamo qui a How To Get Online. Estremamente versatile con una vasta gamma di pesi di caratteri, non c’è praticamente alcuna limitazione a ciò che il font potrebbe essere usato per. Moderno e geometrico, pur rimanendo in qualche modo amichevole e affidabile, Roboto è una meraviglia di forma e funzione.

Uso nel mondo reale

Ecco un altro abbinamento per il quale è difficile trovare un uso sbagliato. Mentre Roboto funziona per quasi tutto, penso che sia particolarmente grande per le start-up tecnologiche, le piccole imprese moderne, o qualsiasi tipo di marchio con un occhio al futuro.

5. Raleway + Roboto Slab

• Raleway
• Roboto Slab

È di nuovo il nostro amico Roboto! Questa volta, però, stiamo guardando la variante serif, Roboto Slab. Si tratta di un font che è altrettanto versatile come il suo cugino, ma un po’ più classico nello stile. Quando è abbinato al caratteristico e audace Raleway, abbiamo un’incredibile combinazione di tipografia pulita e raffinata.

Uso nel mondo reale

Raleway è uno di quei font che urla raffinatezza. Quando viene usato come un titolo tutto in maiuscolo, penso che funzioni magnificamente per articoli di lusso come gioielli, vestiti firmati, o prodotti ecommerce di alto livello. Roboto Slab lo supporta bene con un testo descrittivo semplice e accessibile.

Entrambi funzionano anche in modo intercambiabile. Prova diverse variazioni di peso per entrambi i font nei titoli e nel corpo del testo e vedi quale abbinamento cattura meglio il tuo marchio.

6. Playfair Display + Source Sans Pro

• Playfair Display
• Source Sans Pro

Secondo il suo designer, Playfair Display è stato ispirato dalle forme delle lettere del XVIII secolo durante la transizione dalle penne d’oca alle penne con punta d’acciaio. Non è una sorpresa quindi che questo font trasuda fascino del vecchio mondo ma con un tocco moderno.

Source Sans Pro spinge le cose un po’ più in là nel futuro, creando una combinazione intrigante che è ornata pur essendo utilitaria.

Uso nel mondo reale

Playfair Display aggiunge un tocco personale a qualcosa come uno slogan o una descrizione del prodotto. Se hai la possibilità di usare la sua ampersand o i simboli di valuta, vedrai immediatamente perché è la scelta perfetta per un prodotto o un servizio incentrato sul lusso e le apparenze. Source Sans Pro mantiene il testo a terra in una presentazione moderna e pulita.

7. Fjalla One + Noto Sans

• Fjalla One
• Noto Sans

Fjalla One potrebbe non essere il più versatile dei font, ma una cosa che fa estremamente bene è creare titoli che richiedono attenzione. Piccole o grandi, minuscole o tutte maiuscole, queste lettere sono ipnotiche, non importa cosa ci fai.

Noto Sans mira ad essere un font veramente universale dove, indipendentemente dalla lingua, può essere visualizzato senza errori di formattazione per gli utenti di tutto il mondo. Opportunamente, l’estetica del font è altrettanto versatile quanto la sua utilità.

Uso nel mondo reale

I blog o le pagine di destinazione sarebbero perfetti per questo abbinamento, o davvero qualsiasi cosa con lunghi corpi di testo che richiedono sottotitoli evidenti per spezzare il contenuto. L’adattabilità universale di Noto Sans lo rende anche una buona scelta dove raggiungere un pubblico internazionale è una priorità.

8. Alegreya + Lato

• Alegreya
• Lato

Alegreya ha un certo fascino che mi sembra molto “terreno” e amichevole. Non c’è nessuna pretesa sulla sua personalità; quello che vedi è quello che ottieni.

Lato potrebbe dare a Open Sans una corsa per i suoi soldi come campione dei font multiuso nella libreria di Google.

Insieme fanno una combinazione che è divertente, facile da leggere, e pragmatica.

9. PT Sans Narrow + PT Sans

• PT Sans Narrow
• PT Sans

Un’altra interpretazione moderna di uno stile del Vecchio Mondo, PT Sans e i suoi fratelli, PT Sans Narrow, fanno una dichiarazione immediata e inconfondibile quando sono abbinati insieme.

Uso nel mondo reale

Entrambi i font funzionano ugualmente bene come titolo o corpo del testo; l’abbinamento particolare che sceglierai dipenderà dalla natura delle tue parole, anche se io tendo a preferire il PT Sans Narrow in periodi più brevi.

Inteso come uno “strumento molto importante per le moderne comunicazioni digitali”, sembra più adatto a – anche se certamente non limitato a – usare questi font per startup tecnologiche, applicazioni software o altre attività digitali.

10. Amatic SC + Josefin Sans

• Amatic SC
• Josefin Sans

Ok, questo è decisamente più sul lato leggero. Ovviamente questa combinazione non funzionerà per tutti, ma la natura stravagante sia di Amatic SC che di Josefin Sans crea qualcosa che è sicuro di distinguersi, basta che tu faccia attenzione!

Uso nel mondo reale

Se sei un artista, un attore, un musicista o un intrattenitore divertente, questo font potrebbe essere essenziale per catturare la tua personalità unica. A seconda del tono generale e dell’argomento, questa combinazione potrebbe funzionare anche per un blog di nicchia.

Un consiglio: Non usate Amatic SC come testo principale. Farai impazzire i tuoi lettori.

Bonus: 5 dei nostri font premium preferiti

Sappiamo che questo articolo riguarda i migliori font di tendenza di Google, ma abbiamo anche voluto menzionare alcuni dei nostri font premium preferiti come bonus. I font premium, naturalmente, non sono gratuiti – ma danno al tuo sito web un design più unico e personalizzato. Questi font non sono popolari o di tendenza e sono davvero l’opposto di quelli che abbiamo elencato sopra. Tuttavia, questi sono ottimi per coloro che vogliono un design personalizzato e su misura per il loro marchio e vanno bene se usati per loghi o anche intestazioni creative:

Bonus 1: The Mega Craft Bundle X

Bonus 2: The Valentine’s Bundle

Bonus 3: The Cool Font Bundle

Bonus 4: The Little Graphics Bundle

Bonus 5: Jealous

Perché dovresti usare Google Fonts?

Benvenuti a quello che molti web designer considerano il loro migliore amico. Parlando per esperienza, posso dirvi che raramente incorporo più file di font personalizzati nei siti web. Google Fonts è ora quasi esclusivamente il primo e l’ultimo posto a cui mi rivolgo per la tipografia di un sito web. Ecco perché:

• È completamente gratuito. Non importa quanti font scegli o su quanti siti web li usi. Non pagherai mai un centesimo.
• A partire da marzo 2018, ci sono oltre 850 font nella libreria. È probabile che troverai lo stile giusto per abbinare il tuo marchio.
• È veloce. Poiché i font sono ospitati sui server di Google, i file sono intelligentemente compressi e progettati per caricare rapidamente.
• È facile. Un semplice copia-e-incolla in un file HTML e il gioco è fatto.
• È organizzato. Tutti i font sono categorizzati e ricercabili all’interno di un database. Non dovrai più setacciare le disordinate sottocartelle del tuo computer per trovare il font perfetto.
• Ho detto che è gratis? E’ gratis!

Come installare Google Fonts

Nessun mal di testa richiesto qui. Basta andare su Google Fonts e trovare i font di cui hai bisogno.

Man mano che selezioni i font vengono aggiunti cumulativamente a una collezione in fondo alla pagina. Quando hai finito la tua ricerca, clicca su quella scheda in basso e apparirà una finestra con le istruzioni per l’incorporazione.

Aggiungi stili

Da qui puoi scegliere di includere stili aggiuntivi come corsivo, grassetto, grassetto-italico e così via. Basta cliccare sulla scheda PERSONALIZZA e selezionare gli stili che pensi ti serviranno.

Per esempio, ecco come selezionerei sia il testo regolare che quello in grassetto per il font Khula.

Embedding the Standard o @Import?

Avrai notato che hai due opzioni per incorporare i font sul tuo sito web: usare un <link href> standard da usare nel file HTML del tuo sito, o un url @import da includere nel file CSS del tuo sito. Quindi quale dovresti usare?

Generalmente l’opzione migliore è copiare e incollare la linea <link href> nel tuo file HTML. I tuoi font saranno tipicamente caricati più velocemente in questo modo piuttosto che aspettare il caricamento del file CSS, e questo metodo ha anche un supporto migliore per i (molto) vecchi browser.

Dove mettere il codice

Copierai e incollerai la linea di codice che Google ti dà nella sezione <head> del tuo file HTML. Quindi, usando il font Khula che ho scelto sopra, sarà come questo:

Usare il font nel tuo foglio di stile

Ora devi semplicemente richiamare il font come al solito nel tuo codice CSS. A scopo dimostrativo, il tuo titolo principale e il testo del paragrafo potrebbero apparire così:

Consigli sull’abbinamento dei tuoi font

Decidere quali font raggruppare insieme può essere a volte un equilibrio artistico difficile da raggiungere. Da un lato, la tua selezione di font sarà più efficace quando c’è abbastanza contrasto negli stili; ogni font sul tuo sito deve distinguersi dagli altri e guadagnare una giustificazione per il suo uso. D’altra parte, non vuoi che i tuoi font si allontanino troppo l’uno dall’altro stilisticamente, il che potrebbe dare l’impressione che siano stati scelti a caso.

Serif e Sans-Serif

Un metodo provato è quello di abbinare un font serif con uno sans-serif. I loro stili tendono a contrastare bene insieme, offrendo una facile distinzione tra titoli e paragrafi.

La sperimentazione è la chiave

Quando sto scegliendo i font per un nuovo sito web, mi piace scaricare tutte le opzioni possibili di Google Font sul mio computer e giocare con loro in un documento di elaborazione testi. Giocherellare con diverse dimensioni e pesi e confrontare le combinazioni fianco a fianco è un modo efficace per determinare il miglior abbinamento possibile. Prendendosi il tempo di sperimentare, si può anche scoprire che l’uso di una variazione sottile di un dato font rende il testo del titolo migliore che se si dovesse usare un font completamente separato. (La soluzione più semplice è spesso la migliore.)

Conclusione

Google Fonts è una risorsa potente per i fai da te che non vogliono pagare per costosi font personalizzati sul loro sito web. Ma da un grande potere deriva una grande responsabilità: la tipografia richiede un’attenta riflessione per essere fatta bene, e non tutti i font là fuori sono vincenti. Speriamo che questa guida ti aiuti a orientarti nella giusta direzione, ispirandoti a trovare l’abbinamento perfetto di font per catturare la personalità del tuo marchio.