Quali sono i migliori Google Fonts?
Molto spesso, ho parlato di Google Fonts, come utilizzarli e come importarli nei progetti web, oggi elenco qurelli che sono i migliori Google Fonts.
In questi anni, in cui ho pubblicato articolòi su questo blog, mi è capitato spesso di parlare dei Google Fonts.
Di come utilizzarli, come importarli in maniera corretta nei file CSS per rendere il nostro progetto digitale più accattivante con dei fonts moderni.
Ma oggi, voglio elencare quali sono i migliori Google Fonts, descrivendo quelle che sono le caratteristiche principali che li distinguono dagli altri.
Per i miei UI Concept cerco sempre di affidarmi ai Google Fonts più utilizzati e i più consigliati da chi è esperto in questo campo.
Ma negli anni, ho imparato a sperimentare e ad utilizzare Google Fonts, che a primo impatto, mi sembravano troppo ‘Decorativi’ ed invece…Alla fine mi hanno stupito.
Ed è per questo, che ho deciso di scrivere questo articolo, con quelli che reputo i migliori per creare le grafiche dei miei progetti.
Prima di cominciare…Cosa sono i Google Fonts?
Chi non è la prima volta che legge i miei articoli, saprà sicuramente cosa sono i Google Fonts e come utilizzarli al meglio.
Infatti…Ho già scritto un pezzo su come utilizzare i Google Fonts, dove descrivevo cosa erano e come importarli nei file CSS.
I Google Fonts sono una libreraia interamente open-source che offre i migliori fonts che sono ottimizzati per qualsiasi browser e che possono dare un passo diverso al tuo sito web.
Navigando per il web, si trovano miglialia e migliaia di fonts ma non tutti hanno caratteristiche che si sposano con il nostro progetto.
Sicuramente, una cosa che i Google Fonts possiedono sono le molte declinazioni.
Questi fonts possono contare di avere uno stile che va dal ultra-light fiono ad arrivare al bold.
E questo è molto importante…Perchè attraverso di essi possiamo dare molta più importanza ad alcuni elementi tipografici del nostro progetto.
Infatti non è un segreto che alcuni elementi devono avere un font i grassetto, per catturare di più lò’attenzione dell’utente.
Ecco…Alcuni fonts che si trovano sul web possiedono pochissimi declinazioni e stili.
Quindi rischiamo di avere elementi tipografici, che non si distinguono molto tra di loro e questo può avere delle conseguenze sull’aspetto della nostra interfaccia.
In più..I Google Fonts hanno un design molto elegante e ricercato che li rendono utili per molte interfacce grafiche di settori diversi.
Perchè utilizzare i Google Fonts?
MAolti di quelli che leggeranno l’articolo, hanno utilizzato spesso i Google Fonts, ma c’è anche chi non li ha utilizzati molte volte.
E, giustamente, si farà una domanda: Perchè sceglierli? Che vantaggi mi portano?
Non poco tempo fa, ho scritto un’articolo sui migliori siti su cui reperire i fonts.
Di risorse nel web ce ne sono tante..Ma non sempre si ha la qualità.
Si consiglia di usare i Google Font per i seguenti motivi:
- Leggibilità
- Eleganza
- Impatto visivo
- Sono font open source quindi gratuiti
- Hanno un peso leggero quindi non rallentano il sito
E Poi ne aggiungo una che, secondo me, è importante e che ho già citato in altre occasioni.
I Google Fonts dispongono di molti stili e declinazioni..Cosa vuol dire?
Molti fonts che scarichiamo quotidianamente hanno solo stili regular (stile standard) ed il bold.
Questo non ci lascia molta scelta e rischiamo di avere elementi di importanza diversa ma con stili uguali.
Perciò non si riuscirà molto a dare rilievo ed importanza ad alcuni elementi dell’interfaccia.
Quali sono i migliori?
Dopo aver fatto questa piccola, ma doverosa, introduzione..Posso cominciare a descrivere quali sono i migliori.
Questo elenco contiene fonts che ho selezionato secondo alcune caratteristiche:
- Sono molto utilizzati dalla vasta community online di web e UI Designers.
- Come detto prima, devono possedere molti stili e declinazioni.
- Sono fonts che ho utilizzato parecchio nei progetti che ho realizzato in ambiente lavorativo e per progetti personali.
- Alcuni di essi sono utilizzati da agencies e company, molto quotate
Fatto tutte queste premesse posso partire ad elencare i Google Fonts migliori.
Raleway
Il primo fonts che voglio citare è il Raleway.
Questo fonts ha un’aspetto caratterizzato da linee molto geometriche che lo rendono molto elegante.
Scorrendo tra i caratteri, possiamo notare veramente linee molto pulite e geometriche che, sicuramente, lo rendono molto utile per tanti utenti.
Questo è stato il primo Google Fonts che ho testato, e devo dire che rende molto eleganti i progetti.
Uno dei motivi che spingono ad utilizzare questo fonts è il gran numero di stiili disponibili, infatti Raleway possiede i seguenti stili:
- Thin
- ExtraLight
- Light
- Regular
- Medium
- Semibold
- Bold
- Extrabold
- Black
Il fatto che abbia tutti questi stili è un vantaggio se si sa dare il giusto risalto.
Nel senso che bisogna saper dare il giusto stile ad i nostri elementi e saperte al meglio quali sono gli elementi tipografici a cui vogliamo dare risalto.
Quindi, so che è un’ovvietà, ma consiglio di non utilizzare uno stile Thin per titoli o partio di testo che devono catturare l’attenzione dell’utente.
Questo fonts è possibile abbinarlo ad un Open Sans, Roboto, Lato o Montserrat.
Sono tutti Fonts che non hanno linee troppo ‘decorative’, se no andrebbero a contrastarsi troppo e a creare un’effetto ottico non trpppo gradevole
Roboto
Il secondo tra i Google Fonts che utilizzo di più è il Roboto.
Per un semplice motivo, sono un’amante del Material Design, il design style di Google, e questo font è quello ufficiale.
Sicuramente, arete visto un’interfaccia in stile Material Design, ecco iul font utilizzato in questo caso è il Roboto.
Chiaramente, sul web si trovano tanti esempi di UI Designer che utilizzano il Material con fonts diversi.
Ma sono designers che non si stanno seguendo la guida ufficiale del Material Design.
Perciò se si vuole creare progetti in stile Material Design, utilizzare il Roboto è fondamentale.
E visto che la maggior parte degli smartphone utilizza Android, vuol dire che se si è dei UI Designer o web designer è importante conoscere le sfacettature del Material.
Come il Raleway, anche Roboto possiede moltissime declinazioni e stili:
- Thin
- Light
- Regular
- Medium
- Bold
- Black
Sulla già citata guida del Material Design, si può trovare una sezione molto chiara di come utilizzare Roboto.
Ma il Roboto si può prestare molto per altri progetti, infatti sono molti i siti web che lo utilizzano come font principale.
A livello di aspetto, anche qui il Roboto ha delle linee molto geometriche ma ben abbinate a linee più curve.
Il Roboto si può abbinare a font come l’Open Sans, il Lato, il Noto Sans ed il Roboto Slab.
Roboto Slab
Proseguo citando il Roboto Slab, altro Google Font, molto elegante che, rispetto al precedente, ha un aspetto molto più geometrico.
Infatti nonostante il nome simile, il Roboto Slab presenta caratteristiche un pochino diverse rispetto al Roboto.
il Roboto Slab, ha un’aspetto diverso soprattutto sui caps di ogni carattere, che lo rende sixuramente un font interessante.
Lo consiglio di utilizzare per progetti e siti web di agenzie web, studi architettonici e di design, o per siti web riguardanti attività meccaniche.
Per esempio, questo blog utilizza esattamente questo font.
Comne gli altri due, anche il Roboto Slab può contare su un vasto numero di stili, che ci permette di dare più risalto ad elementi che riteniamo più importanti.
Il Roboto Slab può contare sui seguenti stili:
- Thin
- Extra light
- Light
- Regular
- Medium
- Semibold
- Bold
- Extrabold
- Black
Il Roboto Slab, nonostante sia un pò diverso dal Roboto; uno non esclude l’abbinamento con l’altro.
Ma può essere anche affiancato a font come Montserrat, Lato e Roboto Condensed.
Questo font, è stato uno degli ultimi che ho testato ma che mi ha stupito parecchio per il suo design e per le sue forme.
Poppins
Dopo aver parlato di fonts che hanno linee più sottili, voglio parlare di un’altro font che ho riscoperto in questi mesi: il Poppins.
Nonostante, anche qui, siamo di fronte ad un font che ha declinazioni molto sottili come il Thin e l’Extralight, si parla di un font con n’impatto visivo più forte.
Il tratto è molto più spesso, anche se presenta alcune linee più curve e più morbide rispetto ad un Raleway, per esempio.
Questo fonts lo consiglio di utilizzare per colpire l’attenzione dell’utente; su progetti web indirizzati sullo sport, oppure su progetti e-commerce.
Il Poppins ha molte declinazioni e stili, e questo permette di dare più spessore ai nostri progetti, gli stili sono i seguenti:
- Thin
- Extra Light
- Light
- Regular
- Medium
- Semibold
- Bold
- Extrabold
- Black
Possiamo abbinare il Poppins con Open Sans, Playfair Display, Oswald.
Playfair Display
Ecco…Ora passiamo, invece ad un font dall’aspetto e dalle forme molto più armoniose.
Sto parlando del Playfair Display.
Che, rispetto a tutti quelli elencati finora, ha sicuramente delle linee meno gemotriche, che lo rendono un font molto elegante e che si avvicina molto alla forma delle lettere classiche.
Personalmente, questo font l’ho utilizzato in alcuni casi in cui dovevo realizzare dei concept in stile fashion.
Come detto, in alcuni casi preferisco dei font che hanno un’aspetto molto più gemotrico, con linee meno morbide e più geometriche.
Ho deciso di metterlo in questo elenco perchè mi ha stupito, perchè riesce ad abbinarsi bene ad alcuni font con stile diverso.
Come ad esempio, il Raleway, o il Roboto.
Montserrat
Dopo aver parlato di un font come il Playfair, torniamo a parlare di un font molto più strong e che ha linee e forme più nette.
Infatti il Montserrat è un font molto forte ma che, allo stesso tempo sa essere elegante e può essere utilizzato in progetti con un design minimal.
In questo periodo, lo sto utilizzando molto perchè veramente sa sposare uno stile più moderno, fatto di forme semplici, chiare e molto nette.
Anche qui, come nei Google Fonts di cui ho parlato, si parla di un font che possiede molti stili e declinazioni, che sono i seguenti:
- Thin
- Light
- Regular
- Medium
- Semibold
- Bold
- Extrabold
- Black
Questo font è facilmente abbinabile con un Pèlayfair Display, in caso si voglia dare un colpo d’occhio sugfli elementi tipografici più importanti.
Oppure si può lavorare utilizzato il Montserrat con il Lato, o Oswald.
La conclusione
Quelli che vi ho elencato sono i fonts migliori tra quelli presenti nei Google Fonts.
Ho fatto questo elenco basandomi su quelli che ho anche utilizzato durante il mio percorso lavorativo o durante le mie fasi di studio.
Chiaramente, i Google Fonts sono decine e decine e ci sono anchje altri valid fonts.
Per quanto riguarda gli abbinamenti tra Googlew Fonts differenti, consiglio sempre di non abbinarne due che sono troppo differenti tra di loro.
Anche se..Questo lavoro di abbinamento, si può solo perfezionare con lo studio e l’esercizio.
Personalmente, in pochi casi ho usato un numero alto di fonts all’interno di un singolo progetto, per dare più linearità al design.
