Quali font utilizzare nello sviluppo di un sito web?
Una buona tipografia è la base di un progetto web ben realizzato. In particolare la scelta del font dev’essere accurata e oggetto di svariate analisi, per far si che i contenuti testuali si armonizzino in modo aggraziato con la grafica della pagina e invoglino l’utente alla lettura. In questo articolo vediamo quali sono i font migliori per il web e quali scegliere per i nostri progetti.
Durante la fase di realizzazione grafica mi sono resa conto che l’utilizzo di un certo font piuttosto che un altro influenza, e non di poco, la qualità estetica di un progetto web.
Un layout che nel suo complesso mi era apparso eccellente, una volta inserito il testo perdeva decisamente di qualità .
Confesso che non è stato semplice e immediato capire che a contrariarmi era il font utilizzato: in quel contesto, infatti, il mio amato Georgia non si armonizzava con gli altri elementi grafici.
Da quel momento ho prestato un’attenzione particolare nella scelta del font e devo ammettere che questo ha comportato un effettivo miglioramento nella qualità dei miei lavori.
Quali sono i criteri da valutare nella scelta del font?
La scrittura su web è differente dalla scrittura su carta: gli studi dimostrano infatti che la lettura su schermo è più affaticante e lenta rispetto alla lettura su stampa cartacea. Il nostro compito, come sviluppatori web, è quello di alleggerire il più possibile i fastidi che possono indurre l’utente ad abbandonare la lettura, ed allo stesso tempo la scelta di font che si integrino in modo gradevole e armonico all’interno delle pagine.
Per la scelta del nostro font dobbiamo tenere in considerazione i seguenti fattori:
- Leggibilità : Sul web i font più leggibili sono Arial, Courier e Verdana. Il meno leggibile è il Comic Sans, font che comunque sconsiglio per qualsiasi progetto grafico perché troppo abusato. Oltretutto è l’unico font per cui è stata creata una petizione che si propone di bandirlo e questo già dice tutto.
- Dimensione: Se ad una dimensione di 10px il più scelto è il verdana, che appare grazioso e ordinato, a 12 px la preferenza è per l’arial. E a 14 pixel? I più utilizzano il Georgia.
- Fascino: I font più attraenti del web sembrano essere il Georgia (a cui è stato addirittura dedicato questo simpatico progetto) e il Times new Roman. Anche se personalmente ritengo che questo sia un dato fazioso in quanto la bellezza di un font è soggettiva e ha molto a che vedere con il progetto in cui esso è inserito. Infatti, se in un sito il Trebuchet è elegante e sofisticato, in un altro può apparire inappropriato e perdere completamente la propria attrattività .
Quali sono i font che posso usare in un sito web?
E’ consigliato utilizzare solo font standard, in modo che le nostre pagine possano essere lette senza problemi da tutti gli utenti. Per utilizzare font personalizzati dovremo infatti aspettare che la proprietà @font-face dei fogli di stile sia finalmente supportata da tutti i browser.
La tabella che trovate di seguito, realizzata da Richard Rutter, mostra i font che sono installati di default sui sistemi operativi Mac e Windows, quelli installati con le varie versioni di Office e quelli installati con la Creative Suite di Adobe.
Grazie a questa tabella sappiamo che i font più compatibili con le tre principali piattaforme sono:
- Georgia
- Palatino Linotype
- Times New Roman
- Arial
- Trebuchet MS
- Verdana
- Comic Sans MS
- Courier New
Sono i font più famosi e utilizzati, tranne il palatino linotype, font poco conosciuto, che ho io stessa utilizzato in alcuni miei progetti web: lo trovo più originale del Georgia e facilmente leggibile.
Una piccola utilities su questo font: Dato che ha nomi diversi sulle varie piattaforme il codice corretto per integrarlo è il seguente:
[/css]
Hai afferrato il concetto ma hai bisogno di uno spunto? Vediamo insieme qualche sito che, con il font giusto, è riuscito a valorizzare la propria estetica.
Come potete vedere non ci sono font giusti o sbagliati: in ognuno di questi siti la scelta del font utilizzato, che sia georgia, arial o trebuchet , è equilibrata e aggraziata.
In linea di massima voglio consigliarvi:
- Trebuchet: E’ molto elegante, anche se un po’ frivolo. Adatto a siti più sofisticati e minimalisti, che incentrano molto il loro stile sulla tipografia. Lo preferisco nel contenuto testuale e lo evito invece per i titoli: a dimensioni maggiori credo che questo font perda molto della sua grazia.
- Georgia: E’ in assoluto il mio preferito. Perfetto nel testo, come titolo, in corsivo, in grassetto: in ogni dove e in ogni stile. Attenzione però: per questo font l’interlinea più adatta è 22px. Un’interlinea più ridotta rende difficile la lettura ed è facile che renda sproporzionate le pagine.
- Verdana: E’ un ottima scelta dato che, oltre ad essere il font più leggibile sul web, ha anche un taglio chiaro e morbido che lo rende adatto ad ogni progetto. Personalmente però lo preferisco in dimensioni ridotte (diciamo 10/11px) ed evito di utilizzarlo nei titoli.
- Century Gothic: Non è il trionfo della leggibilità a 12px, a 20px perde qualità e, soprattutto sul web, sembra che sia stato preso ad accettate. Ma a piccole dosi è fresco e ha stile. Da utilizzare con cautela.
E se non ci volessimo limitare a questi font?
Ogni grafico sa che può essere frustrante dover lavorare utilizzando solo i font standard: questa limitazione può sminuire, e di molto, tutta la progettazione grafica.
Per particolari ed accattivanti effetti grafici (citazioni, slogan, titoli, link di navigazione) consiglio quindi di utilizzare font più esclusivi che potranno essere opportunamente integrati nel css come immagini. Questo ravviverà e renderà uniche le vostre pagine web.
A questo scopo consiglio questa raccolta di font: sono belli, sono consigliati per design professionali e d’impatto, e soprattutto sono gratuiti.
Conclusioni
Oltre ad un’accurata selezione dei font, per quanto riguarda la tipografia dei nostri progetti web dobbiamo valutare anche altri importarti elementi:
- il contrasto tra background e colore del testo: la migliore leggibilità è testo nero su sfondo bianco o viceversa, mentre la peggiore è testo blu su sfondo fucsia;
- I titoli;
- La suddivisione del testo in brevi paragrafi;
- l’utilizzo dei testi statici (il testo animato infastidisce durante la lettura).
- Il corretto utilizzo di interlinea e spaziature.
Ma per questo vi rimando al mio articolo Web & Tipografia: gli errori da non commettere.
’)
Web designer, lavora nel campo della grafica e dello sviluppo web da sei anni e al momento oltre a collaborare con una web agency gestisce con successo la sua attività di freelance sotto il nome di mascara design. Come molti freelance si è abituata a gestire più ruoli, spaziando dalla grafica cartacea allo sviluppo del codice xhtml e css; nonostante questo la sua passione rimane, sempre e comunque, la grafica per il web.
Sito web dell'autore | Altri articoli scritti da sarah
Potresti essere interessato anche ai seguenti articoli:
-
Daily News About Design : A few links about Design - Friday, 15 May 2009 05:19
[...] Quali font utilizzare nello sviluppo di un sito web? [...] -
Sans-serif mania: i 20 font moderni più belli del web | Your Inspiration Web
[...] questo articolo hai visto come la tipografia e soprattutto la scelta di un determinato font possa contribuire alla [...]
La penso anche io come te, non credo esista il font giusto per un sito internet, il font deve essere scelto sempre sulla base della grafica che si sta realizzando.
Non conoscevo il Palatino, sono curiosa di provarlo.
Grazie ancora una volta per i preziosi suggerimenti.
Io ho sempre utilizzato il “verdana” come font per i siti web, avevo letto da qualche parte di questi problemi di compatibilità tra i font dei vari sistemi operativi e ho preferito utilizzarne uno semplice ma comune a tutti.
Nel prossimo progetto proverò a utilizzare il Georgia, dalla tabella vedo che come compatibilità è più o meno simile al verdana.
Niente di più corretto!!
E’ importantissimo scegliere sempre il font giusto da utilizzare in un sito, a seconda della grafica…ho da poco fatto un corso di tipografia, proprio per curare di più questo particolare e sto progettando il restyling del mio sito con un occhio tutto nuovo!
Comunque ottimo articolo, anche se avrei speso qualche parola su helvetica
Ciao Lorenzo,
benvenuto su Yiw
Per quanto riguarda helvetica, ho l’intenzione di dedicargli un intero articolo prima possibile. In questo articolo mi sono limitata ai font che dalla tabella risultano essere più compatibili con le varie piattaforme.
Ps. Il verdana sul tuo sito mi sembra un’ottima scelta. Pulito e delicato.
Quando la proprietà @font-face sarà supportata da tutti i browser ci potremmo sbizzarrire anche con in font da utilizzare.
Nando, quali sono i browser che al momento ancora non la supportano?
Scommetto che nella lista c’è sempre il solito internet explorer
Oggi ho preso gusto a commentare sul vostro blog… ma è così pieno di informazioni utili che non posso fare a meno di leggerlo!
Allora… diciamo che anche io ho sempre sostenuto che il testo su web non ha niente a che vedere con il testo su carta. La vista si affatica molto più velocemnete sui monitor che non sulla carta. Usare font con le grazie sul web secondo me rende la lettura più faticosa mentre usare i sans serif su carta rende la lettura meno attraente. Difatti difficilmente troveremo libri stampati in helvetica o arial, ma sempre più spesso in times.
Per questo motivo io utilizzo sempre i sans serif per il web e i serif su carta… Però è una mia opinione.
La tua è una scelta giusta, infatti per il web sono consigliati i font sans serif proprio perchè facilitano la lettura su schermo.
Ma se gli utenti preferiscono font come il times o il georgia, possiamo rinunciarci completamente?
E soprattutto, se in un sito web il Georgia è gradevole e accattivante, conviene optare per l’arial a rischio di compromettere l’estetica delle pagine?
I really liked this post. Can I copy it to my site? Thank you in advance.