Jason Pamental ile Çarpıcı Podcast Bölüm 5: Değişken Yazı Tipleri Nelerdir?

Her iki haftada bir, web endüstrisinden biriyle farklı bir konu hakkında konuştuğum bir podcast yayınlıyoruz. Bu bölümde, değişken yazı tipleriyle ilgili her şeyi öğrenelim! Konuyla ilgili bir yazı tipiyle konuşuyorum, Jason Pamental.

Notları göster

Haftalık güncelleme

• “Marka İllüstrasyon Sistemleri: Güçlü Bir Görsel Kimlik Çizmek,” Yihui Liu
• Suzanne Scacca, "Trafik Dalgalanmalarıyla Başa Çıkma Mücadelesi"
• “Bir CSS Düzeni Oluşturma: Rachel Andrew ile Canlı Yayın,” Rachel Andrew
• “2019 İçin Web Tasarım ve Geliştirme Advent Roundup,” Rachel Andrew
• "Portföy Siteniz Bir PWA Olmalı mı?" Suzanne Scacca

Değişken Yazı Tipleri

• Jason'ı web'de rwt.io'da bulun
• Web Tipografi Haber bülteni
• “Değişken Yazı Tipleri: Web Yazarlarının Bilmesi Gerekenler,” Jason Pamental
• Ellen Lupton'ın “Tiple Düşünmek” kitabı
• Erik Spiekermann'ın “Koyun Çalmayı Durdur ve Yazının Nasıl Çalıştığını Bul” kitabı

Transcript

Drew McLellan: O bir tasarım stratejisti, UX lideri, teknoloji uzmanı, web tipografisi uzmanı ve W3C Web Yazı Tipleri Çalışma Grubunda davetli uzmandır. Dijital platformlarda yazının nasıl daha iyi ayarlanabileceği konusunda yazar, konuşur ve ekipler ve marka sahipleri ile birlikte çalışır. Adobe, Audible, Conde Nast, GoDaddy, IBM gibi kuruluşlarla konuştu ve tüm dünyada sunumlar, atölye çalışmaları ve konferanslar verdi. Bülteni Web Tipografi Haberleri, web'de tipografi hakkında en son güncellemeleri ve ipuçlarını isteyenler arasında popülerdir. Açıkça web tipografisinde uzman. Ama 1984 Olimpiyat Oyunlarında İsveç'i Lawn Croquet'te temsil ettiğini biliyor muydunuz? Ezici dostlarım, lütfen Jason Pamental'e hoş geldiniz. Merhaba, Jason. Nasılsınız?

Jason Pamental: Eziyorum . Hele o girişten sonra.

Drew: Bugün seninle açıkçası web tipografisi hakkında konuşmak istedim çünkü bu gerçekten senin işin. Web tipografisi konusunda gerçek bir uzmansınız. Genel olarak bunun hakkında, ancak özellikle değişken yazı tiplerinden biraz bahsedin. Tipografi uzmanı olmadığımı ilk kabul eden ben olacağım. Yani, lütfen beni dinleyen herkes kadar bilgisiz olarak kabul edin. Tipografi hakkında herhangi bir bilgiyle bana patronluk taslayamazsın. Sanırım, muhtemelen yaklaşık on yıldır web'de kullanılabilir web yazı tiplerine sahibiz. Bu doğru mu?

Jason: Evet. Aslında, birkaç gün önce Twitter'da bir şeyler başlatan sen değil miydin? 2009'da 9 Kasım gibiydi. Typekit'in piyasaya sürülmesinden bu yana iki gün içinde 10 yıl gibi. Font Deck'in aynı zaman diliminde haklı olduğunu biliyorum. Çok geçmeden Google Yazı Tipleri ve Monotype Hizmeti. 2009'da Typekit'te çalıştığı ajansta, şu anda karımın bir meslektaşı olan arkadaşım John Cianci tarafından bana verilen bir beta davetiyem vardı. Bu, web'e olan ilgimin tamamen yeniden icadıydı. . Yani, benim için devrimden başka bir şey değildi. Demek istediğim, tipografiyi okulda okuduğumda hep sevmiştim ama onunla 15 yıl internette hiçbir şey yapamadık. Bu oldukça şaşırtıcıydı.

Drew: Artık 10 yıldır web yazı tiplerine sahip olan ve potansiyel olarak web üzerinde çalışan tasarımcılar olmalı. Artık web üzerinde çalışan ve çok çeşitli yazı tipleri arasından seçim yapma yeteneği olmayan bir site tasarlamamış tasarımcılar var.

Jason: Evet, bu doğru. Bu deneyime sahip olmayan hiç kimse, büyürken yaptığımız gibi pikselleri her iki yönde de yokuş yukarı itmek zorunda değildi. Yumruklarını gökyüzüne sallayan huysuz yaşlı adamlar değiliz. Ama evet, internette değişen onca şeyle birlikte bu biraz şaşırtıcı, bazı insanların başka hiçbir şekilde deneyimlememiş olması fikri dikkate değer.

Drew: Web yazı tiplerini aldığımızda, bu, web'de tipografiyi kullanmaya başlama şeklimizde büyük bir değişiklikti çünkü gerçekten web'de tipografi kullanmaya başlayabilirdik. Web için güvenli yazı tipleriyle yapabileceğimiz şeyler olduğu açıktı, ancak oldukça kısıtlı bir paletle sınırlıydık. Ancak şimdi potansiyel olarak, değişken yazı tipleriyle neredeyse aynı derecede önemli olan başka bir büyük değişim var. Değişken yazı tipleri nedir? Bizim için ne yapıyorlar? Nereden başlayalım?

Jason: Ben her zaman insanlara bir referans çerçevesi vermeye çalışırım. Dolayısıyla, web'de yazı tiplerini kullanmayı düşündüğümüzde, şu anda “geleneksel” yazı tiplerinde her yazı tipinin o yazı tipinin ayrı bir genişliği, ağırlığı, eğimi ve çeşidi olduğunu hatırlamamız gereken bir şey var. Web'de kullanmak istediğimiz her biri için bir dosya yüklememiz gerekiyor. Gövde kopyası için kullandığınız tipik bir web sitesi için, genellikle dört yazı tipi yüklüyorsunuz: normal, kalın, italik ve kalın italik. Bunların hepsinin yüklenmesi gerekiyor. Bunların her biri, indirilmesi, işlenmesi ve işlenmesi gereken bir miktar veridir.

Jason: Tipik olarak, yıllardır yaptığımız şey, kendimizi bu çok az sayıda yazı tipini kullanmakla sınırlamaktı ki bu aslında pek de iyi bir tipografi uygulaması değil. Grafik tasarımda çok daha geniş bir aralık kullanmak çok daha yaygındır. Belirli bir tasarımda sekiz veya 10 farklı ağırlık ve yazı tipi varyantı kullanabilirsiniz. Web'de performans nedeniyle çok kısıtlandık. Değişken bir yazı tipindeki en büyük fark, tüm bu permütasyonlardır, bu varyasyonlar tek bir dosyada bulunur. Bu format gerçekten verimli çünkü yaptığı şey, o karakterin normal şeklini ve ardından bu eğriler boyunca noktaların onu kalın veya ince veya geniş veya dar olarak göstermek için hareket edeceği deltalar olarak adlandırılan şeyi depolamak.

Jason: Yani yalnızca farklılıkları saklayarak, tüm taslağı saklamanız gerekmez. Çok daha verimli bir formattır. Tek bir yazı tipi dosyası kadar küçük olmasa da, ayrı ayrı alınan tüm dosyalardan çok daha küçüktür. IBM'den Plex Sans gibi bir şeye bakarsanız, tüm bu ayrı dosyalar neredeyse bir megabayt olabilir, burada dikeydeki tüm genişlikleri ve ağırlıkları içeren iki değişken yazı tipi dosyası bir dosyada, diğerinde italikler 230K gibidir. Bu gerçekten, gerçekten eksiksiz karakter setleri için. Çoğu insan bunun bir alt kümesini kullanabilir ve onu daha da küçültebilir. Tipik bir Batı dili web sitesi ihtiyacı için genellikle bu dosya boyutlarını 50 ila 100K civarında görüyorum. Bu, yüklemekten o kadar da farklı değil… Üç veya dört ayrı yazı tipi dosyası yüklediğinizde, muhtemelen bundan daha fazla veri yüklüyorsunuz. Bu, performans açısından ilginç bir kazanç, ancak aynı zamanda, CSS aracılığıyla web'de kullanmamız için tüm yazı tipi yelpazesini de açıyor.

Drew: Yani neredeyse yemek yerine tarifi teslim etmek gibi. İşte italik versiyon yerine, işte kalın versiyon. "İşte normal sürüm ve italik yapmak için şunu yapardınız, kalın yapmak için şunu yapardınız" gibi. Bu, tel üzerinden aşağı inen dosya boyutunu azaltır.

Jason: Evet. Eh, bir bakıma size tüm malzemeleri veriyor ve sonra istediğiniz tarifi yapabilirsiniz. Çünkü gerçekten her yere gidebilirsin… Plex örneğine geri dönersek, 700'ün tipik bir cesur olduğu 100'den 700'e ağırlık, 400 biraz normal bir ağırlık olurdu. Ama sonra çok daha hafifsin. Böylece gerçekten büyük ve gerçekten ince satır başlıkları veya blok alıntılar veya farklı öğeler veya benzer vurgular yapabilir ve ardından kalın olmasını istediğiniz şeyi farklı boyutlarda modüle edebilirsiniz. Daha iyi tipografi, daha iyi kullanıcı deneyimi ve daha iyi performans elde etmek için yapabileceğiniz her türlü farklı şey var. Kapı bekçisi bu.

Drew: Yani bugün normal ve cesur olarak düşündüğümüz adımlar arasında neredeyse sonsuz sayıda ince ayar var mı? Aslında ikisi arasında ince ayar yapmak için bu eksen boyunca herhangi bir yere gitme yeteneğiniz var mı?

Jason: Doğru. Grafik tasarım eğitimi almış ve uzun yıllardır baskı tasarımına oldukça yakından bakan biri olarak benim için gerçekten heyecan verici olduğunu düşündüğüm şey, gerçekten kalın olanın ne olduğu fikri, oluşturduğunuz metnin boyutuna göre değişmelidir. Bu nedenle, varsayılan olarak, normal ve kalın için bu 400 ve 700, web'in varsayılan değeridir. Ama gerçekte, cesur demenin tek nedeni biraz vurgu yapmak, bir şeyin öne çıkmasını istemek. Ancak yazı tipi küçük boyuttan ne kadar ağırlaşırsa, okunması o kadar zor olur. Küçük açık alanları bir nevi dolduruyor. Kabaca 16 piksel boyutuna ayarlandığında veya orada kullandığımız her neyse, gövde kopyası için 700 kullanmak yerine, yeterince vurgu yaptığınız ancak mektup formlarının hala daha açık olduğu yerlerde belki 550, 575 kullanırsınız. Sonra büyüdükçe, daha ağır bir ağırlık kullanabilirsiniz.

Jason: Ama yine de, o noktada bu senin seçimin. Doğru vurgu seviyesini elde etmek için bunu modüle ederek, ancak yine de gerçekten iyi okunabilirliği koruyarak, çok daha fazla esnekliğe sahibiz. Bunlar daha popüler hale geldikçe ve daha yaygın olarak kullanıldıkça, insanlara bu aralığı kullanma biçimleri konusunda biraz daha nüanslı olmayı ve aynı zamanda daha anlamlı ve daha okunaklı olmalarını öğretmeye başlayabileceğimizi umuyorum. .

Drew: Tasarımları ön uç olarak uygularken ve bana verilen tasarımları uygularken fark ettiğim bir şey, farklı renk kontrastı kombinasyonları ve koyu arka plan üzerinde açık metin ile açık arka plan üzerinde koyu metin arasında ağırlıkların tamamen farklı görünebilmesidir. Yani muhtemelen, bu, görseli ve okuma deneyimini, bunun gibi değişikliklere dayalı olarak eşitlemeye ve çeşitlendirmeye yardımcı olur mu?

Jason: Kesinlikle. Bu, genellikle çalıştaylarda ve konuşmalarda sergileyeceğim şeylerden biri, bu hafif mod medya sorgusu için destek eklemektir. Bu karşıtlığı tersine çevirebilirsiniz, ancak daha sonra bunu biraz nüanslı bir şekilde yapmak istersiniz. Yazı tipine bağlı olarak, bir serif yazı tipiyle gerçekten ağır veya biraz cılız görünebilir. Bazen biraz daha ağır veya biraz daha hafif gitmek istersiniz, ancak daha sonra, koyu bir arka plan üzerindeyken harfleri boşluk bırakmanız gerekir, aksi takdirde harf birlikte kanar. Tipografide ayarlayabileceğiniz küçük şeyler var. Medya sorgusu çok basit bir şekilde bırakılır. Demek istediğim, bunu sitenize eklemek iki satır kod gibi. O zaman bununla ne yaparsın. Sadece renkleri tersine çevirmek gerekli değildir. Bazen kontrastı ayarlamanız gerekir, ancak daha iyi okunabilirlik için türün kendisini de ayarlamanız gerekir.

Drew: Yani muhtemelen, değişken bir yazı tipinde değiştirilebilen sadece ağırlık değil. Yazı tipimizi görüntülendiği gibi değiştirmenin başka yolları var mı?

Jason: Evet. Bu tamamen tip tasarımcısına kalmış. Bunun tarayıcıdaki herkes için ücretsiz olmadığını pekiştirmenin gerçekten iyi olduğunu düşünüyorum. Tarayıcı yalnızca yazı tipinde etkinleştirilenleri görüntüleyebilir. Sonuç olarak, ağırlığın buna göre değiştiğini söyleyen tip tasarımcısı. Genişlik ekseniniz olabilir. Biraz daha daralabilir veya biraz daha genişleyebilir, ancak aynı zamanda kayıtlı eksenlere sahip olma yeteneği de vardır. Genişlik, ağırlık, eğik, italik ve optik boyut vardır. Bunların hepsi, CSS özelliklerine eşlenen temel şeylerdir. Eğim, bir ve diğeri arasında bir açıya izin verir, bu yüzden dik ve aslında öne eğimli olduğu kadar ters eğimli olanları da gördüm. Bu tamamen açık. İtalik genellikle açık veya kapalıdır, ancak zorunlu değildir. Aslında sahip olabilirsiniz… Normalden italiğe geçerken harf formlarını kademeli olarak değiştirmeyi ve yol boyunca harflerin yerine bir tür harf koymayı deneyen yazı tasarımcıları var. Bu biraz ilginç bir şey.

Jason: Ama sonra özel eksenlere sahip olma yeteneği var. Tip tasarımcısı, çeşitlendirmek istedikleri özel eksenleri tanımlayabilir. Bir tür yerçekimi yayan damlama ve her türlü eğlenceli büküm şekli ekleyen veya yükselen ve inenlerin yüksekliğini değiştiren serifleri uzatanları gördünüz. Küçük harfli formlarda serif olup olmadıklarının değiştirilmesi. Yapabileceğin her türlü şey var. Bu gerçekten bir tip tasarımcısının hayal gücüne kalmış. Sanırım, tüm bu şeylerle gerçekçi olarak neler olabileceğine dair sadece yüzeyi kazıyoruz. Hepsine CSS üzerinden erişilebilir.

Duru: Evet. Bu özelliklerin tümü, tasarımınızın geri kalanıyla birlikte sunduğunuz normal CSS aracılığıyla değiştirilebilir. Bu değişiklikleri tetiklemek için CSS'de ne tür şeyler yapabiliriz? Bunu tetiklemek için medya sorgularımızın olduğu duyarlı bir düzende yapacağımız gibi mi?

Jason: Bunu yapmanın her türlü yolu var. Yapmanız gereken küçük bir değişiklik var. İnsanların bu şeylerle biraz oynamasına yardımcı olacak bazı şeylere bir dizi bağlantı sağlayacağımızı varsayıyorum. Yani, bir sürü yazdım. Umarım, bu insanlara yardımcı olacaktır. Daha sonra kullanım tarafında, yazı tipi ağırlığı ekseni sadece yazı tipi ağırlığına eşlenir. Normal kalın demek yerine, sadece bir sayı verirsiniz. Bunu medya sorgularıyla değiştirebilirsiniz. JavaScript ile değiştirebilirsiniz. Bununla ne istersen yapabilirsin. Temelde matematiği kullanmak için Tim Brown'dan öğrendiğim CSS Kilitleri adlı bir teknik kullanıyorum. CSS özel özellikleri ve onu ölçeklendirmek için hesaplamalar, küçük bir kesme noktasına kadar büyük bir kesme noktasına ulaştığınızda, yazı tipi boyutunu ve satır yüksekliğini düzgün bir şekilde ölçekler.

Jason: O zaman isterseniz, aynı şeyi ağırlıklarıyla yapmak için biraz JavaScript de kullanabilirsiniz. Ağırlık ekseni, CSS özelliği olan yazı tipi ağırlığına eşlenir. Yazı tipindeki genişlik ekseni, yazı tipi uzatmasıyla eşlenir ve bu sadece yüzde olarak ifade edilir. Birçok tip tasarımcısının bunun nasıl ifade edildiğini düşünmediğini belirtmeliyim, bu nedenle 400'den 650'ye kadar tuhaf şeyler yapan ağırlık aralıkları görebilirsiniz. Yine de yüzde olarak ifade etmeniz gerekiyor, ancak işe yarıyor. Bu iyi. Sadece normalin ne olduğunu ve tüm yazı tiplerinin belgelendiğini bilmeniz gerekir. O zaman, bu ikisi dışında herhangi bir şeyle, şu anda, eğik ve italik için uygulamada biraz dengesiz destek var. Yazı tipi varyasyon ayarlarını kullanmaya geri dönmeniz gereken bu şeylerin birçoğu ve ardından aynı anda birkaç şey sağlayabilirsiniz. Bir nevi yazı tipi özelliği ayarları gibi. Bu dört harfli eksenin virgülle ayrılmış bir listesini ve bir sonraki, bir sonraki değeri sağlayabileceğiniz daha düşük seviyeli bir sözdizimidir.

Jason: İnsanların akılda tutması gereken tek şey, yazı tipi varyasyon ayarlarını kullandığınızda, bununla ilgili tüm anlamsal anlayışı ve geri dönüşü kaybedersiniz. Yazı tipi ağırlığı ve yazı tipi uzatma, tüm tarayıcılarda evrensel olarak desteklenir. Bu özellikleri kesinlikle kullanmalısınız. Başka herhangi bir şey için yazı tipi varyasyon ayarlarını kullanabilirsiniz. Ancak yazı tipi ağırlığını normalde kullandığınız şekilde kullanmanın avantajı, değişken yazı tipi yüklenmezse, tarayıcı bununla bir şeyler yapabilir. Değişken yazı tiplerini anlamıyorsa veya yüklenmiyorsa, her şey yazı tipi varyasyon ayarlarındaysa, tüm stil bilgilerini kaybedersiniz. Bu, sadece neyin nerede desteklendiğine dair küçük bir yan not. Ancak çoğu durumda karşılaşabileceğiniz tüm gönderi tarayıcılarında desteklendiğini de söylemeliyim. I-11 çalışmıyor, ancak statik web yazı tiplerini sunabilir ve ardından değişken yazı tiplerine geçmek için CSS'nizde reklam desteklerini kullanabilirsiniz. Ardından, varlıkların yinelenen indirilmesinden kaçınacaksınız ve bu gerçekten iyi çalışıyor. Bunu zaten birkaç sitede üretimde var.

Drew: Sanırım gördüğünüz daha modern web teknolojilerinin çoğu gibi, bir süredir sessizce köpüren değişken bir yazı tipi varsa ve ancak sonunda bir şekilde kaynadığında ve tarayıcılardan destek aldığımızda. ve senin gibi insanlar bu konuda gürültü yapıyor ve herkesin orada olduğunu bilmesini sağlıyor. Neredeyse her gün işine devam eden ve en son indirmelerin hepsini takip etmeyen standart tasarımcı veya geliştiriciye bu hissi verebilir. Sanki birdenbire ortaya çıkmış gibi görünebilir. Ama sanırım bu epeydir köpürüyor… Demek istediğim, şu anda uğraştığımız biraz farklı iki uygulamadan bahsettiniz. Uygulamak için daha eski ve daha yeni bir standart var mı?

Jason: Şey, aslında daha eski ve daha yeni değil. İkisi de çok kasıtlı. Buna birazdan geri döneceğim çünkü bunlarla aralarındaki farkın ne olduğunu gerçekten anlamaya değer. Ama sen haklısın. Format, üç yıldan biraz daha uzun bir süre önce tanıtıldı, Eylül 2016'daydı. Aslında, üç hafta sonra Safari'nin gece yapısındaki ilk çalışma uygulamasını gerçekleştirdik. Çalışan bir tarayıcımız olması oldukça hızlıydı. Safari, bunun için tam destek sağlayan ilk kişiydi. Sanırım High Sierra çıktığındaydı. Bilmiyorum, Safari 12 gibiydi ya da onun gibi bir şey.

Jason: Ancak çok geçmeden Firefox, Edge ve Chrome'da destek aldık. Aslında neredeyse iki yıldır tarayıcı desteğimiz var. Ama bir ton yazı tipi yoktu. Bu tür istikrarlı bir evrim oldu. Bunları web'de kullanma desteği aslında her yerden daha uzun süredir var. Yani teknik olarak bu format masaüstü işletim sisteminde de çalışıyor. Yani bir TTF biçiminiz varsa, bunu Windows veya Mac üzerinde masaüstü işletim sisteminize yükleyebilir ve herhangi bir uygulamada kullanabilirsiniz. Eksenleri, onlarla oynamak istediğiniz şekilde sonsuza kadar değiştiremezsiniz, ancak o yazı tipi dosyasına gömülü, onu alıştığımız şeye geri eşleyen bu adlandırılmış örnekler kavramı vardır.

Jason: Örneğin Keynote'ta değişken yazı tipleri için açık bir destek yoktur, ancak Tech Sense'de olduğu gibi yine yoğun, hafif gibi şeyler varsa format işe yarar. Normal, normal, normal kalın, dar, vs.'ye sahip olacaksınız, hepsi de tüm aileyi kurmak gibi bir açılır menüde mevcut olacak. Ardından, Illustrator veya Photoshop'ta veya şimdi geçen hafta gönderilen InDesign'da veya birkaç hafta önce gönderilen Sketch'teyseniz, bunların tümü artık değişken yazı tiplerini destekler, böylece daha sonra tüm farklı eksenlere erişebilir ve onunla oynayabilirsiniz. kalbin içeriği. Ancak tarayıcıda, üzerinde çalışacak daha çok şeyimiz oldu. Karınızdan bir ipucu alarak, bir süredir bu davulu çalıyorum, insanları daha fazla haberdar etmeye çalışıyorum. Ardından, Firefox ekibinin geliştirici araçları oluşturma konusunda yaptığı çalışma sayesinde. Jen Simmons bunu bir nebze de olsa ilerleterek, yazı tiplerinin neler yapabileceğini anlamamıza yardımcı olan tarayıcı üzerinde çalışmak için inanılmaz araçlara sahibiz.

Drew: Yazı tasarımcılarından ve yazı tipi yeteneklerinden bahsettiniz. Kullanılabilir birçok yazı tipi var mı?

Jason: Pek çok insan şimdi yapıyor. Muhtemelen onları aramak için en iyi ve en kapsamlı yer Nick Sherman'ın sitesi v-fonts.com, v-fonts.com'dur. Bu sadece bir katalog sitesi. Hızla gerçekten çok büyük oluyor. Artık her zaman daha fazla değişken yazı tipi çıkıyor. Çok sayıda açık kaynak kod yok, ancak GitHub'da değişken yazı tipleri için arama yaparsanız, aslında orada bir sürü proje bulacaksınız. Ancak Google, orada bulunan yaklaşık bir düzine değişken yazı tipiyle yeni API'sinin bir beta sürümünü başlattı. Onlardan daha fazlası geliyor. Stephen Nixon'dan harika bir yeni yazı tipi olan recursive.design'da Recursive'ı piyasaya sürdüler. Plex değişkeni, biri kullanılabilir, bu açık kaynak. Sonra tonlarca ticari var.

Jason: Bununla ilgili harika olan şey, Monotype'ın oldukça büyük olanları piyasaya sürmesi. Ancak, bu formatla denemeler yapma konusunda öncülük eden çok sayıda küçük dökümhane ve bireysel tasarımcıdır. Bence bu tasarım için gerçekten harika ve web için harika, tüm bu yeni tasarımları yeni tasarımcılardan veya bu yeni çığır açan daha küçük tasarımcılardan görüyoruz. Çünkü onların bu konuda başarılı olduklarını görmek hoşuma gidiyor çünkü gerçekten harika şeyler ortaya koymak için inisiyatif almışlar.

Drew: Ailelerin tek bir değişken yazı tipiyle değiştirilmesini sağlamak için mevcut yazı tiplerinin değişken yazı tipleri olacak şekilde güncellendiğini görüyor muyuz? Bu hiç oluyor mu?

Jason: Öyle. Monotype'ın yayınladıkları, gerçekten klasik bazı yazı tiplerinin güncellemeleridir. FF Meta, geçen yıl için demoyu tasarlayarak lansmanlarına yardımcı olduğum biriydi. Buna sahipler. Univers, Frutiger, Avenir, sanırım şimdiye kadar yayınladıkları bunlar, bu dördü. Bunlar gerçekten bir tür temel klasik marka yazı tipleridir. Daha fazlası üzerinde çalışıyorlar. Üretimin çeşitli aşamalarında olan en az yarım düzine daha olduğunu biliyorum. Büyük şirketler için tonlarca özel yazı tipi işi yapan Dalton Maag'ın gerçekten güzel değişken yazı tiplerine sahip olduğunu biliyorum. TypeTogether ile bazı işler yapıyorum. Ayrıca gerçekten harika birkaç yazı tipi var. Bunu biliyorum…

Jason: Bazı konferanslarda, Adidas'ın da sahip olduğu ve neredeyse iki yıldır basılı olarak tüm marka çalışmaları için kullandıkları bu şeylerden bahsettiğimi gösterdim. Bu gerçekten, gerçekten dikkate değer şeyler. Ama aynı zamanda Mark Simonson, Proxima Nova'nın değişken bir versiyonu üzerinde çalışıyor. Bu çok önemli bir şey. Bu, tüm zamanların en çok satan web yazı tiplerinden biri oldu. Oluyor. Ölçeğin yukarı ve aşağısında bitler ve parçalar halinde oluyor. Ancak Ayın Yazı Tipi Kulübü David Jonathan Ross'a abone olmak kadar basit bir şey bile size neredeyse her ay değişken bir yazı tipi kazandıracaktır. Demek istediğim, ortaya koyduğu şeyler konusunda gerçekten inanılmazdı. Yıl için 72 dolar ya da onun gibi bir şey. Her türlü çok güzel şeyi ortaya koyuyor.

Drew: O zaman oldukça ilginç, çünkü açıkçası, değişken yazı tiplerinin yetenekleriyle, bunlardan yararlanan yeni tasarımlar yaratabilirsiniz. Ancak potansiyel olarak, üretimde olan, birinin geri dönebileceği, onu tekrar gözden geçirebileceği ve birden çok yazı tipi dosyasını yeni bir değişken yazı tipi sürümüne dayalı yeni bir uygulama ile değiştirebileceği, artık mevcut olan değişken yazı tipi sürümlerinin bulunduğu siteler olabilir.

Jason: Evet, kesinlikle. Bu oldukça düzenli olarak aldığım sorulardan bazıları. Geçenlerde, geliştirme ekibinin bana aynı soruyu sorduğu oldukça büyük bir spor yayın sitesine bakıyordum. Baktım ve elbette kullandıkları iki yazı tipi için değişken yazı tipleri mevcut. Kısa bir araştırma bize, bir yazı tipinin dört örneğini ve diğer üç örneğini iki değişken yazı tipi dosyasıyla değiştirebileceğimizi ve beş istekte dosya boyutunun %70'inden fazlasını alabileceğimizi gösterdi. Demek istediğim, performans açısından bir soru kazanımı olurdu. Gerçekten büyük ölçekli bir site için, milyonlarca kullanıcıdan indirilen yaklaşık 300.000 veriyi kaldırmaya baktığınızda, bu aslında gerçek dolar tasarrufu ve bant genişliği maliyeti anlamına gelir. Bu tamamen pratik açıdan, CSS'lerini yeniden yazmadan, sadece bu yazı tiplerini değiştirmeden bile, performansta, sayfa oluşturma süresinde ve ardından gerçek bant genişliği maliyetlerinde onlar için zaten önemli bir kazanç olacak.

Drew: Pratik açıdan, sadece birini diğeriyle değiştirmek göründüğü kadar basit mi?

Jason: Olabilir. Bence buna mükemmel bir örnek, Google'ın Eylül ayında ATypI'de bunu Oswald'la günde 150 milyon kez yapmaya başlamaları gibi gelişigüzel bir şekilde ağzından kaçırdığı bir şey. Bunun değişken bir yazı tipi versiyonunu yaptılar ve önemli bir fayda sağlayacak yeterli örnekleri kullanan web sitelerinde gezinmeye başladılar. Kimseye söylemediler. Site sahiplerine söylemediler. Kimse bir şey yapmak zorunda değildi. Ağırlık ekseninin doğru eşlenmesine sahip olduğundan, varsayılanlar işe yarayacaktır. Günde 150 milyon kez bir çok font hizmeti veriyor. Bu onlara, sundukları ilk beş web yazı tipini değiştirmeye başlasalar, bu manzaranın onlar için nasıl görüneceği konusunda daha iyi bilgiler vermeye başlıyor? Open Sans'ın muhtemelen bunlardan biri olduğunu varsayıyorum. Lato'nun muhtemelen orada olduğunu biliyorum, Roboto.

Jason: Bunlara ve optimize edilmiş sürümlerinin nasıl göründüğüne bakarsanız, Google'ın bununla ilgilenmesinin bazı çok açık nedenleri olduğunu görebilirsiniz. O zaman diğer tarafa bakarsanız, sadece tasarım alanı ve bir şirketin farklı olanları değiştirmek veya daha fazlası olmak yerine kendi marka yazı tiplerinin tüm yelpazesiyle çalışıyorsa, bir markanın sesine ne kadar daha gerçekçi olabileceği. paletlerinde sınırlıdır. Dolayısıyla bu yelpazenin her iki ucunda öğrenilecek ve keşfedilecek gerçekten ilginç şeyler var.

Drew: Heyecan verici, cesur yeni bir tipografi dünyası ve daha önce yapabildiğimizden daha hassas ve potansiyel olarak daha yaratıcı bir şekilde web'de yazı yazma fırsatları gibi görünüyor.

Jason: Pekala, kesinlikle öyle umuyorum. Web'de yazı tiplerinin her aşamada benimsenmesinin önündeki en büyük engellerden birinin performans olduğunu düşünüyorum. Peki ne olur? Yüklenmesi ne kadar sürer? Bu, sayfadaki oluşturma süresi için ne anlama geliyor? Bu tür görünmez metin veya biçimlendirilmemiş metin sorunlarına sahibiz. Tüm bu şeylerle boğuşmak, gerçekten, her şeyin oraya varmasının ne kadar sürdüğüne geri dönüyor? Tarayıcı buna nasıl tepki veriyor? Bu sorunlardan bazılarını azaltmak için yapabileceğimiz birçok şey var. Ama gerçekten daha iyi bir yazı tipimiz ve onu sunmanın daha iyi bir yolu varsa, o zaman tüm bu sorunlar çok daha az önemli hale gelir. Yani bunu yerine yerleştirdikten sonra, çok daha etkileyici oluruz. Bunun tasarım ucunu gerçekten deneyebilir ve zorlayabilir ve biraz daha yaratıcı olmaya çalışabiliriz.

Drew: Çünkü son zamanlarda, belki de web'in, birkaç farklı içerik türü için bazı varyasyonlarla, site başına bir makale şablonu tasarlama tuzağına sürüklendiği hissini ifade ediyorsun. Ancak herkes, gözlerime çok okunan bu orta.com tarzı tek sütunlu metinlere doğru sürükleniyor. Güzel dizgi. Bu o kadar kötü bir şey mi?

Jason: Bence kötü değil. Sadece sıkıcı olacağını düşünüyorum. Demek istediğim, Medium çıktığında, bu oldukça yeniydi. Yani, sanırım şu bir sütun... Dediğiniz gibi, oldukça güzel bir dizgi kopyasıydı. Güzel bir alanı var. Kalabalık değildi. Sıkışık değildi, kenar çubukları ve diğer şeyler. Her zaman iş modeli ve bunu neyin destekleyeceği soruları olacaktır. Bu yüzden gerçekten güzel bir yeniden tasarım, sanırım, Mule Design için Mike Monteiro'nun birkaç yıl önce yaptığı Seattle Times'dı. Lansmana kadar kesinlikle muhteşem. Sonra sütunun her iki yanında bu devasa pankartlar vardı ve bu tüm o boşlukları ortadan kaldırdı. Bu gerçek bir utançtı.

Jason: Şirketlerin para kazanması gerektiğini anlıyorum. Bunun yansımaları var. Bu yüzden tek seçenek olması harika olurdu. Bu güzel temiz düzene sahip olmak için. Ama tek olmamalı. CSS'de kenar boşlukları ve düzen ile gerçekten ilginç şeyler yapmamıza izin veren tüm bu yeteneklere sahibiz. Demek istediğim, şu anda sadece şebekeye sahip olduğumuz gerçeği bile değil. Ama CSS'de tarayıcıda hesaplamalar yapabiliyor olmamız çok daha ilginç şeyler yapmamızı sağlıyor. Bunu, yazı ile çok daha anlamlı olma yeteneği ile birlikte eklerseniz, dergilerde ne yaptıklarına bakmaya başlayabiliriz. Vanity Fair'in tek bir makale şablonu yok. Altı, yedi veya sekiz tane var. Bunları nasıl ortaya koyduklarına gerçekten bakarsanız, muazzam miktarda değişkenlik var ama bu bir sistem içinde oynuyor.

Jason: Yani web sitemiz için bir tasarım sistemi oluşturduğumuzda, tek bir düzende durmak yerine, içerik yönetim sistemlerimize bazı anahtarlar eklemenin nispeten kolay bir yolu var. Çoğu, makul miktarda esnekliği destekler. İnsanlara seçme şansı vermememiz için hiçbir neden yok. Bir, iki, üç, dört, beş, altı düzenini kullanmak istiyorum. Bu, farklı marjlar, farklı ofsetler getirecek. Belki bazı sütunlar oluşturma yeteneğini tanıtmak. Çok daha ilginç bir web için yapabileceğimiz birçok farklı şey var. Bence bu tip bunda gerçekten büyük bir rol oynayabilir.

Drew: Web'e biraz daha kişilik eklemek söz konusu olduğunda, yazmak bizim kurtarıcımız mı?

Jason: Bence olabilir. Web'de daha iyi kullanılabilirliğe yönelik bu uzun evrimi yaşadığımızı düşünüyorum. Ama bence tek ilgilendiğimiz şey bu faydacı olduğunda, buradaki kayıplardan biri, kullanılabilir bir yaklaşım mı? Bu kişiliği yenme eğilimindedir. Sonra her web sitesi… Yine, web yazı tiplerimiz ortaya çıktı ve bu, daha önce sahip olmadığımız yeni bir ifade düzeyi yarattı. Sonra birdenbire... Görüntüler daha iyi hale geldi. Böylece serifler tekrar karışıma girdi. Bunları web'de tekrar kullanabiliriz. Bu şeyler biraz hayat ekledi. Ardından, bir veya iki San-serif kullanan herkese bir çeşit optimize ettik. Açık Sans ya da Roboto ya da Oswald ya da her neyse. Tonlarca gerçekten iyi, gerçekten okunabilir yazı tipinin olduğu aynı şeye geri döndük. Tipografi hakkında bu kadar çok şeyi kullananlar olan bu yeni nesil UX tasarımcılarına gerçekten öğretmedik. Ne kadar etkileyici olabileceği, ruh halini ve tonu ne kadar değiştirebileceği hakkında herhangi bir şey.

Jason: Yani, web'deki şeylerin tasarım yönünü belirleyen, yazı tipi hakkında fikirleri olan, belki de grafik tasarım ve okunabilirlik kavramları üzerine eğitim almış biri kadar bilgili olmayan çok sayıda insanımız var. Bunları bir araya getirmemiz gerekiyor. Biri ya da diğeri değil. Bu bir ve. Olması gerekiyor.

Drew: Özellikle kişilik, ton ve ruh hali hakkında konuştuğumuzda. İş açısından veya bahsettiğimiz şey bir markanın yönleridir. Yani her şeyin aynı görünmesini sağlarken, bir markayı müşterilere iletme yeteneğimizi mi kaybediyoruz?

Jason: Kesinlikle. Siyasete dalmak değil, ama bütünü düşünüyorum… ABD'de kesinlikle yaşadığımız en önemli sorunlardan biri ve eminim İngiltere'de son yıllarda yaşananlardan çok da farklı değil. Tüm haberler tek bir platform üzerinden tüketildiğinde ve her şey aynı göründüğünde, ses ayrımı yoktur. Yani ABD'deki yetişkinlerin %75'i haberlerinin önemli bir bölümünü Facebook'tan aldıklarını söylüyor. Demek istediğim, bunun genel olarak ne kadar korkunç olduğunu bir kenara bırakalım. Ancak her şeyin aynı şekilde sunulduğu göz önüne alındığında, The Guardian'dan New York Times'a, The Wall Street Journal'a, The Washington Post'a ve Joe'nun sağcı haberlerine kadar bir makale arasında hiçbir fark yoktur. Hepsi tamamen aynı şekilde sunuluyor.

Jason: O logoyu, o yazı stilini gördüğümüzde, Guardian çok karakteristik. Wall Street Journal çok karakteristik. Bir manşet bile olsa gördüğümüzde hemen tanırız. Bunun nereden geldiğini biliyoruz. Sonra o markayla ve o özgünlükle otomatik bir ilişkilendirme var. Bunların hepsini bir kenara attığınızda, “Tamam, bunu bir manşet üzerinde değerlendireceğim. O zaman açık, kim daha iyi bir başlık yazdı? Bu devam etmek için çok fazla değil. Dolayısıyla çok büyük bir kayıp verdiğimizi düşünüyorum. Apple News Plus'ın ne yapmaya çalıştığına bakarsanız, birkaç şirketin bir kısmının bunu yeniden denemeye ve uygulamaya koyma çabaları var. Blundell, Avrupa'da gerçekten ilginç bir iş çıkardı. ABD'de piyasaya çıktılar, ancak gerçekten o kadar başarılı olduklarından gerçekten emin değilim. 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. Bu doğru. 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. Teşekkür ederim. 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.