{"id":365,"date":"2013-04-02T16:18:54","date_gmt":"2013-04-02T14:18:54","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/era-dei-symbol-font\/"},"modified":"2013-04-02T16:18:54","modified_gmt":"2013-04-02T14:18:54","slug":"era-dei-symbol-font","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/era-dei-symbol-font\/","title":{"rendered":"L’era dei symbol font"},"content":{"rendered":"
\n

Migliorare la performance \u00e8 un processo costante. Per prima cosa abbiamo abbandonato le tabelle, le spacer gif e il markup inline come l’elemento <font><\/code> 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\u00ec molte piccole immagini dall’HTML, mettendole in una singola immagine di background.<\/p>\n

Adesso \u00e8 il momento di accogliere a braccia aperte la terza epoca dell’ottimizzazione della performance: i symbol font.<\/p>\n

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\u00ec come alcuni altri benefici che stiamo solo cominciando a realizzare con i display ad alta risoluzione. In questo articolo, vi guider\u00f2 attraverso alcuni vantaggi e problemi che incontrerete quando userete un symbol font.<\/p>\n<\/div>\n

\n

Una tranquilla esperienza<\/h2>\n

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\u00f9 noti \u00e8 GitHub, che ha migliorato sia la sua velocit\u00e0 sia la user experience preferendo Octicons<\/a>, un singolo symbol font file personalizzato, a tutti i suoi file con le piccole icone.<\/p>\n

I symbol font scambiano le immagini raster rettangolari con immagini vettoriali pi\u00f9 “smooth” all’interno del HTML. Questo \u00e8 importante perch\u00e9 le immagini raster sono progettate per lavorare ad una specifica risoluzione, quindi a densit\u00e0 di pixel pi\u00f9 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\u00e0 maggiormente l’idea di qualcosa di quadrato. I vettoriali non hanno mai questo problema, potendosi ingrandire o rimpicciolire illimitatamente per ciascuna risoluzione.<\/p>\n

In passato, inserire la grafica vettoriale nel HTML ha posto delle limitazioni. \u00c8 possibile usare PDF e SVG, ma creano dei problemi di interoperabilit\u00e0. I font sono vettori e tutti i browser web, perfino IE6, hanno la capacit\u00e0 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\u00e0 per ottimizzare ulteriormente la performance e la user experience.<\/p>\n<\/div>\n

\n

Accessibilit\u00e0<\/h2>\n

Quando si tratta di accessibilit\u00e0, i symbol font sono in una situazione di conflitto: funzionano male come immagini ma piuttosto bene come testo.<\/p>\n

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:<\/p>\n

<div><span class=\"icon\">L<\/span> Next<\/div><\/code><\/pre>\n
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<\/code> o :after<\/code> in CSS, ma alla fine, gli spider dei motori di ricerca potrebbero ancora indicizzare il testo come “L Next”.<\/p>\n
C’\u00e8 un modo migliore.<\/p>\n
Siamo maturati, abbiamo imparato pi\u00f9 cose riguardo a tali questioni e abbiamo risolto il problema usando un’area ad uso privato in Unicode<\/a>. I glifi in quest’area non sono connessi alla semantica di alcuna lettera dell’alfabeto: se un font non \u00e8 disponibile o non si carica, allora apparir\u00e0 semplicemente un box vuoto al posto di una lettera.<\/p>\n
Ma aspettate, possiamo migliorare ancora!<\/p>\n
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\u00e0 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’\u00e8 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 \u00e8 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.<\/p>\n
I browser che non supportano il font embedding, ossia gli spider dei motori di ricerca, indicizzeranno il testo puro, cio\u00e8 quello senza legature, ma i device in grado di rendere il font e la legatura vi mostreranno invece quel bel simbolo vettoriale. \u00c8 il meglio di entrambe i mondi, preparato ad un livello molto pi\u00f9 alto di HTML e CSS.<\/p>\n
Una volta che avrete capito come funzionano le legature, vi si aprir\u00e0 un mondo pieno di nuove possibilit\u00e0! Tutte quelle icone misteriose usate nella navigazione potrebbero essere simboli in un font, ma oltre a ci\u00f2 potrebbero essere delle legature. Pertanto, il vostro markup potrebbe essere cos\u00ec:<\/p>\n
<ul>\n\t<li>Home<\/li>\n\t<li>Contact<\/li>\n\t<li>About<\/li>\n\t<li>Cart<\/li>\n<\/ul><\/code><\/pre>\n
Ma le legature risultanti rese a video potrebbero apparire cos\u00ec:<\/p>\n
<\/div>\n
Symbolset<\/a> 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\u00f9 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\u00e0 il via a una serie di idee nella vostra mente!<\/p>\n
Utilizzare le legature come sostitute dei glifi ha delle applicazioni pratiche. Per esempio, il sito web di BBC News prima mostrava un orologio<\/a> 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.<\/p>\n
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.<\/p>\n
<\/div>\n
Utilizzando un symbol font al contrario ci darebbe il meglio di entrambe i mondi: accessibilit\u00e0 e vettori. Scrivere 12:00 richiama una legatura, che verr\u00e0 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\u00e0 alcuni typeface orologio che fanno proprio questo: http:\/\/timepiece.inostudio.de<\/a> ne ha svariati esempi. Coraggio, guardate il sorgente e vi renderete conto della sua semplicit\u00e0. [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.]<\/em><\/p>\n
Pensate a tutti i piccoli dettagli di una pagina web che potrebbero diventare symbol font. Aprite la mente alle possibilit\u00e0. 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\u00f2 essere messo in cache e reso a varie dimensioni senza il bisogno di avere pi\u00f9 immagini o pi\u00f9 colori.<\/p>\n<\/div>\n
\n
Creare il proprio symbol font<\/h2>\n
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 \u00e8 stato un gran problema perch\u00e9 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 \u00e8 cos\u00ec difficile.<\/p>\n
Ancora meglio, stanno uscendo molti tool che aiutano nella creazione di symbol font. Per esempio, Icomoon<\/a> vi permette di caricare i vostri file SVG, mapparli ai caratteri unicode ed esportare un font per l’uso online.<\/p>\n
Come si fa se si vuole essere pi\u00f9 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\u00f9 comune tool gratuito \u00e8 FontForge<\/a>. \u00c8 un po’ scomodo, ma ci sono molti tutorial in giro per aiutarvi ad usarlo.<\/p>\n<\/div>\n
\n
Problemi con i font<\/h2>\n
Come ogni bravo designer vi dir\u00e0, un’icona o un logo avr\u00e0 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\u00f9 piccole. Tuttavia, con un symbol font, non si possono avere design alternativi per diversi font size. Il vostro design a 20 punti sar\u00e0 lo stesso a 120 punti o a 6 punti.<\/p>\n
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 \u00e8 problematico, perch\u00e9 non avete idea del modo in cui l’utente finale visualizzer\u00e0 effettivamente il vostro design. Aumentare la dimensione del font nel browser in maniera nativa non cambier\u00e0 il vostro design del simbolo. Per la maggior parte di noi, questo non \u00e8 un problema, dal momento che molte delle icone che usiamo oggi per i feed e i social network scalano piuttosto bene.<\/p>\n
L’altro grande problema con l’utilizzo dei symbol font \u00e8 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\u00f9 colori, allora il setup attuale del symbol font non funzioner\u00e0 per voi.<\/p>\n
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 \u00e8 il font Apple Color Emoji<\/a>, che potreste gi\u00e0 avere sulla vostra macchina se usate OSX Lion. Lo svantaggio dell’introduzione di un nuovo formato di font \u00e8 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\u00e0.<\/p>\n<\/div>\n
\n
Benvenuti in una nuova era<\/h2>\n
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. \u00c8 ora di cominciare ad usare i symbol font e contribuire a migliorare gli strumenti, gli standard e le tecniche per crearli.<\/p>\n
Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Benvenuti nella terza era dell’ottimizzazione della performance web: i symbol font. Qualsiasi cosa, i punti elenco e le frecce, le icone per i feed per i social media, possono ora essere raggruppate in un singolo piccolo file di font che pu\u00f2 essere messo in cache e reso a diverse dimensioni senza la necessit\u00e0 di avere pi\u00f9 immagini o colori. Si tratta di un file con gli stessi benefici di caching e di dimensioni di una sprite CSS, con in pi\u00f9 i vantaggi che stiamo solo cominciando a realizzare con i display ad alta risoluzione. Scopriamo i vantaggi ed esploriamo le sfide che si incontrano quando si usano i symbol font.<\/p>\n","protected":false},"author":818,"featured_media":7000693,"comment_status":"open","ping_status":"open","template":"","categories":[258,88,275],"tags":[],"coauthors":[305],"class_list":["post-365","article","type-article","status-publish","has-post-thumbnail","hentry","category-graphic-design","category-numero-71-2-aprile-2013","category-tipografia-web-font"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=365"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000693"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=365"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}