Web İçin Değişken Yazı Tipleri (Variable Fonts)

Variable Fonts kavramı web dünyası için daha yeni diyebileceğimiz fakat geleceği gayet parlak olan bir konu. Bu yazıdaki amacım, değişken yazı tipleri kavramı konusundaki farkındalığı arttırmak olup, daha çok bilgi sahibi olmak isteyenler için yazının altında bir çok kaynak linki paylaşacağım.

Onur Kaplan
Sep 3, 2018 · 4 min read

Variable Fonts Nedir?

“Tek bir yazı tipi dosyasının, bir yazı tipi ailesi (içerisinde birden çok varyasyon barındıran) gibi davranmasına olanak sağlayan ve alternatif eksenler kullanmaya imkan vererek, sıra dışı kabiliyetler sunan yeni bir teknolojidir.”

Bu tanıma bir örnek vererek değişken yazı tipleri kavramını kafamızda dahada netleştirebiliriz;

Web sitenizde web font olarak Open Sans yazı tipini kullanmak istediğimizde bu font ailesinin 10 bireyinden en az 3–4 tanesini kullanmamız gerekecektir. Başlıklar, alt başlıklar, paragraflar v.b gibi eleman tiplerinin birbirlerinden farklı olacağını düşünürsek, kullandığımız font ailesinin aşağıdaki bireylerine ihtiyaç duyacağımızı varsayabiliriz.
- OpenSans-Light
- OpenSans-Ragular
- OpenSans-Bold
- OpenSans-Italic

Bu senaryoda web sayfanız, kullandığınız font gereksinimi için sunucudan 4 farklı font dosyası indirecektir. Bu durum hem hız hem de sayfa yükü düşünüldüğünde bazı projelerde çok can sıkıcı boyutlara ulaşabilmektedir. Ayrıca yukarıdaki senaryoda kullanılabilecek yazı tipi varyasyonlarının bir sınırı vardır. Font-weight değerlerini sadece 3 farklı ölçüde kullanabilirsiniz.(font-weight:300, font-weight: 400, font-weight:700)

İşte tam da bu noktada variable font kavramının değerini daha net anlayabiliriz. Bir değişken yazı tipi, bu dört ayrı dosyadan önemli ölçüde daha küçük olacak ve sunucuya yapacağı tek bir çağrı ile ek bir hız avantajı da sağlayacaktır.

Değişken Yazı Tipi İçin Basit Bir Örnek:

Yukarıdaki örnekte Gingham değişken fontunun sadece 10.6 KB boyutunda tek bir dosyadan oluştuğunu, weight ve width referans değerlerini değiştirerek istediğimiz yazı tipini elde edebildiğimizi görüyoruz. Gingham fontunu yapan kişi bu fontun 2 referans değerini değişken olarak kullanmış ve font weight değerini 300 ile 700 arasında istediğimiz değerde değiştirebilme imkanı sunmuş. Aynı şekilde font width değerini de 1 ile 150 arasında değişken değer atayabilme imkanı sunmuş.

Yukarıdaki Örnek İçin CSS kodu:

Peki değişken yazı tiplerinin çalışma mantığı nedir?

Değişken yazı tipleri, çok sayıda faklı davranış kabiliyetine sahip (genişlik, ağırlık, eğik çizgi, italik ve optik boyutlandırma), verimliliği yüksek ve sıkıştırılabilen yazı tipi dosyalarıdır. Bir fontun ne kadar eksene sahip olacağını, o fontu yapan tasarımcı belirler. Yani bir değişken yazı tipinin hangi eksenelere sahip olduğunu öğrenmeniz için o fontun dökümantasyonunu incelemeniz gerekir.

Değişken font varyasyonlarını yönettiğimiz CSS property “font-variation-settings”dir. Bir CSS4 Spesifikasyonu olan font-variation-settings için çok eksenli bir örnek:

Yazı tipi geliştiricilerinin yaratıcılığına bağlı olarak çok sayıda eksenden oluşan ve ilginç kabiliyetler sergileyen yazı tiplerini de rahatlıkla kullanabiliriz.

Enteresan Bir Örnek 😄 :

https://www.axis-praxis.org/specimens/zycon linkine tıklayarak ulaşacağınız sayfada Zycon fontun alternatif eksenler kullanarak standart dışı bir kullanım sunduğunu görebilirsiniz.


Varyasyon Çeşitliliği Açısından Kullanım Zenginliği Sunan Başka Bir Örnek Daha, ( Decovar Font) :

https://www.axis-praxis.org/specimens/decovar linkine tıklayarak Decovar fontunun tüm kabiliyetlerini test edebilirsiniz. Ayrıca Fontun Github sayfasını incelerseniz çalışma mantığını ve eksen yapısının nelerden oluştuğunu görebilirsiniz. https://github.com/TypeNetwork/Decovar


Variable Fonts Kavramının Gelişimi

Değişken font kavramı Microsoft, Google, Adobe ve Apple tarafından ortaklaşa geliştirilmiş bir teknoloji olup daha şimdiden browser ve işletim sistemlerinin büyük bölümü tarafından desteklenmeye hazır durumdadır.

Caniuse Ağustos 2018 kontrolünde Global destek oranının %70 olduğunu görüntülüyoruz.


Daha Çok Canlı Örnek

Bazı değişken yazı tiplerinin varyasyonları üzerinde değişiklik yaparak nasıl sonuçlar elde edebileceğinizi görüntülemek için Axis Praxis sitesini ziyaret edebilirsiniz. Ağustos 2018 itibariyle 30'dan fazla değişken yazı tipini test edebilme imkanı sunuyor.



Bu yazımı faydalı bulup beğendiyseniz 👉 👏👏👏 🙂

Bir sonraki yazımda görüşmek dileğiyle✋…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade