Come scegliere i font perfetti per il tuo sito – Parte 1

Ciao e bentornato/a sulla rubrica del Fabbro,
Pubblico questo articolo perché mi capita sempre più spesso di vedere siti web con font poco curati e sono convinto che tanti imprenditori e webmaster possano trarre giovamento dal conoscere meglio l’argomento.

Ho diviso l’articolo in due parti perché il tema è vastissimo, ma anche per una questione didattica:
utilizzerò questa prima parte per stimolare la tua curiosità sull’argomento e fare in modo tale che prima dell’uscita della seconda tu vada a spulciarti per bene i font di tutti i tuoi siti preferiti. Presto inizierai ad avere “la malattia del Fabbro” e guarderai i testi in internet con un occhio diverso da quello delle persone comuni.

tenshinan

Ma cosa sono i font? Ne hai mai sentito parlare?

Cos’è un font?

Un font è un file attraverso cui possiamo applicare dei caratteri.

Ok, mi rendo conto che detto così ha poco senso, prendiamola un po’ più larga.

La lettera “A” è un carattere (così come tutte le altre lettere). Questo carattere può essere composto da glifi diversi pur restando sempre “A”. Osserva l’immagine qui sotto.

lettera a in diversi font

L’insieme di tutti i glifi e di tutti i caratteri dell’alfabeto che seguono uno stile coerente compongono un “carattere tipografico”. Per meglio comprendere puoi osservare l’immagine qui in basso:

glifi del font roboto

Il font altro non è che un file da caricare su un sito per utilizzare al suo interno un carattere tipografico. Ad es. se vuoi utilizzare il carattere tipografico “Roboto” devi caricare sul tuo sito il file “roboto_regular.ttf.”

Se non hai idea di dove poter reperire questi tipi di file don’t panic: te lo spiego più avanti.

Perché i font sono importanti?

I font sono importantissimi per due motivi:

  1. influiscono sulla leggibilità dei contenuti del tuo sito.
  2. Sono a tutti gli effetti un elemento grafico del tuo sito e devono essere selezionati con molta cura.

Nonostante questo, molti siti web utilizzano un solo font per ogni elemento testuale e, nel 90% dei casi, questo font è “Lato” (o una versione che ne differisce leggermente).

Ma perché?

font

Mi sono posto questa domanda per tanto tempo e la conclusione a cui sono giunto mi ha lasciato esterrefatto.

Il motivo per cui tantissimi siti web utilizzano un solo font sul proprio sito e questo font è Lato è perché la maggior parte dei temi WordPress utilizza Lato come font.
In pratica i webmaster, per pigrizia, non cambiano il font iniziale del sito e lo lasciano così com’è.
Questa è veramente una cosa che mi fa uscire fuori di testa e che ti prego di evitare.
Si tratta di un errore che compie non solo chi è alle prime armi, ma addirittura agenzie e professionisti!

“Fabbro, ma come mai la maggior parte dei temi WordPress utilizza il font Lato o simili?”

Non soltanto perché è un font ben leggibile ma soprattutto perché è totalmente anonimo.
Proprio così, hai letto bene.

I temi WordPress che utilizzano di più questa tipologia di font sono i temi con i builder integrati.
Non mi è possibile approfondire qui l’argomento, ma ti basti sapere che i temi con builder integrati sono temi molto malleabili e personalizzabili e ti permettono di costruire le pagine del sito a “blocchi”.

Ora, essendo temi non sempre pronti all’uso perché richiedono tanta personalizzazione per dimostrare carattere, utilizzano un font neutro come Lato per metterti in mano una tela bianca; per lasciarti libero di utilizzare il font che ti pare.

Ma tanta gente non lo sa e utilizza lo stesso Lato sul proprio sito, a prescindere dal proprio settore, dal proprio pubblico di riferimento e dal senso estetico.

Risultato: siti anonimi e senz’anima, che rivelano a chi li naviga superficialità e poca cura del dettaglio.

Che poi, sono sincero, a me non fa neanche così schifo Lato, anzi: lo trovo un font niente male. Però non è adatto a tutti i casi e soprattutto, se combinato con un altro font altrettanto semplice, spegne totalmente il tuo sito, appiattendolo.

Non ci credi? Osserva la differenza tra questi due box di testo:

box di testo lato + lato
Lato + Lato.
Playfair Display + Inter.

C’è una bella differenza tra le due immagini, non trovi? Nella prima immagine c’è poco contrasto e la lettura è più monotona, nella seconda il risultato è decisamente più intrigante e accende la curiosità.

Ora che abbiamo individuato il problema entriamo nel vivo della guida e proviamo a rispondere nel modo più chiaro possibile alle domande:

  • quanti font devo scegliere per il mio sito?
  • Che differenze ci sono tra Serif e Sans Serif?
  • Quali sono i font più utilizzati su internet?
  • Qual è il metodo più veloce per selezionare i font giusti?
  • Dove posso scaricare i font migliori?

Ma prima… afferra una tazza del tuo caffè preferito! Partiamo.

caffè

Quanti font devo scegliere per il mio sito?

Non esiste una regola fissa, però se vuoi essere certo di non sbagliare scegline due (al massimo tre, però se sei alle prime armi comincia con due).

Ne utilizzerai uno per i titoli e i sottotitoli delle pagine e degli articoli di blog e un altro per i paragrafi.

Per i bottoni e le voci di menù puoi utilizzare lo stesso font dei titoli e i sottotitoli, oppure puoi utilizzare il maiuscolo del font destinato ai paragrafi (magari in versione “bold”, cioè più corposa, tipo grassetto).

I due font dovranno essere in forte contrasto tra loro per non annoiare il lettore e creare una forte distinzione visiva tra titoli e paragrafi.

penna che scrive su foglio

Col font principale, ovvero quello dei titoli, puoi osare un po’ di più, mentre su quello destinato ai paragrafi devi scegliere obbligatoriamente un font semplice e ben leggibile. Se vuoi andare sul sicuro, scegli per i paragrafi Roboto, Poppins, Merriweather, Open Sans o simili.

Per quanto riguarda il font principale, puoi utilizzare quello del tuo logo o qualcosa di simile.

La scelta del font principale, così come la scelta del font per il logo, dev’essere sempre attinente col tipo di pubblico a cui ti rivolgi e al settore in cui operi.

Se vendi giocattoli per bambini devi utilizzare un font primario allegro e giocoso, come Bree Serif, oppure uno rotondo come Ultra. In generale, troverai il font giusto orientandoti tra i Sans Serif.

Se invece vuoi darti un tono più serioso, ti rivolgi ad avvocati, medici e commercialisti o operi nel settore lusso scegli un font Serif come Cardo, Cormorant, Scheherazade o Playfair Display (quest’ultimo però è abusatissimo, ti avverto!).

“Grazie Fabbro, ma cosa vogliono dire Serif e Sans Serif?”

Ottima domanda.

Che differenze ci sono tra font Serif e Sans Serif?

I font Serif hanno le “grazie”, cioè abbellimenti delle aste delle lettere. Questi abbellimenti possono essere più o meno complessi ma, a prescindere, se il font li contiene appartiene alla famiglia Serif.

Come puoi osservare in questa immagine in basso, la grafia dei font Serif ricorda molto quella che utilizziamo quando scriviamo a mano.

un font serif
Esempio di un font Serif.

Come accennato prima, i font Serif sono particolarmente indicati quando si vuole comunicare un messaggio in maniera elegante e formale. Attenzione: ciò non è sempre vero perché oggi esistono numerosissimi font Serif, tra cui alcuni meno formali di altri e più versatili, però in linea di massima è così.

Un esempio molto famoso di font Serif è il mitico Times New Roman.

I font Sans Serif non hanno le grazie e sono più lineari.

Il font di Google è un Serif molto semplice ma allo stesso tempo giocoso (anche grazie all’ausilio del colore).

font google

Altri font Sans Serif famosissimi sono Verdana, Helvetica e soprattutto Arial.

È falsa credenza che font Serif e Sans Serif non possano coesistere nello stesso blocco di testo, perciò non farti problemi a mischiarli.

Puoi usare, ad es., un font Serif per i titoli e un font Sans Serif per i paragrafi, o anche il contrario.

Quali sono i font più utilizzati su internet?

Montserrat.

Fine.

Scherzi a parte, questo font predomina su loghi, biglietti da visita, siti web e banner pubblicitari da molti anni. Personalmente non sono un fan e cerco di non usarlo mai, però può essere la scelta giusta perché è versatile e d’impatto.

Ne esistono tantissime varianti e anche il font Montserrat originale ha tantissime sfaccettature: si parte dal “thin” (molto sottile) fino ad arrivare al ciccionissimo “extra bold” (particolarmente indicato per i titoli).

Per quanto riguarda nello specifico i siti web, i più utilizzati in assoluto secondo Google sono Roboto, Open Sans e Lato (mortacci sua).

Occhio però: Roboto, Open Sans e Lato sono perfetti come font per i paragrafi; te li sconsiglio assolutamente per i titoli e i sottotitoli.

Conclusioni + trucchetto bonus
Prima di concludere la prima parte dell’articolo voglio mostrarti un trucchetto per individuare in pochi click i font utilizzati da altri siti web.

Collegati su un qualsiasi sito web e fai click col tasto destro del mouse su una scritta qualsiasi.

Seleziona la voce “Analizza” (su Mozilla Firefox) o “Ispeziona” (su Google Chrome).

Ti si aprirà un pannello in fondo alla schermata. DON’T PANIC! Non abbandonarmi, resta con meee.

bottone don't panic

Come puoi vedere nell’immagine in basso, cliccando su “Analisi pagina” e poi su “Caratteri”, puoi leggere il nome del font utilizzato per quel testo.

Figata, vero?

Ti assegno un piccolo esercizio per la prossima settimana: analizza i font di almeno 5 siti web. Puoi scegliere i siti che preferisci, non c’è alcun problema. Allena un po’ l’occhio e guarda come gli altri siti web utilizzano i font e, se ne incontri alcuni che ti piacciono tantissimo, annotati i loro nomi da qualche parte e segnalameli nei commenti!

Nella seconda parte dell’articolo che pubblicherò la prossima settimana ti mostrerò i siti migliori per scaricare font e ti fornirò una guida pratica e gratuita per inserire i tuoi font preferiti sul tuo sito WordPress.

Per essere sicuro di non perdere la seconda parte dell’articolo e, in generale, tantissime importanti novità e aggiornamenti sui font e tutto ciò che riguarda i siti web, iscriviti subito alla newsletter della rubrica del Fabbro! Fai click qui e vedrai che presto per te sarà facilissimo usare il martello per spaccare il web!

A martedì prossimo,
Il Fabbro

Richiedi la consulenza GRATUITA del Sarto

Fai click qui!

4 pensieri su “Come scegliere i font perfetti per il tuo sito – Parte 1

  1. Paola Pisetta dice:

    Font!! 😍
    Credo di aver spulciato anni a ricercare font, solo per averli.

    Spero tu abbia la tabella dei font più utilizzati, costruita come una tabella degli elementi, i font sono disposti in ordine di utilizzo e per ognuno trovi il nome del suo creatore e l’anno di creazione.

  2. paola pisetta dice:

    Esatto Fabbro, se ricordi nel vecchio negozio l’avevo incollata su uno dei due banconi.

    Io Adoro Barkerville, nell’ultimo periodo a causa di studi specifici e cose varie, ho scelto per word il
    Briem Handwriting, tipo Bradley Hand ma più spigoloso, leggermente più largo e “più cresciutello”.
    Myskinnytype, che è ancora in pole position su word.
    tuttavia sono font che utilizzo per mio personale piacere durante la stesura di un testo, per la stampa o la pubblicazione mi adeguo a font più canonici.

    Il philosopher del sito l’ho scelto dopo 6 mesi di ricerche…
    Andava bene quando l’ho scelto, oggi dovrei rivederlo, ma non ho 6 mesi per la ricerca.

    Ecco, nei consigli ricordati di ricordare alla gente che devono scegliere una cosa che piaccia oggi, domani e anche tra qualche anno!

    • Il Fabbro dice:

      Myskinnytype e Bried non li conoscevo. Molto bello quest’ultimo! Quello che dici è vero: meglio stare alla larga dai trend passeggeri e puntare su scelte più solide nel tempo. 🙂

Lascia un commento

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