![](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2015\/06\/n102b.jpg\")
Tutti noi vogliamo progettare esperienze tipografiche grandiose. Vogliamo anche raggiungere utenti su un range crescente di device e contesti, ma i webfont attuali legano i nostri siti responsive e le nostre applicazioni a caratteri inflessibili che non si ridimensionano. Come risultato, i nostri utenti vivono delle esperienze di lettura mediocri e tempi di caricamento maggiori dovuti al peso dei font aggiuntivi.<\/p>\n
Possiamo risolvere questo problema come tipografi, designer e developer, ma dobbiamo lavorare insieme per rendere i webfont pi\u00f9 legati al sistema e consci del loro contesto. L’interpolazione dal vivo dei webfont, la modifica del design di un font nel browser, esiste gi\u00e0 oggi e pu\u00f2 fungere da apripista per l’utilizzo di una tipografia davvero responsive.<\/p>\n
L’interpolazione del font<\/a> \u00e8 un processo utilizzato dai type designer per generare nuovi font intermedi partendo da una serie di font master. I font master rappresentano gli archetipi di design fondamentali a diversi punti in una famiglia di font. Utilizzando la matematica per trovare automaticamente i punti intermedi tra questi, i type designer possono derivare dall’interpolazione dei font variant\/weight aggiuntivi invece che progettarli tutti a mano. Possiamo applicare lo stesso concetto ai nostri webfont per inviare diversi font variant ai nostri utenti. Per esempio, la lettera H (il glifo H) in questa dimostrazione<\/a> (al momento per browser desktop) ha un master leggero e uno pesante per poter interpolare un nuovo font weight.<\/p>\n Un glifo H interpolato utilizzando il 50% del peso leggero e il 50% del peso black. Virtualmente, pu\u00f2 esserci un qualsiasi numero di poli e assi collegati a combinazioni di propriet\u00e0, ma in questo esempio tutto viene interpolato in una volta sola tra due poli<\/a>.<\/p>\n<\/div>\n Normalmente questi design di caratteri tipografici interpolati finiscono con l’essere esportati come font separati. Per esempio, la famiglia tipografica TheSans<\/a> contiene files di font individuali per i pesi Extra Light, Light, Semi Light, Plain, SemiBold, Bold, Extra Bold e Black generati usando l’interpolazione.<\/p>\n Pesi di font individuali generati dall’interpolazione dalla famiglia TheSans.<\/p>\n<\/div>\n L’interpolazione pu\u00f2 alterare pi\u00f9 del solo font weight: ci permette anche di cambiare la struttura fondamentale dei glifi di un font. Aspetti come i serif (o la loro assenza), stroke contrast\/direction e le proporzioni del carattere possono tutti essere cambiati con il giusto font master.<\/p>\n <\/a>Un cubo di Noordzij<\/a> che mostra uno spazio di interpolazione con pi\u00f9 poli e pi\u00f9 assi.<\/p>\n<\/div>\n Nonostante la generazione di font con l’interpolazione standard ci dia una gran flessibilit\u00e0, i files dei webfont sono ancora statici nel loro ambiente nel browser. Per questo motivo, abbiamo bisogno di pi\u00f9 per lavorare con la responsiveness del browser.<\/p>\n<\/div>\n I caratteri tipografici sono legati al loro mezzo di comunicazione. Entrambe i metodi a caratteri mobili<\/a> e di fotocomposizione<\/a> hanno influenzato il modo in cui i caratteri sono stati progettati e impostati nelle loro ere. Oggi, l’intrinseca responsiveness del web necessita di elementi flessibili ed unit\u00e0 relative<\/a>, entrambe i quali vengono usati quando si impostano i caratteri. Le media queries vengono usate per fare degli aggiustamenti significativi nei vari breakpoint.<\/p>\n Un’approssimazione di tipici breakpoint per il responsive design.<\/p>\n<\/div>\n Tuttavia, i font sono trattati come un’altra risorsa che deve essere caricata piuttosto che come una parte viva e fondamentale del responsive design. Cambiare stili ai font e cambiare i font weight con le media queries rappresentano gli stessi compromessi di design inerenti ai breakpoint.<\/p>\n I breakpoint stabiliti dalle media queries riflettono spesso i casi migliori dei compromessi di design, frequentemente in un breakpoint chiave, come quando la navigazione si chiude sotto a un’icona di menu. In maniera simile, i files dei font separati riflettono spesso i casi migliori dei compromessi del design: non ci sono font tra The Mix Light e The Sans SemiLight.<\/p>\n<\/div>\n<\/div>\n Interpolazione live del webfont significa semplicemente interpolare un font al volo all’interno del browser invece che esportarlo come file separato di una risorsa. Facendo cos\u00ec, i nostri font possono reagire al loro contesto. Siccome il carattere si adatta ed \u00e8 parzialmente indipendente da un layout responsive, c’\u00e8 meno bisogno di impostare punti di cambiamento repentini. I font possono aderire ai punti di flessione<\/em>, non solo ai breakpoint, per adattare il carattere al design.<\/p>\n L’interpolazione live non deve aderire ad uno specifico font weight o design.<\/p>\n<\/div>\n Con l’interpolazione live dei font possiamo portare lo stesso livello di finezza operato dai type designer nei nostri siti e nelle nostre applicazioni. Proprio come prendiamo in considerazione diversi device quando progettiamo, i type designer considerano come i caratteri comunicano e come si comportano a dimensioni ridotte, su schermi a bassa risoluzione, sui grandi monitor, nel copy economico e in tutto quello che sta in mezzo. Queste considerazioni sono in gran parte dipendenti dall’anatomia del carattere<\/a>, che richiede l’interpolazione live del font per essere cambiato all’interno del browser. Propriet\u00e0 come stroke weight e contrasto, counter size, x-height e proporzioni del carattere influenzano tutte il modo in cui gli utenti leggono<\/a>. Queste propriet\u00e0 sono tipicamente bilanciate in una type family. Per esempio, la famiglia JAF Lapture include design separati per testo, display, sottotitoli e descrizioni. La live font interpolation permette ad un singolo font di assumere qualsiasi ruolo. Lo stesso font pu\u00f2 essere ottimizzato per descrizioni impostate a .8 JAF Lapture Display (in alto) e JAF Lapture Text (in basso). Impostato a 40 pixel come display type, reso in Chrome 38. Si noti come la versione display utilizzi degli stroke weight pi\u00f9 sottili e caratteristiche pi\u00f9 delicate che supportano il suo carattere netto e autoritario senza che diventi troppo pesante alle dimensioni pi\u00f9 grandi. (Per esempi migliori, confrontate il font live sul vostro device e sul vostro browser).<\/p>\n<\/div>\n JAF Lapture Text. Impostato come corpo del testo a 16 pixel, reso su Chrome. Si noti come caratteristiche quali l’aumentata larghezza del carattere, gli stroke weight pi\u00f9 grossi e gli ascender e descender pi\u00f9 brevi rendano la versione testo pi\u00f9 appropriata per il corpo del testo pi\u00f9 piccolo sistemato in blocchi di paragrafi.<\/p>\n<\/div>\n \u00a0<\/p>\n JAF Lapture Display. Impostato come corpo del testo a 16 pixel, reso in Chrome.<\/p><\/div>\n L’interpolazione live del font permette anche aggiustamenti specifici per la dimensione<\/a> che possono essere fatti per le varie distanze a cui un lettore pu\u00f2 percepire il carattere. Il carattere pu\u00f2 generalmente rimuovere i dettagli tipografici pi\u00f9 fini<\/a> a dimensioni a cui non possono essere percepiti dal lettore, come sui cartelloni che si trovano ad una certa distanza o nelle descrizioni e disclaimer impostati alle dimensioni pi\u00f9 piccole.<\/p>\n Il fatto che l’interpolazione live dei font sia conscia del contesto crea una flessibilit\u00e0 intrinseca nel design del font. Gli aggiustamenti alla leggibilit\u00e0 e alla chiarezza di un font possono essere associati alle opzioni di accessibilit\u00e0. Persone con problemi di vista che aumentano la dimensione di default del testo o che fanno zoom nel browser possono ricevere un font ottimizzato per loro. I font possono cominciare a rispondere a combinazioni di fattori come la dimensione della viewport, la risoluzione dello schermo, la luce ambientale<\/a>, la luminosit\u00e0 dello schermo e la distanza di osservazione. L’interpolazione live del font ci offre la capacit\u00e0 di estendere a tutti esperienze di lettura grandiose, indipendentemente dai cambiamenti nel loro contesto.<\/p>\n<\/div>\n Sebbene l’interpolazione del font possa essere fatta con immagini o A differenza dei files SVG, che sono fatti di XML facilmente modificabile, i formati di file per font ( Per l’interpolazione live dei webfont, abbiamo bisogno di una versione web di qualcosa come ttx<\/a>, un tool per convertire i font file in un formato che possiamo leggere e su cui fare il parsing.<\/p>\n Progetti come jsfont<\/a> e opentype.js<\/a> ci permettono di accedere facilmente e di modificare le tabelle dei font nel browser. In maniera simile al gioco dell’unire i puntini, ogni glifo (la tabella Una serie di punti numerati su un glifo H<\/a>. Il primo insieme di coordinate x-y determina dove \u00e8 sistemato il primo punto sulla griglia del glifo ed \u00e8 relativo alla griglia stessa. Dopo il primo punto, tutti i punti sono relativi al punto proprio prima di quello. Le misure sono impostate in font design units<\/a>.<\/p>\n \u00a0<\/p>\n<\/div>\n L’interpolazione implica che la modifica di un glifo cadr\u00e0 da qualche parte tra i poli del font master, in maniera simile al crossfading delle tracce audio. Per fare dei cambiamenti live ai glifi sul web con i webfont, abbiamo bisogno di confrontare e spostare punti individuali.<\/p>\n I primi punti per il glifo H leggero e pesante hanno coordinate differenti, quindi possono essere interpolati.<\/p>\n<\/div>\n Interpolare un glifo tramite le coordinate \u00e8 sostanzialmente fare la media dei punti. Ci sono dei metodi pi\u00f9 robusti<\/a>, ma non sono ancora disponibili per il web.<\/p>\n<\/div>\n Anche altre propriet\u00e0 collegate ai glifi (come Propriet\u00e0 del glifo. Sia Il nostro lavoro consiste nel offrire agli utenti la migliore esperienza possibile<\/a>, indipendentemente dal fatto che stiano vedendo il design su un device poco performante, su un laptop ad alta risoluzione o su un cartello digitale distante. I font che sono stati selezionati male e che si caricano lentamente intralciano l’esperienza di lettura. Con Dopo la prima interpolazione e resa, possiamo impostare una serie di soglie in cui vengono attivati i re-renders, per evitare il ricalcolo di cambiamenti insignificanti (come ogni singolo cambiamento in larghezza quando il browser viene ridimensionato). Le element queries<\/a> sono una soluzione naturale in questo caso perch\u00e9 si trovano a livello del modulo, che \u00e8 dove si trova spesso il carattere all’interno dei layout. Dal momento che l’informazione per l’interpolazione \u00e8 memorizzata con JavaScript, non c’\u00e8 bisogno di caricare un font completamente differente, ma solo i dati necessari per l’interpolazione. Anche i task runners possono memorizzare questi dati di interpolazione in JavaScript durante il processo di creazione del sito o dell’applicazione, e si pu\u00f2 usare il caching per evitare il ricalcolo del font quando un utente ritorna una seconda volta.<\/p>\n Un’altra sfida consiste nel rendere velocemente e senza intoppi i caratteri interpolati. La transizione in un font interpolato allineata con l’originale pu\u00f2 minimizzare il cambiamento visuale. Altre tecniche, come il caricamento asincrono JavaScript, o semplicemente mettere in cache il font per la prossima volta che il browser non pu\u00f2 caricare il font sufficientemente velocemente, potrebbero anche migliorare la performance percepita.<\/p>\n Come fa notare Nick Sherman<\/a>, tutte queste tecniche illustrano il bisogno di un formato di font standardizzato che includa tutto in una singola soluzione sostenibile. Modificare live i files con JavaScript funziona solo come apripista per futuri formati di font che si possano adattare alla gran variet\u00e0 di condizioni a cui sono soggetti.<\/p>\n<\/div>\n Come il responsive design, l’interpolazione del font richiede delle considerazioni per il design ad entrambe gli estremi, cos\u00ec come per tutto quello che c’\u00e8 nel mezzo. Finch, il carattere tipografico in questi esempi, si presta bene all’interpolazione. David Jonathan Ross<\/a>, il designer di Finch, spiega:<\/p>\n L’interpolazione \u00e8 pi\u00f9 facile quando la struttura della lettera, il contrasto e le forme rimangono relativamente consistenti nella famiglia del font. Alcuni design di caratteri tipografici (come Finch) si prestano bene a questo approccio e se la cavano interpolando tra due estremi. Tuttavia, altri design hanno bisogno di maggior cura e attenzione quando si attraversano assi come il peso o la larghezza. Per esempio, design con un contrasto molto alto o molto basso spesso richiedono poli disegnati separatamente tra gli estremi per riuscire a mantenere la relazione tra spesso e sottile, specialmente dal momento che alcuni elementi vengono forzati ad essere sottili, come la crossbar della ‘e’ minuscola. Inoltre, alcuni design diventano cos\u00ec estremi che la forma della lettere \u00e8 costretta a cambiare, come quando si sostituisce una forma di corsivo decorativo dalla lettera minuscola ‘k’ con una che confonde di meno alla stessa dimensione del testo, o omettendo la barra del segno del dollaro nei font weight pi\u00f9 pesanti.<\/p>\n<\/blockquote>\n La consistenza di Finch tra tutti i pesi gli permette di evitare uno spazio di interpolazione complesso: non c’\u00e8 alcun bisogno di font master o regole in pi\u00f9 per creare cambiamenti intermedi tra i due estremi.<\/p>\n I glifi inoltre non devono ridimensionarsi linearmente sul delta dell’asse. Le linee guida come la teoria dell’interpolazione<\/a> di Lucas De Groot ci aiutano ad aumentare il contrasto tra design simili nel mezzo, che possono apparire troppo simili all’utente.<\/p>\n<\/div>\n Abbiamo gi\u00e0 gli strumenti per farlo accadere adesso. Per esempio, jsfont<\/a> carica un file di font e usa la DataView API<\/a> per creare un font object modificabile di cui poi fa l’embed tramite Come font designer, tipografi, designer e developer, il solo modo per sfruttare la responsive typography sul web \u00e8 lavorare insieme ed essere sicuri che venga fatto meravigliosamente e responsabilmente<\/a>. Oltre ad implementare l’interpolazione live dei webfont nei vostri progetti, potete entrare nelle discussioni, dare il vostro contributo a progetti come opentype.js<\/a> e far sapere ai type designers<\/a> che c’\u00e8 richiesta di font interpolabili.<\/p>\n Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":" Tutti vogliamo progettare delle esperienze tipografiche grandiose e contemporaneamente soddisfare una gran variet\u00e0 di utenti su numerosi devices. Ma i font oggi non sono flessibili e non si ridimensionano. Possiamo risolvere questo problema rendendo i webfont pi\u00f9 come font di sistema e consci del loro contesto, e l’interpolazione live dei web font (la modifica del design di un font nel browser) pu\u00f2 aiutarci a raggiungere il nostro obiettivo. Andrew Johnson ci mostra come.<\/p>\n","protected":false},"author":818,"featured_media":7000764,"comment_status":"open","ping_status":"open","template":"","categories":[271,129,274,275],"tags":[],"coauthors":[447],"class_list":["post-542","article","type-article","status-publish","has-post-thumbnail","hentry","category-javascript","category-numero-112-29-giugno-2015","category-responsive-design","category-tipografia-web-font"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/542","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=542"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000764"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=542"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Diagramma](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2015\/06\/font_glyphinterpolation_h.png\")
<\/p>\n![\"Un](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2015\/06\/font_gylphweights.png\")
<\/p>\n![\"Diagramma](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2015\/06\/font_noordzijcube.png\")
<\/a><\/p>\n\nIl mezzo di comunicazione della tipografia web<\/h2>\n
![\"Un](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2015\/06\/font_gylphbreakpoints.png\")
<\/p>\n![\"Diagramma](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2015\/06\/font_designcompromises.png\")
<\/p>\n\nFaccia il suo ingresso l’interpolazione live dei webfont<\/h2>\n
![\"Diagramma](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2015\/06\/font_gylphbendingpoints.png\")
<\/p>\nControllo tipografico preciso<\/h3>\n
em<\/code>, per il corpo del testo impostato a 1.2em<\/code>, o per H1<\/code> impostati a 4.8em<\/code> in colore chiaro.<\/p>\n![\"Confronto](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2015\/06\/font_displayandtext.png\")
<\/p>\n![\"Un](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2015\/06\/font_text.png\")
<\/p>\n![\"Un](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2015\/06\/font_display.png\")
<\/p>\nRelazioni che si adattano<\/h3>\n
\nL’interpolazione live del font nel web odierno<\/h2>\n
canvas<\/code><\/a>, questi approcci non permettono di selezionare il testo, non lo rendono accessibile agli screen reader o navigabile dai motori di ricerca. I font SVG offrono la manipolazione accessibile dei caratteri, ma attualmente gli mancano le propriet\u00e0 che rendono un font robusto: hinting<\/a>, tabelle OpenType con supporto delle lingue, legature, scambi stilistici e small caps. Esiste una specifica SVG OpenType<\/a>, ma al momento ha un supporto limitato nei browser<\/a>.<\/p>\nttf<\/code>, otf<\/code>, woff2<\/code>, etc.) sono file binari compilati, che complicano il processo di creazione di cambiamenti dal vivo. Si salvano nelle tabelle degli insiemi di informazioni che descrivono un font. Queste tabelle possono variare da cose come una tabella head<\/code> che contiene i setting globali per il font a una tabella name<\/code> che contiene le note dell’autore. Diversi formati di file di font contengono insiemi diversi di informazioni. Per esempio, il formato di font OpenType<\/a>, un super-insieme di TrueType<\/a>, contiene tabelle aggiuntive che supportano pi\u00f9 caratteristiche e controlli (come da specifica OpenType di Microsoft<\/a>):<\/p>\n\n
cmap<\/code>: Character to glyph mapping<\/li>\nhead<\/code>: Font header<\/li>\nhhea<\/code>: Horizontal header<\/li>\nhmtx<\/code>: Horizontal metrics<\/li>\nmaxp<\/code>: Maximum profile<\/li>\nname<\/code>: Naming table<\/li>\nOS\/2<\/code>: OS\/2 and Windows-specific metrics<\/li>\npost<\/code>: PostScript information<\/li>\n<\/ul>\nAccedere alle tabelle del font<\/h3>\n
glyp<\/code> in OpenType) \u00e8 creato da una serie di punti posizionati su una griglia x-y.<\/p>\n![\"Diagramma](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2015\/06\/font_glyphpoints.png\")
<\/p>\n![\"Diagramma](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2015\/06\/font_glyphcoordinates.png\")
<\/p>\n![\"Diagramma](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2015\/06\/font_glyphinterpolation.png\")
<\/p>\nxMin<\/code> e xMax<\/code>) devono essere interpolate per essere sicuri che il rettangolo di selezione sia sufficientemente grande da mostrare l’intero glifo. Inoltre, si pu\u00f2 aggiungere il padding (o bearings<\/em> nella terminologia dei caratteri) alla posizione di un glifo nel suo rettangolo di selezione (propriet\u00e0 leftsidebearing<\/code> e width<\/code>). Questo diventa importante quando si considera il sistema pi\u00f9 grande del carattere (typeface). Due glifi qualsiasi possono trovarsi uno accanto all’altro, quindi i cambiamenti devono essere fatti considerando le loro relazioni rispetto al sistema del carattere nel suo insieme.<\/p>\n![\"Diagramma](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2015\/06\/font_glyphmetrics.png\")
<\/p>\nxMin<\/code>\/xMax<\/code> sia advancewidth<\/code> devono essere ridimensionati in aggiunta ai punti di coordinate del glifo.<\/p>\n<\/div>\n<\/div>\n\nFatelo responsabilmente<\/h2>\n
@fontface<\/code> di CSS come riferimento, i font possono essere migliorati progressivamente<\/a> con l’interpolazione quando \u00e8 appropriato. Gli utenti sui device e con i browser meno potenti saranno serviti meglio con gli standard font @fontface<\/code>.<\/p>\n\nFont che si interpolano bene<\/h2>\n
\n
\nUna chiamata alla tipografia responsive<\/h2>\n
@fontface<\/code> di CSS. Il progetto pi\u00f9 recente opentype.js<\/a> ha dei contributor e una robusta API per modificare i glifi.<\/p>\n