Home › Blog › Web font replacement

Web font replacement

La tipografia su Web: l'annosa questione dell'uso delle font non di sistema per la creazione di siti tipograficamente + "originali" e personalizzati .

In attesa che i browser come Explorer e Firefox si allineino a Safari4 e al suo maturo supporto ai selettori CSS3 proviamo a delineare il panorama attuale delle soluzioni per la sostituzione delle font:

TYPEFACE.JS (http://typeface.neocracy.org/)

Questo sistema basato su javascript utilizza 2 diversi files: il primo è il motore che ne permette il funzionamento mentre il secondo ingloba in sè la font desiderata, creato online tramite un'apposita utility. La sostituzione delle font è subordinata all'inserimento nelle pagine dei 2 js e dalla presenza della classe "myclass typeface-js" sugli elementi del markup. Tramite i selettori nel css si andrà a stilare stili, grandezze e colori come avviene normalmente. Associato a un div influisce su tutti gli elementi figli dello stesso.

Pro: semplice, intuitivo e veloce, permette l'uso della maggioranza delle istruzioni Css
Contro: il testo appare non selezionabile, anche se in realtà loè, un copia e incolla ne rivela il funzionamento. L'utility di "incapsulamento" della font non digerisce molte font, il formato accettato è solo il TTF e a volte anche questo presenta problemi. Il peso del js della font varia dal numero di glifi e dalla complessità grafica dello stesso, determinando a volte copiosi download.

CUFON (http://cufon.shoqolate.com/generate/)

(Non avendo una prova su strada attendibile inseriamo un commento generico)
Progetto molto simile a typeface.js. La tecnologia si basa su una combinazione di canvas, VML e javascript. Come typeface c'è l'impossibilità almeno visiva, di selezionare il testo, highlight assente insomma... Anche in questo caso, sul sito del progetto, troviamo il generatore della font, accettando anche famiglie dei formati TTF, OTF e PFB. La differenza tecnica con typeface.js si avverte nei selettori dei tag html. Typeface utilizza l'uso di classi specifiche da applicare all'elemento che intendiamo "rimpiazzare", mentre Cufon di default può essere applicato solo ad elementi strutturali (h1,h2 etc). Cufon non incorpora un proprio selector engine. Solo con l'appoggio di librerie come Jquery, Mootools, Prototype dà la possibilità di usare la sintassi per una "sostituzione" di font più selettiva. Come per typeface.js esiste il problema della dimensione finale del font/javascript che in alcuni casi si può "gonfiare" sensibilmente rallentando il caricamento della pagina. Anche qui è assente il cambiamento di stato all'hover sui link testuali.

FLIR (http://facelift.mawhorter.net/)

Acronimo di Face lift image replacement è differente dagli altri progetti in quanto usa la tecnologia PHP per generare un'immagine raster e sostituire il testo. Il risultato è appunto un'immagine quindi ovviamente non permette la selezione del testo. Potrebbe essere utile solo per un replacement dei titoli, non del corpo del testo.

Pro: adatta la rasterizzazione su una o 2 righe a seconda dello spazio a disposizione, flessibile nella scelta delle font.
Contro: il testo non è selezionabile, l'installazione non è veloce come i concorrenti cufon e typeface, non sempre restituisce un render del font qualitativo,richiede le librerie GD PHP installate sul server.

SIFR (http://www.mikeindustries.com/sifr)

Sifr è il progetto più complesso nel panorama del font replacement. A differenza degli altri, utilizza come tecnologia oltre a javascript il Flash. Il progetto rispetto agli altri, risulta più "macchinoso" nell'implementazione, ma sembra essere quello maggiormente efficiente alla prova su strada. Andando sul sito ci si scarica il "Kit" per installare SIFR sulle nostre pagine. Il kit comprende i javascript da inserire sul sito, i css print e screen, precompilati nella parte riguardante i tag di Sifr, mentre andranno riempiti con le nostre istruzioni per il replacement. I javascript sono 3 c'è il core che è sifr.js poi debug.js che ci restituirà le varie dimensioni del font in questione, e infine config.js dove si metteranno le istruzioni per il replacement degli elementi. Nel file sifr.fla caricheremo in embed il font desiderato e con le relative classi AS andremo a creare il nostro carattere personalizzato come file swf, richiamandolo nell'html tramite il config.js.Come appare da questa breve recensione il procedimento è abbastanza macchinoso ma una volta presa confidenza i risultati sono ottimi. Stiamo conducendo delle analisi su IE 8 che sembra non gradire molto Sifr...

Pro: potente e versatile, garantisce la selezione del testo, l'hover sui link testuali e se si ha confidenza con i selettori css si riesce senza troppa fatica a giocare anche con le classi del tipo .active o current. Con l'avvento dell'alta leggibilità del testo in Flash i font appaiono "puliti" come quelli html.
Contro: è necessario avere una copia di Adobe Flash per generare il file swf, macchinoso nell'utilizzo e non di facile comprensione.

Aspettiamo i vostri commenti per confrontare le nostre esperienze.

Scrivi un commento

I campi contrassegnati da (*) sono obbligatori.