Testo come immagini e la SEO: @font-face ha superato l'utilizzo di immagini

Testo come immagini: problema SEO ormai superato con @font-face

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.

Pagine web nel 1992
Figura 1: Pagine web nel 1992

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 schermi di diverse dimensioni 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. Percentuale visualizzata di una pagina web
    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 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 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 ritrovare1 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 <img>, ma un testo alt non ha lo stesso valore semantico come testo inserito in un’apposita tag <h1>, <h2> o <p> 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 è chiara 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, Google Web Fonts (Nel maggio 2010 Google ha annunciato 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, almeno 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

BrowserVersionWeb Open Font Format (.woff)TrueType (.ttf)opentype (.otf)Embedded OpenType (.eot)Scalable Vector Graphics (.svg)Source
CurrentInternet Explorer logoInternet Explorer9+Microsoft
Safari logoSafari3.1+Apple
Firefox logoFirefox3.6+mozilla.org & mozilla.org
Chrome logoChrome6+Readable Web
Opera logoOpera10+Opera
MobileAndroid logoAndroid Phones????Based on webkit, should be similar to Safari Mobile. No CSS documentation at android.com.
Safari logoSafari Mobile (iPhone, iPad)Safari Reference
Internet Explorer logoInternet Explorer MobileAllWindows Mobile 6.5 CSS Windows Phone 7 Blog
OlderInternet Explorer logoInternet Explorer4+Microsoft
Firefox logoFirefox3.5+mozilla.org
Chrome logoChrome3+Google chrome

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


1 Uno studio di Yahoo! ha indicato che il 40% delle ricerche sono effettuate per ritrovare una pagina

Ti potrebbero interessare:

Sono aperte le iscrizioni per il prossimo corso Seo e per il corso Google Analytics. Cosa aspettate?


A proposito di Sean Carlos

Sean Carlos aiuta le aziende nell'ottimizzare i loro risultati di business online. La sua carriera spazia dalla gestione di campagne di telemarketing e direct mailing presso un'organizzazione con più di 10.000 soci ad una significativa esperienza a livello mondiale maturata presso la Hewlett-Packard. Nei primi anni 90 Sean ha sviluppato un applicativo enterprise search, comprensivo di tutte le fasi, dall'indicizzazione alla ricerca dei testi, per il Los Angeles County Museum of Art. Dal 2000 al 2004 Sean è stato IT Manager del sito immobiliare CasaClick.it, parte del gruppo Pirelli. Sean è un docente ufficiale della Digital Analytics Association. È Chairman dello SMX Search and Social Media Conference, 13 & 14 novembre p.v. a Milano. Collabora inoltre con l'Università Bocconi. Nato a Providence, RI, USA, Sean Carlos si è laureato in Fisica. Parla inglese, italiano e tedesco.

Lascia un commento

Avviso: i tuoi commenti sono i benvenuti se sono costruttivi. L'amministratore si riserva la facoltà di cancellare i commenti anonimi, con secondi fini e/o con toni non civili.