Uno dei problemi tipici durante lo sviluppo del design di un nuovo sito web è sicuramente la scelta del font: l’aspetto tipografico, diversamente da quanto si possa pensare, è tutt’altro che marginale nel web design in quanto investe tanto l’estetica quanto la funzionalità (e fruibilità) del progetto che si sta sviluppando.
Se fino a qualche anno fa il problema era piuttosto circoscritto, oggi, con l’avvento di CSS3 (e della proprietà @font-face) l’individuazione del giusto font rischia di essere un processo lungo e difficoltoso nel quale è bene sapersi districare con logica e metodo. Ma andiamo per gradi.
Font standard per siti web
Come detto, fino a poco tempo fa (periodo ante CSS3) il problema della scelta del font per un sito web era alquanto limitato: al fine di garantire una piena compatibilità ed una visione quanto più possibile omogenea delle pagine web, tutti i web designer erano costretti a scegliere tra pochi, pochissimi, font standard.
Con questa espressione si identificavano alcuni caratteri tipografici che avevano la caratteristica di essere presenti su tutti i principali sistemi operativi. E’ bene ricordare, infatti, che originariamente un font per essere utilizzato all’interno di una pagina web doveva essere necessariamente installato sul sistema client. La logica era questa:
- in fase di sviluppo di un documento HTML il designer specifica il font da utilizzare per il rendereing del testo;
- il visitatore scarica la pagina HTML all’interno del browser il quale cerca di renderizzare il testo "chiedendo" al sistema operativo di fornirgli il set di caratteri per il font specificato;
- se il font è presente nel sistema il testo verrà mostrato come nelle intenzioni del designer, in caso contrario viene utilizzato un carattere predefinito.
Alla luce di questo meccanismo è evidente come i web designer abbiano limitato il proprio range di scelta ai pochi caratteri che garantivano una copertura universale (o quasi) come, ad esempio:
- Arial
- Verdana
- Times New Roman
- Courier New
- Georgia
In realtà, anche per questi font, non si aveva la garanzia che fossero realmente presenti sul sistema dell’utente pertanto, attraverso i CSS, era buona norma che il web designer prevedesse un sistema di fallback nel caso in cui il font non fosse presente.
La tecnica, più precisamente, consisteva nello specificare (all’interno della proprietà font-family) diversi font: il primo font era quello ottimale mentre l’ultimo, di solito, consisteva nella semplice indicazione generica della famiglia. Ad esempio:
p {
font-family: Arial, Helvetica, sans-serif;
}oppure
p {
font-family: "Courier New", Courier, monospace;
}Per anni i designer di pagine web, quindi, hanno fatto in questo modo sacrificando l’aspetto creativo in favore di una resa cross-browser e cross-platform.
L’avvento di CSS3 ed il superamento dei font standard
Come detto, con l’avvento dei CSS3 questa logica è stata superata. Oggi il web designer, infatti, ha una totale libertà di scelta circa il font da utilizzare in quanto – grazie a @font-face – il set di caratteri prescelto viene scaricato dal’utente insieme alla pagina web. In questo modo il browser non ha più bisogno di cercare nel sistema il font da utilizzare…in quanto il font da utilizzare viene scaricato dalla URL fornita dallo sviluppatore all’interno del foglio di stile.
Bellissimo direte voi… ed avete ragione, ma in realtà questa enorme libertà creativa comporta nuovi oneri e nuovi problemi in quanto la scelta non è più limitata ad una manciata di font ma si estende a diverse migliaia di caratteri! basti pensare a siti come Dafont, alle Google Fonts API o al nostro archivio di font gratis per farsi un idea dell’immenso catalogo di font tra i quali è possibile scegliere.
Consigli per scegliere il giusto font
La scelta del font, come detto nell’introduzione di questo articolo, è un momento molto importante nel percorso che porta alla definizione del design di un sito web: dedicare la giusta attenzione ed osservare un metodo di scelta rigoroso, quindi, diventa essenziale per riuscire ad operare una scelta adeguata senza perdersi in inutili mal di testa.
Ma quali sono le regole per scegliere il font di un sito web senza perdersi nella jungla dei font gratuiti reperibili in Rete? Vediamole:
- non facciamoci trascinare dall’emotività: il font ci deve piacere (per carità!) ma non per questo dobbiamo usarlo a tutti i costi! A volte, infatti, capita di vedere font molto belli usati in contesti sbagliati… questo, probabilmente, perché il designer è stato vittima della sua emotività ed ha scelto solo ed esclusivamente in base al fatto che il font gli piaceva;
- teniamo bene a mente il contesto: il font deve essere adatto al tipo di comunicazione: se dobbiamo sviluppare il sito di un’azienda farmaceutica o di un istituto finanziario la scelta di font gotici o grunge potrebbe rivelarsi poco adatta…
- la leggibilità viene prima di tutto: ricordate sempre che se un font non è leggibile non è bello! Lo scopo della tipografia è quello di rendere gradevole la lettura… non di renderla impossibile o odiosa!
A queste regole di "buon senso", poi, se ne aggiungono altre di natura più tecnica riguardanti le caratteristiche del set tipografico prescelto. In tal senso accertatevi sempre che il font:
- contenga tutti i caratteri di cui avete bisogno: molto spesso capita che alcuni font non supportino tutti i caratteri, alcuni hanno solo le lettere maiuscole o le minuscole, non hanno i caratteri accentati o la punteggiatura… insomma: quando scegliete il font assicuratevi che contenga tutti i caratteri che servono al vostro progetto!
- sia liberamente utilizzabile: è buona norma leggere, ove presente, la licenza d’uso prevista dall’autore in cui potrebbero essere evidenziate talune limitazioni (non è infrequente, ad esempio, imbattersi in font liberamente utilizzabili solo per siti personali e senza scopo di lucro);
- sia di buona qualità: eventuali difetti (sbavature, curve imperfette, ecc.) del font diventano evidenti aumentando la dimensione delle scritte: se avete intenzione di creare titoli e loghi di una certa dimensione, quindi, accertatevi che la resa sia ottimale anche a grandi dimensioni;
- gestisca correttamente il kerning: occhio alla spaziatura tra i caratteri! alcuni font hanno la caratteristica di creare – per alcune coppie di caratteri – spaziature piuttosto sgradevoli: prima di scegliere il font provatelo con cura con una buona quantità di testo (il classico Lorem Ipsum può andare benissimo) ed impostando una dimensione del testo piuttosto grande;
- sia disponibile in diversi formati: per una compatbilità cross-browser è bene fornire il font non solo nel formato TTF, ma anche EOT, WOFF e SVG.
- non sia troppo pesante: ricordate che il font, per essere utilizzato, deve essere scaricato dal client dell’utente… se il font è troppo pesante il completamento della pagina potrebbe ritardare con un certo fastidio per l’utenza;
Per finire alcune raccomandazioni:
- limitate l’utilizzo di font calligrafici alla creazione di loghi o slogan: vedere siti con decine e decine di righe di testo scritte in corsivo inglese è davvero aberrante!
- evitate di mischiare, all’interno della stessa pagina, font stilisticamente molto diversi tra loro: il risultato sarebbe confuso e molto sgradevole. Per una buona resa visiva è necessaria una certa armonia fra i divrsi elementi!
- per grandi blocchi di testo (come ad esempio un articolo) consiglio sempre di optare per font serif in quanto garantiscono una buona leggibilità del contenuto (e questo è essenziale e dev’essere considerato prioritario nella scelta).
