Perché pensare tipograficamente rovina il tuo sito? (seconda parte)
Un paio di settimane fa abbiamo parlato di come alcuni assunti della grafica tradizionale vengano conservati e riutilizzati erroneamente in ambiente web: ad esempio la definizione dell’altezza negli elementi componenti il layout. Ma ci sono altri errori molto comuni da evitare.
Font standard per il web
Esistono innumerevoli font, se provieni dal mondo della grafica tradizionale lo sai bene… e altrimenti non ci avrai messo molto ad impararlo: ci sono numerosi siti che offrono le più svariate font disponibili per il download gratuito (attenzione alle licenze!).
Generalmente, chi ha esperienza in ambito di stampa ha un gusto abbastanza raffinato in fatto di font: un bravo grafico sa distinguere la qualità e le caratteristiche di una font, sa decidere quali siano più adatte per il look & feel di un determinato progetto, e sa che non deve sceglierne un’infinità ma che una (massimo due) andrà benissimo. Per contro, tanti principianti tendono a sfruttare esageratamente i siti di font, andando spesso a caccia del più estroso, ma la preda più facile sono le font di scarsa qualità ed incomplete (cioè la maggior parte di quelle gratuite).
Ma, che le font siano scelte bene o meno sotto l’aspetto grafico, il problema grave è comune alle due categorie ed è quello di scegliere font non adatte al web: la dura verità, infatti è che la scelta delle font utilizzabili nel web è limitata.
Intendiamoci, la scelta non è bloccata, vietata o inibita in nessun modo (e per questo è così facile sbagliare), semplicemente ci sono delle font che dovresti evitare: nello specifico, parliamo di font che non siano largamente diffuse.
Per essere ancora più precisi, dovresti attenerti scrupolosamente a un ristretto elenco: quello delle font web-safe; ma prima di approfondire questo concetto e di consigliarti una soluzione, vorrei spiegarti qual è il problema.
Perché scegliere una font non web-safe è un problema?
Sia che tu sia un grafico dotato di un ottimo buon gusto e che voglia i tuoi testi in Bodoni, o che tu non sappia nulla di tipografia e scelga la-tua-font-strana, al 99% (per essere ottimisti) l’utente vedrà il contenuto con una font scelta dal browser (con tutta probabilità “Times new roman”).
Questo perché con le specifiche CSS 2 (lo standard attuale) è vero che hai la possibilità di scegliere e dichiarere qualsiasi font (anche se inesistente non riceverai messaggi d’errore), ma l’utente la vedrà solo e soltanto se la font in questione è installata anche sul suo terminale.
Ciò sta a significare che se tu volessi impostare un “Helvetica Neue Std Light”, dovrai essere preparato al fatto che la maggior parte degli utenti non avrà tale font installata e quindi dovrai specificare un’alternativa se non vuoi che il browser dell’utente decida per te: in genere, se manca la font, viene impostato il “Times New Roman”, ma tale comportamento può essere modificato dall’utente (avanzato) nelle impostazioni del browser (e può incontrare delle differenze a seconda del sistema operativo).
Ponendo il caso che l’utente non abbia cambiato le impostazioni, comunque, la resa grafica del tuo sito potrebbe decisamente risentirne: una font leggera e moderna, senza grazie, come l’ “Helvetica Neue Std Light” vuole dare sicuramente un impatto diverso rispetto al “Times New Roman”.
La soluzione standard
Come anticipavo, la soluzione è molto semplice: si tratta essenzialmente di scegliere le font web-safe, cioè quelle più ampiamente diffuse.
Ti starai chiedendo come si determina la diffusione di una font: non serve fare una ricerca per vedere quali siano le font più scaricate, basta vedere quali sono le font preinstallate sui maggiori sistemi operativi: Windows, Macintosh e Linux.
Come puoi vedere dal grafico, ci sono delle font più diffuse di altre, ma in linea generale la scelta migliore sarebbe quella di specificare anche una font alternativa (o più di una) e alla fine indicare la famiglia generica.
Ti faccio un esempio:
font-family: “Helvetica Neue Std Light”, Helvetica, Arial, sans-serif;
questa dichiarazione dice che il testo va visualizzato in una delle font elencate, seguendo l’ordine di scelta dichiarato. Se ho l’ “Helvetica Neue Std Light” installato, vedrò il testo in tale font, sennò il browser andrà a cercare una delle font a seguire per renderizzare il testo.
Quindi vedrò Helvetica se sono su Mac o Linux (dove Helvetica è una font preinstallata) o se ho installato personalmente Helvetica su Windows. Altrimenti, vedrò Arial. Infine, se non dovessi avere nemmeno Arial, vedrò una qualsiasi font senza grazie (sans-serif).
Per completezza: le famiglie generiche sono ‘serif’ (es. Times), ‘sans-serif’ (es. Helvetica), ‘cursive’ (es. Zapf-Chancery), ‘fantasy’ (es. Western) e ‘monospace’ (es. Courier).
Altre soluzioni
Se proprio non puoi rinunciare alla tua font, e l’idea che qualcuno non veda il sito esattamente come vuoi tu ti sconvolge, potresti pensare che una strada percorribile sia quella di incorporare i testi formattati come vuoi tu all’interno di immagini e magari di posizionarle in comode tabelle… inizia a buttare i ceci per terra, impara qualcosa sull’accessibilità e poi, dopo esserti redento, continua a leggere questo articolo: questa non è una soluzione accettabile!
Javascript e Flash
Esistono dei metodi che utilizzano javascript o che importano il testo in un filmato flash, e che sarebbe meglio utilizzare eventualmente solo per i titoli, chiaramente ottimizzandoli per renderli accessibili a tutti (non vedenti, ipo-vedenti, javascript disabilitati, mancanza di supporto flash…). Senza scendere troppo nel dettaglio, puoi cercare direttamente su Google i metodi Cufòn e sIFR.
Il futuro
Già anni addietro, alcuni web-designer ebbero l’idea di caricare la font utilizzata in un file zip (o anche non compressa) sul proprio spazio e linkarlo dalle pagine del sito consigliandone il download per una visualizzazione ottimale del sito: tale tecnica non è mai decollata sia per la pigrizia che per la diffidenza degli utenti (oltre che per una plausibile ignoranza).
Per il futuro probabilmente però si ricomincerà a caricare le font sullo spazio web del sito, non più compressi però e senza alcuna necessità che l’utente le scarichi.
La specifica @font-face di CSS3 (in un primo momento introdotta con CSS 2, poi rimossa con la revisione a CSS 2.1, è stata recentemente reintrodotta nelle bozze sulle nuove raccomandazioni per CSS3) infatti permette di utilizzare la font che desideriamo e di renderla visibile a chiunque, indipendentemente dal fatto che l’utente abbia la font installata o meno sul suo terminale.
Purtroppo, essendo il linguaggio CSS3 ancora in fase di studio e in lavorazione, non è ancora pienamente supportato da molti browser attualmente diffusi (ed è anche giusto, visto che ogni specifica CSS3 potrà essere soggetta a cambiamenti nel corso dei prossimi anni).
Volendo si possono utilizzare i servizi gratuiti messi a disposizione da Font Squirrel e da Google Font Directory, che fanno uso di @font-face: il primo dà la possibilità di creare o di scaricare dei “kit” già pronti (contenenti file della font, css, demo…) da caricare direttamente nel proprio spazio web e da integrare con il proprio CSS; mentre il servizio di Google ospita direttamente le font disponibili di cui bisogna solo importare il CSS.
NB: A onor di cronaca, è importante sapere che @font-face viene attualmente segnalato come errore di validazione dal W3C, e di fatto invalida il foglio di stile.
In genere che font scegli per i tuoi siti? Ti sei mai preoccupato di come queste vengano visualizzate su altri terminali? Quale tecnica utilizzi per i tuoi siti?
Letture consigliate:
https://www.yourinspirationweb.com/2010/02/11/come-utilizzare-font-non-standard-su-un-sito-web/
https://www.yourinspirationweb.com/2009/05/15/quali-font-utilizzare-nello-sviluppo-di-un-sito-web/
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
19 commenti
Trackback e pingback
-
Tweets that mention Perché pensare tipograficamente rovina il tuo sito? (seconda parte) | Your Inspiration Web -- Topsy.com
[...] This post was mentioned on Twitter by mtx_maurizio. mtx_maurizio said: RT @YIW Perché pensare tipograficamente rovina il tuo sito?… -
Accessibilità: come e perché stare attenti ai colori da utilizzare? | Your Inspiration Web
[...] rovina il tuo sito?”, abbiamo già parlato di dover prendere in considerazione la personalizzazione a cui può essere sottoposto un… -
Accessibilità: il tuo sito è leggibile? | Your Inspiration Web
[...] relativamente ai colori, mentre alcune settimane orsono abbiamo affrontato il tema delle font web-standard e in particolare della specifica…
Brava Anna ottimo articolo :) .
Per il resto mi capita spesso e volentieri di utilizzare font-face nelle mie lavorazioni in quanto mi aiuta tantissimo a evitare l’uso di font convezionali come arial e verdana nei menu e negli elementi grafici.
Ciao Rocco e grazie dei complimenti. :)
Penso che l’utilizzo che fai tu di font-face sia decisamente il più adatto!
Preciserei che proprio in virtù del fatto che @font-face fosse già stato preannunciato, viene addirittura supportato da IE6! Bisogna però specificare il formato eot (un formato di cui non si sentiva la necessità). Esiste un tool di conversione su google code (http://code.google.com/p/ttf2eot/) ma comunque Font Squirrel da già tutto il necessario. Io direi che si può iniziare tranquillamente a farne uso se si ha intenzione di dedicare tempo a test ed a “gracefully degrading” per vecchie versioni di firefox ed opera.
Se IE non si distingue non è contento.
Ciao scienzadellevanghe, preciserei ancora meglio che la specifica font-face è in realtà supportata con le limitazioni cui hai già accennato dalla versione 4 di IE.
Ho letto poi su alcune fonti che quando si richiama la font da Google Font Directory, il servizio si attiva per riconoscere il browser e preleva a seconda del browser il file con l’estensione adatta, ma a dire la verità non ho mai controllato.
Credo che CSS3 vada utilizzato con parsimonia e con i dovuti accorgimenti (fogli di stile a parte ad esempio) però eviterei di farne uso su progetti commerciali sui quali non si ha modo di rimettere le mani, salvo esser chiari con il cliente che deve sapere che il codice può esser soggetto a cambiamenti.
Dipende dal progetto, in genere la combinazione Georgia/Arial o Verdana è quella che uso più spesso, ma se ho la possibilità di sperimentare non disprezzo Typekit o soluzioni interne con @font-face.
Le possibilità per osare ci sono, basta essere coscienti che la situazione è ancora provvisoria e che si tratta di soluzioni sperimentali.
Sono d’accordissimo con te Tommaso.
Bell’articolo. Più che altro equilibrato, mi pare.
Non mi considero un guru di grafica o di web design, faccio solo del mio meglio. Certo è che sono sempre più convinto che in generale (non sempre, ma quasi) conta più la sostanza e non tanto il “maquillage”. Quindi meglio pochi font, uno o due usati bene, e fare in modo che la lettura del sito sia piacevole. Non rendiamo più difficile di quello che già è la lettura… perchè in fondo navigare sul web si tratta soprattutto di questo: lettura.
Come l’autrice dell’articolo, anche io penso che sia prudente aspettare che una specifica CSS diventi definitiva, per interessante che sia.
Ti ringrazio.
E’ giusto quanto dici: il contenuto è il re e far sì che una pagina venga letta è la cosa più difficile. Bisogna ricordarsi poi che non è detto che se una font sia disponibile per la visualizzazione voglia dire anche che abbia una buona leggibilità!
Avevo da prima provato con Google ma ora preferisco il kit di Font Squirrel
Perché offre un servizio più personalizzabile?
bell’articolo..come nella stampa pure nel web meglio usare pochi font e che siano leggibili.. al bando times e comics comunque…
Grazie Ale, giustissimo: meglio pochi e leggibili. Ti appoggio anche sul Comics… decisamente troppo usato da chi pensa così di riuscire originale e divertente!
Ma alla fine i font-web oriented si racchiudono in 4-5 o mi sbaglio?
Più o meno, come dicevo prima non è detto che una font “disponibile” sia anche adatta al web. Ma questo argomento lo approfondirò nel prossimo articolo!
Vorrei scusarmi genericamente con tutti per non aver ancora risposto ai commenti! Purtroppo la colpa è di Infostrada che ci ha messo un bel po’ ad attaccarmi la linea telefonica ma ancora non si è decisa a inviarmi il modem…
Mi auguro che abbiate passato un buon Natale, non avendolo potuto augurare prima e detto questo, procedo a rispondere ai vostri commenti, ringraziando questa connessione di fortuna!