Variable Font ve Geniş Ekran Düzeninde Kazancı Ölçmek
Variable font'un tek dosyada birden fazla ağırlık taşıması hoş bir kolaylık, ama otomatik bir hız kazancı değil. Geniş ekran düzenleri için de benzer bir yanlış anlama var: iki yanda kalan boşluk doldurulmak zorunda değil. İkisinde de kararı ölçüm veriyor, teknolojinin kendisi değil.
Tek dosyanın içinde duran şey: eksenler
Klasik bir font ailesinde her ağırlık ayrı bir dosyadır. Regular bir dosya, Bold başka bir dosya. Variable font bunu tersine çevirir: içinde kesilmiş ağırlıklar değil, bir aralık vardır. Tasarımcı 100 ile 900 arasında bir eğri tanımlar, tarayıcı o eğri üzerinde istediğin noktayı hesaplar.
Bu aralıklara eksen deniyor. En yaygını ağırlık ekseni (wght); yanında genişlik (wdth), eğim (slnt) ve optik boyut (opsz) bulunabilir. Hangi eksenlerin bulunduğu fonta göre değişir, çoğu variable font yalnızca ağırlık taşır.
Pratik karşılığı şu: font-weight: 520 yazabilirsin ve gerçekten 520 alırsın, en yakın kesime yuvarlanmaz. Başlıkla gövde arasındaki kontrastı 400/700 gibi hazır çiftlere sıkışmadan ayarlamak buradan geliyor.
Ağırlığı font-weight ile yaz, font-variation-settings ile değil. İkincisi daha doğrudan görünür, ama değeri listenin tamamını değiştirir: bir kuralda sadece ağırlığı ayarlarsan aynı elementteki genişlik ve eğim ayarların düşer. Üstelik yedek font variable değilse o satırı hiç görmez, font-weight ise çalışmaya devam eder.
Tek dosya her zaman daha hafif değil
Yaygın cümle şu: variable font tek dosya olduğu için daha az istek, daha az byte. İlk yarısı doğru, ikincisi koşullu.
Statik kurulumda tarayıcı yalnızca kullandığın yüzleri indirir. Sayfada Regular ve Bold varsa iki dosya iner, Light tanımlı olsa da kimse kullanmıyorsa hiç inmez. Variable fontta bu seçim yok: 100-900 aralığının tamamı tek dosyanın içinde, sen yalnızca 400 ile 700 arasında gezinsen de hepsi geliyor.
Karşılaştırma böylece basit bir toplama işine dönüşüyor. Kaç ağırlık kullanıyorsan o kadar statik WOFF2'nin toplam boyutunu al, variable dosyanın boyutuyla yan yana koy. İki ağırlıkta statikler sık sık öne geçer, dört ağırlıkta variable genellikle kazanır. Üç ağırlık sınır bölgesi ve fonta göre değişir, tahmin etmek yerine tarayıcının ağ sekmesindeki transfer boyutunu oku.
İtalik ayrı bir hesap: gerçek italik çizimler çoğu ailede ayrı dosyada durur, ital ekseni taşıyan variable fontlar azınlıkta. Tarayıcının dik yüzü eğerek ürettiği sahte italik sana yetmiyorsa, italik dosyasını da toplama ekle.
Boyutu asıl aşağı çeken şey ise eksen sayısı değil, karakter kümesi. Alt küme çıkarırken Türkçe için ı, İ, ğ, ş, ç, ö, ü karakterlerini kontrol et; temel Latin kümesi bunları içermez, Latin Extended gerekir. Eksik kalırsa metin okunmaz hale gelmez, daha kötüsü olur: harflerin bir kısmı yedek fonttan gelir ve satır görsel olarak dağılır.
Geniş ekranda boşluk bir hata değil
1024 piksel varsayımı gerçekten geride kaldı, 2560 piksellik bir ekranda iki yanda geniş boşluklar kalıyor. Buradan çıkarılan sonuç genelde aynı oluyor: boşluğu doldur. Ana metin sütunu için bu yanlış.
Okuma hızını belirleyen ölçü satır uzunluğu. Satır 45-75 karakter bandının üstüne çıktığında göz satır sonundan bir sonraki satırın başına dönerken hedefi kaçırmaya başlar; aynı satırı iki kez okumak ya da bir satır atlamak böyle oluyor. max-width: 70ch gibi bir sınır, ekran ne kadar genişlerse genişlesin sütunu okunur tutar.
Peki yandaki alan ne olacak? İkincil içerik için iyi bir yer: içindekiler listesi, ilgili yazılar, ya da metnin akışında geniş olmak isteyen öğeler. Uzun satırlı bir kod bloğunu 70ch'e sıkıştırmak yatay kaydırma veya çirkin satır kırılması üretir, o öğeyi sütunun dışına taşırsın. Reklam panosu da oraya sığar, ama o kararı okuma deneyimi değil gelir modeli verir, ikisini aynı gerekçeyle savunmamak gerekir.
Ölçerken hangi sayıya bakmalı
İki karar da veriye dayanıyor, ama analytics raporlarında sık sık yanlış sütuna bakılıyor. "Ekran çözünürlüğü" cihazın fiziksel ekranını söyler, kullanıcının tarayıcı penceresini söylemez. 2560 piksellik ekranda pencere 1400 piksel geniş olabilir, tarayıcı yakınlaştırması da CSS piksel sayısını değiştirir. Geniş düzeni tetikleyeceğin eşiği viewport genişliği dağılımına göre seç, ekran raporuna göre seçersen kimsenin görmediği bir düzen kurarsın.
Progressive enhancement bu noktada kendiliğinden devreye giriyor. Geniş düzen bir medya sorgusunun içinde yaşar, eşiğin altındaki herkes tek sütunlu görünümde kalır. Font tarafında aynı işi @supports (font-variation-settings: normal) ve src içindeki tech(variations) yapar; desteklemeyen tarayıcı statik yüze düşer.
İkisinin ortak yanı da bu. Variable font ve geniş düzen sana "daha fazla" veren araçlar, hangisinin gerçekten kazanç olduğu ise kullandığın ağırlık sayısı ve ziyaretçinin pencere genişliği belli olduktan sonra ortaya çıkıyor. Sırayı tersine çevirip önce teknolojiyi kurmak, sonra gerekçe aramak iki durumda da daha ağır bir sayfa bırakıyor.