Google Font: Come Scegliere il Font Giusto per il Web

Se stai creando la tua brand identity, o stai per lanciare il tuo progetto online, una delle fasi cruciali è la scelta del font.

Anche se viene spesso sottovalutato, si tratta di un elemento importantissimo per tutto il mondo del design. Scegliere il font giusto potrebbe determinare il successo di un progetto piuttosto che il suo fallimento.

In questo articolo vogliamo elencarti alcuni punti da valutare quando devi scegliere un font. Inoltre ti spiegheremo come utilizzare la libreria Google Fonts.

Durata nel Tempo

La prima cosa da fare è individuare lo scopo di utilizzo del font. Devi usarlo per un design che duri nel tempo o per un progetto a breve termine?

Per progetti a lungo termine (come ad esempio un sito web, una newsletter periodica e così via) conviene puntare su font con diverse varietà di stili e grassetto. Questa caratteristica ci permette di creare design elaborati senza cambiare mai la famiglia del font.

Alcuni esempi:

• Roboto
• Open Sans
• Work Sans

Se invece stiamo elaborando una grafica per un progetto a breve termine (ad esempio un poster, una locandina, e così via) potremmo non aver bisogno di molti stili e grassetti. In questo caso possiamo utilizzare anche font mono-stile.

Alcuni Esempi:

• Chango
• Lobster
• Berkshire Swash

Leggibilità

Molte persone si limitano a scegliere il font più bello esteticamente senza considerare altri fattori fondamentali come la leggibilità. Utilizzare un carattere con scarsa leggibilità può rendere il testo difficile da leggere e creare un ostacolo nella fruizione dei contenuti.

Scegliere un Font Adatto al Brand

Ogni font ha la sua “personalità” e può influenzare incosciamente la percezione che le persone hanno del tuo brand.

Ad esempio, uno studio legale dovrà utilizzare un font sobrio e squadrato per trasmettere serietà e affidabilità, mentre un asilo nido potrà utilizzare un carattere più arrotondato e particolare per comunicare gioia e allegria.

Abbinamenti tra diverse Famiglie di Font

È buona norma evitare di utilizzare molte famiglie di font per non appesantire i tempi di caricamento delle pagine web. Questo potrebbe sembrarti un limite, ma possiamo assicurarti che due famiglie di font bastano per creare design eccezionali.

Ecco alcuni consigli per l’abbinamento dei font:

Abbina font con grazie (Serif) e font senza grazie (Sans Serif).

Usa le diverse varianti della stessa famiglia di font.

Crea contrasto visivo.

Google Font

Fino a qualche anno fa, sul web, veniva utilizzata una cerchia ristretta di caratteri per garantire una maggiore compatibilità con tutti i dispositivi. Ad esempio, se utilizzavi un carattere che l’utente non aveva installato sul suo pc, veniva visualizzato un font standard che non aveva niente a che fare con l’armonia grafica del sito. L’unica soluzione era accorpare il font direttamente sulla pagina web, tuttavia, bisognava possedere una licenza a pagamento.

Oggi questo problema è stato superato grazie alle librerie di web font gratuiti. Quella più utilizzata è senza dubbio Google Font, con oltre di 1000 font disponibili.

Se il tuo brand opera maggiormente sul web, ti conviene utilizzare le famiglie di Google Font per costruire tutta la brand identity e mantenere una coerenza grafica tra online e offline.

Come Utilizzare Google Font

Con Google Font, installare un carattere all’interno delle tue pagine web è veramente semplicissimo. Vediamo come fare step by step.

Vai sul sito Google Font e scegli un font. Puoi usare i vari filtri per velocizzare la ricerca.
In questo caso utilizzeremo Roboto come esempio.

Clicca sul font che hai scelto e ti troverai su una pagina simile:

1. Nome del font e autore.
2. Pulsante per scaricare la famiglia di font sul pc e utilizzarla con i tuoi software grafici.
3. In questa casella puoi aggiungere del testo di prova per visualizzare un’anteprima.
4. La lista che contiene tutte le varianti della famiglia di font (corsivi e grassetti).
5. Pulsanti per selezionare le varianti da installare sul tuo sito.

Come già accennato nel precedente paragrafo, installare molti font peggiora le performance di velocità delle pagine web. Perciò valuta attentamente quante e quali varianti installare.

Una volta selezionati i font che ti interessano si aprirà questa scheda a destra dello schermo.

6. La lista dei font che hai selezionato.
7. La stringa di testo da inserire nella parte html.
8. La proprietà CSS che attiva il font.

A questo punto ci basterà prendere la stringa di testo (7) e inserirla all’interno del tag <head>.

<link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> 

Infine potrai attivare il font su qualsiasi elemento desideri con la proprietà CSS font-family (8). In questo esempio abbiamo selezionato il tag paragrafo <p>.

p{
   font-family: 'Roboto', sans-serif;
}

Il codice completo sarà:

<!DOCTYPE html>
<html lang="it">
<head>
    <title>Titolo della Pagina</title>

    <!-- Installazione del font -->
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> 

    <!-- Attivazione del font sul tag paragrafo-->
    <style>
      p{
         font-family: 'Roboto', sans-serif;
       }
    </style>
</head>
<body>
    <p>Questo è un paragrafo di esempio</p>
</body>
</html>

Approfondimenti

L’argomento dei font è veramente vastissimo e se vuoi approfondire ti invito a leggere questi libri che sono dei punti di riferimento per tutti i professionisti che si occupano di grafica.

• Sei proprio il mio typo – Simon Garfield
• Caratteri, testo, gabbia. Guida critica alla progettazione grafica –  Ellen Lupton
• The Geometry of Type: The Anatomy of 100 Essential Typefaces – Stephen Coles