Tra le cose più importanti per il branding e l’aspetto del vostro sito web, ci sono i font. Un font scelto con cura può trasmettere personalità, rendere più leggibili lunghi passaggi di testo e rafforzare il vostro marchio nella mente delle persone.
Però non potete semplicemente scaricare qualsiasi font e usarlo sul vostro sito. Prima ci sono alcune cose da prendere in considerazione.
Dove potete trovare i web font, quali font sono compatibili con l’HTML, e quali sono “web safe” e possono essere utilizzati su qualsiasi sito web? Li esploreremo tutti in questo articolo.
Cominciamo!
Font HTML: Cosa Sono i Web Font?
I caratteri tipografici hanno una ricca storia, ma i font, come li conosciamo oggi, sono entrati in uso con l’avvento dei computer e di internet. I font digitali avevano bisogno di un trattamento speciale per essere resi sugli schermi. E quando sono entrate in gioco diverse dimensioni di schermo e dispositivi, le cose si sono complicate.
Quando si tratta di font digitali, ce ne sono di tipi diversi. Alcuni sono destinati principalmente alla stampa e al graphic design. Questi tendono a essere grandi e inadatti ai siti web, ma sono perfetti per creare delle grafiche. Ci sono anche font “web safe” che si trovano sulla maggior parte delle macchine.
Ma per il web design, quelli che dovete cercare sono i web font, caratteri tipografici appositamente progettati per essere visualizzati perfettamente sul web e su una varietà di dispositivi. Potete anche usare i web font nelle email o in altri servizi online.
Ci sono alcune cose che rendono i web font diversi dai normali font scaricabili per il desktop. Per esempio, spesso non possono essere usati con programmi sul vostro computer; devono essere caricati su un server e usati sul web.
Sono anche progettati per essere leggibili su diversi schermi e per diverse dimensioni. Possono essere stilizzati con i CSS (per l’applicazione di grassetto o corsivo, colori e altri attributi) e offrire supporto per altre condizioni come il rendering da destra a sinistra.
Anche se i web font non vengono installati sui vostri dispositivi o su quelli dei vostri visitatori, ci sono comunque dei modi speciali per visualizzarli affinché chiunque visiti il vostro sito possa vederli.
Potete scaricare questi font come al solito e caricarli sul vostro server, oppure usare uno speciale servizio di web font hosting che li incorpora sul vostro sito senza richiedere un download.
Quali Font Si Possono Usare in HTML?
Alcuni font non sono fatti per essere usati sul web, quindi quali possono essere inseriti nel vostro sito HTML?
Essenzialmente, sul vostro sito potete usare qualsiasi font scaricabile. Tutto quello che dovete fare è caricarlo e configurarlo correttamente, e questo dovrebbe bastare per visualizzarlo sul vostro sito web.
Anche se tecnicamente potete usare qualsiasi font sul vostro sito, farlo non è sempre l’idea migliore. Dovreste cercare font specifici per il web, non font destinati a essere usati nella stampa o nel graphic design. Alcuni font sono così stilizzati o destinati a dimensioni di testo così grandi che non si visualizzano correttamente su un sito. Con un font web, questo non è un problema.
Ci sono anche questioni di licenza di cui preoccuparsi quando si usano font desktop sul proprio sito (o si usano font web per il design di stampa). Usare un font con un mezzo diverso da quello per cui è stato acquistato può mettervi nei guai. Assicuratevi di leggere attentamente la licenza del vostro font prima di acquistarlo.
Potete anche cercare alcuni host che, attraverso piani gratuiti o a pagamento, vi permettono di usare una semplice chiamata HTML per rendere i loro font sul vostro sito web.
A ogni modo, il font che usate deve essere caricato correttamente ed essere del tipo di file corretto:
- TTF
- OTF
- WOFF/WOFF2
- SVG
- EOT
Con questi tipi di file, sarete poi in grado di usare i font in tutto il vostro sito e di stilizzarli con HTML e CSS.
Ci sono anche font sicuri per il web che di solito funzionano universalmente in tutti i browser e programmi.
Cosa Sono i Font Sicuri per il Web?
Un problema con la maggior parte dei web font è che non c’è garanzia che si visualizzino correttamente sul vostro sito web. A differenza del graphic design, dove potete semplicemente creare un’immagine in un programma e stamparla per la distribuzione, un browser deve rendere i web font ogni volta che qualcuno apre la pagina. Se i vostri font non riescono a caricarsi, potreste ritrovarvi con un sito web vuoto e rotto.
Per questo motivo, alcuni proprietari di siti web scelgono di affidarsi solo a font sicuri per il web (o font “web safe”). I font web safe sono preinstallati sulla maggior parte dei sistemi, e questo garantisce che possano essere visualizzati correttamente su tutti i dispositivi tranne che in quelli più sconosciuti. Tendono anche a caricarsi molto più velocemente dei font web, che possono invece essere abbastanza lenti.
Se tutto ciò che vi preoccupa è massimizzare le prestazioni e assicurare che il vostro sito visualizzi correttamente i font, allora i font web safe fanno per voi.
Ecco una lista di font sicuri per il web che generalmente non creano problemi:
- Arial
- Brush Script MT
- Comic Sans
- Courier New
- Garamond
- Georgia
- Helvetica
- Impact
- Lucida Console
- Palatino
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
Ci sono anche decine di altri font sicuri per il web, ma questi che abbiamo elencato sono i più onnipresenti sui dispositivi.
Tra tutti questi, Arial, Times New Roman, Helvetica e Courier New sono i più sicuri. Nonostante siano considerati sicuri per il web, alcuni degli altri non funzionano su certi sistemi operativi.
Il problema è che a meno che non stiate gestendo qualcosa come un sito governativo o un semplice sito informativo, non vale la pena sacrificare il vostro branding evitando la maggior parte dei font. I font sicuri per il web sono leggibili, ma sono anche troppo generici e abusati.
È molto meglio scegliere un set di font più bello e unico da usare sul vostro sito web, soprattutto perché c’è una soluzione al problema dei font web che non riescono a caricarsi: i font fallback (o font di riserva).
Una Nota sui Font Stack
I font stack, noti anche come font di riserva, sono l’unica ragione per utilizzare font web audaci e creativi.
Non importa cosa fate o quali precauzioni prendete, ci sarà sempre qualcuno che non sarà in grado di caricare i vostri font. Forse hanno Javascript disabilitato, quindi i vostri font ospitati non vengono visualizzati correttamente, o qualcosa va storto nel codice e impedisce la visualizzazione dei font che avete caricato. O forse un certo font può non essere compatibile con il dispositivo di alcune persone.
Grazie ai font di fallback, è facile caricare un font sicuro per il web se qualcosa va storto. I font fallback funzionano selezionando un font che l’utente ha installato in base alla famiglia di font:
- I font serif sono definiti da piccoli tratti attaccati alle estremità delle linee delle lettere. Questi font sono considerati eleganti e leggibili.
- I font sans serif sono progettati in modo simile ai font serif, ma mancano di tratti. Sono più semplici e più leggibili.
- I font monospace presentano delle lettere uniformemente distanziate tra loro, e per questo hanno un aspetto particolare.
- I font corsivi (o font Script) raffigurano lettere formali, scritte a mano. Non sono molto leggibili e sono migliori per le intestazioni o il graphic design.
- I font fantasy (o font decorativi) sono molto stilizzati e, come i font corsivi, non sono appropriati per il corpo del testo.
Ricordate che i stack di font sono un raggruppamento di font; è del tutto possibile avere più font di riserva in sequenza. Assicuratevi solo di avere sempre un font sicuro per il web nel vostro stack, così da avere sempre la possibilità di comunicare il vostro marchio con un font simile se quello principale fallisce.
Come Aggiungere Font con l’HTML
Se volete aggiungere un web font al vostro sito, avete alcune opzioni.
Per gli utenti di WordPress, il modo più semplice per ottenere i font sul vostro sito è tramite un plugin. I due più popolari sono Easy Google Fonts e Use Any Font. Il primo semplifica il processo di aggiunta di Google Fonts al vostro sito web, mentre UAF vi permette di caricare direttamente i font sul vostro sito.
Se non state usando WordPress, o non volete fare affidamento su un plugin, il processo richiederà qualche ritocco manuale.
In primo luogo, è possibile utilizzare i font ospitati altrove, come con Google Fonts. Le istruzioni qui dipendono da quale servizio scegliete. Con Google Fonts, dovreste incorporare il font che volete usare nel vostro <head> e poi richiamarlo quando volete usarlo.
Potete anche ospitare localmente i font che avete scaricato da internet sul vostro sito web. Questo può essere preferibile perché non avrete bisogno di affidarvi a servizi di terze parti.
Fortunatamente, questo è molto facile da fare se avete un web font correttamente configurato. Basta caricare i file sul vostro server, potete usare la regola @font-face nel vostro foglio di stile per definirlo. Per esempio:
@font-face {
font-family: FontName;
src: url(FontLocationOnServer);
}Poi potete usare il tag font-family per richiamare il vostro font ovunque vogliate nel documento HTML.
Stilizzare i Font con HTML e CSS
Una volta che il vostro font è caricato in modo sicuro sul vostro sito web, potete stilizzarlo con HTML e CSS. Anche se avete poche conoscenze di programmazione, stilizzare un font è abbastanza facile. Potete cambiare il colore del testo, il colore dello sfondo, la dimensione, lo stile o il peso.
Nota: se avete lavorato con le vecchie versioni di HTML, potreste ricordare il tag <font>. Questo non è più supportato e non dovrebbe essere usato. Potete invece dare uno stile al testo con i CSS o con un elemento di stile HTML.
Per prima cosa, potete cambiare il carattere con i codici di colore. Potete usare un nome di colore come “rosso”, un codice RGB o un valore HEX. Questo viene impostato con la proprietà color in questo modo:
p {
color: blue;
}
O in un singolo elemento di stile HTML:
<p style="color:blue;">Text.</p>
Per il colore di sfondo vale lo stesso, ma usando l’attributo background-color.
p {
background-color: blue;
}Poi è il turno della dimensione del font. Questa può essere espressa in pixel, percentuali o ems (che vanno bene per la progettazione di siti responsive).
p {
font-size: 16px;
}Oppure:
<p style="font-size:200%;">Text.</p>
E per ultimi ci sono lo stile e il peso del carattere, o il corsivo e il grassetto. Per il testo inclinato, usate il tag “italic”.
.italic {
font-style: italic;
}
Mentre per il grassetto:
.bold {
font-weight: bold;
}
Potete anche usare i tag HTML al loro posto. Per il corsivo, potete usare:
<em>per un testo che deve trasmettere enfasi, oppure
<i> per un testo che deve distinguersi visivamente.
E per il grassetto, usate:
<b>o<strong>
Per esempio:
<b>Bold Text</b>
o
<strong>Sono importante.</strong>Dove Trovare i Font HTML?
Se volete usare un host di font di terze parti o scaricarli, dovete sapere quali sono i posti migliori per trovare i font. Ci sono centinaia di distributori sul web, ma solo una buona manciata sono noti per essere fonti affidabili per i font. Eccone alcuni:
- Google Fonts è uno dei posti migliori per scaricare font. Perché? Potete facilmente incorporarli sul vostro sito senza scaricarne nessuno, la sua selezione è vasta e bella, e soprattutto, è completamente gratuito. I server di Google sono sempre veloci, quindi potete fidarvi di loro per consegnare i font con il minor ritardo possibile.
- Adobe Fonts offre migliaia di font con qualsiasi abbonamento a Creative Cloud. Con altri servizi (che non si basano su font open source come Google Fonts, almeno), è spesso necessario preoccuparsi delle licenze. Questi font sono autorizzati per l’uso in qualsiasi progetto, personale o commerciale.
- Fonts.com ha una vasta selezione di font sia per il desktop che per il web. Vi forniscono il codice di cui avete bisogno per metterlo sul vostro sito. Il problema è che ci sono diverse licenze, e questo può creare un po’ di confusione. Il pagamento è basato su una tariffa unica o su un modello pay-as-you-go.
- TypeNetwork offre font di alta qualità per progetti seri con una varietà di opzioni di licenza. Acquistate font per desktop, web, applicazioni o ePub. I font web hanno anche un’opzione in più: hosted o self-hosted.
- Prima che Google Fonts esistesse, Font Squirrel era il posto dove trovare font gratuiti con licenza commerciale da usare in qualsiasi progetto. Ha una bella selezione, ma purtroppo non c’è un’opzione per l’hosting dei font. Dovrete scaricare i font e caricarli sul vostro sito manualmente. Non tutti i font sono ottimizzati per il web, ma potete provare Webfont Generator.
I 10 Migliori Font HTML
Ci sono migliaia di font web là fuori, ma da dove cominciare? Qui vi mostriamo dieci semplici font HTML che starebbero benissimo su qualsiasi sito web. Si tratta di font sicuri per il web, quindi dovrebbero funzionare su quasi tutti i dispositivi. Sono anche ottimi font di riserva.
Se avete bisogno di qualcosa di più eccitante, abbiamo un sacco di articoli sui font corsivi, calligrafici e moderni.
1. Arial
Arial è il più noto di tutti i font. Non è il più bello, ma è semplice e utile in una varietà di situazioni.
2. Times New Roman
Anche Times New Roman è un font estremamente comune. È più adatto se gestite un sito più formale. Questo font serif non è particolarmente accattivante, ma non è nemmeno particolarmente distraente.
3. Palatino
Palatino potrebbe suonarvi familiare, dato che è spesso usato nella stampa di libri. Ora è un elegante font digitale incluso di default su molti dispositivi.
4. Verdana
Verdana è noto per essere molto facile da leggere, ed è bellissimo anche a grande dimensione. Questo sans serif è una buona alternativa all’Arial.
5. Courier New
Ricorda il testo della vecchia macchina da scrivere: Courier New è un grande design monospace per i siti che propendono per un look vecchio stile ma leggibile.
6. Calibri
Calibri è un font sans serif semplice e grazioso che viene fornito di serie con programmi come Microsoft Office. Tuttavia, è un font proprietario, quindi è spesso supportato solo su sistemi operativi Windows.
7. Georgia
Questo font serif arrotondato è ispirato al font Garamond, che è un font web safe simile. Se avete bisogno di un font formale non così serio come il Times New Roman, è una buona scelta.
8. Garamond
Molto simile a Palatino, Garamond è un font classico usato spesso per la stampa di libri. Nonostante sia stato aggiornato per i sistemi operativi moderni, sembra ancora abbastanza vecchio stile.
9. Didot
La spaziatura minima delle lettere su questo font serif gli dà un aspetto unico. È possibile trovarlo sulla maggior parte dei dispositivi Apple.
10. Tahoma
Questo font pulito era un carattere predefinito nei vecchi sistemi operativi Windows. Il suo aspetto più audace lo fa risaltare quanto basta senza distrarre.
Riepilogo
Scegliere dei web font che vengano visualizzati bene sul vostro sito web, siano leggibili e diano personalità al vostro brand è importante.
Ci sono vari siti web dove è possibile installare font gratuiti o scaricare quelli con licenza a pagamento, e in questo articolo abbiamo offerto alcuni esempi di buoni font per iniziare.
Non siete obbligati ad attenervi solo ai noiosi font sicuri per il web che avete visto in giro su internet per decenni. Grazie ai font di fallback, potete usare qualsiasi font che vi piace e impostare un font di riserva da usare se quello principale non si carica.
Se state usando questi font HTML sul vostro sito web, nelle email, o nel vostro logo, assicuratevi di fare molti test, così il vostro sito rimane leggibile, e la tipografia si integrerà bene con il resto del vostro design.
Lascia un commento