Esistono 1052 diverse famiglie di Google Font disponibili gratuitamente (nel momento in cui scriviamo questo articolo). Sono davvero un sacco! Quindi non c’è da meravigliarsi se avete bisogno di aiuto per trovare l’opzione perfetta nella lista dei migliori Google Fonts. L’abbiamo preparata per voi!
In questo articolo condivideremo anche alcune buone pratiche per l’utilizzo di Google Fonts in WordPress.
La scelta di un font è più di una semplice scelta estetica; può avere un effetto sostanziale sul tasso di rimbalzo del vostro sito e sui tassi di conversione, soprattutto se scegliete un font difficile da leggere. Pertanto, vale la pena di prendersi un po’ di tempo per scegliere la famiglia di Google Fonts perfetta per il vostro sito web, piuttosto che usare il primo font che vi capita a tiro.
Se avete bisogno di ancora più font, date un’occhiata al nostro articolo su Oltre 50 Font Moderni da Usare sul Tuo Sito Web WordPress nel 2021.
Perché Usare Google Fonts?
Ci sono migliaia di repository di font su internet, quindi cosa rende Google Fonts così speciale?
In primo luogo, è gratuito! Inoltre, i Google Fonts sono mantenuti e forniti da Google, il che significa che sono garantiti per essere sicuri. Naturalmente ci sono un sacco di siti web dove è possibile scaricare font gratuiti, ma chi sa cos’altro si può prendere con quei file?
Anche la qualità dei font su tali siti web può essere a volte discutibile.
Google ha curato una selezione di oltre mille font di alta qualità. Se non siete web designer con un occhio perfetto per la tipografia, è una scelta più sicura.
In secondo luogo, non ci sono contorte restrizioni di licenza. Tutti i font nel catalogo di Google Fonts sono open source e liberi per l’utilizzo in progetti commerciali. Potete scaricarli o incorporarli sul vostro sito, e potete anche usarli in progetti di stampa.
Anche se non c’è una licenza unificata, la maggior parte dei font nel repository usa la Open Font License.
Altri “font gratuiti” sono raramente gratuiti includono con tutta una serie di confuse restrizioni di licenza che potrebbero crearvi qualche problema se fate un errore. Google Fonts, invece, non si porta dietro questo peso.
E infine, aggiungere i Google Fonts al vostro sito web è molto facile grazie all’API di Google Fonts. In alternativa, potete scaricarli individualmente e caricarli sul vostro server web via FTP/SFTP.
Mentre i Google Font tendono a essere semplici e forse non così appariscenti come alcuni font a pagamento, certamente battono i fonts web-safe che vengono preinstallati con i principali sistemi operativi, che altro non sono che gli stessi font che chiunque ha visto migliaia di volte.
Cosa Cercare in un Font Google
Se c’è una cosa che dovreste imparare quando disegnate un sito web, è come scegliere un Google Font adatto al vostro progetto. La tipografia è capace di migliorare o peggiorare il vostro sito.
Può sembrare un dettaglio insignificante, ma può fare la differenza tra qualcuno che lo abbandona presto o chi rimane per leggerlo tutto o diventare un cliente fedele.
Scegliere il font giusto è qualcosa che i graphic designer imparano a padroneggiare dopo anni, ma tenendo alcuni principi in mente, potete scegliere un bel font per il vostro sito web.
- Si adatta al vostro brand: Questo potrebbe essere l’aspetto più critico. I migliori siti web hanno un font che mostra la loro personalità e, allo stesso tempo, rimane leggibile e si adatta al design attuale. Per esempio, Apple e Iron Maiden usano font molto diversi, ma entrambi si adattano al loro brand.
- Leggibilità: Il secondo principio cruciale è la leggibilità. Un carattere fantasy o grungy può certamente adattarsi al vostro brand, ma se i vostri visitatori non possono leggerlo, se ne andranno in fretta. Pertanto, i vostri font devono essere professionali e leggibili.
- Classificazione dei font: Anche se ci sono centinaia di modi per classificare un font, questi sono i cinque tipi principali: serif, sans-serif, script, monospace e decorativo. Uno script o un font serif trasmette eleganza, mentre i font monospace sono popolari sui siti tecnici. Conoscere queste classificazioni vi darà un punto di partenza migliore nella vostra ricerca.
- Display o Body Font: I font display sono adatti a grandi dimensioni, intestazioni o progetti di stampa. Possono permettersi di essere meno leggibili per il bene di un design unico. La direttiva primaria dei body font è la leggibilità, dato che costituiranno la maggior parte del vostro sito.
- Umore e intento: Proprio come ogni lavoro artistico, gli artisti progettano i font per specifici stati d’animo e contesti. La maggior parte dei font è accompagnata da note su come sono stati progettati e su come potete usarli. Leggetele per decidere se il font è adatto al vostro progetto.
I 10 Migliori Font di Google nel 2024 (Secondo la Saggezza Popolare)
Quindi, come si fa a sviluppare una lista dei migliori Google Fonts quando la scelta del “migliore” è soggettiva? Non vogliamo che l’intera lista sia di parte, quindi ci serviremo dei dati per costruire una lista dei Google Font più popolari.
Useremo l’analisi di Google Fonts per fidarci della saggezza della folla. Con oltre 50 trilioni di visualizzazioni totali di font, Google ha un po’ di dati da cui attingere.
Poi, andremo un po’ oltre i numeri grezzi di popolarità e sceglieremo alcuni font HTML emergenti che stanno guadagnando popolarità.
Iniziamo con la lista!
1. Roboto
Occupa il primo posto da molto tempo ed è anche il font scelto da Kinsta: Roboto è un sans-serif offerto da Christian Robertson che Google ha sviluppato come font di sistema per Android. Ora è molto popolare, è disponibile in 12 stili diversi, e fa molteplici apparizioni nelle analisi di Google Fonts.
Se Roboto è il font più popolare, Roboto Condensed è il sesto font più popolare, e Roboto Slab fa un’apparizione anche al numero 12!
2. Open Sans
Open Sans Condensed è un font altamente leggibile commissionato da Google e ispirato al suo predecessore Droid Sans. Google usa Open Sans su alcuni dei suoi siti web e sui suoi annunci stampa e web. Open Sans Condensed, il suo font gemello, detiene il tredicesimo posto più popolare su Google Fonts.
3. Lato
Lato è un’altra scelta popolare creata da Łukasz Dziedzic. Ha una bella storia dietro il suo design che bilancia obiettivi contrastanti, con il risultato di un font sans-serif unico e leggero.
4. Montserrat
Montserrat è un font sans-serif di Julieta Ulanovsky, che vive nell’omonimo quartiere di Montserrat a Buenos Aires. Con 18 stili diversi che vanno dal più leggero al più pesante, vi offre un’ampia scelta.
5. Oswald
Oswald è un font sans-serif originariamente sviluppato da Vernon Adams. È stato progettato pensando al font Alternate Gothic, come è evidente dai suoi tratti audaci.
6. Source Sans Pro
Source Sans Pro è un font sans-serif creato per Adobe e il primo font open-source di Adobe. Realizzato da Paul Hunt, il suo lettering leggero lo rende pulito e leggibile.
7. Slabo 27px/13px
Slabo è un font serif sviluppato da John Hudson di Tiro Typeworks. Questo font è specificamente progettato per certe dimensioni – 27px o 13px, a seconda delle vostre esigenze.
8. Raleway
Con i suoi 18 stili diversi, Raleway è un altro font sans-serif di grande formato, inizialmente creato da Matt McInerney. Se vi piace Raleway e state cercando qualcosa di unico, Raleway Dots offre uno stile simile con un approccio punteggiato che può funzionare per grandi intestazioni.
9. PT Sans
PT Sans è stato sviluppato per i Public Types della Federazione Russa e, come tale, include sia caratteri latini che cirillici. Ci sono anche molti altri font nella famiglia PT, comprese alcune opzioni serif.
10. Merriweather
Il nome di Merriweather evoca l’idea di un design piacevole, e questo è esattamente ciò che intendevano le persone che lo hanno progettato. Anche se non è così popolare, Merriweather Sans è un progetto gemello che si accoppia eccezionalmente bene con esso.
Font Bonus ed Emergenti
Secondo i numeri, i dieci font di cui sopra sono i più popolari di Google Fonts. Ma mostrare solo le opzioni più popolari rende un disservizio ai grandi font emergenti che non hanno ottenuto l’esposizione necessaria per apparire nelle classifiche.
Ecco alcuni dei nostri preferiti che ancora non sono apparsi in cima alle liste.
11. Noto Sans / Serif
Noto è un font commissionato da Google che è disponibile sia in versione serif che sans-serif. Sta ricevendo aggiornamenti regolari, e ora ci sono ben oltre 100 font Noto, con altri che arrivano continuamente!
L’obiettivo di Noto è quello di coprire tutti gli alfabeti e i caratteri di varie lingue mentre il suo design distinto rimane armonioso tra centinaia di famiglie di font diverse. Tra i suoi font derivati troviamo i popolari Noto Sans KR e Noto Sans JP.
12. Nunito Sans
Nunito Sans è un’opzione sans-serif che sta rapidamente crescendo in popolarità. Il suo uso è triplicato tra il 2018 e il 2019, e diventa più popolare di anno in anno.
13. Concert One
Concert One è un bizzarro carattere arrotondato che funziona alla grande per i titoli. Il suo design non convenzionale attira senza dubbio lo sguardo.
14. Prompt
Prompt è un sans-serif proposto dallo studio di communication design tailandese Cadson Demak. Non contiene loop (l’equivalente tailandese di sans-serif) e include sia caratteri thai che latini.
15. Work Sans
Work Sans è un font sans-serif ottimizzato per l’uso su schermo. I designer raccomandano di usare gli stili middleweight per qualsiasi testo tra i 14px e i 48px.
Come Creare le Migliori Combinazioni di Google Fonts
Se pensavate che provare a scegliere un font da Google Fonts fosse difficile, aspettate a provare l’accoppiamento sul vostro sito! Per fortuna, questo non è un problema che dovete risolvere (a meno che non lo vogliate) perché potete usare un paio di modi per trovare le migliori combinazioni di Google Fonts.
In primo luogo, lo stesso sito web di Google Fonts suggerisce gli abbinamenti più popolari se si scorre la pagina verso il basso:
Oltre a questo, potete anche usare un sito come Font Pair per avere più suggerimenti.
Migliori Pratiche per l’Utilizzo di Google Fonts su WordPress
Una volta che avete trovato i font perfetti per il vostro progetto, ecco alcune buone pratiche per utilizzare Google Fonts su WordPress.
Limitare il Numero di Pesi dei Font Che Usate
Alcuni di questi font – come Montserrat e Raleway – hanno 18 pesi diversi. Se questo, da un lato, è un bene per ampliare le vostre opzioni, non vi conviene caricare tutti i 18 pesi sul vostro sito WordPress perché i tempi di caricamento aumenteranno moltissimo.
Seguire questa regola è molto importante!
Per la maggior parte dei font, una buona regola empirica è quella di usare al massimo tre pesi:
- Regolare
- Corsivo
- Grassetto
Molti siti WordPress che vediamo al giorno d’oggi saltano addirittura il corsivo e usano solo due diversi pesi di carattere.
Se state incorporando Google Fonts in autonomia, potete scegliere esattamente quali pesi includere. Per prima cosa, visitate la pagina di un font e poi fate clic su Select this style accanto a quelli che volete.
La maggior parte dei temi WordPress oggi includono modi semplici per scegliere quali Google Fonts e pesi si desidera utilizzare. Ma non tutti coloro che sviluppano temi si concentrano sulle prestazioni. Quindi, in alcuni casi, potrebbe essere meglio disabilitare i Google Fonts nel vostro tema e aggiungerli da voi.
Anche i font variabili stanno iniziando a diventare popolari e sono supportati da tutti i browser moderni. Questi sono fantastici perché permettono a un file di font di trasformarsi grazie a proprietà diverse. Google Fonts ha un sacco di font variabili tra cui scegliere, e potete anche restringere la vostra ricerca a quelli specifici.
Considerate di Ospitare Localmente i Font di Google
Come alternativa al servire i font dal server di Google, potete anche ospitare i font localmente, offrendo vantaggi in termini di prestazioni. Tuttavia, ricordate che la maggior parte dei font di Google sono probabilmente già presenti nella cache dei browser delle persone. Quindi vi consigliamo di fare i vostri test di performance.
Se state usando un font premium diverso dai font di Google, come il font “Brandon” che usiamo sul nostro sito Kinsta, ospitarli localmente (e servirli dal vostro CDN) è la strada migliore. Per saperne di più su questo argomento, controllate i nostri articoli su come ospitare i font localmente.
Scegliere un Font Che Verrà Aggiornato in Futuro
I font sono proprio come i plugin e i temi di WordPress: nel tempo, ricevono aggiornamenti e correzioni che li rendono ancora migliori. E mentre la posta in gioco non è così alta come per i plugin di WordPress, può essere vantaggioso scegliere un font che riceve aggiornamenti regolari. Per esempio, la famiglia Noto di Google ha ricevuto aggiornamenti regolari dal 2014.
Poiché la maggior parte dei font su questa lista sono popolari, è molto probabile che qualsiasi font su questa lista riceverà aggiornamenti e miglioramenti regolari. E se decidete di optare per un font fuori dalla lista, assicuratevi che sia abbastanza popolare da ottenere attenzione anche nel futuro.
Non Dimenticate l’Accessibilità
Secondo l’Organizzazione Mondiale della Sanità, in base ai dati raccolti nel 2015, si stima che 253 milioni di persone vivano con problemi di vista: 36 milioni sono cieche e 217 milioni hanno problemi di vista che vanno da moderati a gravi. Inoltre, il numero di persone con qualche forma di menomazione è salito a 2,2 miliardi a partire dal 2024.
Quando usate Google Fonts, potete controllare il suo aspetto con i CSS, come il colore e la dimensione. Quindi non dimenticate di seguire le linee guida 2.0 per l’accessibilità dei contenuti web (Web Content Accessibility Guidelines o WCAG). Questo assicurerà che il vostro contenuto sia facilmente accessibile a chiunque.
Seguire queste linee guida renderà il contenuto accessibile a una gamma più ampia di persone con disabilità, tra cui cecità e ipovisione, sordità e ipoacusia, difficoltà di apprendimento, limitazioni cognitive, movimento limitato, disabilità del linguaggio, fotosensibilità, e combinazioni di queste. – Web Content Accessibility Guidelines (WCAG) 2.0
Una linea guida da tenere sempre in considerazione è il contrasto dei colori. Il font che avevamo scelto per un vecchio design del sito di Kinsta era un po’ troppo chiaro, e diverse persone ci avevano espresso le loro preoccupazioni perché lo rendeva difficile da leggere. L’ultima cosa che volete è pubblicare un contenuto fantastico, ma che si converta in uno sforzo per la vista delle persone!
Potete usare uno strumento come il Color Contrast Checker di WebAIM per verificare se i colori dei vostri font superano le raccomandazioni ufficiali. Per esempio, potete vedere che i colori degli articoli del nostro blog ora superano il test. 👍
Come Aggiungere Google Fonts a WordPress
Una volta scelti uno o due font, il passo finale è quello di aggiungerli al vostro sito web. Grazie a Google Fonts, questo compito è ancora più facile del solito.
Supponiamo che vogliate portare un font sul vostro sito web. In questo caso, avete tre opzioni: installare un plugin come Easy Google Fonts o Google Fonts Typography, usare l’API di Google Fonts per caricare il font sul vostro sito, o scaricarlo manualmente e ospitarlo sul vostro sito.
Se avete bisogno di sapere come cambiare i vostri font in WordPress, abbiamo scritto una guida dettagliata per aiutarvi.
Riepologo
I Google Font sono fantastici e utilizzati da milioni di siti web. Rendono il web più piacevole, aperto, veloce e accessibile grazie ai loro solidi principi di tipografia e iconografia.
Per garantire una migliore esperienza complessiva per i vostri visitatori, vi raccomandiamo di seguire le migliori pratiche per i font, come limitare il peso dei font, ospitare i font localmente (se necessario) e attenervi alle linee guida di accessibilità.
Ora tocca a voi: quali sono i vostri font e coppie di font preferiti da Google Fonts? Fatecelo sapere qui sotto nei commenti, e non dimenticate di leggere la nostra guida approfondita sui font WordPress!
Salman Ravoof é uno sviluppatore web autodidatta, uno scrittore, un creatore e un grande ammiratore del Free and Open Source Software (FOSS). Oltre alla tecnologia, è appassionato di scienza, filosofia, fotografia, arte, gatti e cibo. Per saperne di più su di lui, visitate il suo sito web o contattate Salman su X.
Lascia un commento