Guida di Google Fonts per migliorare la grafica del tuo sito

Se non conosci il potere di Google Fonts non hai prestato attenzione alle tue landings. Né tanto meno agli elementi che le formano.

Se li gestisci bene, i fonts possono essere un’arma molto utile nella tua grafica. Di fatto esistono per dare forma al contenuto, rivelano la relazione tra gli elementi e ti dotano di personalità.

Perché allora, con uno strumento a tua disposizione come Google Fonts, lo ignori?

La scelta del font corretta riflette sempre le necessità specifiche di ogni progetto o campagna. E queste necessità non solo sono estetiche ma sono anche tecniche e funzionali.

Alcune font funzionano meglio di altri nei titoli e altri vanno meglio per i paragrafi. Alcune famiglie di font sono sufficientemente grandi per includere scripts e caratteri speciali. E se i font hanno diversi stili, come corsive e maiuscole, offrono più strumenti per adattarsi alla grafica in base a ogni landing.

Ma consideri questo elemento quando ottimizzi il tuo sito? Fai queste considerazioni? Pensi a quanto pratico sia o no un font?

Solo se lo fai troverai quello perfetto per la tua grafica

Cos’è e come funziona Google Fonts?

La prima cosa che devi sapere è che per usare Google Fonts nelle grafiche del tuo sito devi conoscere l’HTML e il CSS.

Ti consigliamo di imparare a includere fogli di stile CSS esterni a un documento HTML, conoscere le proprietà per definire la famiglia e lo stile del font. Inoltre devi sapere anche come si importano i fogli di stile e i files dei fonts esterni attraverso @import e @font-face.

Ora è il momento di approfondire Google Fonts.

Si tratta di uno strumento che mette a tua disposizione fonts gratuiti. Di fatto hai a disposizione circa 850 fonts differenti.

Google Fonts è stato lanciato nel 2011 e attualmente è uno degli strumenti più importanti per i grafici. Negli anni la piattaforma ha subito diverse modifiche.

Ora ha un’interfaccia facile da utilizzare e soprattutto molto visuale. Cosa che permette di trovare ogni tipo di font e stili a codice aperto. Anche se la cosa migliore è che puoi personalizzarli.

Tutto sulla directory di Google Fonts

Come puoi vedere nell’immagine, la directory è solo disponibile in inglese anche se è molto intuitiva ed è strutturata come segue:

1. Il menu superiore è formato da:
   1. Directory o home page.
   2. Featured o font esterni
   3. About, dove troverai risposte ai tuoi dubbi e documenti tecnici.
2. Il pannello a destra ti permette di effettuare ricerche che puoi filtrare per categorie, lingua, alfabeti o stili.
3. Nello stesso pannello puoi organizzare i risultati che trovi nel seguente modo:
   • Trending: in funzione delle ultime tendenze.
   • Popolare: dove troverai i font più usati.
   • Date Addedo: data in cui è stato creato il font.
   • In ordine alfabetico.

Per categoria.

Google fonts crea una classifica di font in funzione di cinque categorie principali:

• Serif. Questa categoria principale fa riferimento ai font con serif. Ossia gli ornamenti che le lettere hanno alla fine del bastone. Il Times New Roman è l’esempio più classico.
• Sans Serif. Questa categoria riunisce i fonts san serif. Anche se magari ti è più famigliare il termine ‘a bastone’. L’esempio più tipico è l’Arial.
• Display. La categoria display è una delle più decorative. La leggibilità non è il suo punto forte anche se graficamente rendono bene. Ti consigliamo di non utilizzare questi font sul tuo sito dato che non migliorano l’esperienza dell’utente.
• Handwriting. Sono i calligrafici o manoscritti. In molte landing puoi includere font di questa categoria di Google Fonts per simulare il tratto umano. Anche se quando lo fai devi evitare di usarli nel corpo del messaggio dato che la leggibilità non è semplice.
• Monospace. Questi font hanno la larghezza delle lettere uguali e si utilizzano in codice di programmazione.

Ti consigliamo, per ottimizzare il tuo sito, di scegliere font che si leggano al meglio. I font decorativi e manoscritti puoi usarli in occasioni speciali.

Conoscere gli stili

Per conoscere meglio Google Fonts dovresti sapere che nello stesso font ci sono più stili e varianti. Anche se lo strumento ti aiuterà ad effettuare le ricerche con tre criteri:

• Thickness. Si tratta dello spessore del tratto. Quindi, come poi immaginare, si divide in fine, normale e grassetto. Corrisponde al Font-weight di CSS. Ciò significa che si possono personalizzare gli spessori.
• Slant. Fa riferimento all’inclinazione del tratto. Puoi trovare l’inclinazione normale, che è la verticale, il corsivo o italico e l’obliquo. Nel CSS corrisponde al font-style.
• Width. Hai già compreso lo spessore e l’inclinazione dei font di Google Fonts e quindi ti resta solo la larghezza, definita dallo stile “Widht”.

Come posso scegliere tra le opzioni?

Ora che hai compreso il potenziale di Google Fonts magari i tuoi dubbi riguardano la tipografia che si adatta meglio allo stile del tuo sito.

Non tutti i font servono per le stesse funzioni. Scegliere bene i font per il web può fare la differenza del tuo spazio digitale. Per questo dovrai provare quale font si adatta meglio alla grafica, considerando che è importante la leggibilità.

Ma prima di lanciarti nelle prove per le tue landings devi avere chiaro alcuni aspetti chiave.

• Prima di tutto pianifica che direzione deve prendere la tua campagna e qual è il tuo pubblico target. Dovrai trovare un font che vada d’accordo con il tuo stile e che racconti le caratteristiche del tuo sito, rappresentando la tua azienda.
• Cerca di non saturare l’utente con troppi fonts. Ti consigliamo di usare due famiglie di fonts complementari. In questo modo sarai coerente.
• Uno dei migliori consigli quando usi Google Fonts è fare prove. È possibile che a te piaccia molto un font ma non si adatti al tuo pubblico target. Assicurati che funzioni.
• Prima di tutto scegli fonts che siano facili da leggere e da capire. Il dilemma viene ora. È meglio utilizzare un font con serif o sans serif? Come sai le lettere con serif hanno una terminazione decorativa come il Times New Roman e si usano in testi lunghi. Per esempio in un blog. Mentre le lettere sans serif si usano in generale per un target giovane.

Come usare Google Fonts?

Il funzionamento di questo strumento è semplice. Per scaricare o usare i fonts sul tuo sito devi solo seguire questi passi:

• Accedi a Google Fonts.
• Nella videata principale potrai trovare alcuni fonts che sono disponibili al momento. Se vuoi provarli potrai scrivere il testo e vedere come risultano.
• Hai anche a disposizione opzioni di personalizzazione dei font scelti per cambiare lo spessore o la dimensione.
• Se hai personalizzato il tuo font, potrai accedere al secondo step. Troverai il simbolo “+” nella parte superiore destra. Dovrai cliccare e accedere ad una videata con il font personalizzato da utilizzare.
• Apri la videata e accedi al font. Potrai accedere anche dal menu per fare nuove modifiche.
  • Il primo movimento consiste nello scaricare il font per averlo sul pc. In questo modo potrai usarlo su Photoshop o altri programmi.
  • Il secondo movimento ti permette di copiare il codice e includerlo nel tuo sito. Così darai un tocco personale ai tuoi testi e alla tua grafica in generale.
• Se ciò che vuoi è trovare un font concreto non dovrai fare altro che aprire il menu sulla sinistra e giocare con le caratteristiche menzionate anteriormente.

Ora che disponi dei font per web adeguati è il momento di registrare il tuo sito sulla piattaforma di content marketing Coobis, dove troverai 2000 inserzionisti tra cui individuare i principali brand di ogni settore. Cosa aspetti?