Sei qui: Home 5 Web Design 5 Google Font: Cos’è, Come scaricare un Font e Guida ai Migliori Font per Grafiche e Siti Web

Google Font: Cos’è, Come scaricare un Font e Guida ai Migliori Font per Grafiche e Siti Web

da | 7 Apr 2021 | 0 commenti

Diciamoci la verità, quando bisogna scegliere un font per il proprio sito web o per il sito di un cliente la scelta è complessa. Un tempo esistevano una ventina di font che rappresentavano lo standard sul web, oggi le famiglie di font sono centinaia.

Il font influenza due aspetti fondamentali dell’user Experience dell’utente, da una parte la leggibilità quindi la capacità di leggere al meglio un contenuto. Dall’altra, se conosci le basi del web design sai che “l’aspetto” è legato al branding, quindi una particolare forma può dare davvero l’idea di unicità ad un progetto web.

In questo articolo vedrai alcuni criteri per la scelta del font per il tuo sito web, una Guida Completa all’utilizzo di Google Fonts, la principale libreria gratuita offerta da Google utilizzata dai designer di tutto il mondo.

Vedrai poi come usare i Google fonts su WordPress che è il principale CMS di cui ti parlo all’interno di questo blog e infine una lista dei migliori 15 font utilizzati dalle grandi aziende.

Cos’è Google Fonts?

cos'è google font

Google Fonts è una libreria gratuita di caratteri che Google mette a disposizione degli utenti per creare i loro progetti.

Questo progetto ha ormai più di dieci anni ed è diventato il sito di riferimento per tutti coloro che voglio scaricare dei font sul proprio pc, progettare delle grafiche originali e utilizzare il font per realizzare un sito web.

Questa libreria viene utilizzata da tutti i designer – e proprio perché Google è il principale motore di ricerca con oltre il 98% di utilizzo in Italia – è divenuta lo standard per la leggibilità dei progetti web.

I criteri per scegliere il Google font

Ti sarà capitato di entrare in un sito prettamente al femminile e vedere un font particolarmente elegante giusto? Ecco, per prima cosa il font identifica lo stile che vuoi dare al progetto online che a sua volta è determinato tanto anche dal tipo di pubblico a cui ti rivolgi.

Nel web design esistono in qualche modo delle regole implicite legate a font, colori e forme in base ai settori di appartenenza, avrai notato che il verde viene utilizzato per il benessere, la salute e in generale tutto ciò che appartiene alla natura.

Il blu è un colore che infonde fiducia e lo avrai visto soprattutto in ambito aziendale, soprattutto le aziende che si occupano di web. Ancora l’arancione nel mondo della borsa e degli investimenti, insomma come per i colori avviene la stessa cosa per i font.

Quindi potremmo dividere i criteri di scelta del carattere tipografico in base a:

  1. Settore/Audience a cui ti rivolgi
  2. Gusto estetico personale e idea che vuoi trasmettere nella mente dell’utente
  3. Leggibilità del carattere, fondamentale soprattutto da mobile

 

Scegliere il font in base al Settore/Audience

I caratteri si dividono in due grandi famiglie: serif (con grazie) con l’esempio del classico Times New Roman che tutti conosciamo e sans serif (senza grazie) come l’Arial .

Solitamente, l’accostamento ideale è un font serif per i titoli e un font sans serif per il corpo del testo, così da essere riconoscibile, ma allo stesso tempo ottimizzare la leggibilità.

I font con grazie sono sicuramente più caratteristici e nel tempo sono stati associati sempre di più al “carattere” di un brand, che detto così può sembrare strano, ma il segreto per riconoscere quale sia il tuo font ideale sta proprio nel target.

Sempre continuando gli esempi avrai notato che nei siti web dedicati al mondo dello sport come palestre e crossfit si opta per font con linee spigolose e un corpo spesso. Questo proprio per identificare meglio l’audience, personalmente quando vedo questi font mi viene in mente la tonificazione muscolare.

Non scherzo.

Ti basta scrivere crossfit website per farti un’idea.

font per sport, ricerca google

All’interno della pagina tutti i titoli presentano un font con angoli appuntiti, in maiuscolo e con un colore ad alto contrasto rispetto allo sfondo bianco. Questo per accentuare maggiormente il messaggio.

Come puoi notare quando il giusto design viene accostato alle giuste parole il risultato è davvero notevole.

Scegliere il font in base all’idea che vuoi trasmettere

Font, colori e scrittura rappresentano il miglior modo di veicolare un messaggio, ecco perché spesso si associano questi sia al settore di appartenenza che all’idea che si vuole trasmettere.

Ci sono dei font che si prestano bene ad essere più “classici”, mentre alcuni danno subito nell’occhio perché estrosi. Secondo me quando si fa la scelta bisogna tenere conto di tutti i criteri e non solo dei propri gusti estetici.

Un’altra chicca interessante che ti segnalo e che non troverai su altri siti è che se hai un progetto particolare per cui vuoi trasmettere una precisa sensazione, puoi scrivere la sensazione accostata alla parola font.

ricerca font per stato emotivo

Nell’esempio ho cercato “calm font” ed ecco i risultati, alcuni magari non saranno azzeccati, ma altri sì e ottimizzerai così il tempo facendo una ricerca più specifica. Forse su Google Fonts non troverai esattamente quel font, ma potrai affinare la tua ricerca trovandone uno simile.

Ora la domanda sorge spontanea: perché usare proprio i google fonts?

Tre buone ragioni:

  • Vengono scansionati dal bot di Google più velocemente (le prestazioni per un sito sono fondamentali)
  • Sono gratuiti e installabili sul tuo sito, mentre su altri siti quelli più particolari li troverai giustamente a pagamento
  • Sono realizzati con precisi standard della comunità di Google, quindi sono una certezza in termini di compatibilità

 

Scegliere il font in base alla leggibilità

Occupandomi di Ottimizzazione per motori di ricerca per me questo aspetto riveste un ruolo fondamentale, perché Google attribuisce un valore all’esperienza dell’utente sulla tua pagina e la scelta del font implica che un contenuto sia più o meno leggibile.

Nel mio caso la scelta del font ha tenuto conto principalmente di questo aspetto, optando per un font che sia leggibile su tutti i dispositivi, di buone dimensioni e in qualche modo già riconoscibile perché utilizzato da numerose applicazioni web. 

Un’altra cosa spesso sottovalutata sono le impostazioni legate alle dimensioni del font e all’interlinea, ricorda sempre che il testo deve essere ben leggibile, quindi come dimensioni stai da 16 a 20 e come interlinea da 1,3 a 1,5.

Il colore del font deve essere leggibile, ma non per forza un nero #000000, puoi optare anche per un codice colore più tenue come un nero/grigio #1d2b35.

Come faccio a scaricare un font di Google?

Cosa fondamentale da sapere prima di scaricare un font, di seguito te ne indicherò alcuni che hanno la maggior parte dei caratteri, ma se tu dovessi sceglierne uno in autonomia verifica sempre che ci siano anche numeri e simboli che utilizzerai nel tuo sito.

Infatti, qualche volta capita che vengano realizzati dei font che includono solo le lettere e quando hai bisogno dei numeri diventa un problema.

Per scaricare un font di Google è semplicissimo ti basta andare sul sito ufficiale di Google Fonts, selezionare il font e cliccare su Download. Dopodiché troverai sul tuo desktop il file in zip che potrai aprire e al suo interno ci saranno due file: primo file in ttx e il secondo il OFL.

come scaricare google font

Se vuoi installare il font nel tuo pc ti basta avere il file ttx, per esempio nel mio caso ho aperto il file, cliccato su installa e il gioco è fatto.

Mentre se vuoi installare un font sul tuo sito devi avere oltre che la versione ttx anche quella woff, perché alcuni browser altrimenti non lo leggeranno. Dopodiché ti basta inserire il font nella cartella del tuo sito e richiamarlo con una linea di codice in style.css.

Troppo complicato? Non ti preoccupare, nel caso di WordPress lo dai con due clic grazie ad un plugin o ancora meglio scegli un tema come il mio che ti mette a disposizione tutti i Google fonts, insomma un investimento che ti fa ottimizzare tempo, spazio e installazioni di plugin.

Come usare i font Google su WordPress?

Se hai un tema professionale hai direttamente a disposizione tutti i Google Fonts all’interno del tuo sito web, quindi non hai bisogno di nessuna integrazione di plugin.

Per esempio il tema che io utilizzo per questo blog e che ti consiglio è Divi di Elegant themes, con sui è possibile creare progetti di un altro “pianeta” con le centinaia di opportunità che offre.

Due risorse per te:

Se hai Divi ti basta andare in Personalizza – Tipografia e selezionare il tuo font tra centinaia di Google fonts a disposizione, invece nel caso in cui tu non avessi un tema che integra i font di Google puoi installare un plugin.

come cambiare font su wordpress

I due principali plugin che fanno questo sono Easy Google Font e Google Fonts Tipography, il primo più famoso e utilizzato del secondo, per cui ti consiglio di scegliere quello. Nel caso in cui non fosse compatibile con il tuo tema puoi optare per il secondo.

Quando avrai installato il plugin nella sezione Personalizza comparirà una nuova voce dove potrai scegliere il font per i titoli e per i paragrafi.

Come scoprire il font di un sito

Ti è mai capitato di entrare in un sito e dire: “Wow che bel carattere che ha utilizzato!” e magari valutarlo per uno dei tuoi progetti.

Per scoprire il font di un sito è semplicissimo, apri Google Chrome, vai sul sito di cui vuoi conoscere il carattere, clicca sul tasto destra ispeziona e ti si apriranno gli strumenti per sviluppatore.

A quel punto posiziona il puntatore del mouse sul paragrafo e vedrai che affianco comparirà una finestra con delle indicazioni tra cui il font, le dimensioni e il codice colore utilizzato.

come scoprire font sito web

I 15 Migliori Google Fonts per il tuo sito e le grafiche

lista migliori google font

Non se hai mai avuto l’impressione che quando ti trovi in quelle situazioni in cui hai a disposizione tante scelte non sai veramente dove andare a parare, ecco a me succede di continuo, motivo per cui faccio una “lista” di elementi e poi pian piano restringo il campo.

Quindi invece di inserire centinaia di Google fonts che puoi tranquillamente trovare sul sito ufficiale ho deciso di segnalarti quelli che rispettano i criteri di cui ti ho parlato sopra, affianco ad ognuno troverai il link da cui potrai scaricarlo.

Per fare questa lista ho tenuto conto di diverse fonti, quella più importante è il sito degli Awwwards, il sito ufficiale in cui vengono premiati i migliori siti web sul pianeta, un punto di riferimento per tutti i web designer.

P.S.: ti consiglio di metterlo tra i miei preferiti insieme a questo blog!

1. Alegreya

Alegreya font

alegreya google font

2. Josefin sans

Josefin sans font

josefin sans, google font

3. Lora

Lora font

lora, google font

4. Libre Franklin

Libre franklin font

libre franklin, google font

5. Merriweather

Merriweather font

merriweather, google font

6. Montserrat

Montserrat font

montserrat, google font

7. Nunito

Nunito font

nunito, google font

8. Open sans

Open sans font

open sans, google font

9. Oswald

Oswald font

oswald, google font

10. Oxygen

Oxygen font

oxygen, google font

11. Playfair Display

Playfair display

playfair display, google font

12. Poppins

Poppins font

poppins, google font

13. Raleway

Raleway font

raleway, google font

14. Roboto

Roboto font

roboto, google font

15. Vollkorn

Vollkorn font

vollkorn, google font

In questa lista avrai notato che mancano dei font calligrafici, cioè quei particolari font che danno l’idea di simulare la scrittura a mano.

Non li ho inseriti perché penso che vadano bene per dei progetti molto “visivi” in cui il contenuto testuale è relativamente poco, come: grafici, fotografi, designer. Nel caso di un blog eviterei caratteri di questo genere che rischiano di limitare la leggibilità, soprattutto su schermi con dimensioni ridotte.

Consigli di web design

  • Tieni conto del tone of voice che vuoi dare per scegliere il font
  • Prima di installare i font definitivi sul tuo sito fai delle prove su altri progetti sperimentali o in locale
  • Utilizza al massimo 2 font per il sito
  • Limita il peso dei font, esempio: utilizza solo il regular e il bold
  • Adotta dimensioni tra 16 e 20 per i paragrafi
  • Usa un’interlinea che sta tra 1.3 e 1.5, così da agevolare la lettura
  • Scegli un colore che abbia un buon contrasto

Mi fa piacere sempre piacere avere un feedback da parte tua, quindi dimmi che font hai scelto per il tuo progetto nei commenti.

Un saluto,

Nadia

P.S.: magari ti interessano anche altri articoli simili, prova a dare un’occhiata

Domande frequenti

Qual è il font di Google?

Il font di Google si chiama Open sans e lo puoi scaricare su Google fonts in modo gratuito e utilizzare per le tue grafiche e il tuo sito web.

Come si scaricano i font da Google Font?

Per scaricare i font da Google fonts vai sul sito ufficiale, seleziona il font che desideri utilizzare e clicca sulla tipologia di peso che preferisci. Vedrai che i pesi più frequenti sono il thin (fine), regular (standard), bold (più corposo), se invece vuoi scaricare l’intero pacchetto della famiglia di font clicca su download in alto Download family.

Come si usano i font di Google?

I font in generale, non solo quelli di Google, si possono installare sul tuo pc o Mac semplicemente andando sul sito ufficiale e cliccando su download affianco al font. Quando hai installato un font sul tuo pc in automatico dovrebbe diventare disponibile in tutti i programmi, quindi lo vedrai per esempio su Word, Excel, Powerpoint.

Non solo, se hai dei programmi di grafica come Photoshop e Illustrator apparirà nella colonna dei font, nel caso non dovessi vederlo riavvia il programma.

Come installare nuovi font su Photoshop?

Se hai Mac vai sul sito in cui è presente il font, come Google Fonts e clicca su Download. Quando hai fatto apri la cartella zip, vai sul file .ttf e clicca su Installa.

Se hai Windows probabilmente non vedrai il pulsante installa, ti basterà copiare e incollare file .ttf nella cartella: Computer – C – Windows – Font

Che cosa sono i font?

La parola font è sinonimo di “carattere” infatti viene utilizzata per indicare un carattere tipografico, spesso si utilizza anche l’espressione “famiglia di font” per specificare la tipologia. Inoltre il carattere può essere maiuscolo, minuscolo, grassetto, corsivo.

Che carattere usano Facebook e Instagram?

Facebook e Instagram utilizzano i font di default dei rispettivi sistemi Windows ed Apple, per Windows utilizza il Segoe UI, mentre per Apple il font San Francisco utilizzato anche per tutte le altre applicazioni (e per il sito ufficiale).

Qual è il font usato da Amazon?

Non ci crederai mai ma Amazon è rimasta sul basico, per il suo E-commerce utilizza Arial che puoi vedere installato sul tuo pc aprendo Word.

Qual è il font usato da Apple?

I font utilizzati da Apple sono di due famiglie San Francisco e New York:

  • San Francisco PRO
  • San Francisco Mono
  • San Francisco Compact
  • New York

Puoi visitare la pagina ufficiale dedicati ai font Apple dove puoi scaricarli.

Se vuoi utilizzare questi font attenzione a leggere bene la licenza e i casi in cui puoi utilizzarli, come tutti i font creati per progetti ad hoc hanno spesso delle limitazioni soprattutto per i progetti commerciali.

Nadia Kasa

Nadia Kasa

Blogger & SEO Specialist

Ciao! Ti do il benvenuto nel mio blog dove troverai tanti consigli su come creare un sito e soprattutto come farlo crescere grazie alla SEO, l’ottimizzazione per motori di ricerca.
Se hai bisogno di un alleato per posizionare il tuo sito dai un'occhiata al mio servizio di Consulenza SEO.

Crea oggi il tuo sito web professionale

👉 Installa il Tema sul tuo sito con 2 clic

👉 Scegli la tua Grafica tra +100 Layout già pronti per tutti i settori

👉 Crea le pagine del sito web da zero in modo semplice

Articoli che potrebbero piacerti:

Definizione di sito web

Definizione di sito web

Un sito web è un luogo virtuale costituito da una serie di pagine collegate tra loro raggiungibile da un motore di ricerca. Leggi l’introduzione.

Hai qualche domanda? Lascia un commento.

Mi fa piacere rispondere alle tue domande e sapere cosa ne pensi dell’articolo, lascia un commento.

0 commenti

Invia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

error: Il contenuto è protetto