Interpolazione live dei font sul Web

Introduzione all’interpolazione dei font#section1

L’interpolazione del font è 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 (al momento per browser desktop) ha un master leggero e uno pesante per poter interpolare un nuovo font weight.

Un glifo H interpolato utilizzando il 50% del peso leggero e il 50% del peso black. Virtualmente, può esserci un qualsiasi numero di poli e assi collegati a combinazioni di proprietà, ma in questo esempio tutto viene interpolato in una volta sola tra due poli.

Normalmente questi design di caratteri tipografici interpolati finiscono con l’essere esportati come font separati. Per esempio, la famiglia tipografica TheSans contiene files di font individuali per i pesi Extra Light, Light, Semi Light, Plain, SemiBold, Bold, Extra Bold e Black generati usando l’interpolazione.

Pesi di font individuali generati dall’interpolazione dalla famiglia TheSans.

L’interpolazione può alterare più 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.

Un cubo di Noordzij che mostra uno spazio di interpolazione con più poli e più assi.

Nonostante la generazione di font con l’interpolazione standard ci dia una gran flessibilità, i files dei webfont sono ancora statici nel loro ambiente nel browser. Per questo motivo, abbiamo bisogno di più per lavorare con la responsiveness del browser.

Il mezzo di comunicazione della tipografia web#section2

I caratteri tipografici sono legati al loro mezzo di comunicazione. Entrambe i metodi a caratteri mobili e di fotocomposizione 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à relative, entrambe i quali vengono usati quando si impostano i caratteri. Le media queries vengono usate per fare degli aggiustamenti significativi nei vari breakpoint.

Un’approssimazione di tipici breakpoint per il responsive design.

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.

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.

Faccia il suo ingresso l’interpolazione live dei webfont#section3

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ì, i nostri font possono reagire al loro contesto. Siccome il carattere si adatta ed è parzialmente indipendente da un layout responsive, c’è meno bisogno di impostare punti di cambiamento repentini. I font possono aderire ai punti di flessione, non solo ai breakpoint, per adattare il carattere al design.

L’interpolazione live non deve aderire ad uno specifico font weight o design.

Controllo tipografico preciso#section4

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, che richiede l’interpolazione live del font per essere cambiato all’interno del browser. Proprietà come stroke weight e contrasto, counter size, x-height e proporzioni del carattere influenzano tutte il modo in cui gli utenti leggono. Queste proprietà 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ò essere ottimizzato per descrizioni impostate a .8em, per il corpo del testo impostato a 1.2em, o per H1 impostati a 4.8em in colore chiaro.

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ù sottili e caratteristiche più delicate che supportano il suo carattere netto e autoritario senza che diventi troppo pesante alle dimensioni più grandi. (Per esempi migliori, confrontate il font live sul vostro device e sul vostro browser).

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ù grossi e gli ascender e descender più brevi rendano la versione testo più appropriata per il corpo del testo più piccolo sistemato in blocchi di paragrafi.

 

JAF Lapture Display. Impostato come corpo del testo a 16 pixel, reso in Chrome.

L’interpolazione live del font permette anche aggiustamenti specifici per la dimensione che possono essere fatti per le varie distanze a cui un lettore può percepire il carattere. Il carattere può generalmente rimuovere i dettagli tipografici più fini 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ù piccole.

Relazioni che si adattano#section5

Il fatto che l’interpolazione live dei font sia conscia del contesto crea una flessibilità intrinseca nel design del font. Gli aggiustamenti alla leggibilità e alla chiarezza di un font possono essere associati alle opzioni di accessibilità. 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, la luminosità dello schermo e la distanza di osservazione. L’interpolazione live del font ci offre la capacità di estendere a tutti esperienze di lettura grandiose, indipendentemente dai cambiamenti nel loro contesto.

L’interpolazione live del font nel web odierno#section6

Sebbene l’interpolazione del font possa essere fatta con immagini o canvas, 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à che rendono un font robusto: hinting, tabelle OpenType con supporto delle lingue, legature, scambi stilistici e small caps. Esiste una specifica SVG OpenType, ma al momento ha un supporto limitato nei browser.

A differenza dei files SVG, che sono fatti di XML facilmente modificabile, i formati di file per font (ttf, otf, woff2, 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 che contiene i setting globali per il font a una tabella name che contiene le note dell’autore. Diversi formati di file di font contengono insiemi diversi di informazioni. Per esempio, il formato di font OpenType, un super-insieme di TrueType, contiene tabelle aggiuntive che supportano più caratteristiche e controlli (come da specifica OpenType di Microsoft):

• cmap: Character to glyph mapping
• head: Font header
• hhea: Horizontal header
• hmtx: Horizontal metrics
• maxp: Maximum profile
• name: Naming table
• OS/2: OS/2 and Windows-specific metrics
• post: PostScript information

Per l’interpolazione live dei webfont, abbiamo bisogno di una versione web di qualcosa come ttx, un tool per convertire i font file in un formato che possiamo leggere e su cui fare il parsing.

Accedere alle tabelle del font#section7

Progetti come jsfont e opentype.js 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 glyp in OpenType) è creato da una serie di punti posizionati su una griglia x-y.

Una serie di punti numerati su un glifo H. Il primo insieme di coordinate x-y determina dove è sistemato il primo punto sulla griglia del glifo ed è 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.

 

L’interpolazione implica che la modifica di un glifo cadrà 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.

I primi punti per il glifo H leggero e pesante hanno coordinate differenti, quindi possono essere interpolati.

Interpolare un glifo tramite le coordinate è sostanzialmente fare la media dei punti. Ci sono dei metodi più robusti, ma non sono ancora disponibili per il web.

Anche altre proprietà collegate ai glifi (come xMin e xMax) devono essere interpolate per essere sicuri che il rettangolo di selezione sia sufficientemente grande da mostrare l’intero glifo. Inoltre, si può aggiungere il padding (o bearings nella terminologia dei caratteri) alla posizione di un glifo nel suo rettangolo di selezione (proprietà leftsidebearing e width). Questo diventa importante quando si considera il sistema più 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.

Proprietà del glifo. Sia xMin/xMax sia advancewidth devono essere ridimensionati in aggiunta ai punti di coordinate del glifo.

Fatelo responsabilmente#section8

Il nostro lavoro consiste nel offrire agli utenti la migliore esperienza possibile, 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 @fontface di CSS come riferimento, i font possono essere migliorati progressivamente con l’interpolazione quando è appropriato. Gli utenti sui device e con i browser meno potenti saranno serviti meglio con gli standard font @fontface.

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 sono una soluzione naturale in questo caso perché si trovano a livello del modulo, che è dove si trova spesso il carattere all’interno dei layout. Dal momento che l’informazione per l’interpolazione è memorizzata con JavaScript, non c’è 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ò usare il caching per evitare il ricalcolo del font quando un utente ritorna una seconda volta.

Un’altra sfida consiste nel rendere velocemente e senza intoppi i caratteri interpolati. La transizione in un font interpolato allineata con l’originale può 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ò caricare il font sufficientemente velocemente, potrebbero anche migliorare la performance percepita.

Come fa notare Nick Sherman, 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à di condizioni a cui sono soggetti.

Font che si interpolano bene#section9

Come il responsive design, l’interpolazione del font richiede delle considerazioni per il design ad entrambe gli estremi, così come per tutto quello che c’è nel mezzo. Finch, il carattere tipografico in questi esempi, si presta bene all’interpolazione. David Jonathan Ross, il designer di Finch, spiega:

L’interpolazione è più 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ì estremi che la forma della lettere è 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ù pesanti.

La consistenza di Finch tra tutti i pesi gli permette di evitare uno spazio di interpolazione complesso: non c’è alcun bisogno di font master o regole in più per creare cambiamenti intermedi tra i due estremi.

I glifi inoltre non devono ridimensionarsi linearmente sul delta dell’asse. Le linee guida come la teoria dell’interpolazione di Lucas De Groot ci aiutano ad aumentare il contrasto tra design simili nel mezzo, che possono apparire troppo simili all’utente.

Una chiamata alla tipografia responsive#section10

Abbiamo già gli strumenti per farlo accadere adesso. Per esempio, jsfont carica un file di font e usa la DataView API per creare un font object modificabile di cui poi fa l’embed tramite @fontface di CSS. Il progetto più recente opentype.js ha dei contributor e una robusta API per modificare i glifi.

Come font designer, tipografi, designer e developer, il solo modo per sfruttare la responsive typography sul web è lavorare insieme ed essere sicuri che venga fatto meravigliosamente e responsabilmente. Oltre ad implementare l’interpolazione live dei webfont nei vostri progetti, potete entrare nelle discussioni, dare il vostro contributo a progetti come opentype.js e far sapere ai type designers che c’è richiesta di font interpolabili.

Illustrazioni: {carlok}