Variable Fonts - Emanuele Coppo

EMANUELE COPP0

Indice

Introduzione .............................................................. 2 L’interpolazione ........................................................ 4 Le prime font variabili ............................................. 10 Il nuovo OpenType ................................................... 16 Supporto ..................................................................... 26 Sitografia .................................................................... 28

Introduzione

Nel 2016, con l’introduzione del nuovo standard OpenType 1.8, una nuova tecnologia è entrata a far parte del mondo della tipografia, in particolare di quella digitale: si tratta delle cosiddette variable fonts, o più semplicemente, font variabili. Ma cosa significa che una font sia “variabile”? Questa la breve definizione data da John Hudson, che introdusse la tecnologia durante la AtypI Conference del 2016: «Una font variabile è una singola font che si comporta come più font».

In poche parole, non sarà più necessario possedere i diversi file Light, Regular, Bold, Extended, Condensed e così via. Basterà un unico file in grado di generare tutte queste variazioni di peso o forma. Ma ciò non è abbastanza: la variazione non consente solo di passare, per esempio, da un Regular a un Bold con lo stesso file, ma permette di definire un qualsiasi spessore compreso fra i due, a totale discrezione dell’utente. Tutto ciò avviene tramite dei design axes, assi di variazione che modificano le proprietà della font in maniera completamente “fluida”. Grazie alle variable fonts non è più un problema trovare la larghezza perfetta, o lo spessore ricercato.

2

75

100

100

900

6

36

0

12

Alcuni esempi di quello che può fare una font variabile: modificare la larghezza, lo spessore, la dimensione ottica e l’inclinazione. Font utilizzate, in ordine: Avenir Next, Meta Variable, Sitka, Acumin Variable Concept.

3

L’interpolazione

Quando si parla di font variabili, spesso si fa riferimento alla cosiddetta “interpolazione”, il principio fondamentale che sta alla base del funzionamento delle variable fonts. In matematica è definita come la «determinazione approssimata dei valori intermedi di una funzione o di una grandezza, a partire da un certo numero di valori noti». Nel caso delle font, l’interpolazione agisce sui punti di controllo che compongono la linea di contorno (outline) del singolo glifo, modificandone la posizione o la curvatura.

Nel mondo della tipografia digitale, l’interpolazione viene spesso utilizzata per generare nuove font a partire da una serie di font predefinite, dette “master”. Attraverso il calcolo matematico, due master (ad esempio un Regular e un Black) vengono “interpolati” tra loro, creando nuove font con caratteristiche intermedie (SemiBold, Bold, ExtraBold ecc.). In questo modo il lavoro del type designer diventa molto più semplice: egli deve preoccuparsi di disegnare solamente le forme master, mentre tutte le altre varianti vengono derivate in maniera automatica. Ciò risulta particolarmente efficace ed economico durante la progettazione di un carattere comprendente numerose famiglie.

4

Esempio di interpolazione della lettera “a� da un Regular a un Black, utilizzando la font Myriad Variable Concept.

Notare come i punti del tracciato e le rispettive maniglie vengono modificati generando un peso intermedio tra i due master.

5

Interpolazione delle lettera “S” da un Regular a un Bold, ottenuta grazie ad Ikarus, il programma per la digitalizzazione delle font sviluppato da Peter Karow, 1973.

Ovviamente, il peso non è l’unico parametro che può essere interpolato: l’interpolazione può agire su tutte le caratteristiche strutturali di un glifo (larghezza, dimensione ottica, contrasto, inclinazione, grazie ecc.), creando una quantità di varianti pressoché illimitata.

Il pioniere di questa tecnologia fu lo sviluppatore tedesco Peter Karow (1940) della fonderia URW, che nel 1973 sperimentò l’interpolazione del peso all’interno di Ikarus, software rivoluzionario per la digitalizzazione delle font.

Ispirato dal lavoro di Karow, il tipografo e designer olandese Gerrit Noordzij (1931) disegnò nel 1982 quello che sarebbe diventato un’icona per il mondo tipografico: il “cubo di Noordzij” mostrava le possibili interpolazioni di un glifo (in questo caso, la lettera “e”) all’interno di uno spazio tridimensionale, definito da tre assi di variazione. La sua teoria anticipò i futuri sviluppi della tipografia digitale e fu fondamentale per la creazione delle variable fonts.

6

y

z

Il “cubo di Noordzij” mostra la variazione della lettera “e” in uno spazio tridimensionale, costituito da tre assi che ne definiscono rispettivamente lo spessore, il contrasto e la lunghezza del terminale. Comparve per la prima volta nel 1982, all’interno del suo libro The Stroke of the Pen, pubblicazione basata sull’inestricabile correlazione tra tipografia e calligrafia e sulle variazioni generate attraverso il dinamismo di una penna.

x

7

Nel 1987 è la volta di un altro type designer olandese, Lucas de Groot (1963), e della sua Interpolation Theory: egli si accorse che i pesi intermedi più corretti dal punto di vista ottico sono disposti lungo una linea curva che produce valori più bassi rispetto a quelli di una semplice retta.

Ad esempio, se lo spessore delle aste verticali di un Regular è di 40 unità e quello di un Bold è di 70, allora lo spessore di un SemiBold non dovrà essere esattamente di 55 unità, ma leggermente meno, in modo da dare l’impressione ottica di essere esattamente “nel mezzo”. Lucas ne derivò una formula matematica e un grafico che definisce precisamente il valore ottimale per ogni peso intermedio possibile.

Il grafico che mostra l’andamento della curva in relazione al peso della font, secondo l’Interpolation Theory di Lucas de Groot. Sulla destra sono riportate le formule matematiche che permettono di stabilire lo spessore ottimale delle aste.

8

Thesis è una superfamiglia di font progettata da Lucas de Groot negli anni’90. Tutti i differenti pesi sono stati disegnati sulla base della sua Interpolation Theory.

9

Le prime font variabili

All’inizio del 1990, quando le font digitali erano ancora un elemento di novità, le due grandi aziende Apple e Adobe stavano già lavorando (in contemporanea, ma separatamente) ad una nuova tecnologia che avrebbe permesso alle font di “trasformarsi” in base alle esigenze dell’utente, in una quantità illimitata di configurazioni.

Nel 1992, entrambe le compagnie pubblicarono la propria versione di variable font: la prima fu Adobe, con i suoi multiple master, e pochi mesi dopo Apple, con le GX Variations.

In questa pagina: il logo delle due aziende Apple e Adobe negli anni ‘90.

Nella pagina successiva: ITC Avant Garde fu aggiornato per il formato multiple master e fu la prima famiglia ITC ad essere pubblicata come MM font. Annuncio a doppia pagina pubblicato in “U&lc”, Vol. 20, n. 1, primavera 1993.

10

Le multiple master fonts (o MM fonts) furono progettate come un’estensione del formato PostScript Type 1, sviluppato dalla stessa Adobe un anno prima, mentre le GX Variations erano parte integrante del motore grafico del nuovo sistema operativo System 7 ed erano basate sul formato TrueType (il diretto competitore dei font PostScript di Adobe).

Tutte e due le versioni, in modo molto simile, permettevano la “variazione” delle font attraverso un certo numero di design axes: grazie ad un’interfaccia software dedicata, l’utente poteva muovere a piacere ciascun asse tra due valori predefiniti per variare alcune proprietà del carattere, che nella maggior parte dei casi erano weight (spessore), width (larghezza) o optical size (dimensione ottica).

11

La prima versione di Adobe Type Manager (ATM) fu rilasciata nel 1990.

ATM era un software progettato per migliorare la gestione delle font e la loro anteprima su schermi e stampanti che non utilizzavano il formato Adobe PostScript.

ATM era anche necessario per poter utilizzare i multiple master.

Perché scomparvero?

In poche parole, la tecnologia delle font variabili esisteva già più di 25 anni fa, in una forma molto simile allo standard che possiamo utilizzare oggi. Ma allora, perché è scomparsa? Cosa ha spinto le due compagnie, Apple e Adobe, ad abbandonare questo formato così innovativo e lasciarlo sepolto fino ad oggi?

Nonostante la tecnologia fosse veramente rivoluzionaria, i multiple master di Adobe erano assai complicati da utilizzare per gli utenti finali.

Nei pochi software compatibili, lavorare con questo formato era un procedimento doloroso.

Gli utenti erano costretti a generare un file per ogni variazione che avevano intenzione di provare: tutto ciò risultava in un hard disk sommerso da file di font con nomi spesso indecifrabili.

Piuttosto che avere a che fare con queste scomode procedure, gli utenti preferivano attenersi alle istanze pre-generate, già incorporate nel file originale, perdendosi quindi tutta la gloria di questa nuova tecnologia.

12

Un altro aspetto a loro sfavore fu il fatto che Adobe, nei suoi multiple master, non disegnava o memorizzava alcun dato per la forma principale della font. Questo perché l’interpolazione avveniva a partire dalle forme estreme, corrispondenti ai valori minimi e massimi degli assi di variazione. Tutte le forme interne, delimitate da questi “vertici”, erano quindi generate in modo automatico, tramite l’interpolazione, e ciò non permetteva ai designer di avere un controllo preciso sulla forma di default del carattere.

In particolare, i due principali fattori che impedirono la diffusione di questa tecnologia furono una promozione molto debole e un supporto software decisamente limitato, sia da parte degli sviluppatori di applicazioni di terze parti, ma anche da parte della stessa Adobe, che non si impegnò per integrare il nuovo formato nelle proprie applicazioni.

Adobe multiple master

Apple GX Variations

Il differente metodo di interpolazione dei formati variabili di Adobe e Apple: le lettere in nero corrispondono ai master appositamente disegnati, quelle in grigio alle forme generate dall’interpolazione. La tecnologia GX Variations permetteva di interpolare la font partendo dalle forme di default del carattere.

13

Sull’altro fronte, il formato variabile di Apple si presentava come più flessibile: tra l’altro, permetteva di creare variazioni del font a partire dalla forma di default, poiché le informazioni su tale forma erano già presenti nelle istruzioni del formato TrueType. Tuttavia, nemmeno le GX Variations ebbero successo, ma non si può dire esattamente che siano fallite. Persero visibilità a causa dello scarso utilizzo, dovuto a una compatibilità limitata ai soli dispositivi Mac e alle applicazioni Apple, ma non furono mai eliminate in modo definitivo. Infatti, dopo oltre 25 anni, le GX Variations sono ancora integrate nel sistema operativo di tutti i computer Mac.

Design normalizzato di una font variabile con tre assi. Il carattere utilizzato è Kepler, un multiple master disegnato da Robert Slimbach per Adobe nel 1996.

14

Buffalo Gal è una delle prime font variabili, progettata da Thomas A. Rickner nel 1992 per Apple. L’obiettivo era quello di andare oltre i design axes convenzionali: possiede infatti sei assi in totale, nessuno dei quali modifica la larghezza o lo spessore. Ispirato al Wood Type di fine ‘800, Buffalo Gal permette di controllare particolari attributi decorativi per un totale di 144 combinazioni distinte, senza contare le infinite possibilità che si possono ottenere tramite l’interpolazione.

Cookies: Fringe: Hooves: Concavity: Bracketing: Toggle Cookies:

15

Il nuovo OpenType

Nel mese di settembre 2016 si svolse a Varsavia l’annuale conferenza della Association Typographique Internationale (ATypI). Fu proprio qui che Microsoft, assieme ad altri tre colossi dell’informatica quali Apple, Adobe e Google, annunciò la nuova tecnologia OpenType 1.8. Si trattò di un momento rivoluzionario per il mondo della tipografia: per l’inaspettata collaborazione tra i quattro maggiori nomi del panorama digitale internazionale, ma soprattutto perché OpenType 1.8 è di fatto la più grande novità tecnologica in ambito tipografico a partire dall’introduzione stessa di OpenType (formato sviluppato nel 1996 da Microsoft e Adobe).

Il logo di AtyPI 2016.

Fondata nel 1957 da Charles Peignot, si tratta di un’organizzazione non-profit che ogni anno istituisce una conferenza per discutere dei nuovi sviluppi della tipografia e del type design.

16

Il grande annuncio di OpenType 1.8 durante la AtypI Conference del 2016. Da sinistra: Behdad Esfahbod (Google), Peter Constable (Microsoft), Ned Holbrook (Apple) e David Lemon (Adobe). Foto di Alessia Mazzarella.

Tra le novità presentate, quella più rivoluzionaria fu appunto l’introduzione delle OpenType Variations, o variable fonts. O forse sarebbe meglio definirla una “re-introduzione”, poiché la tecnologia utilizzata è basata direttamente sulle GX Variations che Apple sviluppò negli anni ’90.

Queste le parole di John Hudson, che introdusse le OpenType Variations durante la conferenza, a proposito della nuova collaborazione tra Microsoft, Apple, Adobe e Google: «Mentre le prime tecnologie per l’interpolazione di font emersero durante le “font wars” all’inizio degli anni ’90 e furono sviluppate individualmente, da compagnie in competizione tra loro, le variable fonts di OpenType sono il prodotto di una nuova collegialità che mira non solo alla definizione di uno standard comune, ma anche all’implementazione di un sistema di interoperabilità e cooperazione.»

17

Negli ultimi anni, molte compagnie si sono dedicate a convertire le loro vecchie font nel nuovo formato variabile. Un esempio è Adobe, che nel 2017 ha pubblicato le versioni variabili di alcune delle sue font piÚ famose, tra cui i classici Myriad e Minion.

Myriad Variable Concept Spessore: Larghezza:

Minion Variable Concept Spessore: Dimensione ottica:

18

Ciascun file possiede un certo numero di design axes. Aumentando o diminuendo il valore su questi assi si ottiene la variazione della font, generata grazie all’interpolazione dei punti tra due o più forme “master”, appositamente disegnate.

Ogni asse è definito da un valore minimo ed uno massimo, più un valore di default che memorizza lo stile standard con il quale si presenta il file alla prima apertura. Per meglio orientare l’utente, il designer può definire una serie di “istanze”, ovvero di combinazioni pre-generate che solitamente corrispondono agli stili più comuni (in altre parole, i classici Light, Regular, Bold ecc.).

L’utente può quindi scegliere tra queste istanze (già denominate), che nell’interfaccia software si presentano come se fossero delle font singole.

Il numero massimo di design axes definibili in una font OpenType 1.8 è pressoché illimitato (65.536, per la precisione). Il nome assegnato agli assi è a discrezione del designer, tuttavia alcuni assi fondamentali e i corrispondenti tag sono stati ufficialmente registrati per garantire una maggiore intercompatibilità:

Tag

Nome

Intervallo numerico

Valore Regular raccomandato

Interpretazione della scala

wght

Weight (peso)

1 – 1000

400

Riferimento alle classi di peso CSS: da 100 (Thin) a 900 (Black)

wdth

Width (larghezza)

>0

100

Percentuale rispetto alla larghezza di default

ital

Italic (corsivo)

0–1

0

0 corrisponde al Roman, 1 all’Italic

slnt

Slant (inclinazione)

-90 – 90

0

Inclinazione in gradi, rispetto alla forma retta

opsz

Optical size (dimensione ottica)

>0

9 – 13

Dimensione del testo in punti

19

Tuttavia, quelli prima elencati sono solamente alcuni degli attributi che un type designer può controllare attraverso i design axes. Le possibilità sono infinite e non esistono regole a riguardo: qualsiasi caratteristica di un glifo può avere il suo asse di variazione. Si spazia dalle proprietà più comuni (come l’altezza della x, il contrasto, la rotondità, lo stile dei terminali e persino la forma delle grazie) a quelle più sperimentali o decorative, a volte con risultati veramente bizzarri.

Alcuni esempi di variable fonts tra le più originali e sperimentali: da notare la transizione da sans-serif a serif in Foreday (DSType, 2018).

Le font variabili possono essere persino usate per generare delle animazioni sul web, come nel caso del cavallo di Muybridge, font ispirata al famoso esperimento del 1878 dell’omonimo fotografo.

20

Verso un design responsivo Per oltre cinque secoli la tipografia ha lavorato a servizio della sola stampa. Con l’avvento della pubblicazione su desktop e con le prime font outline scalabili (i formati PostScript, TrueType e OpenType), si è cominciato a progettare anche per gli schermi. Ma ad oggi, la definizione di “schermo” varia enormemente a seconda del device utilizzato: ognuno di essi si caratterizza infatti per una differente dimensione o risoluzione. Progettare “per lo schermo” richiede quindi un notevole grado di flessibilità nel layout.

Alcune schermate da dropbox.design, il sito web che introduce il rebranding del servizio Dropbox (2017). Il design responsivo permette che la larghezza della font (Sharp Grotesk) venga adattata alle dimensioni dello schermo, ma ciò avviene tramite ben 19 font!

Quando le OpenType Variations saranno supportate da tutti i browser, l’intera tipografia del sito potrà essere sostituita da un unico file variabile.

21

“Responsive design” è il termine utilizzato per descrivere la re-disposizione dinamica di testo, grafica e altri media a seconda delle limitazioni fisiche del device. Attributi come la dimensione ottica, la spaziatura o l’interlinea possono cambiare da schermo a schermo, per fornire la migliore esperienza di lettura possibile. Ad esempio, comprimere di poco la larghezza del testo può eliminare strane sillabazioni o giustificazioni.

Un aspetto fondamentale nei caratteri mobili, ma che è andato perso durante la transizione al digitale, era la dimensione ottica (optical size).

Oggi non è più così comune, ma in passato i caratteri (per la maggior parte i serif) venivano progettati per più dimensioni. Man mano che il carattere si rimpiccioliva, alcune caratteristiche come la spaziatura, il contrasto o il grado di dettaglio delle grazie venivano adattate per garantire una perfetta leggibilità anche nei testi più piccoli.

La dimensione ottica ha fatto ritorno grazie alle OpenType Variations: se la font contiene l’apposito asse di variazione, le modifiche all’optical size possono anche essere applicate in modo automatico a seconda del device.

Visualizzazione della differente spaziatura a seconda della dimensione ottica del carattere. Font utilizzata: Minion Variable Concept (Robert Slimbach, 2017).

22

Esempio di come una optical size responsiva può migliorare la leggibilità di un testo su schermo.

A sinistra un Minion Display (dimensione ottica 36pt), a destra un Minion Caption (dimensione ottica 8pt).

Le dimensioni contano Grazie al nuovo formato variabile, per avere a disposizione tutte le variazioni di una font non sarà più necessario possedere i diversi file Light, Regular, Bold, Extended, Condensed e così via; basterà un unico file OpenType 1.8, in grado di contenere al suo interno tutte queste variabili.

Ne deriva quindi una più chiara organizzazione del database di font sul nostro computer, nonché una notevole riduzione delle dimensioni che tali file vanno ad occupare sull’hard disk.

In particolare, la “compressione” dell’intera famiglia di font in un solo file si rivela estremamente utile e performante nell’ambito del web design: progettare un sito web responsivo, infatti, comporta quasi sempre l’inserimento di una grande quantità di font.

23

Tanti file da significano tante richieste HTTP e quindi un caricamento più lento della pagina web. Grazie alle nuove variable fonts, tutto viene condensato in un unico, leggero file, con un grande risparmio di dati e una riduzione del tempo di caricamento.

Dimensione in byte

Ovviamente il peso del file dipende dalla font in questione, dal suo numero di design axes e soprattutto dalla quantità di master memorizzati (più master garantiscono una maggiore precisione nella variazione delle forme, ma vanno ad aggiungere kilobyte alle dimensioni del file).

Nel complesso, la riduzione del peso è considerevole e può raggiungere persino il 70% in meno rispetto all’intera famiglia in file separati.

File individuali Un file variabile

Numero di stili

24

Dunbar di CJ Dunn è la prima variable font messa in commercio in seguito all’introduzione di OpenType 1.8. Pubblicata ad ottobre 2016 (appena un mese dall’uscita del nuovo formato), si presenta come un sans-serif geometrico ispirato all’Erbar-Grotesk (1926) di Jakob Erbar.

Oltre al peso, Dunbar permette di variare l’altezza della x (x-height), generando stili che vanno dal “Low” al “Tall”.

Spessore: Altezza della x: Dimensione ottica:

25

Nella pagina a fianco, il pannello dei caratteri nel software Adobe Illustrator CC 2018, con l’aggiunta di una nuova interfaccia per modificare le proprietà delle font variabili.

Supporto

L’annuncio di OpenType 1.8 nel 2016 ha creato grande fermento nel mondo tipografico e informatico, incoraggiando le compagnie del settore ad impegnarsi per adattarsi a questo nuovo formato. Nonostante ci sia ancora molto lavoro da fare, il supporto delle OpenType Variations si può considerare ad oggi molto buono.

Adobe ha introdotto le variable fonts nelle sue applicazioni con il rilascio della versione 2018 di Creative Cloud: l’aggiornamento garantisce il supporto in Illustrator e Photoshop e include le versioni variabili di alcune delle più famose font di Adobe: Acumin, Minion, Myriad, Source Code, Source Sans e Source Serif. La compatibilità con InDesign resta comunque una grande lacuna, ma è in programma per le prossime versioni.

Tutte le versioni recenti dei sistemi operativi più diffusi (Windows, macOS, Android e iOS) supportano le OpenType Variations, anche se non tutti offrono un’interfaccia per visualizzarne le proprietà, dovendo spesso ricorrere a software di terze parti. Non è il caso di Microsoft, che in un recente aggiornamento di Windows 10 ha introdotto un nuovo pannello di gestione delle font, che permette di esaminare e modificare

26

tutte le proprietà delle font variabili. Tuttavia, manca completamente il supporto all’interno dei principali software di produttività o elaborazione di testo, come Microsoft Office, Apple Pages o Apple Keynote.

Per quanto riguarda il Web, il luogo principale dove poter sfruttare questa nuova tecnologia, si può dire che il supporto si è ormai consolidato: quasi tutti i browser più utilizzati (considerando ovviamente le versioni più recenti) sono ora compatibili con il nuovo standard OpenType.

Chrome Android

34%

Chrome

30%

Safari iOS

10%

UC Android

4%

Firefox

4%

Internet Explorer

2,5%

Safari

2%

Opera Mini

2%

Edge

2%

I browser più utilizzati a livello mondiale durante il mese di Dicembre 2018: in verde quelli che supportano le OpenType Variations, in rosso quelli non compatibili (i dati sono forniti da caniuse.com e gs.statscounter.com).

27

Sitografia

blog.typekit.com - Variable fonts, a new kind of font for flexible design, Tim Brown, 2016. blog.typekit.com - The Adobe Originals Silver Anniversary Story: How the Originals endured in an ever-changing industry, Tamye Riggs, 2014. monotype.com - From TrueType GX to Variable Fonts, Tom Rickner, 2016. monotype.com - The evolution of typography with variable fonts: an introduction, Jason Pamental, 2018. monotype.com - Variable Fonts: making the promise a reality, Bob Taylor, 2017. developer.microsoft.com - Variable Fonts: An exploration of expressive, performant typography, Greg Whitworth, Melanie Richards, Francois Remy, 2018. docs.microsoft.com - OpenType Design-Variation Axis Tag Registry, 2018. youtube.com - Kerning 2017, Variable Fonts: Full Circle 1991-2017, Thomas Phinney, 2017. medium.com - Introducing OpenType Variable Fonts, John Hudson, 2016. axis-praxis.org - Variable fonts in the browser. v-fonts.com - Variable Fonts: a simple resource for finding and trying variable fonts.

28

Emanuele Coppo Politecnico di Milano, Scuola del Design Design della Comunicazione Corso di Typographic Design C2 Prof. Giangiorgio Fuga, Leo Colalillo a.a. 2018-2019

«Una singola font che si comporta come più font».

Introdotte nel 2016 assieme al nuovo OpenType 1.8, le font variabili, o variable fonts, sono in grado di incorporare tutte le varianti di una famiglia in un unico file. La modifica dei parametri associati consente di “trasformare” la font in maniera totalmente fluida, permettendo all’utente di creare variazioni in quantità pressoché illimitata.

Siamo forse di fronte alla prossima rivoluzione della tipografia digitale? Eppure le sue origini non sono così recenti.