Font per sito web: come e dove scegliere i web font

da | 16 Nov 2020 | Web Design

siteground banner

Tutti i web designer sanno che creare un sito web significa prestare attenzione a delle scelte molto importanti per la struttura di un progetto e la parte visuale ha un peso notevole.

Da marketer mi rendo conto che il successo di un progetto online è determinato da:

  1. Strategia di marketing
  2. Copywriting, parole utilizzate
  3. Web design, tutti gli aspetti visuali

Quest’ultimo passaggio include tutto ciò che è visibile all’interno della pagina e che può suggerire precise percezioni agli occhi dell’utente: colori, immagini, forme, font.

I font per siti web sono migliaia e nel momento in cui si fa una ricerca orientarsi diventa complesso, ecco perché ho voluto creare questa guida in cui ti indico i font classici più utilizzati e leggibili e i font più particolari ed estrosi, così che tu possa dare un tocco di estro ai tuoi progetti.

Personalmente, preferisco sempre dare precedenza alla leggibilità del font su tutti i dispositivi, quindi le mie scelte tengono conto soprattutto di questo aspetto. Per esempio nel caso di un blog come questo è fondamentale avere un web font che ti permetta di leggere con chiarezza vista la quantità di testo, mentre su altri progetti che prevedano l’utilizzo di molte immagini e poco testo si può pensare a delle soluzioni più creative.

Cos’è un font?

cos'è un font

Seppur tutti quanti sappiamo che cos’è un font, la definizione ci fa soffermare su un aspetto importante che tanti non tengono in considerazione nella scelta per poi ritrovarsi in difficoltà.

Un font è un insieme di caratteri tipografici che hanno in comune lo stesso stile grafico.

Quando si parla di caratteri tipografici si fa riferimento a lettere minuscole, lettere maiuscole, numeri e simboli. Quindi, quando scegli il font per un sito web è fondamentale che tutti quest caratteri siano disponibili e ti assicuro che non è così scontato.

Il consiglio è: assicurati sempre che il tipo di carattere che hai scelto abbia tutti questi caratteri tipografici.

Font per siti web: da sapere

La prima cosa da sapere, soprattutto per chi si approccia alla disciplina per la prima volta, è che una tipologia di carattere può essere gratuita o a pagamento, quindi è fondamentale sapere se la licenza è FREE quindi libera oppure acquistabile.

Questa informazione è solitamente facile da reperire perché viene trascritta accanto all’anteprima del font. I font più utilizzati sono solitamente gratuiti, mentre nel caso di siti web di aziende dal design curato il font è di solito realizzato appositamente per il sito in questione.

Per esempio, a partire dal 2015 il sito di Apple e tutti i suoi dispositivi utilizzano il font San Francisco esiste la versione SF PRO (quello utilizzato in questo momento sul sito web di Apple), SF Compact e il vecchio SF Mono.

Font per siti web: come scegliere

Ogni carattere ha delle caratteristiche uniche che essenzialmente vanno dallo spessore della linea, alla rotondità/spigolosità delle forme fino a sezioni mancanti. Nonostante queste differenze e l’unicità di ogni font, esistono comunque due grandi famiglie:

  • Font Serif, caratteri con grazie. Un esempio classico di questa tipologia è il Times News Roman
  • Font Sans Serif, caratteri senza grazie. Un esempio di sans serif è l’Arial.

 

serif vs sans serif

Per scegliere al meglio il tipo di carattere bisogna sempre considerare tre aspetti che sono:

  1. Tipo di progetto: che cosa si vuole comunicare con quel carattere.
  2. Stile: questo è determinato soprattutto dal segmento di mercato che il prodotto/servizio va ad occupare e al tipo di brand.
  3. Leggibilità: è fondamentale in tutti i casi, ecco perché preferisco sempre i font senza grazie che consentono una buona leggibilità su tutti i dispositivi. Una buona scelta può essere quella di utilizzare un font con grazie per i titoli e un font senza grazie per i paragrafi.

Tieni conto della leggibilità su mobile, un carattere che si vede mediamente bene da desktop potrebbe diminuire la sua resa da mobile, quindi fai tutti i test del caso.

Font per siti web: dove trovarli

Ci sono vari siti web che ti consentono di guardare e scaricare font, il sito più ricco e famoso è sicuramente Google Font che ormai risulta essere integrato alla maggior parte delle piattaforme per creare siti web come WordPress.

Per esempio, io utilizzo il tema WordPress Divi che ha al suo interno tutti i font di Google font inclusi e che quindi posso testare e utilizzare senza ogni volta scaricarli dal sito di Google e installarli nel mio.

Se utilizzi WordPress il mio consiglio è di valutare il tema Divi perché ti consente di dare massima libertà a tutti coloro che vogliono realizzare progetti dal web design originale.

Dai un’occhiata al sito Divi

Le piattaforme più note per scegliere e fare download dei font sono tre:

1) Google Font

Su Google Font maggior parte dei font sono gratuiti e integrabili su varie modalità di costruzione.

google font

L’utilizzo di tutti i font a disposizione su Google con il tema Divi:

2) DaFont

Dafont è con tutta probabilità il sito web più utilizzato in materia di font dopo quello di Google, ci sono migliaia di tipologie a disposizione e per gli usi più disparati. Ricorda sempre di verificare il tipo di licenza.

dafont

3) Typekit

Se hai il pacchetto Adobe puoi accedere alla loro piattaforma interna per scaricare i font professionali che mettono a disposizione: Typekit.

In questo caso la comodità sta nel fatto che cliccando su installa font, il carattere verrà installato in automatico sui programmi che utilizzi Photoshop, Illustrator e Indesign.

typekit, adobe font

Progetta Siti Web con WordPress in modo visivo

+100 layout inclusi con font e immagini free, plugin PRO e assistenza h24

Prova le funzionalità del tema più completo al mondo con la divi demo che puoi attivare sul sito senza impegno e senza lasciare alcun contatto.

Font per siti web Sans Serif

I caratteri di seguito possono essere scaricati direttamente da Google font o ancora selezionabili direttamente da Divi, ho incluso quelli più utilizzati e particolari che si trovano nel database di Divi e che possono esserti utili per una varietà enorme di progetti.

acme font

Eccentrico e ben leggibile, una scelta per differenziarsi.

aldrich font

Leggermente futuristico, allo stesso tempo elegante.

josefin sans font

La K del mio logo è stata fatta con questo font, spigolo, elegante e dal design pulito.

julius sans one font

Anche questo è decisamente nei miei gusti, mi vengono in mente prodotti raffinati e per un target alto spendente.

lato font

Lato è il font forse più utilizzato e che garantisce la più alta leggibilità su tutti i dispositivi, è il motivo per cui lo scelgo spesso per i miei progetti.

libre franklin

Libre Franklin ha alcune lettere che lo contraddistinguono rendendolo unico, come la R e la K.

montserrat font

Tra i miei font preferiti c’è Montserrat, unisce la solidità alla rotondità. Se dovessi immaginarlo una persona dire che è “dalle grandi competenze, sicuro di sé e allo stesso flessibile”.

noto sans font

Noto Sans è un classico essenziale e adatto a tutte le occasioni, come il vestito nero nell’armadio che ogni tanto tiri fuori.

oswald font

Oswald è un tipo di carattere che non utilizzerei ovunque, ma solo in progetti specifici che necessitano di uno stile definito come sport di nicchia.

oxygen font

Molto leggibile, dà la percezione di moderno e innovativo.

poppins font

Le rotondità di Poppins sono spettacolari e le sue O riconoscibili ovunque.

raleway font

Raleway è un font dalla personalità unica e decisa.

roboto font

Roboto è un altro font che non tramonta mai e che continua ad essere scelto da migliaia di designer, se non sai quale font scegliere questo insieme a Lato è una garanza.

ubuntu font

Ubuntu è un carattere futuristico e particolare, la sua U è distinguibile ovunque. 

Font per siti web Serif

In questo capitolo ho selezionato i font più particolari e creativi da utilizzare per i progetti che necessitano di quel tocco di design unico e originale.

abril fatface font

Abril Fatface è un font che attira l’attenzione dell’utente giocando su colore e contrasto.

alice font

Alice con le sue lunghe linee ha uno stile eclettico e caratteristico.

allan font

In base alla descrizione su Google Font Allan è ispirato ad un artista di Berlino, richiama la metropolitana, le gradazioni di colore grige, lo stile di vita sfuggevole.

anne us your telescope font

Ispirato ad una studentessa di fotografia e alla sua passione per una band musicale.

baloo font

Il richiamo indiano è evidente, così come il suo carattere selvaggio.

bungee shade font

Lo avrai visto di sicuro su alcuni progetti grafici che vogliono richiamare l’attenzione su qualcosa ed è infatti stato pensato per la celebrare la segnaletica urbana.

caesar dressing font

Lettere ispirate all’alfabeto greco.

eb garamond font

Un richiamo a tutto ciò che umanistico. Perfetto per un sito web istituzionale, come Università ed enti culturali.

emilys candy font

Ideale per dolci, caramelle e gadget per bambine.

expletus sans font

Questo font dà l’idea di movimento e sofisticato, non adatto per paragrafi lunghi ma per intestazioni particolari.

finger paint font

Il carattere scomposto che simula una scrittura veloce e disordinata, consigliato per designer e artisti che si rivedono in questo genere.

gloria hallejujah font

L’idea è quella di una scrittura a mano con pennarello, un font calligrafico che a mio parere si presta bene per storie e racconti.

 

lobster font

Lobster è un font unico nel suo genere con le classiche lettere che lo contraddistinguono, unite tra di loro e dal movimento continuo.

merryweather font

Merryweather è un carattere pensato per gli schermi, ecco perché è grande e ben leggibile.

playfair display font

Playfair Display è un carattere molto famoso che richiama la scrittura a mano del XIII secolo. Il consiglio di molti designer è quello di affiancarlo al Georgia.

quattrocento font

A mio avviso uno dei migliori font esistenti, di un’eleganza senza tempo.

rock salt font

Ecco il font per tutto ciò che è rock, mi vengono in mente le copertine dei maggiori gruppi di questo genere.

Progetta Siti Web con WordPress in modo visivo

+100 layout inclusi con font e immagini free, plugin PRO e assistenza h24

Prova le funzionalità del tema più completo al mondo con la divi demo che puoi attivare sul sito senza impegno e senza lasciare alcun contatto.

Conclusione

In questo articolo ti ho dato una panoramica sui font per siti web, come sceglierli in base alle loro caratteristiche e al tipo di progetto che vuoi realizzare. Questi sono solo alcuni dei caratteri tipografici presenti in Divi, se vuoi vederli tutti ecco il sito ufficiale di Divi.

Un saluto,

Nadia

Scritto da Nadia Kasa
Ciao! Mi chiamo Nadia Kasa e da settembre 2019 ho creato questo Blog per dare consigli sulla Creazione di progetti online efficaci, grazie al Blogging e all’Ottimizzazione SEO. Contattami per la Realizzazione di siti web in WordPress e per Consulenze SEO.

Ultimi articoli

Hai qualche domanda? Lascia un commento.

Mi fa piacere rispondere alle tue domande e sapere cosa ne pensi dell’articolo, lascia un commento.

0 commenti

Invia un commento

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

Pin It on Pinterest