Smashing Podcast Episode 5 Dengan Jason Pamental: Apa Itu Variable Fonts?

Setiap dua minggu, kami menerbitkan podcast di mana saya berbicara dengan seseorang dari industri web tentang topik yang berbeda. Di episode ini, mari belajar tentang segala hal tentang font variabel! Saya berbicara dengan sumber pengetahuan tentang masalah ini, Jason Pamental.

Tampilkan Catatan

Update mingguan

• “Sistem Ilustrasi Merek: Menggambar Identitas Visual yang Kuat,” Yihui Liu
• “Berjuang Untuk Mengatasi Lonjakan Lalu Lintas,” Suzanne Scacca
• “Membangun Tata Letak CSS: Streaming Langsung Dengan Rachel Andrew,” Rachel Andrew
• “Ringkasan Advent Desain Dan Pengembangan Web Untuk 2019,” Rachel Andrew
• “Haruskah Situs Portofolio Anda Menjadi PWA?,” Suzanne Scacca

Font Variabel

• Temukan Jason di web di rwt.io
• Buletin Berita Tipografi Web
• “Fon Variabel: Apa yang Perlu Diketahui Penulis Web,” Jason Pamental
• Buku Ellen Lupton "Berpikir Dengan Tipe"
• Buku Erik Spiekermann "Berhenti Mencuri Domba & Cari Tahu Bagaimana Tipe Bekerja"

Salinan

Drew McLellan: Dia adalah ahli strategi desain, pemimpin UX, ahli teknologi, ahli dalam tipografi web, dan ahli yang diundang di Kelompok Kerja Font Web W3C. Dia menulis, berbicara, dan bekerja dengan tim dan pemilik merek tentang cara mengatur tipe lebih baik di platform digital. Dia berbicara dengan organisasi seperti Adobe, Audible, Conde Nast, GoDaddy, IBM, dan memberikan presentasi serta lokakarya dan konferensi di seluruh dunia. Buletinnya, Berita Tipografi Web, populer di kalangan mereka yang menginginkan pembaruan dan tip terbaru tentang tipografi di web. Dia jelas ahli dalam tipografi web. Tapi tahukah Anda dia mewakili Swedia di Lawn Croquet di Olimpiade 1984? Teman-teman saya yang hebat, tolong sambut Jason Pamental. Halo, Jason. Apa kabar?

Jason Pamental: Saya hebat. Apalagi setelah perkenalan itu.

Drew: Saya ingin berbicara dengan Anda hari ini dengan jelas tentang tipografi web karena itu benar-benar milik Anda. Anda benar-benar ahli dengan tipografi web. Tentang itu secara umum, tetapi secara khusus, berbicara sedikit tentang font variabel. Saya akan menjadi orang pertama yang mengakui bahwa saya bukan ahli tipografi. Maksud saya, tolong anggap saya tidak tahu apa-apa seperti siapa pun yang mendengarkan. Anda tidak dapat menggurui saya dengan informasi apa pun tentang tipografi. Saya kira kami telah memiliki font web yang dapat digunakan di web selama mungkin sekitar satu dekade sekarang. Apakah itu benar?

Jason: Ya. Sebenarnya, bukankah Anda yang memulai sesuatu di Twitter beberapa hari yang lalu? Itu seperti 9 November 2009. Ini seperti 10 tahun dalam dua hari sejak Typekit diluncurkan. Saya tahu Font Deck benar dalam kerangka waktu yang sama. Kemudian Google Font dan Layanan Monotype tidak lama kemudian. Saya memiliki undangan beta yang diberikan kepada saya oleh teman saya, John Cianci, yang sebenarnya sekarang masih menjadi kolega istri saya di agensi tempat dia bekerja untuk Typekit sekitar tahun 2009. Itu adalah penemuan kembali minat saya di web . Maksud saya, itu bukan revolusi bagi saya. Maksud saya, saya selalu menyukai tipografi ketika saya mempelajarinya di sekolah, tetapi kami tidak dapat melakukan apa pun dengannya di web selama 15 tahun. Itu sangat menakjubkan.

Drew: Pasti ada desainer yang bekerja di web sekarang yang memiliki font web selama 10 tahun dan berpotensi. Ada desainer yang bekerja di web sekarang yang tidak pernah mendesain situs tanpa kemampuan untuk memilih dari berbagai macam tipografi.

Jason: Ya, itu benar. Tak seorang pun tanpa pengalaman itu harus mendorong piksel menanjak di kedua arah seperti yang kami lakukan saat tumbuh dewasa. Kami bukan orang tua yang rewel yang mengacungkan tinju ke langit. Tapi ya, itu agak menakjubkan hanya dengan semua hal yang telah berubah di web, gagasan bahwa beberapa orang tidak pernah mengalami dengan cara lain adalah luar biasa.

Drew: Saat kami mendapatkan font web, itu adalah perubahan besar dalam cara kami mulai menggunakan tipografi di web karena kami benar-benar dapat mulai menggunakan tipografi di web. Jelas ada hal-hal yang dapat kami lakukan dengan font web yang aman, tetapi kami sangat terbatas pada palet yang sangat terbatas. Tapi sekarang ada potensi perubahan besar lain yang hampir sama signifikannya dengan font variabel. Maksud saya, apa itu font variabel? Apa yang mereka lakukan untuk kita? Di mana kita mulai?

Jason: Saya selalu mencoba dan mulai dengan memberikan kerangka acuan kepada orang-orang. Jadi ketika kita berpikir tentang menggunakan font di web, hal yang harus kita ingat adalah bahwa saat ini dengan font "tradisional", setiap font memiliki lebar, berat, kemiringan, varian dari jenis huruf itu sendiri. Untuk setiap yang ingin kita gunakan di web, kita harus memuat file. Untuk situs web biasa yang Anda gunakan untuk body copy, Anda biasanya memuat empat font: regular, bold, italic, dan bold italic. Semua hal itu harus dimuat. Masing-masing adalah sedikit data yang harus diunduh dan diproses dan dirender.

Jason: Jadi biasanya, apa yang telah kami lakukan selama bertahun-tahun adalah membatasi diri kami untuk menggunakan jumlah font yang sangat sedikit, yang sebenarnya bukan praktik tipografi yang bagus. Jauh lebih umum dalam desain grafis untuk menggunakan jangkauan yang jauh lebih luas. Anda dapat menggunakan delapan atau 10 bobot dan varian tipografi yang berbeda dalam desain tertentu. Di web, kami sangat terkendala karena kinerja. Perbedaan besar dalam font variabel adalah semua permutasi tersebut, variasi tersebut terkandung dalam satu file. Format itu sangat efisien karena apa yang dilakukannya adalah menyimpan bentuk reguler dari karakter itu dan kemudian apa yang disebut delta di mana titik-titik di sepanjang kurva itu akan bergerak untuk menjadikannya sebagai tebal atau tipis atau lebar atau sempit.

Jason: Jadi dengan hanya menyimpan perbedaannya, Anda tidak perlu menyimpan keseluruhan garis besarnya. Ini adalah format yang jauh lebih efisien. Meskipun tidak sekecil file font tunggal, itu masih jauh lebih kecil daripada semua yang diambil secara terpisah. Jika Anda melihat sesuatu seperti Plex Sans dari IBM, semua file terpisah itu mungkin berukuran hampir satu megabyte di mana dua file font variabel yang berisi semua lebar dan berat dalam satu file tegak lurus, huruf miring di file lainnya seperti 230K. Itu untuk set karakter yang benar-benar lengkap. Kebanyakan orang bisa menggunakan subset dari itu dan membuatnya lebih kecil. Saya biasanya melihat ukuran file itu sekitar 50 hingga 100K untuk kebutuhan situs web bahasa Barat yang khas. Itu tidak jauh berbeda dari memuat… Setelah Anda memuat tiga atau empat file font individual, Anda mungkin memuat lebih banyak data daripada itu. Ini adalah kemenangan yang menarik untuk kinerja, tetapi juga kemudian membuka seluruh jajaran jenis huruf untuk kita gunakan di web melalui CSS.

Drew: Jadi ini hampir seperti memberikan resep daripada makanan. Daripada ini versi miringnya, ini versi boldnya. Ini seperti, "Ini versi reguler dan untuk membuatnya miring, Anda akan melakukan ini, untuk membuatnya tebal, Anda akan melakukan itu." Itu mengurangi ukuran file yang turun melalui kabel.

Jason: Ya. Di satu sisi, ini memberi Anda semua bahan dan kemudian Anda dapat membuat resep apa pun yang Anda inginkan. Karena Anda benar-benar dapat pergi ke mana saja dari… Untuk kembali ke contoh Plex, dari 100 hingga 700 bobot di mana 700 adalah jenis huruf tebal yang khas, 400 akan menjadi jenis berat normal. Tapi kemudian Anda memiliki jauh lebih ringan. Jadi Anda bisa membuat judul baris yang sangat besar dan sangat halus atau tanda kutip blok atau item yang berbeda atau seperti penekanan, dan kemudian dapat memodulasi apa yang Anda inginkan dalam ukuran yang berbeda. Ada banyak hal berbeda yang dapat Anda lakukan untuk tipografi yang lebih baik, pengalaman pengguna yang lebih baik, sambil mendapatkan kinerja yang lebih baik. Itu penjaga gerbang.

Drew: Jadi ada jumlah langkah yang hampir tak terbatas antara apa yang kita anggap hari ini sebagai biasa dan berani? Anda benar-benar memiliki kemampuan untuk pergi ke mana saja di sepanjang sumbu itu untuk mengubah di antara keduanya?

Jason: Benar. Apa yang menurut saya sangat menarik bagi saya sebagai seseorang yang mempelajari desain grafis dan telah mengamati desain cetak selama bertahun-tahun, gagasan tentang apa yang benar-benar tebal harus berubah berdasarkan ukuran teks yang Anda render. Jadi secara default, 400 dan 700 untuk normal dan tebal adalah jenis default web. Tapi sebenarnya, satu-satunya alasan Anda mengatakan berani adalah Anda ingin beberapa penekanan, Anda ingin sesuatu yang menonjol. Tetapi semakin berat font keluar dari ukuran kecil, semakin sulit untuk dibaca. Ini semacam mengisi ruang terbuka kecil. Alih-alih menggunakan 700 untuk body copy ketika disetel pada ukuran kira-kira 16 piksel atau apa pun yang kami gunakan di sana, Anda mungkin menggunakan 550, 575 di mana Anda mendapatkan penekanan yang cukup tetapi bentuk hurufnya masih lebih terbuka. Kemudian karena semakin besar, Anda mungkin menggunakan beban yang lebih berat.

Jason: Tapi sekali lagi, itu semacam pilihan Anda pada saat itu. Dengan memodulasi itu untuk mendapatkan tingkat penekanan yang tepat, tetapi tetap mempertahankan keterbacaan yang sangat baik, kami memiliki lebih banyak fleksibilitas. Saya benar-benar berharap bahwa karena ini menjadi lebih populer dan lebih banyak digunakan, kita dapat mulai mengajar orang untuk sedikit lebih bernuansa dengan cara mereka menggunakan rentang itu dan benar-benar menjadi lebih ekspresif dan juga lebih mudah dibaca pada saat yang sama .

Drew: Satu hal yang saya perhatikan menerapkan desain sebagai ujung depan dan menerapkan desain yang telah diberikan kepada saya adalah bahwa kombinasi kontras warna yang berbeda dan teks terang pada latar belakang gelap versus teks gelap pada latar belakang terang, bobotnya dapat terlihat sangat berbeda. Jadi mungkin, ini akan membantu meratakan dan memperhalus visual dan pengalaman membaca berdasarkan perubahan seperti itu?

Jason: Tentu saja. Itu salah satu hal yang biasanya saya tunjukkan dalam lokakarya dan pembicaraan adalah menambahkan dukungan untuk permintaan media mode ringan itu. Anda dapat membalik kontras itu tetapi kemudian Anda ingin melakukannya dengan cara yang bernuansa. Tergantung pada jenis hurufnya, itu bisa terlihat sangat berat atau agak kurus dengan jenis huruf serif. Terkadang Anda ingin sedikit lebih berat atau lebih ringan, tetapi Anda juga cenderung perlu memberi spasi pada huruf saat Anda memilikinya di latar belakang yang gelap atau jika tidak, bentuk hurufnya akan menyatu. Ada hal-hal kecil yang bisa Anda sesuaikan dalam tipografi. Kueri media sangat sederhana. Maksud saya, ini seperti dua baris kode untuk menambahkannya ke situs Anda. Lalu apa yang Anda lakukan dengan itu. Ini tidak selalu hanya membalikkan warna. Terkadang Anda perlu menyesuaikan kontras, tetapi juga mengubah jenis itu sendiri untuk keterbacaan yang lebih baik.

Drew: Jadi mungkin, bukan hanya bobot yang bisa divariasikan dalam font variabel. Adakah cara lain kita dapat mengubah font kita seperti yang ditampilkan?

Jason: Ya. Ini sepenuhnya terserah pada perancang tipe. Saya pikir ini sangat bagus untuk menegaskan bahwa ini tidak gratis untuk semua di browser. Browser hanya dapat merender apa yang telah diaktifkan di font. Pada akhirnya, perancang tipelah yang mengatakan bahwa bobotnya berkisar hingga ini. Anda mungkin memiliki sumbu lebar. Itu akan menjadi sedikit lebih sempit atau sedikit lebih lebar, tetapi ada juga kemampuan untuk memiliki apa yang disebut sumbu terdaftar. Ada lebar, berat, miring, miring, dan ukuran optik. Itu semua adalah hal-hal inti yang dipetakan ke properti CSS. Miring memungkinkan sudut di antara satu dan lainnya, begitu tegak dan saya benar-benar telah melihat yang dengan miring terbalik serta miring ke depan. Itu benar-benar terbuka. Miring umumnya aktif atau nonaktif tetapi tidak harus. Anda benar-benar dapat memiliki… Nah, ada desainer tipe yang telah bereksperimen dengan mengubah bentuk huruf secara bertahap saat Anda beralih dari normal ke miring, dan semacam mengganti huruf di sepanjang jalan. Itu semacam hal yang menarik.

Jason: Tapi kemudian ada kemampuan untuk memiliki kapak khusus. Perancang tipe dapat menentukan sumbu khusus apa pun yang mereka inginkan untuk bervariasi. Anda telah melihat yang menambahkan semacam gravitasi menyebarkan tetesan air dan segala macam bentuk memutar yang menyenangkan, atau memperpanjang serif, mengubah ketinggian ascender dan descender. Pada bentuk huruf kecil, berubah menjadi serif atau tidak. Ada berbagai macam hal yang dapat Anda lakukan. Ini benar-benar terserah imajinasi seorang desainer tipe. Saya pikir kita hanya menggores permukaan tentang apa yang bisa terjadi secara realistis dengan semua hal itu. Semuanya dapat diakses melalui CSS.

Drew: Ya. Semua properti ini dapat diubah hanya melalui CSS normal yang Anda berikan dengan sisa desain Anda. Hal apa saja yang dapat kita lakukan di CSS untuk memicu perubahan tersebut? Apakah seperti yang akan kita lakukan dengan tata letak responsif di mana kita memiliki kueri media untuk memicu itu?

Jason: Ada banyak cara yang bisa Anda lakukan. Ada perubahan kecil yang harus Anda lakukan. Saya berasumsi bahwa kami akan memberikan banyak tautan ke beberapa hal yang akan membantu orang-orang bermain-main dengan hal ini. Maksudku, aku sudah menulis banyak. Mudah-mudahan, itu akan membantu orang keluar. Kemudian pada sisi penggunaan, sumbu bobot font hanya dipetakan ke bobot font. Alih-alih mengatakan huruf tebal biasa, Anda hanya memberikan nomor. Anda dapat mengubahnya dengan kueri media. Anda dapat mengubahnya dengan JavaScript. Anda dapat melakukan apa pun yang Anda inginkan dengan itu. Saya telah menggunakan teknik yang disebut Kunci CSS yang saya pelajari dari Tim Brown untuk menggunakan matematika pada dasarnya. Properti dan perhitungan kustom CSS untuk menskalakannya, setelah Anda mencapai titik jeda kecil hingga titik jeda besar, itu akan menskalakan ukuran font dan tinggi garis dengan mulus.

Jason: Kemudian Anda juga dapat menggunakan sedikit JavaScript untuk melakukan hal yang sama dengan bobotnya jika Anda mau. Sumbu bobot dipetakan ke bobot font, properti CSS. Sumbu lebar dalam font akan dipetakan ke peregangan font, dan itu hanya dinyatakan sebagai persentase. Saya harus mencatat bahwa banyak desainer tipe tidak perlu memikirkan bagaimana ini diekspresikan sehingga Anda mungkin melihat rentang berat yang melakukan hal-hal aneh seperti mulai dari 400 hingga 650. Anda masih harus mengekspresikannya sebagai persen, tetapi berhasil. Tidak apa-apa. Anda hanya perlu tahu apa itu normal dan semua font didokumentasikan. Kemudian dengan apa pun selain keduanya, saat ini, ada sedikit dukungan yang tidak merata dalam implementasi untuk miring dan miring. Banyak hal yang Anda butuhkan untuk kembali menggunakan pengaturan variasi font dan kemudian Anda dapat menyediakan beberapa hal sekaligus. Ini seperti pengaturan fitur font. Ini semacam sintaks tingkat yang lebih rendah di mana Anda dapat menyediakan daftar yang dipisahkan koma dari sumbu empat huruf ini dan nilainya, yang berikutnya, yang berikutnya.

Jason: Satu hal yang perlu diingat orang adalah bahwa ketika Anda menggunakan pengaturan variasi font, Anda kehilangan semua pemahaman semantik itu dan Anda kehilangan fallback. Berat font dan peregangan font didukung secara universal di semua browser. Anda pasti harus menggunakan atribut tersebut. Untuk hal lain, Anda dapat menggunakan pengaturan variasi font. Tetapi keuntungan menggunakan bobot font seperti yang biasa Anda lakukan adalah jika font variabel tidak dimuat, browser masih dapat melakukan sesuatu dengan itu. Sedangkan jika tidak memahami font variabel, atau tidak memuat, jika semuanya dalam pengaturan variasi font, maka Anda kehilangan semua informasi gaya. Itu hanya sedikit catatan sampingan saja dari segi apa yang didukung dimana. Tetapi saya juga harus mengatakan bahwa itu didukung di semua browser pengiriman yang mungkin Anda temui di sebagian besar situasi. I-11 tidak berfungsi, tetapi Anda dapat mengirimkan font web statis, dan kemudian menggunakan dukungan iklan di CSS Anda untuk mengubah font variabel. Maka Anda akan menghindari unduhan duplikat aset dan itu berfungsi dengan sangat baik. Saya sudah memilikinya dalam produksi di beberapa situs.

Drew: Saya rasa seperti banyak jenis teknologi web yang lebih modern yang Anda lihat, jika ada font variabel yang telah menggelegak diam-diam untuk sementara waktu, dan hanya ketika itu akhirnya mendidih dan kami mendapatkan dukungan di browser dan orang-orang seperti Anda membuat keributan tentang hal itu dan membiarkan semua orang tahu bahwa itu ada di sana. Ini hampir dapat dirasakan oleh perancang atau pengembang standar yang hanya sehari-hari melanjutkan pekerjaan mereka dan tidak melacak semua unduhan terbaru. Itu bisa muncul entah dari mana. Tapi saya rasa ini sudah cukup lama ... Maksud saya, Anda menyebutkan dua implementasi yang sedikit berbeda yang sekarang kita hadapi. Ada semacam standar yang lebih lama dan lebih baru untuk diterapkan?

Jason: Yah, sebenarnya tidak lebih tua dan lebih baru. Mereka berdua sangat disengaja. Saya akan kembali ke itu sebentar lagi karena sangat berharga untuk memahami apa perbedaannya dengan itu. Tapi Anda benar. Format ini diperkenalkan lebih dari tiga tahun yang lalu, pada bulan September 2016. Kami sebenarnya memiliki implementasi kerja pertama di build malam Safari tiga minggu kemudian. Cukup cepat karena kami memiliki browser yang berfungsi. Safari adalah yang pertama mengirimkan dukungan penuh untuk itu. Saya pikir itu ketika High Sierra keluar. Saya tidak tahu, itu seperti Safari 12 atau semacamnya.

Jason: Tapi tidak lama kemudian, kami akhirnya mendapatkan dukungan yang dikirimkan di Firefox, Edge, dan Chrome. Kami sebenarnya memiliki dukungan browser selama hampir dua tahun. Tapi tidak ada banyak font. Ada semacam evolusi yang stabil. Dukungan untuk menggunakannya di web sebenarnya sudah ada lebih lama daripada di tempat lain. Maksud saya, secara teknis, format ini juga berfungsi pada OS desktop. Jadi, jika Anda memiliki format TTF, Anda dapat menginstalnya di OS desktop Anda di Windows atau Mac, dan Anda dapat menggunakannya di aplikasi apa pun. Anda tidak selalu dapat memvariasikan sumbu seperti yang Anda inginkan untuk bermain dengannya secara tak terbatas, tetapi ada gagasan tentang instance bernama yang disematkan dalam file font yang memetakannya kembali ke apa yang biasa kita lakukan.

Jason: Di Keynote, misalnya, tidak ada dukungan eksplisit untuk font variabel, tetapi formatnya berfungsi jika ada hal-hal seperti di Tech Sense, sekali lagi, kental, ringan. Anda akan memiliki yang normal, reguler, biasa tebal, sempit, dll, semua akan tersedia dalam menu drop-down seperti menginstal seluruh keluarga. Kemudian jika Anda menggunakan Illustrator atau Photoshop atau sekarang InDesign yang baru saja dikirimkan minggu lalu atau Sketch yang dikirimkan beberapa minggu yang lalu, semuanya mendukung font variabel sekarang, sehingga Anda kemudian dapat mengakses semua sumbu yang berbeda dan memainkannya di komputer Anda. isi hati. Namun di browser, di situlah kami memiliki lebih banyak hal untuk dikerjakan. Mengambil isyarat dari istri Anda, saya telah menabuh genderang ini untuk sementara waktu mencoba membuat orang lebih sadar akan hal itu. Kemudian berkat kerja yang telah dilakukan tim Firefox dalam membuat alat pengembang. Dengan Jen Simmons yang mendorongnya, kami memiliki alat luar biasa untuk digunakan di browser yang membantu kami memahami kemampuan font.

Drew: Anda menyebutkan desainer tipe dan kemampuan font. Ada banyak font yang tersedia?

Jason: Nah, banyak orang yang melakukannya sekarang. Mungkin tempat terbaik dan terlengkap untuk mencarinya adalah situs Nick Sherman, v-fonts.com, v-fonts.com. Itu hanya situs katalog. Ini dengan cepat menjadi sangat, sangat besar. Ada lebih banyak font variabel yang keluar setiap saat sekarang. Tidak banyak yang open source, tetapi jika Anda mencari di GitHub untuk font variabel, Anda sebenarnya akan menemukan banyak proyek di sana. Tetapi Google telah meluncurkan versi beta dari API baru mereka dengan sekitar selusin font variabel yang tersedia di sana. Ada lebih banyak lagi yang datang dari mereka. Mereka baru saja merilis Recursive di recursive.design, yang merupakan tipografi baru yang fantastis dari Stephen Nixon. Variabel Plex, satu tersedia, itu open source. Lalu ada banyak yang komersial.

Jason: Hal yang keren tentang itu adalah Monotype telah merilis beberapa yang cukup besar. Tapi banyak pengecoran kecil dan desainer individu yang hanya memimpin dalam bereksperimen dengan format ini. Saya pikir itu sangat bagus untuk desain dan bagus untuk web bahwa kita melihat semua desain baru ini dari desainer baru atau desainer yang lebih kecil yang merupakan terobosan baru ini. Karena saya suka melihat mereka berhasil dengan ini karena mereka benar-benar mengambil inisiatif untuk membuat beberapa hal hebat di luar sana.

Drew: Apakah kami melihat pembaruan font yang ada menjadi font variabel agar keluarga diganti dengan font variabel tunggal? Apakah itu terjadi sama sekali?

Jason: Itu. Yang dirilis Monotype adalah pembaruan untuk beberapa tipografi yang sangat klasik. FF Meta adalah salah satu yang saya bantu luncurkan dengan merancang demo untuk tahun lalu. Mereka punya itu. Univers, Frutiger, Avenir, saya pikir itu yang mereka rilis sejauh ini, empat itu. Itu benar-benar jenis tipografi merek klasik inti. Mereka sedang mengerjakan lebih banyak. Saya tahu mereka memiliki setidaknya setengah lusin atau lebih yang dalam berbagai tahap produksi. Saya tahu bahwa Dalton Maag yang melakukan banyak pekerjaan jenis huruf khusus untuk perusahaan besar memiliki beberapa font variabel yang sangat bagus. Saya telah melakukan beberapa pekerjaan dengan TypeTogether. Mereka juga memiliki beberapa tipografi yang sangat bagus. aku tahu yang itu…

Jason: Saya telah menunjukkan di beberapa konferensi di mana saya telah berbicara tentang hal-hal yang dimiliki Adidas juga yang telah mereka gunakan untuk semua pekerjaan merek mereka di media cetak selama hampir dua tahun sekarang. Yang benar-benar hal yang luar biasa. Tetapi Mark Simonson juga sedang mengerjakan versi variabel dari Proxima Nova. Itu masalah besar. Itu telah menjadi salah satu font web terlaris sepanjang masa. Sedang terjadi. Itu terjadi sedikit demi sedikit, semuanya naik turun skalanya. Tetapi bahkan sesuatu yang sederhana seperti berlangganan David Jonathan Ross, Font of the Month Club, akan memberi Anda font variabel hampir setiap bulan. Maksudku, dia benar-benar luar biasa dalam hal-hal yang dia keluarkan. Ini seperti $72 untuk tahun ini atau sesuatu seperti itu. Dia telah mengeluarkan segala macam barang yang sangat indah.

Drew: Ini cukup menarik, karena jelas, dengan kemampuan font variabel, Anda dapat membuat desain baru yang menggunakan ini. Tetapi berpotensi, mungkin ada situs yang sedang dalam produksi di mana ada versi font variabel yang sekarang tersedia di mana seseorang dapat kembali, mengunjunginya kembali, dan mengganti beberapa file font dengan implementasi baru berdasarkan versi font variabel baru.

Jason: Ya, tentu saja. Itulah beberapa pertanyaan yang cukup sering saya dapatkan. Baru-baru ini, saya sedang melihat situs web penyiaran olahraga yang cukup besar yang ditanyakan oleh tim pengembangan kepada saya tentang pertanyaan yang sama. Saya melihat, dan tentu saja, untuk dua tipografi yang mereka gunakan, ada font variabel yang tersedia. Sedikit penelitian cepat menunjukkan kepada kami bahwa kami dapat mengganti empat contoh dari satu jenis huruf dan tiga lainnya dengan dua file font variabel dan mengambil alih 70% dari ukuran file dalam lima permintaan. Maksudku, itu akan menjadi pertanyaan menang dari sudut pandang kinerja. Untuk situs berskala sangat besar, ketika Anda melihat penghapusan hampir 300 ribu unduhan data di jutaan pengguna, itu sebenarnya menambah penghematan dolar nyata dan biaya bandwidth. Bahkan dari sudut pandang praktis yang murni tanpa menulis ulang CSS mereka, hanya mengganti font-font itu, itu sudah akan menjadi kemenangan signifikan bagi mereka dalam kinerja, dalam waktu render halaman dan kemudian dalam biaya bandwidth aktual untuk mereka.

Drew: Secara praktis, apakah sesederhana kedengarannya, hanya menukar satu dengan yang lain?

Jason: Bisa jadi. Saya pikir contoh sempurna dari itu adalah sesuatu yang dengan santai dilepaskan oleh Google di ATypI pada bulan September bahwa mereka telah mulai melakukannya dengan Oswald hingga 150 juta kali sehari. Mereka membuat versi font variabel itu, dan mereka baru saja mulai menjelajahinya di situs web yang menggunakan cukup banyak contoh di mana itu akan menghasilkan manfaat yang signifikan. Mereka tidak memberi tahu siapa pun. Mereka tidak memberi tahu pemilik situs. Tidak ada yang harus melakukan sesuatu. Karena memiliki pemetaan sumbu bobot yang tepat sehingga defaultnya hanya akan berfungsi. 150 juta kali sehari adalah banyak penyajian font. Itu mulai memberi mereka wawasan yang lebih baik tentang seperti apa lanskap ini bagi mereka jika mereka dapat mulai beralih dari lima font web teratas yang mereka layani? Saya berasumsi Open Sans mungkin salah satunya. Aku tahu Lato mungkin ada di sana, Roboto.

Jason: Jadi jika Anda melihat itu dan melihat seperti apa versi yang dioptimalkan dari itu, maka Anda dapat melihat bahwa ada beberapa alasan yang sangat jelas mengapa Google tertarik dengan itu. Kemudian jika Anda melihat di sisi lain, hanya ruang desain dan seberapa lebih benar suara merek sebuah perusahaan jika mereka bekerja dengan seluruh jajaran jenis huruf merek mereka sendiri daripada harus menukar yang berbeda atau lebih. terbatas dalam palet mereka. Jadi ada hal yang sangat menarik untuk dipelajari dan dijelajahi di kedua ujung spektrum itu.

Drew: Kedengarannya seperti dunia baru yang berani dari tipografi dan peluang untuk mengetik dengan cara yang lebih sensitif dan berpotensi lebih kreatif di web daripada yang bisa kami lakukan sebelumnya.

Jason: Ya, itulah yang saya harapkan. Saya pikir salah satu hambatan terbesar untuk adopsi font di web di semua tahap adalah kinerja. Jadi apa yang terjadi? Berapa lama waktu yang dibutuhkan untuk memuat? Apa artinya waktu render pada halaman? Kami memiliki masalah seperti kilatan teks yang tidak terlihat atau teks yang tidak bergaya. Bergulat dengan semua hal itu, sungguh, kembali ke berapa lama waktu yang dibutuhkan untuk sampai ke sana? Bagaimana reaksi browser terhadap itu? Ada banyak hal yang dapat kita lakukan untuk mengurangi beberapa masalah tersebut. Tapi itu benar-benar tergantung jika kita memiliki font yang lebih baik dan cara yang lebih baik untuk menyajikannya, maka semua masalah itu menjadi kurang signifikan. Jadi dengan itu, maka kita menjadi jauh lebih ekspresif. Kami benar-benar dapat mencoba dan mendorong desain akhir ini dan mencoba dan menjadi sedikit lebih kreatif.

Drew: Karena Anda telah menulis akhir-akhir ini untuk mengungkapkan perasaan bahwa mungkin web telah masuk ke dalam sedikit jebakan merancang template artikel per situs mungkin dengan beberapa variasi untuk beberapa jenis konten yang berbeda. Tapi semua orang seperti melayang ke gaya medium.com dari satu kolom teks yang sangat mudah dibaca oleh mata saya. Diset dengan baik. Apakah itu hal yang buruk?

Jason: Saya tidak berpikir itu buruk. Saya hanya berpikir itu akan membosankan. Maksudku, ketika Medium keluar, itu cukup baru. Maksud saya, saya pikir satu kolom dari... Seperti yang Anda katakan, itu adalah salinan yang cukup bagus. Ini memiliki area yang bagus. Itu tidak ramai. Itu tidak sempit dan sidebars dan semua hal lainnya. Akan selalu ada pertanyaan tentang model bisnis dan apa yang akan mendukungnya. Itulah mengapa desain ulang yang sangat indah, menurut saya, adalah Seattle Times yang dilakukan Mike Monteiro untuk Mule Design beberapa tahun yang lalu. Benar-benar cantik sampai diluncurkan. Kemudian mereka memasang spanduk besar di kedua sisi kolom dan itu hanya menghilangkan semua ruang kosong itu. Itu benar-benar memalukan.

Jason: Saya mengerti bahwa perusahaan harus menghasilkan uang. Ada konsekuensi untuk itu. Jadi akan sangat bagus jika itu menjadi salah satu pilihan. Untuk memiliki tata letak bersih yang bagus. Tapi itu seharusnya bukan satu-satunya. Kami memiliki semua kemampuan ini dalam CSS yang memungkinkan kami melakukan hal-hal yang sangat menarik dengan margin dan tata letak. Maksud saya, bukan hanya fakta bahwa kita memiliki jaringan sekarang. Tetapi fakta bahwa kita dapat melakukan perhitungan di browser dalam CSS memungkinkan kita untuk melakukan lebih banyak hal menarik. Anda lapisi dengan itu, kemampuan untuk menjadi lebih ekspresif dengan tipe, lalu kita bisa mulai melihat apa yang mereka lakukan di majalah. Vanity Fair tidak memiliki satu template artikel. Mereka memiliki enam atau tujuh atau delapan. Jika Anda benar-benar melihat bagaimana mereka meletakkan hal-hal itu, ada sejumlah besar variabilitas tetapi bermain dalam suatu sistem.

Jason: Jadi ketika kami membuat sistem desain untuk situs web kami, alih-alih berhenti hanya pada satu tata letak, kami memiliki cara yang relatif mudah untuk membangun beberapa sakelar ke dalam sistem manajemen konten kami. Kebanyakan dari mereka mendukung cukup banyak fleksibilitas. Tidak ada alasan mengapa kami tidak bisa memberi orang pilihan. Saya ingin menggunakan tata letak satu, dua, tiga, empat, lima, enam. Itu akan memperkenalkan margin yang berbeda, offset yang berbeda. Mungkin memperkenalkan kemampuan untuk membuat beberapa kolom. Ada banyak hal berbeda yang bisa kita lakukan yang akan membuat web menjadi jauh lebih menarik. Saya pikir tipe itu dapat memainkan peran yang sangat besar dalam hal itu.

Drew: Apakah mengetik adalah penyelamat kami dalam hal menambahkan sedikit lebih banyak kepribadian kembali ke web?

Jason: Yah, saya pikir itu bisa. Saya pikir kami telah mengalami evolusi panjang di web menuju kegunaan yang lebih baik. Tapi saya pikir salah satu korban yang ada ketika semua yang kita khawatirkan adalah utilitarian itu, apakah itu pendekatan yang bisa digunakan? Itu cenderung mengalahkan kepribadian. Kemudian ketika setiap situs web ... Sekali lagi, kami memiliki font web dan itu menciptakan tingkat ekspresif baru yang tidak kami miliki sebelumnya. Lalu tiba-tiba, kami bisa… Tampilan menjadi lebih baik. Jadi serif kembali ke dalam campuran. Kita bisa menggunakannya lagi di web. Hal-hal ini menambahkan beberapa kehidupan. Kemudian kami mengoptimalkan kembali ke semua orang menggunakan satu atau dua San-serif. Ini Open Sans atau Roboto atau Oswald atau apa pun. Kami kembali ke hal yang sama di mana ada banyak tipografi yang sangat bagus dan sangat mudah dibaca. Kami belum benar-benar mengajarkan generasi desainer UX saat ini yang sering kali mendorong banyak hal tentang tipografi. Apa pun tentang seberapa ekspresifnya, seberapa besar itu dapat mengubah suasana hati dan nada.

Jason: Jadi, kami memiliki sejumlah besar orang yang mendikte arah desain hal-hal di web yang memiliki ide tentang tipe yang mungkin tidak terinformasi dengan baik seperti seseorang yang mempelajari desain grafis dan pemahaman tentang keterbacaan. Kita perlu menyatukan hal-hal itu. Ini bukan satu atau yang lain. Ini adalah dan. Ini perlu.

Drew: Terutama ketika kita berbicara tentang kepribadian dan tentang nada dan suasana hati. Dari sudut pandang bisnis atau dari apa yang kita bicarakan adalah aspek dari sebuah merek. Jadi dalam membuat semuanya terlihat sama, apakah kita kehilangan kemampuan untuk mengkomunikasikan merek kepada pelanggan?

Jason: Tentu saja. Bukan untuk terjun ke politik, tapi saya pikir secara keseluruhan… Salah satu masalah utama yang pasti kita alami di AS, dan saya yakin itu tidak jauh berbeda dengan apa yang terjadi di Inggris selama beberapa tahun terakhir. Ketika semua berita dikonsumsi melalui satu platform, dan semuanya terlihat sama, tidak ada perbedaan suara. Jadi kira-kira 75% orang dewasa di AS mengatakan bahwa mereka mendapatkan sebagian besar berita mereka dari Facebook. Maksud saya, mari kita kesampingkan betapa mengerikannya hal itu secara umum. Namun mengingat semuanya disajikan secara seragam, tidak ada perbedaan antara artikel dari The Guardian, hingga New York Times, The Wall Street Journal, The Washington Post, dan berita sayap kanan Joe. Semuanya disajikan persis sama.

Jason: Ketika kita melihat logo itu, gaya tipe itu, Guardian sangat khas. The Wall Street Journal sangat khas. Kami langsung mengenalinya saat melihatnya, bahkan hanya headline. Kami tahu dari mana itu berasal. Lalu ada asosiasi otomatis dengan merek itu dan keaslian itu. Ketika Anda menghapus semua itu, Anda hanya memiliki, “Oke, saya akan mengevaluasi ini di headline. Lalu, siapa yang menulis judul yang lebih baik? Itu tidak banyak untuk melanjutkan. Jadi saya pikir kami telah kehilangan jumlah yang sangat besar. Jika Anda melihat apa yang Apple News Plus coba lakukan, ada beberapa upaya dari beberapa perusahaan untuk mencoba dan memperkenalkannya kembali. Blundell melakukan pekerjaan yang sangat menarik di Eropa. Mereka diluncurkan di AS, tetapi saya tidak begitu yakin mereka pernah benar-benar sukses. 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. Itu benar. 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. Itu benar. 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.