Le prime pagine web che sono apparse nel lontano 1992 rispecchiavano fortemente il mondo della loro provenienza e cioè quello accademico caratterizzato dalla produzione scritta che privilegia le informazioni testuali all’aspetto visuale.

Quando i grafici sono arrivati nel web, si è tentato di porre rimedio alla nuova situazione, ma è intercorso un po’ di tempo prima che alcuni cominciassero a capire che si trattava di una bestia difficile da domare.

Il web non è la carta stampata

Purtroppo per i grafici amanti di Photoshop e abituati alla carta stampata, il web non è la stampa. Durante la transizione a Internet, i grafici affrontano una serie di problemi comuni:

• Dimensione e risoluzione dello schermo. Il popolo web è composto da persone che hanno e risoluzioni. Un disegno “pixel-perfect” si presta poco a pixel che non siano uguali. Difetti e differenze nell’interpretazione dello standard html dei browser più disparati rappresenta un altro ostacolo a un disegno uguale per tutti i visitatori a un sito.
  Figura 2: Percentuale visualizzata di una pagina web La maggior diffusione degli smart phone (iPod, Android, Windows Mobile 7) e simili (iPad) andrà a complicare la situazione ulteriormente.
• Tipografia. Storicamente i font disponibili in una pagina web erano limitati a quelli installati su un computer specifico. Sui computer Windows, Mac e Linux/Unix, si può fare affidamento su 3 font principali: Helvetica / Arial, Times / Times New Roman e Courier / Courier New.
  • Core fonts for the web Nel 1996 Microsoft ha rilasciato gratuitamente alcuni font per superare questo problema, noti come core fonts for the web. I font compresi sono Andale Mono, Arial^®, Arial^® Black, Comic Sans MS, Courier™ New, Georgia, Impact™, Times New Roman^®, Trebuchet MS e Verdana. Nel 2002 Microsoft ha cambiato idea e ha abbandonato questo progetto per il web ma i font rimangono disponibili e sono molto diffusi.
  • @font-face e Web Open Font Format. Ci sono stati diversi progetti orientati a far scaricare in automatico dai browser i font mancanti, ma l’utilizzo è stato ostacolato di problemi vari. Ora i problemi sono stati superati e tutti i browser principali prevedono un supporto per la sintassi @font-face e la soluzione definitiva, Web Open Font Format. Ẽ quindi già possibile distribuire font su richiesta per tutti i browser. Indicazioni saranno fornite in seguito.
• Fedeltà dei colori. Ai tempi, i computer erano capaci di visualizzare solo 256 colori. Per fortuna questo vincolo è stato superato.
• La natura dinamica di pagine web
  • Un utente può ingrandirla, facendo lo zoom con ctrl+ / in tutti i browser principali (accessibilità);
  • Un utente può evidenziare, copiare ed incollare del testo, molto utile per inserire indirizzi e numeri telefonici in una rubrica (usabilità);
  • Un utente con problemi di vista può ascoltarla utilizzando un apposito software (accessibilità).

I problemi con l’utilizzo di immagini per rendere il testo

Un problema ancora ampiamente diffuso è dato dall’utilizzo di immagini per rendere il testo. L’obiezione è motivata da più considerazioni. Le immagini per il testo…

• non si prestano all’ingrandimento della pagina, molto utile sui monitor con un’alta risoluzione;
• sono difficili da mantenere – ci vuole un grafico e talvolta un sistemista per cambiarle (alcune immagini possono essere generate dal sistema web, ma la qualità potrebbe scarseggiare);
• sono poco compatibili con i motori di ricerca. I motori di ricerca sono importanti visto che il popolo di internet utilizza i motori di ricerca per trovare e ritrovare¹ i siti web. Ai motori di ricerca piace molto testo, testo che essi possono incrociare con le ricerche fatte dagli utenti. Si potrebbe specificare il testo di un’immagine con l’attributo alt della tag , ma un testo alt non ha lo stesso valore semantico come testo inserito in un’apposita tag

  ,

  o

  che sia. Perché? In parte perché i motori di ricerca non possono sapere con certezza se il testo nell’immagine è quello stesso inserito nell’attributo alt – è un problema di fiducia. Fra i problemi c’è anche quello della velocità. Google è su questo punto, la velocità di caricamento rientra negli oltre 200 fattori che Google prende in considerazione;

• creano problemi per l’accessibilità. Gli strumenti che leggono un testo a voce alta devono notare che quella che hanno trovato è un’immagine e non testo semplice da leggere;
• sono coperte dalla licenza di utilizzo per il font?

Oggi l’utilizzo delle immagini per rappresentare il testo è superato con @font-face

Viene il mal di testa solo a pensare a tutti i problemi innescati dall’utilizzo di immagini per rendere il testo nelle pagine web. Per fortuna una soluzione elegante c’è: consiste nel caricamento in automatico di eventuali font mancanti da parte del browser grazie al supporto di @font-face – evitando così l’esigenza di creare immagini per rendere testo, con tutti i problemi a ciò connessi.

La tecnologia non è proprio nuova, esiste in Internet Explorer e solo Internet Explorer, dal 1997. La diffidenza degli altri browser era dovuta a considerazioni sui diritti d’autore e brevetti. Da poco più di un anno anche tutti gli altri browser hanno adottato una soluzione e, grazie alla politica di aggiornamenti automatici di questi browser, possiamo dire che la tecnica di utilizzare immagini per rendere i font è da considerare ormai superata dalla tecnica di caricare in automatico i font mancanti.

Come? A livello pratico, si tratta dei quattro passi principali che seguono:

1. Verificare che i font non siano gravati da licenze commerciali oppure acquistare le licenze richieste. Questo punto non è nuovo, è necessario anche per i font distribuiti sul web quando si utilizzano immagini. Molti font commerciali sono venduti per l’utilizzo sulla postazione del loro utilizzo, non è prevista una distribuzione digitale. Ad esempio, i font Adobe non possono essere utilizzati se non in abbonamento . È da tenere presente che ci sono TANTI font di qualità disponibili senza vincoli economici. Alcuni esempi: Font Squirrel, Web Fonts (Nel maggio 2010 Google ha il rilascio di font gratuiti per il web. La motivazione è probabilmente riconducibile alla necessità di supportare alcuni font utilizzati da Microsoft Office in Google Docs. Il bello del progetto di Google è che Google pensa a tutti i problemi di licenze e hosting), Dieter Steffmann, Larabie Fonts e Font ex.
2. Preparare il font in tre formati: .woff, il formato del futuro, già in uso da parte di tutti i browser dell’ultima generazione, .eot per le versioni di internet explorer fino all’8 e .ttf o .otf per tutti gli altri. Rimane solo il problema Apple: per ora il sistema operativo iOS (iPhone, iPad), supporta solo il formato .svg, quindi serve anche quello (meglio compresso come .svgz). Si può sbrigare il tutto con qualche clic, grazie a un servizio web che pensa a tutto.
3. Mettere i file sul server web e assicurare l’impostazione del tipo mime, per IIS (font/otf, image/svg+xml)
4. Inserire il codice CSS per il font nelle pagine web che impiegano il font. Seguendo gli esempi qui riportati ci troviamo con qualcosa di simile a questo:

@font-face {
  font-family: 'URW Gothic L';
  font-weight:normal;
  font-style:normal;
  font-variant:normal;
  src: url("URWGothicL-Book.eot");
  src: local('☺'),
    url("URWGothicL-Book.woff") format("woff"),
    url("URWGothicL-Book.ttf") format("truetype"),
    url("URWGothicL-Book.svg") format("svg");
}
@font-face {
  font-family: 'URW Gothic L';
  font-weight:bold;
  font-style:normal;
  font-variant:normal;
  src: url("URWGothicL-Demi.eot");
  src: local('☺'),
    url("URWGothicL-Demi.woff") format("woff"),
    url("URWGothicL-Demi.ttf") format("truetype"),
    url("URWGothicL-Demi.svg") format("svg");
}
@font-face {
  font-family: 'URW Gothic L';
  font-weight:normal;
  font-style:oblique;
  font-variant:normal;
  src: url("URWGothicL-BookObli.eot");
  src: local('☺'),
    url("URWGothicL-BookObli.woff") format("woff"),
    url("URWGothicL-BookObli.ttf") format("truetype"),
    url("URWGothicL-BookObli.svg") format("svg");
}
@font-face {
  font-family: 'URW Gothic L';
  font-weight:bold;
  font-style:oblique;
  font-variant:normal;
  src: url("URWGothicL-DemiObli.eot");
  src: local('☺'),
    url("URWGothicL-DemiObli.woff") format("woff"),
    url("URWGothicL-DemiObli.ttf") format("truetype"),
    url("URWGothicL-DemiObli.svg") format("svg");
}

Se il font sarà utilizzato in tutte, o quasi tutte, le pagine, si consiglia l’utilizzo di un file css esterno.

Supporto dei browser per i web font

	Browser	Version	Web Open Font Format (.woff)	TrueType (.ttf)	opentype (.otf)	Embedded OpenType (.eot)	Scalable Vector Graphics (.svg)	Source
Current	Internet Explorer	9+	✔	✔	✔	✔	✘	Microsoft
	Safari	3.1+	✘	✔	✔	✘	✔	Apple
	Firefox	3.6+	✔	✔	✔	✘	✘	mozilla.org & mozilla.org
	Chrome	6+	✔	✔	✔	✘	✔	Readable Web
	Opera	10+	✘	✔	✔	✘	✔	Opera
Mobile	Android Phones		?	?	?	✘	?	Based on webkit, should be similar to Safari Mobile. No CSS documentation at android.com.
	Safari Mobile (iPhone, iPad)		✘	✘	✘	✘	✔	Safari CSS Reference
	Internet Explorer Mobile	All	✘	✘	✘	✘	✘	Windows Mobile 6.5 CSS Windows Phone 7 Blog
Older	Internet Explorer	4+	✘	✘	✘	✔	✘	Microsoft
	Firefox	3.5+	✘	✔	✔	✘	✘	mozilla.org
	Chrome	3+	✘	✔	✔	✘	✔	chrome

Oggi l’utilizzo delle immagini per rappresentare il testo è superato con @font-face. E così sia.

Post correlate:

• Torna il motore di ricerca Teoma. Ma importa a qualcuno?
• Gli spider o crawler dei Motori di Ricerca: chi sta visitando il nostro sito e perché?
• Flash è ancora un problema per la SEO (e il web) nonostante l’annuncio di
• SEO per Multimediale Audio e Video
• Bing – le caratteristiche e i consigli SEO