Smashing Podcast Episodul 5 cu Jason Pamental: Ce sunt fonturile variabile?

La fiecare două săptămâni, publicăm un podcast în care vorbesc cu cineva din industria web pe o altă temă. În acest episod, să învățăm despre toate fonturile variabile! Vorbesc cu un font de cunoștințe în această chestiune, Jason Pamental.

Afișați note

Actualizare săptămânală

• „Sisteme de ilustrare a mărcii: desenarea unei identități vizuale puternice”, Yihui Liu
• „Luptându-ne să mă ocup de creșterea traficului”, Suzanne Scacca
• „Crearea unui aspect CSS: stream live cu Rachel Andrew”, Rachel Andrew
• „Rezumat Advent Design și dezvoltare web pentru 2019”, Rachel Andrew
• „Ar trebui ca site-ul dvs. de portofoliu să fie un PWA?”, Suzanne Scacca

Fonturi variabile

• Găsiți Jason pe web la rwt.io
• Buletin informativ de știri tipografie web
• „Fonturi variabile: ce trebuie să știe autorii web”, Jason Pamental
• Cartea lui Ellen Lupton „Thinking With Type”
• Cartea lui Erik Spiekermann „Opriți să furați oile și aflați cum funcționează tipul”

Transcriere

Drew McLellan: Este un strateg de design, lider UX, tehnolog, expert în tipografie web și expert invitat în Grupul de lucru W3C Web Fonts. El scrie, vorbește și lucrează cu echipe și proprietari de mărci pentru a seta mai bine textul pe platformele digitale. A vorbit cu organizații precum Adobe, Audible, Conde Nast, GoDaddy, IBM și a susținut prezentări, ateliere și conferințe în întreaga lume. Buletinul său informativ, Web Typography News, este popular printre cei care doresc cele mai recente actualizări și sfaturi despre tipografie pe web. Este clar un expert în tipografie web. Dar știați că a reprezentat Suedia la Lawn Croquet la Jocurile Olimpice din 1984? Prietenii mei zdrobitori, vă rog bun venit lui Jason Pamental. Bună, Jason. Ce mai faci?

Jason Pamental: Sunt zdrobitor. Mai ales după acea introducere.

Drew: Am vrut să vorbesc cu tine astăzi, evident, despre tipografia web, pentru că asta e treaba ta. Ești un adevărat expert în tipografia web. Despre asta în general, dar în special, vorbiți puțin despre fonturile variabile. Voi fi primul care recunosc că nu sunt un expert în tipografie. Adică, te rog să mă consideri la fel de neinformat ca oricine care mă ascultă. Nu mă puteți patrona cu nicio informație despre tipografie. Bănuiesc că avem fonturi web utilizabile pe web de aproximativ un deceniu. Este corect?

Jason: Da. De fapt, nu tu ai început ceva pe Twitter acum câteva zile? A fost ca pe 9 noiembrie în 2009. Sunt 10 ani în două zile de când s-a lansat Typekit. Știu că Font Deck a avut dreptate în același interval de timp. Apoi Google Fonts și Monotype Service nu mult timp după aceea. Am avut o invitație beta care mi-a fost oferită de prietenul meu, John Cianci, care de fapt este încă coleg cu soția mea la agenția unde lucrează la Typekit cândva în 2009. Aceasta a fost o reinventare completă a interesului meu pentru web. . Adică, a fost o revoluție pentru mine. Adică, întotdeauna mi-a plăcut tipografia când am studiat-o la școală, dar nu am putut face nimic cu ea pe web timp de 15 ani. A fost destul de uimitor.

Drew: Trebuie să existe designeri care lucrează pe web acum, care au avut fonturi web de 10 ani, plus potențial. Există designeri care lucrează pe web acum și care nu au proiectat niciodată un site fără abilitatea de a selecta dintr-o gamă largă de fonturi.

Jason: Da, este adevărat. Nimeni fără această experiență nu a fost nevoit să împingă pixelii în sus în ambele direcții, așa cum am făcut noi în copilărie. Nu suntem niște bătrâni nervoși care își scutură pumnii spre cer. Dar da, este oarecum uimitor doar cu toate lucrurile care s-au schimbat pe web, ideea pe care unii oameni nu au experimentat-o ​​niciodată în alt mod este remarcabilă.

Drew: În momentul în care am primit fonturi web, aceasta a fost o schimbare masivă în modul în care am început să folosim tipografia pe web, deoarece am putea începe cu adevărat să folosim tipografia pe web. Erau, evident, lucruri pe care le puteam face cu fonturi sigure pentru web, dar eram destul de limitati la o paletă foarte restrânsă. Dar există potențial acum o altă schimbare aproape la fel de semnificativă, probabil, cu fonturile variabile. Adică, ce sunt fonturile variabile? Ce fac ei pentru noi? De unde începem?

Jason: Întotdeauna încerc să încep prin a le oferi oamenilor un cadru de referință. Așadar, când ne gândim la utilizarea fonturilor pe web, lucrul pe care trebuie să ne amintim este că, în prezent, cu fonturile „tradiționale”, fiecare font este o lățime, greutate, înclinare, variantă individuală a tipului respectiv. Pentru fiecare pe care vrem să-l folosim pe web, trebuie să încărcăm un fișier. Pentru un site web obișnuit în care îl utilizați pentru copierea corpului, încărcați, de obicei, patru fonturi: obișnuit, bold, italic și bold italic. Toate aceste lucruri trebuie să se încarce. Fiecare dintre acestea este un pic de date care trebuie descărcate, procesate și redate.

Jason: De obicei, ceea ce am făcut de-a lungul anilor este să ne constrângem să folosim acel număr foarte mic de fonturi, ceea ce de fapt nu este o practică tipografică deosebit de bună. Este mult mai comun în designul grafic să folosești o gamă mult mai largă. Puteți utiliza opt sau 10 greutăți și variante diferite ale unui tip de caractere într-un design dat. Pe web, am fost foarte constrânși din cauza performanței. Marea diferență într-un font variabil sunt toate acele permutări, acele variații sunt conținute într-un singur fișier. Acest format este cu adevărat eficient, deoarece ceea ce face este să stocheze forma obișnuită a acelui personaj și apoi ceea ce se numesc deltele în care punctele de-a lungul acelor curbe s-ar deplasa pentru a-l reda ca îndrăzneț sau subțire, lat sau îngust.

Jason: Așadar, păstrând doar diferențele, nu trebuie să stocați întregul schiță. Este un format mult mai eficient. Deși nu este la fel de mic ca un singur fișier cu font, este totuși mult mai mic decât toate fișierele individuale luate separat. Dacă vă uitați la ceva de genul Plex Sans de la IBM, toate acele fișiere separate ar putea fi de aproape un megaoctet în care două fișiere cu fonturi variabile care conțin toate lățimile și greutățile din verticală într-un fișier, cursivele din celălalt sunt ca 230K. Asta pentru seturi de caractere cu adevărat, cu adevărat complete. Cei mai mulți oameni ar putea folosi un subset al acestuia și să-l facă și mai mic. În general, am văzut acele dimensiuni de fișiere în jur de 50 până la 100K pentru o nevoie tipică de site-uri în limba occidentală. Nu este atât de diferit de încărcare... Odată ce încărcați trei sau patru fișiere cu fonturi individuale, probabil că încărcați mai multe date decât atât. Este o victorie interesantă pentru performanță, dar, de asemenea, ne deschide întreaga gamă de caractere pe care să le folosim pe web prin CSS.

Drew: Deci este aproape ca și cum ai livra rețeta mai degrabă decât masa. Mai degrabă decât aici este versiunea italic, aici este versiunea îndrăzneață. Este de genul: „Iată versiunea obișnuită și pentru a o face italic, ai face asta, pentru a o face îndrăzneață, ai face asta.” Aceasta reduce dimensiunea fișierului care coboară peste fir.

Jason: Da. Ei bine, într-un fel, vă oferă toate ingredientele și apoi puteți face orice rețetă doriți. Pentru că ai putea merge oriunde de la... Pentru a reveni la exemplul Plex, de la 100 la 700 de greutate, unde 700 este un fel de caractere aldine tipice, 400 ar fi o greutate normală. Dar atunci ai mult mai brichetă. Așa că ați putea face titluri cu linii foarte mari și foarte fine sau ghilimele de bloc sau elemente diferite sau ca accent, și apoi să puteți modula ceea ce doriți să fie îndrăzneț la diferite dimensiuni. Există tot felul de lucruri diferite pe care le puteți face pentru o tipografie mai bună, o experiență de utilizator mai bună, pentru a obține în același timp performanțe mai bune. Acesta este portarul.

Drew: Deci există un număr aproape infinit de modificări de pași între ceea ce am crede astăzi ca fiind obișnuit și îndrăzneț? De fapt, aveți capacitatea de a merge oriunde de-a lungul acelei axe pentru a modifica între cele două?

Jason: Corect. Ceea ce cred că este cu adevărat interesant pentru mine, ca cineva care a studiat designul grafic și s-a uitat destul de atent la designul tipărit timp de mulți ani, ideea a ceea ce este cu adevărat aldine ar trebui să se schimbe în funcție de dimensiunea textului pe care îl redați. Deci, implicit, acele 400 și 700 pentru normal și îndrăzneț este un fel de ceea ce este implicit pe web. Dar, în adevăr, singurul motiv pentru care strigi îndrăzneț este că vrei ceva accent, vrei ca ceva să iasă în evidență. Dar cu cât fontul devine mai greu de la dimensiunea mică, cu atât este mai greu de citit. Cam umple micile spații deschise. În loc să folosiți 700 pentru copierea corpului când este setat la acea dimensiune de aproximativ 16 pixeli sau orice folosim acolo, utilizați poate 550, 575 unde obțineți suficient accent, dar formele de litere sunt încă mai deschise. Apoi, pe măsură ce devine mai mare, ați putea folosi o greutate mai mare.

Jason: Dar din nou, este un fel de alegere a ta în acel moment. Modulând asta pentru a obține nivelul corect de accent, dar menținând totuși o lizibilitate foarte bună, avem mult mai multă flexibilitate. Sper cu adevărat că, pe măsură ce acestea devin mai populare și mai utilizate pe scară largă, putem începe să învățăm oamenii să fie puțin mai nuanțați cu modul în care folosesc acea gamă și să devină mai expresivi și, de asemenea, mai lizibili în același timp. .

Drew: Un lucru pe care l-am observat că implementez design-uri ca front-end și implementez modele care mi s-au oferit este că diferite combinații de contrast de culori și text deschis pe un fundal întunecat față de text întunecat pe fundal deschis, greutățile pot arăta complet diferit. Deci, probabil, acest lucru ar ajuta la uniformizarea și la un fel de finețe experiența vizuală și de lectură pe baza unor astfel de schimbări?

Jason: Absolut. Acesta este unul dintre lucrurile pe care de obicei le voi prezenta în ateliere și discuții este adăugarea în sprijinul acelei interogări media în modul ușor. Puteți schimba acel contrast, dar apoi doriți să o faceți într-un fel nuanțat. În funcție de tipul de literă, acesta poate ajunge să arate foarte greu sau cam subțire cu un tip de literă serif. Uneori, doriți să deveniți puțin mai grele sau puțin mai ușoare, dar apoi aveți tendința să aveți nevoie să distanțați literele atunci când le aveți pe un fundal întunecat sau altfel formele de litere se cam curg împreună. Există lucruri mici pe care le puteți ajusta în tipografie. Interogarea media este eliminată foarte simplu. Adică, este ca două linii de cod să adaugi asta pe site-ul tău. Atunci e ceea ce faci cu asta. Nu este neapărat doar inversarea culorilor. Uneori trebuie să ajustați pentru contrast, dar și să modificați tipul în sine pentru o mai bună lizibilitate.

Drew: Deci, probabil, nu doar greutatea poate fi variată într-un font variabil. Există și alte moduri prin care ne putem schimba fontul așa cum este afișat?

Jason: Da. Depinde complet de proiectantul de tipuri. Cred că este foarte bine să întărim că acesta nu este gratuit pentru toți în browser. Browserul poate reda doar ceea ce a fost activat în font. În cele din urmă, designerul de tip este cel care spune că greutatea variază de la asta. Este posibil să aveți o axă de lățime. Ar deveni puțin mai îngust sau puțin mai lat, dar există și posibilitatea de a avea ceea ce se numește axe înregistrate. Există lățime, greutate, înclinare, cursiv și dimensiune optică. Acestea sunt toate un fel de lucruri de bază care sunt mapate la proprietățile CSS. Înclinarea permite un unghi între unul și altul, așa că în poziție verticală și am văzut de fapt unele cu o înclinare inversă, precum și o înclinare înainte. Asta e total deschis. Cursiva este în general activată sau dezactivată, dar nu neapărat. De fapt, puteți avea... Ei bine, există designeri de tipare care au experimentat schimbarea treptată a formelor literelor, pe măsură ce treceți de la normal la cursiv și un fel de înlocuire a literelor pe parcurs. Este un lucru interesant.

Jason: Dar mai există și posibilitatea de a avea topoare personalizate. Designerul de tipuri poate defini orice axe personalizate pe care doresc să le varieze. Ați văzut unele care adaugă un fel de picurare împrăștiată gravitațional și tot felul de forme distractive de răsucire sau serif extinse, schimbând înălțimea ascensoarelor și coborâtoarelor. Pe formele cu litere mici, schimbând dacă sunt sau nu serif sau nu. Sunt tot felul de lucruri pe care le poți face. Chiar depinde de imaginația unui designer de tipări. Cred că doar zgâriem la suprafață ce s-ar putea întâmpla în mod realist cu toate acele lucruri. Totul este accesibil prin CSS.

Drew: Da. Toate aceste proprietăți pot fi modificate doar prin CSS-ul normal pe care îl furnizați cu restul designului dvs. Ce fel de lucruri putem face în CSS pentru a declanșa aceste schimbări? Este exact așa cum am face cu un aspect receptiv în care avem interogări media pentru a declanșa asta?

Jason: Există tot felul de moduri în care poți face asta. Este o mică schimbare pe care trebuie să o faci. Presupun că vom oferi o grămadă de link-uri către unele lucruri care îi vor ajuta pe oameni să se joace cu aceste lucruri. Adică, am scris o grămadă. Sper că asta îi va ajuta pe oameni. Apoi, pe partea de utilizare, axa ponderii fontului este mapată doar la greutatea fontului. În loc să spui bold obișnuit, doar furnizați un număr. Puteți schimba asta cu interogări media. Îl poți schimba cu JavaScript. Poți să faci cum vrei tu cu asta. Am folosit o tehnică numită CSS Locks pe care am învățat-o de la Tim Brown pentru a folosi practic matematica. Proprietăți personalizate CSS și calcule de la care să-l scalați, odată ce ați atins un punct de întrerupere mic până la un punct de întrerupere mare, scala ușor dimensiunea fontului și înălțimea liniei.

Jason: Atunci poți folosi și puțin JavaScript pentru a face același lucru cu greutatea lor, dacă vrei. Axa de greutate se mapează la greutatea fontului, proprietatea CSS. Axa lățimii din font se va mapa cu întinderea fontului, iar aceasta este doar exprimată ca procent. Ar trebui să remarc că mulți designeri de tip nu se gândesc neapărat la modul în care este exprimat, așa că s-ar putea să vedeți intervale de greutate care fac lucruri ciudate, cum ar fi de la 400 la 650. Încă trebuie să o exprimați ca procent, dar funcționează. Este bine. Trebuie doar să știi ce este normal și toate fonturile sunt documentate. Apoi, cu orice altceva decât cele două, în prezent, există un suport puțin inegal în implementarea pentru slant și italic. Multe dintre acele lucruri de care trebuie să recurgeți la utilizarea setărilor de variație a fontului și apoi puteți furniza mai multe lucruri deodată. Este un fel ca setările caracteristicilor fontului. Este un fel de sintaxă de nivel inferior în care puteți furniza o listă separată prin virgulă a acestei axe de patru litere și valoarea, următoarea, următoarea.

Jason: Singurul lucru de care oamenii trebuie să-l țină cont este că atunci când folosești setările de variație a fontului, pierzi toată înțelegerea semantică a acestuia și pierzi de rezervă. Greutatea fontului și întinderea fontului sunt acceptate universal în toate browserele. Cu siguranță ar trebui să utilizați aceste atribute. Pentru orice altceva, ați putea folosi setările pentru variația fontului. Dar avantajul utilizării ponderii fontului așa cum ați face-o în mod normal este că, dacă fontul variabil nu se încarcă, browserul poate face ceva cu asta. În timp ce dacă nu înțelege fonturile variabile sau nu se încarcă, dacă totul este în setările de variație de font, atunci pierzi toate informațiile de stil. Aceasta este doar o mică notă secundară în ceea ce privește ceea ce este susținut unde. Dar ar trebui să spun, de asemenea, că este acceptat în toate browserele de expediere pe care probabil le veți întâlni în majoritatea circumstanțelor. I-11 nu funcționează, dar puteți furniza fonturi web statice și apoi utilizați suporturile publicitare în CSS pentru a trece la fonturile variabile. Apoi veți evita orice descărcări duplicate de active și funcționează foarte bine. Am deja asta în producție pe mai multe site-uri.

Drew: Cred că, la fel ca multe dintre tehnologiile web mai moderne pe care le vezi, dacă există un font variabil care a fost în liniște de ceva vreme și este doar atunci când se determină în cele din urmă și vom primi suport în browsere. iar oameni ca tine fac zgomot despre asta și spun tuturor că este acolo. Aproape că se simte pentru designerul sau dezvoltatorul standard care își desfășoară zilnic treaba și nu urmărește cele mai recente descărcări. Poate părea că a apărut de nicăieri. Dar bănuiesc că acest lucru a scăpat de destul de... Adică, ați menționat cele două implementări ușor diferite cu care avem de-a face acum. Există un fel de standard mai vechi și unul mai nou pentru implementare?

Jason: Ei bine, de fapt nu este mai vechi și mai nou. Amândoi sunt foarte intenționați. Voi reveni la asta într-o secundă pentru că chiar merită să înțelegem care este diferența cu acestea. Dar ai dreptate. Formatul a fost introdus cu puțin peste trei ani în urmă, a fost în septembrie 2016. De fapt, am avut prima implementare funcțională în versiunea de noapte a Safari trei săptămâni mai târziu. A fost destul de remarcabil de rapid că aveam un browser funcțional. Safari a fost primul care a livrat suport complet pentru acesta. Cred că a fost când a apărut High Sierra. Nu știu, era ca Safari 12 sau ceva de genul ăsta.

Jason: Dar nu după mult timp, am ajuns să primim asistență în Firefox, Edge și Chrome. De fapt, avem suport pentru browser de aproape doi ani. Dar nu erau o tonă de fonturi. A existat o astfel de evoluție constantă. Suportul pentru utilizarea lor pe web a existat de fapt acolo mai mult decât oriunde altundeva. Adică, din punct de vedere tehnic, acest format funcționează și pe sistemul de operare desktop. Deci, dacă aveți un format TTF, îl puteți instala în sistemul de operare desktop pe Windows sau Mac și îl puteți utiliza în orice aplicație. Nu puteți ajunge întotdeauna să variați axele în felul în care ați dori să vă jucați cu ele la infinit, dar există această noțiune de instanțe numite încorporate în acel fișier de font care îl mapa înapoi la ceea ce ne-am obișnuit.

Jason: În Keynote, de exemplu, nu există suport explicit pentru fonturile variabile, dar formatul funcționează dacă există lucruri ca în Tech Sense, din nou, condensat, ușor. Veți avea acelea normale, obișnuite, obișnuite îngroșate, înguste etc., toate ar fi disponibile într-un meniu derulant la fel ca instalarea întregii familii. Atunci, dacă sunteți în Illustrator sau Photoshop sau acum InDesign care tocmai a fost livrat săptămâna trecută sau Sketch care a fost livrat cu câteva săptămâni în urmă, toate acceptă fonturi variabile acum, astfel încât să puteți accesa toate axele diferite și să vă jucați cu ele la dvs. conținutul inimii. Dar în browser, acolo am avut mult mai mult de lucrat. Ținând seama de soția ta, am cam bătut această tobă de ceva vreme încercând să-i fac pe oameni să fie mai conștienți de asta. Apoi, datorită muncii depuse de echipa Firefox în crearea instrumentelor de dezvoltare. Odată cu Jen Simmons împingând asta, avem instrumente incredibile cu care să lucrăm în browser, care ne ajută să înțelegem de ce sunt capabile fonturile.

Drew: Ați menționat designerii de tipare și capabilitățile fonturilor. Există o mulțime de fonturi disponibile?

Jason: Ei bine, mulți oameni o fac acum. Probabil cel mai bun și mai cuprinzător loc pentru a le căuta este site-ul lui Nick Sherman, v-fonts.com, v-fonts.com. Acesta este doar un site de catalog. Devine rapid foarte, foarte mare. Există mai multe fonturi variabile care apar tot timpul acum. Nu există un număr mare de surse deschise, dar dacă căutați pe GitHub fonturi variabile, de fapt veți găsi o grămadă de proiecte acolo. Dar Google a lansat o versiune beta a noului lor API cu aproximativ o duzină de fonturi variabile disponibile acolo. De la ei vin mai multe. Tocmai au lansat Recursive la recursive.design, care este un tip nou fantastic de la Stephen Nixon. Variabila Plex, una este disponibilă, aceasta este open source. Apoi sunt tone de cele comerciale.

Jason: Lucrul tare este că Monotype a lansat unele destul de mari. Dar multe turnătorii mai mici și designeri individuali sunt doar un fel de lider în experimentarea cu acest format. Cred că este grozav pentru design și grozav pentru web că vedem toate aceste modele noi de la noi designeri sau designeri mai mici, care deschid acest nou teren. Pentru că îmi place să-i văd reușind cu asta, pentru că chiar au luat inițiativa de a pune niște lucruri grozave acolo.

Drew: Observăm vreo actualizare a fonturilor existente pentru a fi fonturi variabile pentru a avea familiile înlocuite cu un singur font variabil? Se întâmplă deloc asta?

Jason: Este. Cele pe care Monotype le-a lansat sunt actualizări ale unor fonturi cu adevărat clasice. FF Meta a fost unul pe care i-am ajutat să-l lanseze prin proiectarea demo-ului pentru acela anul trecut. Ei au asta. Univers, Frutiger, Avenir, cred că aceia sunt cei pe care i-au lansat până acum, cei patru. Acestea sunt într-adevăr un fel de caractere clasice de bază ale mărcii. Ei lucrează la mai mult. Știu că au cel puțin încă o jumătate de duzină sau cam așa ceva care se află în diferite stadii de producție. Știu că Dalton Maag, care face o mulțime de caractere personalizate pentru corporații mari, are mai multe fonturi variabile foarte frumoase. Am lucrat cu TypeTogether. Au, de asemenea, câteva fonturi cu adevărat grozave. Il stiu pe acela...

Jason: Am arătat la unele dintre conferințele în care am vorbit despre aceste lucruri pe care Adidas le are și pe ale lor, pe care le-au folosit pentru toate lucrările lor de brand în imprimare de aproape doi ani. Ceea ce este ceva cu adevărat, cu adevărat remarcabil. Dar și Mark Simonson lucrează la o versiune variabilă a Proxima Nova. E cam mare lucru. Acesta a fost unul dintre cele mai bine vândute fonturi web din toate timpurile. Se intampla. Se întâmplă în bucăți în sus și în jos pe scară. Dar chiar și ceva la fel de simplu precum abonarea la David Jonathan Ross, Font of the Month Club, vă va oferi un font variabil aproape în fiecare lună. Adică, a fost cu adevărat incredibil în ceea ce privește lucrurile pe care le-a scos. Este ca 72 de dolari pe an sau ceva de genul ăsta. A scos tot felul de lucruri foarte frumoase.

Drew: Este destul de interesant atunci, pentru că evident, cu capabilitățile fonturilor variabile, ai putea crea noi modele care să le folosească. Dar, potențial, ar putea exista site-uri care sunt în producție în care sunt acum disponibile versiuni de fonturi variabile, unde cineva ar putea să se întoarcă, să le revizuiască și să înlocuiască mai multe fișiere cu fonturi cu o nouă implementare bazată pe o nouă versiune de font variabil.

Jason: Da, absolut. Acestea sunt câteva dintre întrebările pe care le primesc destul de regulat. Recent, mă uitam la un site web destul de mare de transmisiuni sportive pe care echipa de dezvoltare mi-a pus-o despre aceeași întrebare. M-am uitat și, desigur, pentru două dintre fonturile pe care le folosesc, există fonturi variabile disponibile. O scurtă cercetare ne-a arătat că am putea înlocui patru instanțe ale unui tip de liter și trei ale celuilalt cu două fișiere cu fonturi variabile și să luăm peste 70% din dimensiunea fișierului în cinci solicitări. Adică, ar fi o întrebare câștigătoare din punct de vedere al performanței. Pentru site-uri la scară foarte mare, atunci când te uiți la eliminarea a aproape 300.000 de date descărcate de la milioane de utilizatori, asta se adaugă de fapt la economii reale de dolari și la costul lățimii de bandă. Chiar și din acest punct de vedere pur practic, fără a rescrie niciunul dintre CSS, doar înlocuind acele fonturi, va fi deja un câștig semnificativ pentru ei în performanță, în timpul de randare a paginii și apoi în costurile reale ale lățimii de bandă pentru ei.

Drew: În termeni practici, este atât de simplu pe cât pare, doar să schimbi unul cu celălalt?

Jason: Se poate. Cred că exemplul perfect în acest sens este ceva pe care Google a lăsat-o scăpat la ATypI în septembrie, că a început să facă asta cu Oswald de 150 de milioane de ori pe zi. Au creat o versiune cu font variabil și tocmai au început să navigheze pe site-uri web care foloseau suficiente cazuri în care ar aduce un beneficiu semnificativ. Nu au spus nimănui. Nu le-au spus proprietarilor site-ului. Nimeni nu trebuia să facă nimic. Pentru că avea maparea corectă a axei greutății, astfel încât valorile implicite să funcționeze. De 150 de milioane de ori pe zi reprezintă o mulțime de servire a fonturilor. Asta începe să le ofere niște perspective mai bune despre cum ar arăta acest peisaj pentru ei dacă ar putea începe să schimbe primele cinci fonturi web pe care le servesc? Presupun că Open Sans este probabil unul dintre acestea. Știu că Lato este probabil acolo, Roboto.

Jason: Deci, dacă te uiți la acestea și te uiți la ce versiuni optimizate ale acestora ar putea arăta, atunci poți vedea că există câteva motive foarte clare pentru care Google ar fi interesat de asta. Apoi, dacă te uiți de cealaltă parte, doar spațiul de design și cât de mult mai fidelă pentru o voce de marcă ar putea fi o companie dacă lucrează cu întreaga gamă de caractere ale mărcii, mai degrabă decât să fie nevoită să schimbe altele diferite sau să fie mai mult. limitate în paleta lor. Deci sunt lucruri foarte interesante de învățat și de explorat la ambele capete ale acelui spectru.

Drew: Pare o lume nouă și captivantă a tipografiei și a oportunităților de a scrie tipografie într-un fel mai sensibil și mai creativ pe web decât am putut să facem înainte.

Jason: Ei bine, asta sper cu siguranță. Cred că una dintre cele mai mari bariere în calea adoptării fonturilor pe web în toate etapele a fost performanța. Deci ce se întâmplă? Cât durează încărcarea? Ce înseamnă asta pentru timpul de randare pe pagină? Avem acele probleme ale acestui tip de fulger de text invizibil sau text fără stil. Luptându-ne cu toate acele lucruri, într-adevăr, se întoarce la cât timp durează totul pentru a ajunge acolo? Cum reacționează browserul la asta? Sunt multe lucruri pe care le putem face pentru a atenua unele dintre aceste probleme. Dar dacă avem un font mai bun și o modalitate mai bună de a-l servi, atunci toate aceste probleme devin mult mai puțin semnificative. Așa că având asta în loc, atunci ajungem să fim mult mai expresivi. Putem încerca cu adevărat să împingem capătul designului și să încercăm să fim puțin mai creativi.

Drew: Pentru că ați scris în ultima vreme exprimând sentimentul că, probabil, web-ul a ajuns într-o capcană de a proiecta un șablon de articol pe site, poate cu unele variații pentru câteva tipuri diferite de conținut. Dar toată lumea se îndreaptă spre acest stil medium.com de o singură coloană de text foarte lizibilă pentru ochii mei. Frumos tipărit. Este un lucru atât de rău?

Jason: Nu cred că e rău. Cred doar că va deveni plictisitor. Adică, când a apărut Medium, a fost destul de nou. Adică, cred că o coloană de... Așa cum spuneți, a fost o copie destul de frumos tipărită. Are o zonă frumoasă. Nu era aglomerat. Nu a fost înghesuit și bare laterale și toate celelalte chestii. Întotdeauna vor apărea întrebări despre modelul de afaceri și ce va susține asta. De aceea, o reproiectare cu adevărat frumoasă a, cred, a fost Seattle Times pe care Mike Monteiro pentru Mule Design a făcut-o acum câțiva ani. Absolut superb până la lansare. Apoi au avut aceste bannere masive pe ambele părți ale coloanei și pur și simplu a luat toate acele spații albe. A fost o adevărată rușine.

Jason: Înțeleg că companiile trebuie să facă bani. Există ramificații în acest sens. Deci ar fi minunat ca aceasta să fie o singură opțiune. Pentru a avea acel aspect frumos curat. Dar nu ar trebui să fie singurul. Avem toate aceste capacități în CSS care ne permit să facem lucruri cu adevărat interesante cu margini și aspect. Adică, nu este vorba doar de faptul că avem grilă acum. Dar faptul că putem face calcule în browser în CSS ne permite să facem mult mai multe lucruri interesante. Suplimentați cu asta, capacitatea de a fi mult mai expresiv cu tipul, apoi am putea începe să ne uităm la ce fac ei în reviste. Vanity Fair nu are un șablon de articol. Au șase sau șapte sau opt. Dacă te uiți cu adevărat la modul în care acestea prezintă aceste lucruri, există o cantitate enormă de variabilitate, dar se joacă în cadrul unui sistem.

Jason: Așadar, atunci când creăm un sistem de design pentru site-ul nostru web, în ​​loc să ne oprim la un singur aspect, avem o modalitate relativ ușoară de a construi unele comutatoare în sistemele noastre de gestionare a conținutului. Cele mai multe dintre ele acceptă o cantitate suficientă de flexibilitate. Nu există niciun motiv pentru care să nu le oferim oamenilor de ales. Vreau să folosesc aspectul unu, doi, trei, patru, cinci, șase. Asta va introduce diferite marje, diferite compensații. Poate introducerea capacității de a crea niște coloane. Există o mulțime de lucruri diferite pe care le-am putea face și care ar crea un web mult mai interesant. Cred că acest tip poate juca un rol foarte important în asta.

Drew: Tipul este salvatorul nostru când vine vorba de a adăuga un pic mai multă personalitate înapoi pe web?

Jason: Ei bine, cred că poate fi. Cred că am avut această evoluție lungă pe web către o mai bună utilizare. Dar cred că una dintre victimele există atunci când tot ce ne preocupă vreodată este acel utilitarist, este abordarea utilizabilă? Asta tinde să învingă personalitatea. Apoi, când fiecare site web este... Din nou, am avut fonturi web și asta a creat un nou nivel de expresivitate pe care nu îl aveam înainte. Apoi, dintr-o dată, am putut... Afișajele s-au îmbunătățit. Așa că serif-urile au revenit în amestec. Le-am putea folosi din nou pe web. Aceste lucruri au adăugat puțină viață. Apoi ne-am cam optimizat pentru toată lumea folosind unul sau două San-serif. Este Open Sans sau Roboto sau Oswald sau orice altceva. Ne-am cam întors la același lucru în care există o mulțime de fonturi cu adevărat bune, cu adevărat lizibile. Nu am învățat cu adevărat această generație actuală de designeri UX, care sunt adesea cei care conduc o mulțime de asta despre tipografie. Orice despre cât de expresiv poate fi, cât de mult poate modifica starea de spirit și tonul.

Jason: Deci avem un număr mare de oameni care dictează direcția de proiectare a lucrurilor de pe web, care au idei despre tipare care poate nu sunt la fel de bine informați ca cineva care a studiat designul grafic și acele noțiuni de lizibilitate. Trebuie să aducem aceste lucruri împreună. Nu este una sau alta. Este un și. Trebuie să fie.

Drew: Mai ales când vorbim despre personalitate și despre ton și dispoziție. Din punct de vedere al afacerii sau din ceea ce vorbim sunt aspecte ale unui brand. Deci, făcând ca totul să arate la fel, pierdem capacitatea de a comunica clienților un brand?

Jason: Absolut. Nu pentru a mă scufunda în politică, dar cred că întregul... Una dintre problemele majore pe care le-am experimentat cu siguranță în SUA și sunt sigur că nu este atât de diferită de ceea ce sa întâmplat în Marea Britanie în ultimii ani. Când toate știrile sunt consumate printr-o singură platformă și totul arată la fel, nu există nicio distincție de voce. Deci, 75% dintre adulții din SUA spun că primesc o parte semnificativă din știrile lor de pe Facebook. Adică, să lăsăm deoparte cât de îngrozitor este în general. Dar având în vedere că totul este prezentat uniform, nu există nicio diferență între un articol de la The Guardian, la New York Times, The Wall Street Journal, The Washington Post și știrile de dreapta lui Joe. Totul este prezentat exact la fel.

Jason: Când vedem acel logo, acel stil de tip, Guardian este atât de caracteristic. Wall Street Journal este atât de caracteristic. Recunoaștem instantaneu când îl vedem, chiar și doar un titlu. Știm de unde a venit. Apoi există această asociere automată cu acel brand și acea autenticitate. Când elimini toate astea, rămâi cu: „Ok, voi evalua asta pe un titlu. Apoi este pornit, cine a scris un titlu mai bun? Nu e mult de continuat. Deci cred că am pierdut o sumă enormă. Dacă te uiți la ce încearcă Apple News Plus să facă, există unele eforturi din partea câtorva companii pentru a încerca să reintroducă asta. Blundell a făcut o treabă foarte interesantă în Europa. S-au lansat în SUA, dar nu sunt sigur că vor avea vreodată atât de mult succes. 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. E adevarat. 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. It is true. 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. Thank you. 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.