Smashing Podcast Episodio 5 con Jason Pamental: quali sono i caratteri variabili?

Ogni due settimane pubblichiamo un podcast in cui parlo con qualcuno dell'industria del web su un argomento diverso. In questo episodio, impariamo tutto sui caratteri variabili! Parlo con un tipo di conoscenza in materia, Jason Pamental.

Mostra note

Aggiornamento settimanale

• "Sistemi di illustrazione del marchio: disegnare una forte identità visiva", Yihui Liu
• "Lotta per gestire i picchi di traffico", Suzanne Scacca
• "Costruire un layout CSS: streaming live con Rachel Andrew", Rachel Andrew
• "Riepilogo dell'Avvento di Web Design e sviluppo per il 2019", Rachel Andrew
• "Il tuo sito portfolio dovrebbe essere una PWA?", Suzanne Scacca

Caratteri variabili

• Trova Jason sul web su rwt.io
• Newsletter di notizie di tipografia web
• "Caratteri variabili: cosa devono sapere gli autori del Web", Jason Pamental
• Il libro di Ellen Lupton "Pensare con il tipo"
• Il libro di Erik Spiekermann "Smetti di rubare pecore e scopri come funziona il tipo"

Trascrizione

Drew McLellan: È uno stratega del design, un leader dell'esperienza utente, un tecnologo, un esperto di tipografia web ed un esperto invitato del W3C Web Fonts Working Group. Scrive, parla e lavora con team e proprietari di marchi su come impostare meglio la digitazione sulle piattaforme digitali. Ha parlato con organizzazioni come Adobe, Audible, Conde Nast, GoDaddy, IBM e ha tenuto presentazioni, workshop e conferenze in tutto il mondo. La sua newsletter, Web Typography News, è popolare tra coloro che desiderano gli ultimi aggiornamenti e suggerimenti sulla tipografia sul web. È chiaramente un esperto di tipografia web. Ma lo sapevi che ha rappresentato la Svezia a Lawn Croquet ai Giochi Olimpici del 1984? Miei formidabili amici, vi prego di dare il benvenuto a Jason Pamental. Ciao, Jason. Come stai?

Jason Pamental: Sto distruggendo. Soprattutto dopo quell'introduzione.

Drew: Volevo parlare con te oggi ovviamente della tipografia web perché è davvero il tuo genere. Sei un vero esperto di tipografia web. Di questo in generale, ma in particolare, parla un po' di font variabili. Sarò il primo ad ammettere che non sono un esperto di tipografia. Voglio dire, per favore, considerami disinformato come chiunque ascolti. Non puoi proteggermi con alcuna informazione sulla tipografia. Immagino che abbiamo font web utilizzabili sul web probabilmente da circa un decennio. È giusto?

Jason: Sì. In realtà, non sei stato tu ad aver iniziato qualcosa su Twitter un paio di giorni fa? Era come il 9 novembre 2009. Sono passati 10 anni in due giorni dal lancio di Typekit. So che Font Deck aveva ragione nello stesso lasso di tempo. Quindi Google Fonts e Monotype Service non molto tempo dopo. Ho ricevuto un invito beta che mi è stato dato dal mio amico, John Cianci, che in realtà ora è ancora un collega di mia moglie presso l'agenzia in cui lavora per Typekit nel 2009. È stata una reinvenzione completa del mio interesse per il web . Voglio dire, per me è stata a dir poco una rivoluzione. Voglio dire, ho sempre amato la tipografia quando l'ho studiata a scuola, ma non abbiamo potuto farci nulla sul web per 15 anni. È stato davvero sorprendente.

Drew: Devono esserci designer che lavorano sul web ora che hanno avuto font web per 10 anni e potenzialmente. Ci sono designer che lavorano sul web ora che non hanno mai progettato un sito senza la possibilità di selezionare da una vasta gamma di caratteri tipografici.

Jason: Sì, è vero. Nessuno senza quell'esperienza ha dovuto spingere i pixel in salita in entrambe le direzioni come abbiamo fatto noi crescendo. Non siamo dei vecchi irritabili che agitano i pugni al cielo. Ma sì, è piuttosto sorprendente solo con tutte le cose che sono cambiate sul web, l'idea che alcune persone non hanno mai sperimentato in nessun altro modo è notevole.

Drew: Quando abbiamo ottenuto i caratteri Web, è stato un enorme cambiamento nel modo in cui abbiamo iniziato a utilizzare la tipografia sul Web perché potevamo davvero iniziare a utilizzare la tipografia sul Web. C'erano ovviamente cose che potevamo fare con i font sicuri per il web, ma eravamo piuttosto limitati a una tavolozza molto ristretta. Ma ora c'è potenzialmente un altro grande cambiamento quasi altrettanto significativo forse con i caratteri variabili. Voglio dire, cosa sono i caratteri variabili? Cosa fanno per noi? Da dove iniziamo?

Jason: Cerco sempre di iniziare dando alle persone un quadro di riferimento. Quindi, quando pensiamo di utilizzare i caratteri sul web, la cosa che dobbiamo ricordare è che attualmente con i caratteri "tradizionali", ogni carattere è una singola larghezza, peso, inclinazione, variante di quel carattere tipografico. Per ognuno che vogliamo usare sul web, dobbiamo caricare un file. Per un tipico sito Web in cui lo stai utilizzando per il body copy, stai caricando, di solito, quattro caratteri: normale, grassetto, corsivo e corsivo grassetto. Tutte queste cose devono essere caricate. Ognuno di questi è un piccolo frammento di dati che deve essere scaricato, elaborato e reso.

Jason: Quindi, in genere, quello che abbiamo fatto nel corso degli anni è stato costringerci a usare quel numero molto piccolo di caratteri, che in realtà non è una pratica tipografica particolarmente eccezionale. È molto più comune nella progettazione grafica utilizzare una gamma molto più ampia. Potresti utilizzare otto o 10 diversi pesi e varianti di un carattere tipografico in un determinato design. Sul web, siamo stati molto vincolati a causa delle prestazioni. La grande differenza in un font variabile sono tutte quelle permutazioni, quelle variazioni sono contenute in un unico file. Quel formato è davvero efficiente perché quello che sta facendo è memorizzare la forma regolare di quel carattere e quindi quelli che vengono chiamati i delta di dove i punti lungo quelle curve si sposterebbero per renderlo audace o sottile o largo o stretto.

Jason: Quindi, memorizzando solo le differenze, non devi memorizzare l'intero contorno. È un formato molto più efficiente. Sebbene non sia piccolo come un singolo file di font, è comunque molto più piccolo di tutti i singoli presi separatamente. Se guardi qualcosa come Plex Sans di IBM, tutti quei file separati potrebbero essere quasi un megabyte in cui due file di caratteri variabili che contengono tutte le larghezze e i pesi nel verticale in un file, il corsivo nell'altro è come 230K. Questo è per set di personaggi davvero, davvero completi. La maggior parte delle persone potrebbe usarne un sottoinsieme e ridurlo ancora. In genere ho visto file di dimensioni comprese tra 50 e 100 K per un tipico sito Web in lingua occidentale. Non è molto diverso dal caricamento... Una volta caricati tre o quattro singoli file di font, probabilmente stai caricando più dati di così. È un vantaggio interessante per le prestazioni, ma apre anche l'intera gamma del carattere tipografico da utilizzare sul Web tramite CSS.

Drew: Quindi è quasi come consegnare la ricetta piuttosto che il pasto. Piuttosto che qui c'è la versione in corsivo, ecco la versione in grassetto. È come, "Ecco la versione normale e per renderlo corsivo, faresti questo, per renderlo audace, lo faresti". Ciò riduce la dimensione del file che scende oltre il filo.

Jason: Sì. Beh, in un certo senso, ti dà tutti gli ingredienti e poi puoi fare qualsiasi ricetta tu voglia. Perché potresti davvero andare ovunque da ... Per tornare all'esempio Plex, da 100 a 700 peso dove 700 è una sorta di tipico grassetto, 400 sarebbe un peso normale. Ma poi hai molto più leggero. Quindi potresti creare intestazioni di linee davvero grandi e molto sottili o bloccare virgolette o elementi diversi o simili enfasi, e quindi essere in grado di modulare ciò che vuoi che sia il grassetto a dimensioni diverse. Ci sono tutti i tipi di cose diverse che puoi fare per una migliore tipografia, una migliore esperienza utente, ottenendo prestazioni migliori. Quello è il portiere.

Drew: Quindi c'è quasi un numero infinito di modifiche di passaggi tra ciò che considereremmo oggi regolare e audace? Hai davvero la possibilità di andare ovunque lungo quell'asse per modificare tra i due?

Jason: Giusto. Quello che penso sia davvero eccitante per me come qualcuno che ha studiato design grafico e ha studiato abbastanza da vicino il design della stampa per molti anni, l'idea di cosa sia davvero il grassetto dovrebbe cambiare in base alla dimensione del testo che stai visualizzando. Quindi, per impostazione predefinita, quel 400 e 700 per normale e grassetto è un po' quello che il web ha per impostazione predefinita. Ma in verità, l'unico motivo per cui stai chiamando in grassetto è che vuoi un po' di enfasi, vuoi che qualcosa si distingua. Ma più pesante diventa il carattere di piccole dimensioni, più difficile è da leggere. In un certo senso riempie i piccoli spazi aperti. Invece di usare 700 per la copia del corpo quando è impostato su quella dimensione di circa 16 pixel o qualunque cosa stiamo usando lì, usi forse 550, 575 dove ottieni abbastanza enfasi ma i moduli delle lettere sono ancora più aperti. Quindi man mano che diventa più grande, potresti usare un peso più pesante.

Jason: Ma ancora una volta, a quel punto è una scelta tua. Modulandolo per ottenere il giusto livello di enfasi, ma mantenendo comunque un'ottima leggibilità, abbiamo molta più flessibilità. Spero davvero che man mano che questi diventano più popolari e più ampiamente utilizzati, possiamo iniziare a insegnare alle persone ad essere un po' più sfumate con il modo in cui usano quella gamma e diventare effettivamente più espressive e anche più leggibili allo stesso tempo .

Drew: Una cosa che ho notato implementando i progetti come front-end e implementando i progetti che mi sono stati dati è che diverse combinazioni di contrasto di colore e testo chiaro su sfondo scuro rispetto a testo scuro su sfondo chiaro, i pesi possono apparire completamente diversi. Quindi presumibilmente, questo aiuterebbe a uniformare e in qualche modo perfezionare l'esperienza visiva e di lettura basata su cambiamenti del genere?

Jason: Assolutamente. Questa è una delle cose che di solito mostrerò nei seminari e nei discorsi è l'aggiunta di supporto per quella query multimediale in modalità luce. Puoi capovolgere quel contrasto ma poi vuoi farlo in un modo sfumato. A seconda del carattere tipografico, può finire per sembrare molto pesante o un po' esile con un carattere tipografico serif. A volte vuoi essere un po' più pesante o un po' più leggero, ma poi tendi anche ad aver bisogno di distanziare le lettere quando le hai su uno sfondo scuro, altrimenti la lettera forma una specie di smarginatura insieme. Ci sono piccole cose che puoi regolare nella tipografia. La media query è stata semplicemente eliminata. Voglio dire, sono come due righe di codice per aggiungerlo al tuo sito. Allora è quello che fai con quello. Non è necessariamente solo invertire i colori. A volte è necessario regolare il contrasto, ma anche modificare il testo stesso per una migliore leggibilità.

Drew: Quindi presumibilmente non è solo il peso che può essere modificato in un carattere variabile. Ci sono altri modi in cui possiamo cambiare il nostro carattere come mostrato?

Jason: Sì. Dipende completamente dal progettista del tipo. Penso che sia davvero utile sottolineare che questo non è gratuito per tutti nel browser. Il browser può visualizzare solo ciò che è stato abilitato nel carattere. In definitiva, è il designer del tipo che dice che il peso varia da questo a questo. Potresti avere un asse di larghezza. Diventerebbe un po' più stretto o un po' più largo, ma c'è anche la possibilità di avere quelli che vengono chiamati assi registrati. Ci sono larghezza, peso, inclinazione, corsivo e dimensioni ottiche. Queste sono tutte cose fondamentali che sono mappate alle proprietà CSS. L'inclinazione consente un angolo tra l'uno e l'altro, quindi verticale e ne ho visti di quelli con un'inclinazione inversa e inclinata in avanti. È totalmente aperto. Il corsivo è generalmente attivato o disattivato, ma non necessariamente. Si può effettivamente avere... Beh, ci sono disegnatori di caratteri che hanno sperimentato il cambiamento graduale delle forme delle lettere mentre si passa dal normale al corsivo, e una sorta di sostituzione delle lettere lungo il percorso. È una cosa interessante.

Jason: Ma poi c'è la possibilità di avere assi personalizzati. Il progettista del tipo può definire gli assi personalizzati che desidera variare. Ne hai visti di quelli che aggiungono una sorta di gocciolamento diffuso per gravità e tutti i tipi di forme divertenti contorte, o serif estensivi, cambiando l'altezza di ascendenti e discendenti. Sui moduli delle lettere minuscole, cambiando se sono o meno serif o meno. Ci sono tutti i tipi di cose che puoi fare. Dipende davvero dall'immaginazione di un disegnatore di caratteri. Penso che stiamo solo grattando la superficie su cosa potrebbe realisticamente accadere con tutte queste cose. È tutto accessibile tramite CSS.

Drew: Sì. Tutte queste proprietà possono essere modificate semplicemente attraverso il normale CSS che stai fornendo con il resto del tuo progetto. Che tipo di cose possiamo fare in CSS per attivare tali modifiche? È proprio come faremmo con un layout reattivo in cui abbiamo query multimediali per attivarlo?

Jason: Ci sono tutti i modi in cui puoi farlo. C'è un piccolo cambiamento che devi fare. Presumo che forniremo un sacco di collegamenti ad alcune cose che aiuteranno le persone a giocare con queste cose. Voglio dire, ne ho scritti un mucchio. Si spera che questo aiuti le persone. Quindi, sul lato dell'uso, l'asse del peso del carattere viene semplicemente mappato sul peso del carattere. Invece di dire in grassetto regolare, fornisci semplicemente un numero. Puoi cambiarlo con le media query. Puoi cambiarlo con JavaScript. Puoi fare quello che vuoi con quello. Ho usato una tecnica chiamata CSS Locks che ho imparato da Tim Brown per usare fondamentalmente la matematica. Proprietà e calcoli personalizzati CSS da cui ridimensionarlo, una volta raggiunto un punto di interruzione piccolo fino a un punto di interruzione grande, ridimensiona in modo uniforme la dimensione del carattere e l'altezza della linea.

Jason: Quindi puoi anche usare un po' di JavaScript per fare la stessa cosa con il loro peso, se lo desideri. L'asse del peso è mappato al peso del carattere, la proprietà CSS. L'asse della larghezza nel carattere verrà mappato sull'estensione del carattere e questo è semplicemente espresso come percentuale. Dovrei notare che molti designer di caratteri non stanno necessariamente pensando a come questo viene espresso, quindi potresti vedere intervalli di peso che fanno cose strane come andare da 400 a 650. Devi ancora esprimerlo come percentuale, ma funziona. Va bene. Devi solo sapere cos'è la normalità e tutti i caratteri sono documentati. Quindi con qualcosa di diverso da quei due, attualmente, c'è un supporto leggermente irregolare nell'implementazione per slant e corsivo. Molte di quelle cose di cui hai bisogno per ricadere sull'utilizzo delle impostazioni di variazione dei caratteri e quindi puoi fornire più cose contemporaneamente. È un po' come le impostazioni delle funzioni dei caratteri. È una specie di sintassi di livello inferiore in cui puoi fornire un elenco separato da virgole di questo asse di quattro lettere e il valore, quello successivo, quello successivo.

Jason: L'unica cosa che le persone devono tenere a mente è che quando usi le impostazioni di variazione dei caratteri, perdi tutta la comprensione semantica di ciò e perdi il fallback. Il peso del carattere e l'estensione del carattere sono universalmente supportati in tutti i browser. Dovresti assolutamente usare quegli attributi. Per qualsiasi altra cosa, potresti utilizzare le impostazioni di variazione del carattere. Ma il vantaggio dell'utilizzo dello spessore del carattere come faresti normalmente è che se il carattere variabile non viene caricato, il browser può comunque fare qualcosa con quello. Considerando che se non comprende i caratteri variabili o non si carica, se tutto è nelle impostazioni di variazione del carattere, perdi tutte le informazioni sullo stile. Questa è solo una piccola nota a margine lì solo in termini di ciò che è supportato dove. Ma dovrei anche dire che è supportato in tutti i browser di spedizione che potresti incontrare nella maggior parte dei casi. I-11 non funziona, ma puoi fornire caratteri Web statici e quindi utilizzare supporti pubblicitari nel tuo CSS per passare ai caratteri variabili. Quindi eviterai qualsiasi download duplicato di risorse e funziona davvero bene. Ce l'ho già in produzione su diversi siti.

Drew: Penso che come molte delle tecnologie web più moderne che stai vedendo, se c'è un font variabile che ha gorgogliato via silenziosamente per un po', ed è solo quando alla fine si esaurisce e otteniamo supporto nei browser e le persone come te ne fanno rumore e fanno sapere a tutti che è lì. Può sembrare quasi per il designer o lo sviluppatore standard che è solo giorno per giorno a portare avanti il ​​proprio lavoro e non tenere traccia di tutti i download più recenti. Può sembrare che sia uscito dal nulla. Ma immagino che questo stia ribollendo da un bel po'... Voglio dire, hai menzionato le due implementazioni leggermente diverse con cui ora abbiamo a che fare. Esiste una sorta di standard più vecchio e uno più nuovo per l'implementazione?

Jason: Beh, in realtà non è più vecchio e più nuovo. Sono entrambi molto intenzionali. Tornerò su questo tra un secondo perché vale davvero la pena capire qual è la differenza con quelli. Ma hai ragione. Il formato è stato introdotto poco più di tre anni fa, a settembre del 2016. Tre settimane dopo abbiamo avuto la prima implementazione funzionante nella build notturna di Safari. È stato abbastanza rapido avere un browser funzionante. Safari è stato il primo a fornire il pieno supporto per questo. Penso che sia stato quando è uscito High Sierra. Non lo so, era come Safari 12 o qualcosa del genere.

Jason: Ma non molto tempo dopo, abbiamo ricevuto il supporto fornito in Firefox, Edge e Chrome. In realtà abbiamo il supporto del browser da quasi due anni. Ma non c'erano un sacco di caratteri. C'è stato questo tipo di evoluzione costante. Il supporto per il loro utilizzo sul web esiste da più tempo che altrove. Voglio dire, tecnicamente, questo formato funziona anche su sistemi operativi desktop. Quindi, se hai un formato TTF, puoi installarlo nel tuo sistema operativo desktop su Windows o Mac e puoi usarlo in qualsiasi applicazione. Non puoi sempre variare gli assi nel modo in cui potresti voler giocare con loro all'infinito, ma c'è questa nozione di istanze denominate incorporata in quel file di font che lo mappano a ciò a cui siamo abituati.

Jason: In Keynote, per esempio, non c'è un supporto esplicito per i caratteri variabili, ma il formato funziona se ci sono cose come in Tech Sense, ancora, condensato, leggero. Avrai quelli normali, regolari, regolari in grassetto, stretti, ecc., Tutti sarebbero disponibili in un menu a discesa proprio come l'installazione dell'intera famiglia. Quindi, se sei in Illustrator o Photoshop o ora InDesign che è appena stato spedito la scorsa settimana o Sketch che è stato spedito un paio di settimane fa, ora supportano tutti i caratteri variabili, in modo che tu possa quindi accedere a tutti i diversi assi e giocarci sul tuo contenuto del cuore. Ma nel browser, è lì che abbiamo avuto molto di più su cui lavorare. Prendendo spunto da tua moglie, è da un po' che suono questo tamburo cercando di far sì che le persone ne siano più consapevoli. Quindi grazie al lavoro che il team di Firefox ha svolto nella creazione di strumenti per sviluppatori. Con Jen Simmons che ha deciso di spingerlo avanti, abbiamo strumenti incredibili con cui lavorare sul browser che ci aiutano a capire di cosa sono capaci i caratteri.

Drew: Hai menzionato i designer di caratteri e le capacità dei caratteri. Ci sono molti tipi di carattere disponibili?

Jason: Beh, molte persone lo stanno facendo adesso. Probabilmente il posto migliore e più completo dove cercarli è il sito di Nick Sherman, v-fonts.com, v-fonts.com. Questo è solo un sito di catalogo. Sta rapidamente diventando davvero, davvero grande. Ci sono più caratteri variabili che escono continuamente ora. Non c'è un numero enorme di quelli open source, ma se cerchi su GitHub i caratteri variabili, in realtà troverai un sacco di progetti lì. Ma Google ha lanciato una versione beta della sua nuova API con circa una dozzina di caratteri variabili disponibili lì. C'è di più in arrivo da loro. Hanno appena rilasciato Recursive su recursive.design, che è un nuovo fantastico carattere tipografico di Stephen Nixon. La variabile Plex, una è disponibile, è open source. Poi ci sono tonnellate di quelli commerciali.

Jason: La cosa interessante è che Monotype ne ha rilasciati alcuni piuttosto grandi. Ma sono molte fonderie più piccole e singoli designer che stanno solo aprendo la strada nella sperimentazione di questo formato. Penso che sia davvero fantastico per il design e fantastico per il web che stiamo vedendo tutti questi nuovi design di nuovi designer o designer più piccoli che stanno aprendo questo nuovo terreno. Perché mi piace vederli riuscire in questo perché hanno davvero preso l'iniziativa di mettere in giro alcune cose fantastiche.

Drew: Stiamo vedendo qualche aggiornamento dei caratteri esistenti per essere caratteri variabili per avere le famiglie sostituite da un singolo carattere variabile? Sta succedendo?

Jason: Lo è. Quelli rilasciati da Monotype sono aggiornamenti di alcuni caratteri tipografici davvero classici. FF Meta è stato uno che li ho aiutati a lanciare progettando la demo per l'anno scorso. Ce l'hanno. Univers, Frutiger, Avenir, penso che quelli siano quelli che hanno rilasciato finora, quei quattro. Quelli sono davvero una specie di caratteri tipografici di marca classici di base. Stanno lavorando di più. So che ne hanno almeno un'altra mezza dozzina o giù di lì che si trovano in varie fasi della produzione. So che Dalton Maag, che fa un sacco di lavori tipografici personalizzati per le grandi aziende, ha diversi caratteri variabili davvero carini. Ho lavorato con TypeTogether. Hanno anche diversi caratteri tipografici davvero fantastici. io conosco quello...

Jason: Ho mostrato in alcune delle conferenze in cui ho parlato di queste cose che anche Adidas ha le sue e che usa per tutto il lavoro del suo marchio sulla stampa da quasi due anni ormai. Che è roba davvero, davvero notevole. Ma anche Mark Simonson sta lavorando a una versione variabile di Proxima Nova. Questo è un grosso problema. È stato uno dei font web più venduti di tutti i tempi. Sta succedendo. Sta succedendo a pezzetti, su e giù per la scala. Ma anche qualcosa di semplice come iscriversi a David Jonathan Ross, Font of the Month Club, ti darà un font variabile quasi ogni mese. Voglio dire, è stato davvero incredibile con le cose che ha pubblicato. Sono tipo 72 dollari all'anno o qualcosa del genere. Ha pubblicato ogni genere di cose davvero belle.

Drew: È piuttosto interessante quindi, perché ovviamente, con le capacità dei caratteri variabili, puoi creare nuovi design che li utilizzino. Ma potenzialmente, potrebbero esserci siti in produzione in cui sono ora disponibili versioni di caratteri variabili in cui qualcuno potrebbe tornare indietro, rivisitarlo e sostituire più file di caratteri con una nuova implementazione basata su una nuova versione di caratteri variabili.

Jason: Sì, assolutamente. Queste sono alcune delle domande che ricevo abbastanza regolarmente. Di recente, stavo guardando un sito web di trasmissioni sportive piuttosto grande che il team di sviluppo mi ha posto per la stessa domanda. Ho cercato, e sicuramente, per due dei caratteri tipografici che stanno usando, sono disponibili caratteri variabili. Una rapida ricerca ci ha mostrato che potremmo sostituire quattro istanze di un carattere tipografico e tre dell'altro con due file di caratteri variabili e togliere oltre il 70% della dimensione del file in cinque richieste. Voglio dire, sarebbe una domanda vincente dal punto di vista delle prestazioni. Per un sito davvero su larga scala, quando si considera la rimozione di quasi 300.000 di download di dati su milioni di utenti, ciò si traduce in un reale risparmio di denaro e costo della larghezza di banda. Anche da quel punto di vista puramente pratico senza riscrivere nessuno dei loro CSS, semplicemente sostituendo quei caratteri, sarà già una vittoria significativa per loro in termini di prestazioni, tempo di rendering delle pagine e quindi costi di larghezza di banda effettivi per loro.

Drew: In termini pratici, è così semplice come sembra, scambiare uno con l'altro?

Jason: Può essere. Penso che l'esempio perfetto di ciò sia qualcosa che Google si è lasciato sfuggire casualmente ad ATypI a settembre di aver iniziato a farlo con Oswald al ritmo di 150 milioni di volte al giorno. Ne hanno creato una versione con caratteri variabili e hanno appena iniziato a navigarlo su siti Web che utilizzavano un numero sufficiente di istanze in cui avrebbe prodotto un vantaggio significativo. Non l'hanno detto a nessuno. Non l'hanno detto ai proprietari del sito. Nessuno doveva fare niente. Perché aveva la corretta mappatura dell'asse del peso in modo che le impostazioni predefinite funzionassero. 150 milioni di volte al giorno servono molti font. Questo sta iniziando a fornire loro alcune informazioni migliori su come sarebbe questo panorama per loro se potessero iniziare a cambiare i primi cinque caratteri Web che servono? Presumo che Open Sans sia probabilmente uno di quelli. So che probabilmente Lato è lì dentro, Roboto.

Jason: Quindi, se guardi quelli e guardi come potrebbero apparire le versioni ottimizzate, allora puoi vedere che ci sono alcuni motivi molto chiari per cui Google sarebbe interessato a questo. Quindi, se guardi dall'altra parte, solo lo spazio di progettazione e quanto più fedele alla voce di un marchio potrebbe essere un'azienda se stesse lavorando con l'intera gamma dei caratteri tipografici del proprio marchio piuttosto che doverli scambiare con quelli diversi o essere più limitato nella loro tavolozza. Quindi ci sono cose davvero interessanti da imparare ed esplorare su entrambe le estremità di quello spettro.

Drew: Sembra un eccitante nuovo mondo di tipografia e opportunità per scrivere in un modo più sensibile e potenzialmente più creativo sul web di quanto non fossimo stati in grado di fare prima.

Jason: Beh, questo è certamente quello che spero. Penso che uno dei maggiori ostacoli all'adozione dei font sul web in tutte le fasi sia stato il rendimento. Allora cosa succede? Quanto tempo ci vuole per caricare? Cosa significa per il tempo di rendering sulla pagina? Abbiamo quei problemi di quel tipo di flash di testo invisibile o testo senza stile. Alle prese con tutte queste cose, davvero, si torna a quanto tempo ci vuole per arrivarci? Come reagisce il browser a questo? Ci sono molte cose che possiamo fare per mitigare alcuni di questi problemi. Ma se abbiamo un font migliore e un modo migliore per servirlo, tutti questi problemi diventano molto meno significativi. Quindi, avendolo a posto, allora possiamo essere molto più espressivi. Possiamo davvero provare a spingere la fine del design di questo e provare ad essere un po' più creativi.

Drew: Perché ultimamente hai scritto in qualche modo per esprimere la sensazione che forse il web sia finito in una sorta di trappola di progettare un modello di articolo per sito, magari con alcune variazioni per alcuni tipi diversi di contenuto. Ma tutti stanno andando alla deriva verso questo stile medium.com di una singola colonna di testo molto leggibile ai miei occhi. Ben composto. È una cosa così brutta?

Jason: Non penso che sia male. Penso solo che diventerà noioso. Voglio dire, quando è uscito Medium, è stato un bel romanzo. Voglio dire, penso che quella colonna di... Come dici tu, fosse una copia abbastanza ben composta. Ha una bella zona. Non era affollato. Non era angusto e barre laterali e tutte queste altre cose. Ci saranno sempre domande sul modello di business e su cosa lo supporterà. Ecco perché penso che sia stata una bellissima riprogettazione del Seattle Times che Mike Monteiro per Mule Design ha fatto alcuni anni fa. Assolutamente stupendo fino al lancio. Poi hanno avuto questi enormi striscioni su entrambi i lati della colonna e questo ha semplicemente portato via tutto quello spazio bianco. È stato un vero peccato.

Jason: Capisco che le aziende devono fare soldi. Ci sono ramificazioni a questo. Quindi sarebbe meraviglioso avere questa opzione. Per avere quel bel layout pulito. Ma non dovrebbe essere l'unico. Abbiamo tutte queste capacità in CSS che ci permettono di fare cose davvero interessanti con margini e layout. Voglio dire, non è nemmeno solo il fatto che ora abbiamo la griglia. Ma il fatto che possiamo fare calcoli nel browser in CSS ci permette di fare cose molto più interessanti. Mettiti a strati con quello, la capacità di essere molto più espressivo con il tipo, quindi potremmo iniziare a guardare cosa fanno nelle riviste. Vanity Fair non ha un modello di articolo. Ne hanno sei o sette o otto. Se guardi davvero a come dispongono queste cose, c'è un'enorme quantità di variabilità ma sta giocando all'interno di un sistema.

Jason: Quindi, quando creiamo un sistema di progettazione per il nostro sito Web, invece di fermarci a un solo layout, abbiamo un modo relativamente semplice per creare alcuni switch nei nostri sistemi di gestione dei contenuti. La maggior parte di loro supporta una buona dose di flessibilità. Non c'è motivo per cui non potremmo dare alle persone una scelta. Voglio usare il layout uno, due, tre, quattro, cinque, sei. Questo introdurrà margini diversi, offset diversi. Magari introducendo la possibilità di creare alcune colonne. Ci sono molte cose diverse che potremmo fare per creare un web molto più interessante. Penso che quel tipo possa svolgere un ruolo davvero importante in questo.

Drew: Il tipo è il nostro salvatore quando si tratta di aggiungere un po' più di personalità al web?

Jason: Beh, penso che possa essere. Penso che abbiamo avuto questa lunga evoluzione sul web verso una migliore usabilità. Ma penso che una delle vittime ci sia quando tutto ciò di cui ci preoccupiamo è quell'utilitarismo, è un approccio utilizzabile? Questo tende a battere la personalità. Poi, quando ogni singolo sito web è... Ancora una volta, abbiamo avuto i font web e questo ha creato un nuovo livello di espressività che prima non avevamo. Poi, all'improvviso, potremmo... I display sono migliorati. Quindi i serif sono tornati nel mix. Potremmo usarli di nuovo sul web. Queste cose hanno aggiunto un po' di vita. Quindi abbiamo in qualche modo ottimizzato il ritorno a tutti usando uno o due San-serif. È Open Sans o è Roboto o Oswald o altro. Siamo tornati alla stessa cosa in cui ci sono tonnellate di caratteri tipografici davvero buoni e davvero leggibili. Non abbiamo davvero insegnato a questa attuale generazione di designer di UX che sono spesso quelli che guidano molto di questo sulla tipografia. Qualsiasi cosa su quanto possa essere espressivo, quanto possa alterare l'umore e il tono.

Jason: Quindi abbiamo un numero enorme di persone che dettano la direzione del design delle cose sul web che hanno idee sul tipo che forse non sono ben informate come qualcuno che ha studiato design grafico e quelle nozioni di leggibilità. Dobbiamo mettere insieme queste cose. Non è l'uno o l'altro. È un e. Deve essere.

Drew: Soprattutto quando parliamo di personalità e di tono e umore. Da un punto di vista aziendale o da ciò di cui stiamo parlando sono aspetti di un marchio. Quindi, facendo sembrare tutto uguale, stiamo perdendo la capacità di comunicare un marchio ai clienti?

Jason: Assolutamente. Non per immergermi nella politica, ma penso che l'insieme... Uno dei maggiori problemi che abbiamo sicuramente vissuto negli Stati Uniti, e sono sicuro che non è così diverso da quello che è successo nel Regno Unito negli ultimi anni. Quando tutte le notizie vengono consumate attraverso un'unica piattaforma e tutto sembra uguale, non c'è distinzione di voce. Quindi è qualcosa come il 75% degli adulti negli Stati Uniti afferma di ricevere una parte significativa delle proprie notizie da Facebook. Voglio dire, mettiamo da parte quanto sia generalmente orribile. Ma dato che tutto è presentato in modo uniforme, non c'è differenza tra un articolo del Guardian, del New York Times, del Wall Street Journal, del Washington Post e delle notizie di destra di Joe. È tutto presentato esattamente allo stesso modo.

Jason: Quando vediamo quel logo, quel tipo di stile, il Guardian è così caratteristico. Il Wall Street Journal è così caratteristico. Riconosciamo immediatamente quando lo vediamo, anche solo un titolo. Sappiamo da dove viene. Poi c'è questa associazione automatica con quel marchio e quell'autenticità. Quando togli tutto questo, ti rimane: "Okay, valuterò questo su un titolo. Quindi è su, chi ha scritto un titolo migliore? Non c'è molto da fare. Quindi penso che abbiamo perso una quantità enorme. Se guardi a cosa sta cercando di fare Apple News Plus, ci sono alcuni sforzi da parte di alcune aziende per provare a reintrodurlo. Blundell ha fatto un lavoro davvero interessante in Europa. Sono stati lanciati negli Stati Uniti, ma non sono sicuro che abbiano mai avuto così tanto successo. That was a platform that would allow you to subscribe and see content from all these different top level newspapers and publications. It would always be in their own design. So that was really kind of an interesting approach there. It was always preserving the brand voice, that authenticity and that authority that would go along with that news. It really helped provide some cues for you as a reader to kind of evaluate what you're reading.

Jason: I think that's important. I think it's not something to be taken lightly.

Drew: Thinking back to RSS readers in days gone past, the same sort of problems we were seeing then where everyone's content was being just distributed via RSS and appearing in a reader in identical format, identical layout. I think you do lose something of the personality and the voice.

Jason: Yeah. È vero. I don't think that's an entirely solvable problem. I think if you can imagine an RSS reader with a different typeface for every headline, it would be crazy. There's a reason why that that doesn't work that well, but there has to be some middle ground. Type does play a role in that. Then certainly, once you get back to the website, there is that sort of instant recognizability that will help that experience stand apart from seeing it anywhere else.

Drew: So say I'm a designer. I'm working in a small agency. I'm turning out designs for all sorts of different clients. I look at my work. I think, “This is all good. This is readable, but it's got no personality in it.” Where do I start to actually put back some interest, some excitement, and not just lean on this sort of uniform UX driven layout that I've sort of conditioned myself to use?

Jason: Well, I think the thing to do is if you've never studied typography, you haven't necessarily kind of trained your eyes to see what the differences are in one typeface to another. Even when you have studied graphic design, you have to remind yourself of these things all the time. So I think oftentimes that I'll recommend, and actually, I wrote about this a few weeks ago because I kept getting asked like, “Where do you start?” I made a list of books that I think are really helpful. So something like Ellen Lupton's book, Thinking with Type is a fantastic introduction to looking at type and seeing it. Erik Spiekermann's book, Stop Stealing Sheep is a great one although I think at the moment, it's out of print. I think that he might be working on another edition but that's so… If you find that one, that's a good one as well.

Jason: Those will help introduce you to the terminology and understanding what the differences are between the different styles of text. Then once you have that basic introduction, it gives you a better frame of reference when you look at other websites. Getting a sense of like, why does this one feel warmer than that one? What are the combinations of type? What are the characteristics? As a web developer often does or web designer often does, you inspect an element, see what the typeface is that's being used there, and that can start to help build a palette of ones that you become familiar with. Very often, designers do hone in on a few that they get to know well and they tend to use them on a lot of different projects. That's not necessarily a bad thing. It's certainly better now if you're working with a variable font and you can be that much more varied.

Jason: So you can decide that on this website, this is what I want to call normal. This is the width that I want to use and the other aspects of it. So even using the same typeface across websites because you have access to the full range of characteristics, it could still look quite different.

Drew: So I think there's a lot of reading to be done. I'm sure we'll add some links to the show notes of all the excellent articles you've written up and some references to these books and what have you. Because I think there's so much to learn. I think we've always got to be learning with these things. The learning never ends.

Jason: It's true. È vero. That is something that I've enjoyed immensely when I started writing this newsletter. Every week when I'm writing it, I'm reading more of the specs. I'm reading more of what other people have discovered and written. There's tremendously knowledgeable folks out there. Rich Rutter, for instance, from Clearleft, wrote a fantastic book called Web Typography. He was one of the founders of Font Deck, which was one of the very first services to launch. He's always been kind of the most scholarly of authors about this stuff. I mean, he's really tremendously thoughtful in the way he puts those things together. But there's a bunch of people doing really interesting stuff. That has kind of forced me to kind of keep up with what other people are doing all the time, which is really fantastic.

Drew: Is there anything in particular that you've been learning lately?

Jason: The stuff that I've been learning the most is actually the corners of the specs. I think it's something that… I mean, again, probably the biggest influence for me on that is probably Rachel [Andrew]. That she's always talking about like, “Well, if you actually read what's written here, there's actually really good stuff to know.” So in reading exactly what the specs are, there's a tremendous amount of great typographic control that is available to us. Then layering into that different things like mix blend modes and CSS and learning more about different size units and how they interact together and learning how to use and where you can use CSS custom properties. I keep reading little bits more and more and then kind of compare that to what the browsers are doing. It really has been a tremendous experience for me in what I've been learning every week. Even having been doing this stuff for 25 years, there's still like a new gem every time I dig into one of these things.

Drew: That's fantastic. Grazie. So if you dear listener would like to hear more from Jason or perhaps hire him to work with you on your web typographic challenges, you can follow him on Twitter where he's @jpamental, or find his website at rwt.io where you can also find the web typography newsletter to sign up to. So thanks for talking to us today, Jason. Do you have any parting words?

Jason: Yeah, experiment. I mean, there's lots of open source stuff to play with. I think once people get this in their hands and get familiar with it, that I think they'll start to see more and more how much fun they can have with this stuff and how much more expressive they can be. I think I was talking to the design director at The Wall Street Journal actually on Friday. I was then talking to their design team. We were talking about it's great that you have a design system that standardizes things, but it's then like any good design where you break that rule. That's where the exciting things really happen. So we've gotten this necessary evolution of like getting really good at the system. Now we've got to break it some. That's when we can get excited again. Break the rules. That's my best advice, I think.