Değişken fontlu tipografinin evrimi: giriş

İnce, kalın ve aradaki her şey: Monotip'ten FF Meta Değişken

Sözlerin gücü vardır ve tipografi onların sesidir.

Yüzyıllar boyunca, yazı okuduklarımızı 'duyma' biçimimiz olmuştur. Genel olarak, yazı tiplerinin ve tipografinin markalamanın, ifadenin ve ses aralığının temel bir unsuru olduğu da anlaşılmıştır. Harika tipografi, anlayışı, ruh halini ve anlamını sayısız yoldan etkiler ve tasarımın önemli bir parçasıdır. Ne yazık ki, web’in ortaya çıkmasından sonraki yıllar boyunca, tipografik tasarımın en temel olanını, çevrimiçi içeriğe uygulayamadık. Gerçek fontları ve OpenType özelliklerini kullanma - bitişik harfler, belirli şekil kümeleri, kesirler ve gerçek karakter aralığı gibi - tipografik manzara muazzam şekilde gelişti. Ancak içeriği web’de görüntülemenin gerçekliği, hızın tasarımın en kritik yönü olduğunu belirtir - bu yüzden sayfa hızı için tipografik "vokal aralığı" nı aldık. Bu, daha az font ağırlığı ve azaltılmış marka sadakati ve sesi anlamına gelir.

Birçoğundan bir (paradigma: değiştirildi)

Değişken yazı tipi, tek bir yazı tipidir;
- John Hudson

Değişken Yazı Tiplerinin ortaya çıkışı, tüm dinamiği değiştirir. John Hudson tarafından açıklandığı gibi, değişken bir font, çok sayıda etkili tek bir fonttur: tüm genişlik ve ağırlık, eğik ve hatta italik varyasyonları tek, oldukça verimli ve sıkıştırılabilir bir font dosyasında bulunabilir. Dahası: format (teknik olarak OpenType 1.8 spesifikasyonunun bir parçası olan) tamamen genişletilebilir. Tip tasarımcısı, hangi eksenlerin kullanıldığı, bunların aralıkları ve hatta yeni eksenlerin tanımı üzerinde tam kontrole sahiptir. Şu anda 5 adet “kayıtlı” eksen (genişlik, ağırlık, eğik, italik ve optik boyutlandırma) bulunmaktadır, ancak tasarımcı seçtikleri ekseni değiştirebilir. Bazı örnekler arasında yükseliş ve alçalmaların yüksekliği, metin notu, hatta serif şekli bulunur. Olasılıklar neredeyse sınırsız. Performans engelini kaldırarak, daha ilginç ve dinamik tasarım ve markanın gerçek sesini ifade etmek için çok daha büyük bir yetenek için kapıyı açıyoruz. Bütün bunlar yazı tipine uygunluğu korurken: sadece tip tasarımcısı tarafından maruz bırakılan eksenler değiştirilebilir. Yapay bozulmaya izin verilmez.

Web tasarımı, yeniden icat edildi

Teknoloji hala olgunlaşırken ve tasarımcılar bu yeni çalışma biçiminde daha akıcı hale gelmek için çalışırken, web üzerinde tasarım vaadi çığır açıcıdır. Tipik senaryo, herhangi bir tasarımın, sitenin tasarım dilinin ve sesinin her yönünü temsil etmek üzere - vücut kopyası ve başlıklar için her izin dahil olmak üzere 3 - 5 farklı yazı tipiyle sınırlandırılması olacaktır. En basit uygulamasında değişken fontlar bize her başlık seviyesi için farklı ağırlıklar kullanma özgürlüğü verir - netliklerini ve okunabilirliklerini büyük ölçüde arttırır.

100 ila 900 ağırlık arası ampersandlar

Biri, başlıklar için veya veri yoğun bilgi göstergelerinde biraz daha dar karakter genişlikleri kullanabilir. Aslında, tüm tipografik sistem orantılı olacak şekilde tasarlanabilir: ağırlık ve genişlik, standart vücut kopyalama ayarlarında çarpanlar olabilir. Bunu yapmak, ayarlarının ekran boyutuna veya kullanıcı tercihine göre değişmesi durumunda, vücut boyutuyla birlikte bu özelliklerin kolayca ölçeklenmesini sağlar. Tüm bunlar, daha az HTTP isteğinden (daha az yazı tipi dosyası) ve indirilecek verilerin toplam tasarrufundan dolayı (kullanılan yazı tipine ve sıkıştırmaya göre değişmekle birlikte) genel performans artışıyla birliktedir.

Ancak bu özgürlükler daha açıklayıcı olmamıza izin verirken, gerçekten ilginç özelliklerden bazıları okuma deneyiminin kendisini dönüştürmeye yardımcı olacaktır. Bu sayfa (aslında gerçek demo sayfanın kendisi) FF Meta'nın yeni değişken font versiyonuyla, Erik Spiekermann'ın ilk 1991'de piyasaya sürdüğü klasik sans-serif tasarımıyla hazırlandı. Her ikisinin de tek bir varyasyon ekseni (ağırlık) ile bile Roma ve italik çeşitler, performansta muazzam kazanımlarla harika bir ses yelpazesi elde edilebilir: 18 dosya ve 288k ve üstü sadece 84k olan tek bir dosya ile değiştirildi.

Ekranda yeniden düzenlendi

[Meta] güzel görünmekten daha fazlasını yapmak zorunda: çok sıkı çalışmak zorunda
—Erik Spiekermann

İyi bir okuma deneyimi yaratma konusundaki en büyük zorluklardan bazıları, oran ve ince detaylarda incelik eksikliğine bağlıdır. Modern CSS ve OpenType özelliklerinin ve varyasyonlarının birleşimi güçlü bir kombinasyon sunar. Dile dayalı bitişik harfler ve tireleme gibi özellikleri ayarlayabilme, ekran boyutuna göre tirelemeyi açıp kapama ve hatta yazı tipi boyutunu küçültmeden satır başına daha fazla karakter sığdırmak için en küçük ekranlardaki karakter genişliğini ayarlama okuma deneyiminin pürüzsüzlüğü ve rahatlığı.

Yakın çekim için hazır

18. yüzyıldan kalma Garamond kesimi, optik boyutlarda kesilmiş. İlk resim 6pt boyutunda, ikincisi 72'de. Kontrast kontrastındaki farkı not edin. Daha büyük boyutta daha rafine.

Metal türünde yaygın olan, ancak fotoğraf dizgisine ve dijitale çevrilmesinde kaybedilen bir başka özellik de optik boyutlandırmaydı (peki, bazı tasarımcılar hala farklı aralıklar için ayrı optik boyutlar oluşturuyorlar, ancak nadir ve biraz sınırlı). Sans-serif tasarımlarında sıkça bulunmayan, ancak on yıllardır (gerçekte, yüzyıllarca), fiziksel olarak daha küçük boyutlardaki bir yazı tipinin, biraz daha ağır vuruşlarla, daha açık kaselerle ve sayaçlarla kesilmesi ve bazı durumlarda okunabilirliği korumak için daha geniş açıklıklar. Özellikle gazeteler, çizgilerin kaybolmamasını veya mektupların mürekkep kazancından çok fazla zarar görmemesini sağlamak için bunu kritik buldu.

Optik boyutlandırma, değişken yazı tiplerinde bir getiri sağladı ve mümkün olduğunda otomatik olarak uygulanabilir veya web tasarımcısı veya geliştiricisi tarafından açıkça belirlenebilir. Daha önce de belirtildiği gibi, bunun gibi sans-serif yazı tiplerinde bir özellik değildir, ancak yüksek kontrastlı serif tasarımlarında oldukça çarpıcı bir etki için kullanılabilir.

Lehçe ve poise

Daha önce tartışılan faydalarla, değişken fontlar için durum oldukça caziptir. Ancak iyi tipografi, iyi bir tasarım için tek şey değildir. Genişlik ve ağırlık gibi eksenler yelpazesi bize çok fazla sayıda dosya varlığı yüklemek zorunda kalmadan web üzerinde daha fazla editoryal tasarımı kucaklamak için muazzam bir özgürlük sağlıyor. Zaten bu gerekli değişken değişken yazı tiplerini zaten uyguladığımız için, onları içerik yayıncıları tarafından kullanılmak üzere ortaya çıkarmak için fırsattır. Web sitelerinin bulunduğu İçerik Yönetim Sistemi (veya CMS) içindeki tasarımcıların bir rol hayal edin. Bu tasarımcı, her seferinde özel kod yazmanıza gerek kalmadan, baskıda sahip olduğumuz gibi tamamen yeni bir tasarım düzeyi sağlayan, belirli başlıkları veya çekme tırnaklarını dizilebilmelerini sağlayacak olan CMS'ye yerleşik bazı basit denetimler kullanabilir.

Hala bu yeni dönemin şafağında olabiliriz, ancak geleceği kesinlikle parlak

Mayıs 2018'den itibaren, başlıca web tarayıcılarından 3'ü, her iki baskın mobil platformun yanı sıra, değişken fontları da destekliyor (caniuse.com adresindeki desteği kontrol edin). Bunu göz önünde bulundurarak, bugün web'i aydınlatmaya başlamaya hazırız.

İşte CodePen'deki tam sayfa. Her şeye birlikte bir göz atın ve süren CSS'ye bir göz atın. Bu, Jen Simmons ve Tim Brown'dan öğrendiğim bazı fikirlere dayanarak oluşturduğum, görünüm birimleri, CSS özel özellikleri (aka değişkenleri) ve çok sayıda hesaplama kullanarak oluşturduğum bir ölçeklendirme tipografik sistemi içeriyor. Doğrudan CodePen'de görüntüleyebilir veya gerçekten aşağıya gömülmüş olarak kontrol edebilirsiniz.

Yazı tipi ve proje hakkında bazı düşünceler

Her zaman Erik Spiekermann’ın çalışmalarının hayranı oldum ve son 25 yılda Meta, Officina ve Fira’nın kronolojisi ve tarihinin gerçekten ilginç olduğunu ve benim için dijital tasarım dokusunun bir parçası olduğunu düşünüyorum. Tasarım dünyasında bu tür bir tarih ve etki ile bir yazı alma ve yepyeni bir teknoloji bağlamında bununla çalışma şansı gerçekten heyecan vericiydi. Özellikle aynı dosyanın bir parçası olarak hem ağırlık hem de italik ile çalışabildiğimi takdir ediyorum: değişken font formatının değerini gerçekten iyi gösteriyor.

Makaleyi yazana kadar sayfayı tasarlamaya bile başlamamaya karar verdim. Tasarım dili ve marka sahiplerine yönelik, değişken fontların kaygıları ile uyuşacak şekilde faydalarını tanıtmak amacıyla iyi bir tanıtım yazmak istedim: tasarım dili ve marka ifadesi. Taslağımın iyi olduğunu hissettiğimde, yazı tipine ve tasarım sözlüğündeki yerine biraz daha spesifik olarak yer verdim. Bu bana hem yazı hem de tarihin nasıl gösterileceği hakkında fikir verdi.

Temel dizgileri düşünürken, ölçeklendirmeye gittim: Kullanılan ağırlıkların çoğunda daha fazla kısıtlama olması nedeniyle, web'de çok sık göremediğiniz şekillerde, aşırı ağırlık ve büyüklüklerle oynamak istedim. Bu durumda, hem roman hem de italik olarak 100'den 900'e kadar bir dizi ağırlık kullandım. Sevdiğim bir düzen almaya başladığımda, bana yetenekleri açıklamak için grafik yapmak yerine, resimlerin türünden daha ilginç hale geleceğini düşündüm: tırnak işaretleri ve biraz da "Infographic" tarzı yazı tipi verileri.

Ve üst işaretin son dokunuşu aslında FontFont sitesindeki tip örnek sayfasından esinlenmiştir: Bir üst üste yerleştirilmiş olan bir işaretçi ve tüm ağırlıkları gösteren bir glif örnekleyici vardır. Başlangıçta hepsinin aynı şekilde üst üste gelmesini sağladım, bir döngü içinde canlandırıyordum - ama bu, bazı değişkenler için hala değişken fontlar ve ana kare animasyonu uygulayanlar için biraz fazla oldu. Bir oynatma / duraklatma seçeneğiyle çakışan düzenine bastığımda, yayılma biçimini sevdim (özellikle cep telefonunda). Bu yüzden etrafında çevirdim ve statik olarak harekete geçirmesini sağladım, sonra animasyonu bir kez oynatıp yayma / katmanlı düzene geri döndüm.

Sonuçta hem içerikten hem de tasarımdan gerçekten çok mutluyum ve farklı ekran boyutlarında da nasıl hareket ettiğini ve geliştiğini seviyorum. Umarım başkaları için de ilham kaynağı olur.

[Monotype kısa süre önce klasik Erik Spiekermann tasarımı FF Meta'nın yeni bir değişken yazı tipi sürümünün yer aldığı bir tanıtım sayfası yazıp tasarladım. Bu, o sayfanın metni ve bazı görseller. Canlı sayfa CodePen'de barındırılıyor ve yukarıda gömülüyor. Herkese açık, bu yüzden bir kopya çıkarmaktan ve kendinizle oynamaktan çekinmeyin. Teknolojiye girişlerini de görebilirsiniz.]

Blogumda yayınlanan orijinal içerik