L’era dei symbol font

Migliorare la performance è un processo costante. Per prima cosa abbiamo abbandonato le tabelle, le spacer gif e il markup inline come l’elemento <font> in favore dei CSS, riducendo la dimensione delle pagine e separando lo stile dal layout. Poi abbiamo preso coscienza delle richieste DNS, del caching e del numero totale di files dei nostri siti, e abbiamo cominciato ad usare le sprite CSS, rimuovendo così molte piccole immagini dall’HTML, mettendole in una singola immagine di background.

Adesso è il momento di accogliere a braccia aperte la terza epoca dell’ottimizzazione della performance: i symbol font.

Inserire un symbol font ci permette di spostare alcune di quelle piccole icone in un singolo file di font piuttosto che in una prite. Questo ha gli stessi vantaggi di caching e di dimensione del file di una sprite CSS, così come alcuni altri benefici che stiamo solo cominciando a realizzare con i display ad alta risoluzione. In questo articolo, vi guiderò attraverso alcuni vantaggi e problemi che incontrerete quando userete un symbol font.

Una tranquilla esperienza#section1

Al crescere del numero di font progettati per essere utilizzati come icone, glifi e decorazioni, molti siti web ad alto traffico hanno sostituito tutte le immagini del proprio sito con un singolo symbol font. Uno degli esempi più noti è GitHub, che ha migliorato sia la sua velocità sia la user experience preferendo Octicons, un singolo symbol font file personalizzato, a tutti i suoi file con le piccole icone.

I symbol font scambiano le immagini raster rettangolari con immagini vettoriali più “smooth” all’interno del HTML. Questo è importante perché le immagini raster sono progettate per lavorare ad una specifica risoluzione, quindi a densità di pixel più alte, come quelle che si trovano oggi nei display ad alta risoluzione, le immagini devono essere ingrandite per apparire della stessa dimensione. Questo risulta in qualcosa che dà maggiormente l’idea di qualcosa di quadrato. I vettoriali non hanno mai questo problema, potendosi ingrandire o rimpicciolire illimitatamente per ciascuna risoluzione.

In passato, inserire la grafica vettoriale nel HTML ha posto delle limitazioni. È possibile usare PDF e SVG, ma creano dei problemi di interoperabilità. I font sono vettori e tutti i browser web, perfino IE6, hanno la capacità di rendere i font embedded in una pagina HTML. Questa convergenza di tecnologie – l’embed di font, i display ad alta risoluzione e il supporto dei browser – ha creato una nuova opportunità per ottimizzare ulteriormente la performance e la user experience.

Accessibilità#section2

Quando si tratta di accessibilità, i symbol font sono in una situazione di conflitto: funzionano male come immagini ma piuttosto bene come testo.

Molti dei primi servizi di symbol font mappavano la grafica a una lettera nell’intervallo ASCII. Scrivere a tastiere la lettera “w” avrebbe prodotto l’immagine di un globo, la lettera “m” una busta. Questo rese semplice vedere la conversione carattere-a-simbolo semplicemente usando una tastiera. I problemi cominciano quando l’embed del font fallisce, producendo una serie di strane lettere in posti a caso senza alcun senso. Per esempio, se il vostro markup voleva mostrare una freccia e poi il testo “Next”, il vostro HTML poteva essere:

<div><span class="icon">L</span> Next</div>

Ma se il CSS, il JavaScript o il caricamento del font non fossero riusciti, si sarebbe visto il carattere “L” invece che il simbolo della freccia a sinistra. Potete mettere in atto tutti i meccanismi di fallback, fare code inject con JavaScript o con :before o :after in CSS, ma alla fine, gli spider dei motori di ricerca potrebbero ancora indicizzare il testo come “L Next”.

C’è un modo migliore.

Siamo maturati, abbiamo imparato più cose riguardo a tali questioni e abbiamo risolto il problema usando un’area ad uso privato in Unicode. I glifi in quest’area non sono connessi alla semantica di alcuna lettera dell’alfabeto: se un font non è disponibile o non si carica, allora apparirà semplicemente un box vuoto al posto di una lettera.

Ma aspettate, possiamo migliorare ancora!

I font hanno anche degli speciali caratteri chiamati “legature”: sottili, spesso difficilmente visibili, aggiustamenti alle “letterform” che vengono usate per facilitare la lettura. Prendete, ad esempio, il carattere composto da due “f” consecutive. Un buon font convertirà quella “ff” in una singola legatura, in cui le “f” si collegheranno facilmente. Ci sono molte legature standard, che comprendono “ff”, “fl” e “fi”. Ma non c’è motivo per cui voi non dobbiate definire le vostre. In un file di font, si tratta di una semplice sostituzione: tutto quello che cercano le legature è la giusta sequenza di lettere. Quando le inseriamo, vengono sostituite con un altro glifo. Questo vuol dire che potete avere una stringa come “A List Apart” e convertirla in un singolo symbol icon del logo.

I browser che non supportano il font embedding, ossia gli spider dei motori di ricerca, indicizzeranno il testo puro, cioè quello senza legature, ma i device in grado di rendere il font e la legatura vi mostreranno invece quel bel simbolo vettoriale. È il meglio di entrambe i mondi, preparato ad un livello molto più alto di HTML e CSS.

Una volta che avrete capito come funzionano le legature, vi si aprirà un mondo pieno di nuove possibilità! Tutte quelle icone misteriose usate nella navigazione potrebbero essere simboli in un font, ma oltre a ciò potrebbero essere delle legature. Pertanto, il vostro markup potrebbe essere così:

<ul>
	<li>Home</li>
	<li>Contact</li>
	<li>About</li>
	<li>Cart</li>
</ul>

Ma le legature risultanti rese a video potrebbero apparire così:

Symbolset sta facendo esperimenti con le legature e i symbol font da un po’ e ora vende dei pacchetti di symbol font con le icone più comunemente utilizzate. Ha anche un notevole supporto per le legature e una demo in cui potete semplicemente inserire delle parole chiave e guardarle diventare un simbolo immediatamente. Non dovete stupirvi se tutto questo dà il via a una serie di idee nella vostra mente!

Utilizzare le legature come sostitute dei glifi ha delle applicazioni pratiche. Per esempio, il sito web di BBC News prima mostrava un orologio nell’angolo della homepage. L’orologio avrebbe potuto usare Flash, ma sarebbe stata una scelta errata data la mancanza di supporto e l’esistenza di alternative. Un’altra opzione sarebbe stata quella di usare CSS per rotare le immagini con un po’ di temporizzazione JavaScript. Al contrario, la BBC scelse HTML5, utilizzando Canvas e JavaScript per ridisegnare continuamente l’orologio.

Ma entrambe queste soluzioni non-Flash utilizzavano le immagini raster che non sarebbero apparse troppo bene sui display ad alta risoluzione. Ci sono delle librerie JavaScript, come Raphaelis, che possono creare oggetti SVG o VML che apparirebbero belli e vettoriali, ma dal momento che vengono caricati e creati in JavaScript, risulterebbero invisibili agli spider dei motori di ricerca o ad altri browser non-JavaScript.

Utilizzando un symbol font al contrario ci darebbe il meglio di entrambe i mondi: accessibilità e vettori. Scrivere 12:00 richiama una legatura, che verrà convertita in un orologio con entrambe le lancette alle 12. Scrivere 12:01 richiamerebbe una differente legatura per la corrispondente configurazione dell’orologio. Sebbene ci sarebbero molte legature da creare, l’orologio risultante sarebbe una grafica vettoriale progettata in maniera fantastica e che funzionerebbe su tutte le piattaforme. In effetti, ci sono già alcuni typeface orologio che fanno proprio questo: http://timepiece.inostudio.de ne ha svariati esempi. Coraggio, guardate il sorgente e vi renderete conto della sua semplicità. [Nota dell’Editore: abbiamo ripristinato il link a inostudio.de dopo aver saputo dal proprietario del sito che questa questione era stata gestita e dopo aver fatto il nostro controllo.]

Pensate a tutti i piccoli dettagli di una pagina web che potrebbero diventare symbol font. Aprite la mente alle possibilità. Qualunque cosa a partire dai punti elenco e dalle frecce per arrivare ai feed e alle icone dei social media potrebbe essere inserita in un singolo e piccolo font file che può essere messo in cache e reso a varie dimensioni senza il bisogno di avere più immagini o più colori.

Creare il proprio symbol font#section3

I web developer e designer si sono fatti le ossa su applicazioni come Photoshop, Fireworks e altre. Per noi, passare alle sprite CSS o alle immagini di background non è stato un gran problema perché i tool non erano cambiati. Con i symbol font, entra in gioco un nuovo programma: il font editor. Si tratta di un nuovo mostro da conoscere, ma non è così difficile.

Ancora meglio, stanno uscendo molti tool che aiutano nella creazione di symbol font. Per esempio, Icomoon vi permette di caricare i vostri file SVG, mapparli ai caratteri unicode ed esportare un font per l’uso online.

Come si fa se si vuole essere più specifici e modificare leggermente il design oltre i display di default? Ci sono molti tool a disposizione per crearsi il proprio font. Alcuni sono a pagamento, sono app professionali, ma il più comune tool gratuito è FontForge. È un po’ scomodo, ma ci sono molti tutorial in giro per aiutarvi ad usarlo.

Problemi con i font#section4

Come ogni bravo designer vi dirà, un’icona o un logo avrà dei design leggermente diversi per diverse dimensioni, come il cambiamento dello spessore del tratto o addirittura l’eliminazione di alcuni dei suoi dettagli alle dimensioni più piccole. Tuttavia, con un symbol font, non si possono avere design alternativi per diversi font size. Il vostro design a 20 punti sarà lo stesso a 120 punti o a 6 punti.

Se volete design diversi per differenti dimensioni del font, allora dovete duplicare l’icona nel file del font e selezionare il glifo appropriato a seconda dell’uso. Anche questo è problematico, perché non avete idea del modo in cui l’utente finale visualizzerà effettivamente il vostro design. Aumentare la dimensione del font nel browser in maniera nativa non cambierà il vostro design del simbolo. Per la maggior parte di noi, questo non è un problema, dal momento che molte delle icone che usiamo oggi per i feed e i social network scalano piuttosto bene.

L’altro grande problema con l’utilizzo dei symbol font è che si ha solo un colore. Potete aggiungere un po’ di magia con i colori di background e i gradienti per i font per emulare un logo a due colori, ma se le vostre icone hanno più colori, allora il setup attuale del symbol font non funzionerà per voi.

Per rimediare a questo, Apple sta proponendo i font multicolore, che dovrebbero permettere di creare e inserire grafiche puramente vettoriali in qualsiasi pagina web. La prima incursione in questo campo è il font Apple Color Emoji, che potreste già avere sulla vostra macchina se usate OSX Lion. Lo svantaggio dell’introduzione di un nuovo formato di font è la mancanza di supporto per il browser e di tool necessari per la creazione di font, il che vuol dire che potrebbe volerci un po’ prima che diventino una realtà.

Benvenuti in una nuova era#section5

I symbol font solo il prossimo passo in avanti nella progettazione e nell’ottimizzazione dei siti web e dovete comprenderli per lavorarci da subito sul web. Con la pratica, potrete creare i vostri symbol font con loghi, icone e branding da inserire nei vostri siti web. Non solo questi piccoli extra stupiscono il vostro audience, ma nel contempo ottimizzano anche la performance del vostro sito web. È ora di cominciare ad usare i symbol font e contribuire a migliorare gli strumenti, gli standard e le tecniche per crearli.

Illustrazioni: {carlok}