{"id":6960,"date":"2021-08-31T07:00:30","date_gmt":"2021-08-31T05:00:30","guid":{"rendered":"https:\/\/isartidelweb.it\/?p=6960"},"modified":"2025-07-09T14:55:55","modified_gmt":"2025-07-09T12:55:55","slug":"come-scegliere-i-font-perfetti-per-il-tuo-sito-parte-1","status":"publish","type":"post","link":"https:\/\/sartoteca.it\/blog\/2021\/08\/31\/come-scegliere-i-font-perfetti-per-il-tuo-sito-parte-1\/","title":{"rendered":"Come scegliere i font perfetti per il tuo sito – Parte 1"},"content":{"rendered":"

Ciao e bentornato\/a sulla rubrica del Fabbro,
\nPubblico questo articolo perch\u00e9 mi capita sempre pi\u00f9 spesso di vedere siti web con font poco curati<\/strong> e sono convinto che tanti imprenditori e webmaster possano trarre giovamento dal conoscere meglio l’argomento.<\/p>\n

Ho diviso l’articolo in due parti perch\u00e9 il tema \u00e8 vastissimo<\/strong>, ma anche per una questione didattica:
\nutilizzer\u00f2 questa prima parte per stimolare la tua curiosit\u00e0 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.<\/p>\n

\"tenshinan\"<\/p>\n

Ma cosa sono i font? Ne hai mai sentito parlare?<\/p>\n

Cos’\u00e8 un font?<\/h2>\n

Un font \u00e8 un file attraverso cui possiamo applicare dei caratteri.<\/p>\n

Ok, mi rendo conto che detto cos\u00ec ha poco senso, prendiamola un po’ pi\u00f9 larga.<\/p>\n

La lettera “A” \u00e8 un carattere (cos\u00ec come tutte le altre lettere). Questo carattere pu\u00f2 essere composto da glifi diversi pur restando sempre “A”. Osserva l’immagine qui sotto.<\/p>\n

\"lettera<\/p>\n

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:<\/p>\n

\"glifi<\/p>\n

Il font altro non \u00e8 che un file da caricare su un sito per utilizzare al suo interno un carattere tipografico.<\/strong> Ad es. se vuoi utilizzare il carattere tipografico “Roboto” devi caricare sul tuo sito il file “roboto_regular.ttf.”<\/p>\n

Se non hai idea di dove poter reperire questi tipi di file don’t panic: te lo spiego pi\u00f9 avanti.<\/p>\n

Perch\u00e9 i font sono importanti?<\/h2>\n

I font sono importantissimi per due motivi:<\/p>\n

    \n
  1. influiscono sulla leggibilit\u00e0 dei contenuti del tuo sito.<\/strong><\/li>\n
  2. Sono a tutti gli effetti un elemento grafico del tuo sito<\/strong> e devono essere selezionati con molta cura.<\/li>\n<\/ol>\n

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

    Ma perch\u00e9?<\/p>\n

    \"font\"<\/p>\n

    Mi sono posto questa domanda per tanto tempo e la conclusione a cui sono giunto mi ha lasciato esterrefatto.<\/p>\n

    Il motivo per cui tantissimi siti web utilizzano un solo font sul proprio sito e questo font \u00e8 Lato \u00e8 perch\u00e9 la maggior parte dei temi WordPress utilizza Lato come font.<\/strong>
    \nIn pratica i webmaster, per pigrizia, non cambiano il font iniziale del sito e lo lasciano cos\u00ec com’\u00e8.
    \nQuesta \u00e8 veramente una cosa che mi fa uscire fuori di testa<\/strong> e che ti prego di evitare.
    \nSi tratta di un errore che compie non solo chi \u00e8 alle prime armi, ma addirittura agenzie e professionisti!<\/p>\n

    “Fabbro, ma come mai la maggior parte dei temi WordPress utilizza il font Lato o simili?”<\/em><\/p>\n

    Non soltanto perch\u00e9 \u00e8 un font ben leggibile ma soprattutto perch\u00e9 \u00e8 totalmente anonimo<\/strong><\/em>.
    \nProprio cos\u00ec, hai letto bene.<\/p>\n

    I temi WordPress che utilizzano di pi\u00f9 questa tipologia di font sono i temi con i builder integrati.
    \nNon mi \u00e8 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”.<\/p>\n

    Ora, essendo temi non sempre pronti all’uso perch\u00e9 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.<\/strong><\/p>\n

    Ma tanta gente non lo sa<\/strong> e utilizza lo stesso Lato sul proprio sito, a prescindere dal proprio settore, dal proprio pubblico di riferimento e dal senso estetico.<\/p>\n

    Risultato: siti anonimi e senz’anima, che rivelano a chi li naviga superficialit\u00e0 e poca cura del dettaglio<\/span><\/strong>.<\/p>\n

    Che poi, sono sincero, a me non fa neanche cos\u00ec schifo Lato, anzi: lo trovo un font niente male. Per\u00f2 non \u00e8 adatto a tutti i casi e soprattutto, se combinato con un altro font altrettanto semplice, spegne totalmente il tuo sito, appiattendolo.<\/p>\n

    Non ci credi? Osserva la differenza tra questi due box di testo:<\/p>\n

    \"box
    Lato + Lato.<\/figcaption><\/figure>\n
    \"\"
    Playfair Display + Inter.<\/figcaption><\/figure>\n

    C’\u00e8 una bella differenza tra le due immagini, non trovi? Nella prima immagine c’\u00e8 poco contrasto e la lettura \u00e8 pi\u00f9 monotona, nella seconda il risultato \u00e8 decisamente pi\u00f9 intrigante e accende la curiosit\u00e0.<\/p>\n

    Ora che abbiamo individuato il problema entriamo nel vivo della guida e proviamo a rispondere nel modo pi\u00f9 chiaro possibile alle domande<\/strong>:<\/p>\n

      \n
    • quanti font devo scegliere per il mio sito?<\/li>\n
    • Che differenze ci sono tra Serif e Sans Serif?<\/li>\n
    • Quali sono i font pi\u00f9 utilizzati su internet?<\/li>\n
    • Qual \u00e8 il metodo pi\u00f9 veloce per selezionare i font giusti?<\/li>\n
    • Dove posso scaricare i font migliori?<\/li>\n<\/ul>\n

      Ma prima… afferra una tazza del tuo caff\u00e8 preferito! Partiamo.<\/p>\n

      \"caff\u00e8\"<\/p>\n

      Quanti font devo scegliere per il mio sito?<\/h2>\n

      Non esiste una regola fissa, per\u00f2 se vuoi essere certo di non sbagliare scegline due<\/strong> (al massimo tre, per\u00f2 se sei alle prime armi comincia con due).<\/p>\n

      Ne utilizzerai uno per i titoli e i sottotitoli delle pagine e degli articoli di blog e un altro per i paragrafi.<\/p>\n

      Per i bottoni e le voci di men\u00f9 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\u00e8 pi\u00f9 corposa, tipo grassetto).<\/p>\n

      I due font dovranno essere in forte contrasto tra loro per non annoiare il lettore<\/strong> e creare una forte distinzione visiva tra titoli e paragrafi.<\/p>\n

      \"penna<\/p>\n

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

      Per quanto riguarda il font principale, puoi utilizzare quello del tuo logo o qualcosa di simile.<\/p>\n

      La scelta del font principale, cos\u00ec 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.<\/p>\n

      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.<\/p>\n

      Se invece vuoi darti un tono pi\u00f9 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\u00f2 \u00e8 abusatissimo, ti avverto!).<\/p>\n

      “Grazie Fabbro, ma cosa vogliono dire Serif e Sans Serif?”<\/em><\/p>\n

      Ottima domanda.<\/p>\n

      Che differenze ci sono tra font Serif e Sans Serif?<\/h2>\n

      I font Serif hanno le “grazie”, cio\u00e8 abbellimenti delle aste delle lettere. Questi abbellimenti possono essere pi\u00f9 o meno complessi ma, a prescindere, se il font li contiene appartiene alla famiglia Serif.<\/p>\n

      Come puoi osservare in questa immagine in basso, la grafia dei font Serif ricorda molto quella che utilizziamo quando scriviamo a mano.<\/strong><\/p>\n

      \"un
      Esempio di un font Serif.<\/figcaption><\/figure>\n

      Come accennato prima, i font Serif sono particolarmente indicati quando si vuole comunicare un messaggio in maniera elegante e formale. Attenzione: ci\u00f2 non \u00e8 sempre vero perch\u00e9 oggi esistono numerosissimi font Serif, tra cui alcuni meno formali di altri e pi\u00f9 versatili, per\u00f2 in linea di massima \u00e8 cos\u00ec.<\/p>\n

      Un esempio molto famoso di font Serif \u00e8 il mitico Times New Roman.<\/p>\n

      I font Sans Serif non hanno le grazie e sono pi\u00f9 lineari.<\/strong><\/p>\n

      Il font di Google \u00e8 un Serif molto semplice ma allo stesso tempo giocoso (anche grazie all’ausilio del colore).<\/p>\n

      \"font<\/p>\n

      Altri font Sans Serif famosissimi sono Verdana, Helvetica e soprattutto Arial.<\/p>\n

      \u00c8 falsa credenza che font Serif e Sans Serif non possano coesistere nello stesso blocco di testo, perci\u00f2 non farti problemi a mischiarli.<\/strong><\/p>\n

      Puoi usare, ad es., un font Serif per i titoli e un font Sans Serif per i paragrafi, o anche il contrario.<\/p>\n

      Quali sono i font pi\u00f9 utilizzati su internet?<\/h2>\n

      Montserrat.<\/strong><\/p>\n

      Fine.<\/p>\n

      Scherzi a parte, questo font predomina su loghi, biglietti da visita, siti web e banner pubblicitari da molti anni.<\/strong> Personalmente non sono un fan e cerco di non usarlo mai, per\u00f2 pu\u00f2 essere la scelta giusta perch\u00e9 \u00e8 versatile e d’impatto.<\/p>\n

      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).<\/p>\n

      Per quanto riguarda nello specifico i siti web, i pi\u00f9 utilizzati in assoluto secondo Google sono Roboto, Open Sans e Lato (mortacci sua).<\/p>\n

      Occhio per\u00f2: Roboto, Open Sans e Lato sono perfetti come font per i paragrafi; te li sconsiglio assolutamente per i titoli e i sottotitoli.<\/p>\n

      Conclusioni + trucchetto bonus<\/strong>
      \nPrima di concludere la prima parte dell’articolo voglio mostrarti un trucchetto per individuare in pochi click i font utilizzati da altri siti web.<\/p>\n

      Collegati su un qualsiasi sito web e fai click col tasto destro del mouse su una scritta qualsiasi.<\/p>\n

      Seleziona la voce “Analizza” (su Mozilla Firefox) o “Ispeziona” (su Google Chrome).<\/p>\n

      Ti si aprir\u00e0 un pannello in fondo alla schermata. DON’T PANIC! Non abbandonarmi, resta con meee.<\/p>\n

      \"bottone<\/p>\n

      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.<\/p>\n

      \"\"<\/p>\n

      Figata, vero?<\/p>\n

      Ti assegno un piccolo esercizio per la prossima settimana:<\/strong> analizza i font di almeno 5 siti web. Puoi scegliere i siti che preferisci, non c’\u00e8 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!<\/p>\n

      Nella seconda parte dell’articolo che pubblicher\u00f2 la prossima settimana ti mostrer\u00f2 i siti migliori per scaricare font e ti fornir\u00f2 una guida pratica e gratuita per inserire i tuoi font preferiti sul tuo sito WordPress.<\/strong><\/p>\n

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

      A marted\u00ec prossimo,
      \nIl Fabbro<\/p>\n","protected":false},"excerpt":{"rendered":"

      Ciao e bentornato\/a sulla rubrica del Fabbro, Pubblico questo articolo perch\u00e9 mi capita sempre pi\u00f9 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\u00e9 il tema \u00e8 vastissimo, ma anche per una questione didattica: utilizzer\u00f2 questa prima parte per stimolare la tua curiosit\u00e0 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. Ma cosa sono i font? Ne hai mai sentito parlare? Cos’\u00e8 un font? Un font \u00e8 un file attraverso cui possiamo applicare dei caratteri. Ok, mi rendo conto che detto cos\u00ec ha poco senso, prendiamola un po’ pi\u00f9 larga. La lettera “A” \u00e8 un carattere (cos\u00ec come tutte le altre lettere). Questo carattere pu\u00f2 essere composto da glifi diversi pur restando sempre “A”. Osserva l’immagine qui sotto. 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: Il font altro non \u00e8 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\u00f9 avanti. Perch\u00e9 i font sono importanti? I font sono importantissimi per due motivi: influiscono sulla leggibilit\u00e0 dei contenuti del tuo sito. 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 \u00e8 “Lato” (o una versione che ne differisce leggermente). Ma perch\u00e9? 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 \u00e8 Lato \u00e8 perch\u00e9 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\u00ec com’\u00e8. Questa \u00e8 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 \u00e8 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\u00e9 \u00e8 un font ben leggibile ma soprattutto perch\u00e9 \u00e8 totalmente anonimo. Proprio cos\u00ec, hai letto bene. I temi WordPress che utilizzano di pi\u00f9 questa tipologia di font sono i temi con i builder integrati. Non mi \u00e8 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\u00e9 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\u00e0 e poca cura del dettaglio. Che poi, sono sincero, a me non fa neanche cos\u00ec schifo Lato, anzi: lo trovo un font niente male. Per\u00f2 non \u00e8 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: C’\u00e8 una bella differenza tra le due immagini, non trovi? Nella prima immagine c’\u00e8 poco contrasto e la lettura \u00e8 pi\u00f9 monotona, nella seconda il risultato \u00e8 decisamente pi\u00f9 intrigante e accende la curiosit\u00e0. Ora che abbiamo individuato il problema entriamo nel vivo della guida e proviamo a rispondere nel modo pi\u00f9 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\u00f9 utilizzati su internet? Qual \u00e8 il metodo pi\u00f9 veloce per selezionare i font giusti? Dove posso scaricare i font migliori? Ma prima… afferra una tazza del tuo caff\u00e8 preferito! Partiamo. Quanti font devo scegliere per il mio sito? Non esiste una regola fissa, per\u00f2 se vuoi essere certo di non sbagliare scegline due (al massimo tre, per\u00f2 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\u00f9 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\u00e8 pi\u00f9 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. Col font principale, ovvero quello dei titoli, puoi osare un po’ di pi\u00f9, 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\u00ec 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<\/p>\n","protected":false},"author":3,"featured_media":6981,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[16,65],"tags":[230,227,231,229,228,70,76],"class_list":["post-6960","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-argomento-sito","category-la-rubrica-del-fabbro","tag-caratteri","tag-font","tag-glifi","tag-sans-serif","tag-serif","tag-siti-web","tag-siti-web-in-autonomia"],"_links":{"self":[{"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/posts\/6960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/comments?post=6960"}],"version-history":[{"count":1,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/posts\/6960\/revisions"}],"predecessor-version":[{"id":14440,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/posts\/6960\/revisions\/14440"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/media\/6981"}],"wp:attachment":[{"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/media?parent=6960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/categories?post=6960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/tags?post=6960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}