Cosa sono i Google Fonts? Ecco come primo articolo di questo blog, voglio parlare di un tema che è molto caldo tra graphic e web designers: i fonts.
Dopo un periodo di pausa, fatto di riflessioni su come realizzare il nuovo sito personale; eccomi qua..Bentornati tutti sul mio sito! Qualche anno fa avevo già realizzato un blog che mi aveva portato qualche soddisfazione; ed uno degli articoli più letti e visitati era proprio quello sui Google Fonts.
Ed allora ricomincio da qui, dai fonts scelti da Google..L’argomento è ampio, e pieno di sfumatura, ma in questo articolo voglio dare una breve guida sull’argomento, ma partiamo dall’inizio.
Cosa sono? ..Google sinonimo di qualità
Da come si può percepire dal nome, sono dei fonts che sono scelti e pubblicati da Google sul sito ufficiale del progetto che è costantemente aggiornato.
Qui si possono trovare tantissimi fonts, che non solo sono belli esteticamente ma seguono anche degli standard ben precisi, per far sì che siano bel leggibili su tutti i device.
Infatti la rivoluzione portata dal responsive design, ci obbliga a scegliere caratteri sempre ben leggibili che possano essere letti su desktop, su tablet e su smartphone.
Se si vuole andare sul sicuro e scegliere un font adatto al tuo sito, senza cadere in errori, la scelta giusta è affidarsi a quelli che si trovano in questo sito..Raleway, Open Sans, Roboto ed altri fonts sono utilizzati da anni dai designer più affermati e non solo.
Il progetto permette di visualizzare, scegliere e poi utilizzare dei font completamente free..Si possono scaricare con un veloce download, oppure includendoli nel proprio progetto web attraverso i CSS, per dare un tocco moderno ed elegante al sito web.
Perchè scegliere i Google fonts?
I motivi per cui utilizzare questi fonts sono tanti, ma sicuramente il primo e più importante è che sono gratuiti.
Non sono come tanti progetti, in cui tanti font ma tutti a pagamento.
Qua si va sul sicuro, e tutti i font che si trovano sul sito ufficiale sono gratuiti e utilizzabili in pochissimi passi che descriverò nei paragrafi successivi.
L’0altro vantaggio è che sono fonts selezionati e raccolti da Google secondo alcuni standard di selezione.
Qui si si trovano dei font facilmente riutilizzabili nei CSS, sono leggibili sia su desktop e sia su smartphone, inoltre hanno tantissime varianti nel ‘peso’.
Qui non si trovano font super elaborati e pieni di grazie inutili e fastidiose all’occhio, ma font eleganti e dal design moderno, adatti per progetti di qualsiasi contesto
La mia esperienza con i Google Fonts
Ho voluto scrivere questo articolo, perchè utilizzo frequentemente i Google Fonts perchè, essendo selezionati da Google, mi danno sicurezza sul fatto che siano ben leggibili e che non rischio di trovare dei fonts poco leggibili sui device più piccoli.
Visitando la sezione del mio portfolio, ad esempio il sito di Chiara Mangili è stato reralizzato utilizzando il Google Fonts Nunito.
E ho trovato molto bello il fatto che i Google fonts più utilizzati hanno molti ‘pesi’ che si possono utilizzare.
Infatti, secondo me, uno dei lati negativi nell’utilizzare font provenienti da siti meno autorevoli, è che si trovano dei font che hanno una variante in regular e una in bold.
Questo non aiuta chi, come me, ama utilizzare più pesi all’interno del layout per dare più importanza ad alcuni elementi dell’interfaccia rispetto ad altri.
Se si utilizzasse un solo peso per tutti gli elementi della pagina, avremmo un design piatto.
In cui non si da importanza ad elementi tipografici come in titoli o sottotitoli, che devono essere evidenziati per dare maggior ordine alle nostre parti testuali.
Immaginate una pagina fatta solo di font con un peso in light..L’utente non riuscirebbe a trovare subito la parte di testo che gli interessa.
Infatti, in alcuni casi l’utente legge il tuo articolo
Da dove iniziare?
Per prima cosa, bisogna andare sul sito, dove fin da subito si potrà visualizzare una miriade di Google Fonts selezionati con cura e divisi per categoria e tipologia…Dal serif all’handwriting, per venire incontro a qualsiasi esigenza e progetto.
Qui sopra vediamo uno screenshot della home ufficiale e, da come si nota, tutte i font sono racchiusi in una card dove si trovano le seguenti informazioni:
- Nome del font
- I designer che hanno progettato il font
- Il numero di stili di ogni font
- Una preview del font
Già da qui, si hanno le informazioni più importanti, e cliccando su ognuna di esse, si arriva alla pagina di dettaglio.
Qui si trovano tutte le preview dei vari ‘pesi’ e declinazione del Google Fonts selezionato; inoltre in cima alla pagina di dettaglio si può utilizzare un form per ingrandire/diminuire il carattere, oltre a scrivere il testo della preview, questo ci permette di fare tutti i test e le prove utili prima di fare la scelta definitiva.
Quindi abbiamo tutti gli strumenti utili per fare la scelta corretta e avere un font che si abbina correttamente alla comunicazione visiva del brand, fa tutta la differenza del mondo.
Quando abbiamo scelto quale font utilizzare, possiamo passare al passo successivo che è la creazione del pacchetto da scaricare o da includere nel nostro progetto.
Come selezionare il font ideale?
Anche qui, il processo è semplice ed intuitivo, dato che il sito ufficiale, da pochi anni, ha subito un redesign rendendolo usabile e, per l’appunto, molto intuitivo..grazie a un design minimale e pulito.
Per inserire i Google Fonts nel proprio progetto, innanzitutto bisogna selezionarlo e creare il proprio ‘pacchetto’ sempre tramite il sito ufficiale, infatti appena si è scelto il font si deve cliccare sull’icona con il simbolo + che si trova alla destra delle declinazioni del font family.
Dopo aver selezionato il font, potrete rivedere tutti i font family e decidere come inserirlo all’interno del tuo progetto.
Se si clicca sull’icona in alto a destra del menu del sito ufficiale, si aprirà una sidebar e li si potrà gestire l’inserimento dei files, ed eliminare i Google Fonts che non sono più di nostro gradimento.
Perciò con veramente sforzo, possiamo creare il pacchetto più adatto alle nostre esigenze, selezionando più di un fonts.
Come si può notare dalla figura qui sopra, il componente 1 è il bottone che cliccandolo ci permette di mostrare o nascondere tutti fonts selezionati.
Il componente 2 è la declinazione selezionata del Goggle Font, e si possono aggiungere o togliere in qualsiasi momento per creare il pacchetto ideale per il progetto da realizzare.
Invece il componente 3 è un’icona che, se cliccata, permette di eliminare la declinazione in modo rapido e intuitivo.
Ecco…come si può vedere da qui, è estremamente semplice selezionare, salvare e scaricare il proprio Google Font.
Come inserirli nei progetti?
Fatti tutti i procedimenti spiegati in precedenza, ora non rimane altro che includerli nei propri progetti.
Anche qui ci sono diverse strade, innanzitutto se il progetto è editoriale o è un file per la stampa, basta solo scaricare la cartella generata.
Da come si può vedere qui sopra, il bottone da cliccare è quello indicato nell’immagine e così si scaricherà la folder appena generata.
Successivamente, si deve scompattare la folder in formato ZIP e installare con un click tutti i Google Fonts.
Invece, nel caso bisognasse creare un progetto web con html5, css3 ecco che qui, diventa leggermente più difficile ma nulla di impossibile..
Comunque ci sono tre strade nel caso si stia creando un progetto web e si vuole includere un Google Fonts:
- Includere il file nei CSS con la proprietà @import
- Includere il link del fonts nel tag head del file HTML
- Utilizzare la proprietà @font-face
Delle tre sicuramente la soluzione più facile è quella utilizzando la proprietà @import perchè ti permette di avere tutto all’interno del tuo file CSS, probabilmente per descrivere al meglio le tre soluzioni ci vorrà un’articolo più dettagliato solo per questi 3 concetti.
In che progetti utilizzarli?
Google Fonts è un progetto pensato per raccogliere i fonts più belli e dare una soluzione ai designers che sono sempre alla ricerca di un font bello e leggibile allo stesso tempo.
Sì..ma su che progetti possono essere utilizzati?
Questi fonts sono principalmente usati su progetti web perchè sono ben leggibili anche sui dispositivi più piccoli, si possono utilizzare ancche nella fase di design dell’interfaccia utente con Adobe XD o Figma.
Ma non sono solo adatti per progetti web, ma anche per altre categorie..
Ad esempio, io li ho utilizzati in alcuni loghi che ho realizzato e nella realizzazione di alcune brand identity o in progetti editoriali e di impaginazione per la stampa.
Perciò, sì..Sono da utilizzare assolutamente sulla realizzazione di siti web, UI/UX ma anche su progetti per la stampa.
Come visto, nei paragrafi precedenti, sono facili da scaricare e da installare sul tuo pc, ora tocca a voi..Che Google Fonts scegliete?