Üretimde değişken fontlar: kimsenin anlatmadığı ödünler

Değişken fontlar sihirli font sıkıştırması değildir

Değişken fontlar çoğu zaman web tipografisi için düzenli bir çözüm olarak sunulur: tek dosya, çok sayıda ağırlık, daha az istek, daha akıcı tasarım sistemleri. Bu anlatı genel olarak doğrudur, ancak eksiktir.

Üretimde değişken font, altı dosyayı tek dosyayla değiştirmekten çok yeni bir tipografi çalışma zamanı benimsemeye benzer. Ağırlık, genişlik, eğim, optik boyut ve bazen özel eksenler üzerinde ifade gücü kazanırsınız. Bununla birlikte dosya boyutu, tarayıcı işlemesi, yedek davranışı, tasarım yönetişimi ve performans ölçümüyle ilgili yeni kararları da devralırsınız.

Sonuç mükemmel olabilir. Yerine geçtiği statik kurulumdan daha kötü de olabilir.

Mevcut siteniz aynı ailenin beş ağırlığını gönderiyorsa, iyi alt kümelenmiş bir değişken font istekleri azaltabilir ve CSS’i sadeleştirebilir. Siteniz bir normal ağırlık ve bir kalın ağırlık gönderiyorsa, değişken font hiçbir kullanıcının yararlanmayacağı esneklik için fazladan bayt ekleyebilir. İnsanların genellikle atladığı üretim ödünü budur.

Font yükleme stratejisi hakkında daha geniş bir temel için web fontlarının çoğu sitede hâlâ en kolay performans kazanımı olmasının nedeni hakkındaki rehberimiz yararlı bir tamamlayıcıdır. Değişken fontlar temelleri değiştirmez: daha az bayt gönderin, işleme gecikmesini azaltın ve yedek metni kabul edilebilir hâle getirin.

Açık avantaj: daha az dosya, daha ifade gücü yüksek yazı

Geleneksel bir statik font kurulumu genellikle şöyle görünür:

• Regular 400
• Italic 400
• Medium 500
• Semibold 600
• Bold 700
• Belki ayrı bir display yüzü

Her dosya ayrı ayrı indirilir, önbelleğe alınır ve işlenir. Sayfa ilk görünüm alanında birden fazla ağırlık kullanıyorsa, istekler hızla birikir.

Değişken font, bu ağırlıkların birkaçını tek dosyada birleştirebilir. Inter-Regular.woff2, Inter-Medium.woff2 ve Inter-Bold.woff2 yüklemek yerine tek bir değişken dosya yükler ve kesintisiz bir aralıkta font-weight: 400 700 kullanırsınız.

Bu gerçek faydalar sağlar:

• Yönetilecek daha az font dosyası
• Ağırlıklar arasında daha tutarlı enterpolasyon
• İnce ayarlı duyarlı tipografi
• Daha kolay tema sistemleri
• Daha iyi design token uyumu

Tasarım sistemleri için bu kontrol özellikle yararlıdır. Bir düğme etiketi 500 veya 600’e zorlanmak yerine 580 kullanabilir. Dar bir kart başlığı, font destekliyorsa biraz sıkıştırılmış bir genişlik ekseni kullanabilir. Bir display başlığı, mevcut olduğunda optik boyutlandırmadan yararlanabilir.

Ancak bu kontrollerin var olması, hepsini kullanmanız gerektiği anlamına gelmez.

İlk gizli ödün: tek dosya, gerçekten ihtiyaç duyduğunuz dosyalardan daha büyük olabilir

Değişken font, bir tasarım alanı için enterpolasyon verisi içerir. Bu tasarım alanının bir maliyeti vardır. Tek bir değişken font dosyası, bir veya iki statik font dosyasından daha büyük olabilir.

Bu, çok sayıda dosyanın yerine geçtiğinde sorun değildir. Ölçülü bir yığının yerine geçtiğinde ise sorundur.

İki yaygın durumu düşünün:

Durum A: çok sayıda ağırlık kullanan pazarlama sitesi

Site sayfalar genelinde 300, 400, 500, 600, 700 ve italik kullanır. Dikkatle alt kümelenmiş bir değişken font muhtemelen yardımcı olur. İstek yükünü azaltır ve gelecekteki bakımı sadeleştirir.

Durum B: yalnızca normal ve kalın kullanan ürün uygulaması

Arayüz 400 ve 700 kullanır; yedek olarak sistem fontları vardır. Değişken font gereksiz bayt ekleyebilir. Esneklik Figma’da hoş görünür, ancak tarayıcıda her zaman faydalı değildir.

Hata, “tek değişken dosyayı” gerçek sayfalarınızın şu anda kullandığı dosyalarla karşılaştırmak yerine “çok sayıda teorik statik dosyayla” karşılaştırmaktır.

Önemli şablonlarda yüklenen gerçek font baytlarını ölçün. Ardından değişken sürümü aynı karakter alt kümesi ve aynı preload stratejisiyle test edin. Değişken sürümün kazanacağını varsaymayın.

İkinci ödün: alt kümeleme daha az değil, daha önemli hâle gelir

Değişken fontlar alt kümelemeyi daha değerli kılar, çünkü temel dosya çok şey içerebilir: glifler, dil desteği, OpenType özellikleri, birden fazla eksen ve metadata.

Çoğu üretim sitesi bir fonttaki her glife ihtiyaç duymaz. Yalnızca İngilizce sunuyorsanız, muhtemelen tam pan-Avrupa kapsamına, Kiril, Yunanca, Vietnamca ve her sembol bloğuna ihtiyaç duymazsınız. Birden fazla dil sunuyorsanız bile tek bir evrensel dosya yerine dile özel alt kümeler isteyebilirsiniz.

Pratik yaklaşım genellikle şöyledir:

1. Çoğu kullanıcı için temel bir Latin alt kümesi tutun.
2. Genişletilmiş alt kümeleri yalnızca içeriğin ihtiyaç duyduğu yerlerde ekleyin.
3. Tarayıcının doğru dosyayı seçmesine izin vermek için unicode-range kullanın.
4. Gerekirse nadir yazı sistemleri için statik yedekler tutun.

Değişken fontlar burada biraz zorlaşabilir. Bazı font pipeline’ları statik fontları kolayca alt kümeler, ancak değişken eksenleri, hinting’i veya metadata’yı hatalı işler. Çıktı fontunun kullanmayı planladığınız eksen aralığında hâlâ doğru davrandığını her zaman doğrulayın.

Bozuk bir alt küme, büyük bir fonttan daha kötüdür. Sessizce başarısız olur: tuhaf işleme, eksik glifler, tutarsız ağırlıklar veya yalnızca belirli bir yerelde görünen yerleşim değişiklikleri.

Üçüncü ödün: CSS fazla akıllı hâle gelebilir

Değişken fontlar eksenleri CSS üzerinden açığa çıkarır. Ağırlık ve genişlik gibi standart eksenler font-weight ve font-stretch gibi özelliklere temiz biçimde eşlenir. Özel eksenler çoğu zaman font-variation-settings kullanır.

Bu güç ekipleri fazla akıllı çözümlere iter:

.card-title {
  font-variation-settings: "wght" 623, "wdth" 92;
}

Bu teknik olarak geçerli olabilir, ancak nadiren iyi bir tasarım sistemi arayüzüdür. CSS’e yayılmış rastgele eksen değerlerini incelemek zordur, refactor etmek zordur ve yanlış kullanmak kolaydır.

Design token’ları veya adlandırılmış yardımcı sınıfları tercih edin:

:root {
  --font-weight-body: 400;
  --font-weight-heading: 680;
  --font-width-compact: 94;
}

.card-title {
  font-weight: var(--font-weight-heading);
  font-stretch: var(--font-width-compact);
}

Mümkün olduğunda standart CSS özelliklerini kullanın. font-variation-settings kullanımını daha üst düzey bir özelliği olmayan eksenler için ayırın.

Animasyon konusunda da dikkatli olun. Ağırlık veya genişliği küçük dozlarda canlandırmak zevkli olabilir, ancak yeniden akışa, görsel kararsızlığa ve düşük güçlü cihazlarda gereksiz işe de neden olabilir. Font izin veriyor diye tipografi bir hareket oyun alanına dönüşmemelidir.

Dördüncü ödün: işleme farkları hâlâ vardır

Modern tarayıcılarda değişken font desteği güçlüdür, ancak işleme her yerde aynı değildir. İşletim sistemi metin rasterizer’ları, tarayıcı motorları, antialiasing ve font hinting sonuca etki eder.

Değişken fontta 500 ağırlığı, aynı ailenin statik 500 dosyasıyla tam olarak aynı görünmeyebilir. Bazı ailelerde statik instance’lar elle ince ayarlanırken, enterpole edilmiş değişken instance’lar matematiksel olarak üretilir. Küçük boyutlarda bu fark önemli olabilir.

Bu özellikle gövde metni, navigasyon, yoğun tablolar ve UI etiketleri için geçerlidir. Arayüzünüz ne kadar metin ağırlıklıysa, yalnızca hero tipografisini değil gerçek okuma koşullarını o kadar çok test etmelisiniz.

Değişken fontlara geçerken yazı sisteminizi de yeniden ele alıyorsanız, yenilikten değil okunabilirlikten başlayın. Modern web’de okunabilir yazı için pratik rehberimiz, genellikle 1.000 kullanılabilir font ağırlığına sahip olmaktan daha önemli olan gösterişsiz seçimleri—satır uzunluğu, boyut, kontrast, aralık—ele alır.

Beşinci ödün: önbellekleme iki yönlü çalışabilir

Tek bir değişken font dosyası bir kez önbelleğe alınabilir ve sayfalar arasında yeniden kullanılabilir. Bu iyidir.

Ancak dosya büyükse ve işlemeyi engelliyorsa, ilk ziyaretler tüm maliyeti peşin öder. Statik fontlar bazen daha seçici yüklenebilir: önce gövde metni için regular, sonra bold, yalnızca ihtiyaç duyan sayfalarda display.

Evrensel bir yanıt yoktur. Doğru kurulum trafik örüntülerine bağlıdır:

• Kullanıcılar oturum başına çok sayıda sayfa ziyaret ediyor mu? Paylaşılan bir değişken dosya karşılığını verebilir.
• Kullanıcılar tek bir makaleye gelip ayrılıyor mu? Daha küçük statik dosyalar daha iyi olabilir.
• Ana sayfa yalnızca bir ağırlığa mı ihtiyaç duyuyor? Gelecek sayfalar için büyük bir tasarım alanını preload etmeyin.
• Uygulama giriş arkasında mı ve sık tekrar ziyaret alıyor mu? Önbelleğin yeniden kullanımı daha değerli hâle gelir.

Preload da ölçülülük gerektirir. İlk görünüm alanındaki metin için gereken fontu preload edin, olası her fontu değil. Preload bir öncelik iddiasıdır. Çok fazla öncelik iddiası gürültüye dönüşür.

Altıncı ödün: Lighthouse hikâyenin tamamını açıklamaz

Performans araçları kullanılmayan font baytlarını, işlemeyi engelleyen istekleri, layout shift’i ve ağ maliyetini gösterebilir. Görsel esnekliğin payload’a değip değmediğini söyleyemezler.

Değişken font geçişi birkaç sinyalle değerlendirilmelidir:

• İlk görünümde aktarılan toplam font baytı
• Font isteği sayısı
• Largest Contentful Paint etkisi
• Font değişimlerinden kaynaklanan Cumulative Layout Shift
• Tekrar görüntülemede önbellek davranışı
• Onaylı tasarımlarla görsel eşleşme
• Yaygın boyutlarda okunabilirlik

Bir font geçişinden sonra rapor kırmızıya dönerse panik yapmayın. Sorun değişken fontun kendisinden ziyade preload sırası, yedek metrikler veya alt küme uyumsuzluğu olabilir. Panik yapmadan Lighthouse raporu okuma rehberimiz burada ilgilidir: laboratuvar skorlarını hüküm değil, tanısal ipuçları olarak ele alın.

Pratik bir üretim kontrol listesi

Değişken fontu yayına almadan önce şu soruları yanıtlayın:

1. Hangi statik dosyaların yerine geçiyor?

Tasarım sisteminin teorik olarak neyi desteklediğini değil, üretimde kullanılan gerçek dosyaları listeleyin. Ağırlıkları, stilleri, karakter setlerini ve sayfa şablonlarını dahil edin.

2. Hangi eksenleri açığa çıkaracaksınız?

Çoğu ekip ağırlığı, belki genişliği ve nadiren daha fazlasını açığa çıkarmalıdır. Font iyi destekliyorsa optik boyut yararlı olabilir, ancak test edin. Özel eksenlerin net bir ürün amacı olmalıdır.

3. Güvenli biçimde alt kümeleyebiliyor musunuz?

Alt kümelemeden sonra görsel regresyon kontrolleri çalıştırın. Aksanlı karakterleri, noktalama işaretlerini, para birimi sembollerini, dahilse ikonları ve desteklenen tüm dilleri test edin.

4. Yedek metrikler yapılandırıldı mı?

Uygun olduğunda size-adjust, ascent-override, descent-override ve line-gap-override gibi modern CSS araçlarını kullanın. İyi yedek metrikler font yükleme sırasında layout shift’i azaltır.

5. font-display bilinçli mi seçildi?

font-display: swap yaygındır, ancak her zaman kusursuz değildir. Metin görünürlüğünü iyileştirir, fakat yedek metrikler zayıfsa belirgin bir değişim yaratabilir. optional, kesintiyi önlemenin garanti marka tipografisinden daha önemli olduğu kritik olmayan fontlarda işe yarayabilir.

6. Düşük seviye cihazlarda test ettiniz mi?

Bir geliştirici dizüstü bilgisayarında iyi hissettiren bir font, ekonomik Android donanımında yavaş işlenebilir. En az bir düşük güçlü cihazda veya kısıtlanmış profilde test edin.

7. Geri dönüş planı var mı?

Font değişiklikleri her sayfayı etkiler. İşleme, yerelleştirme veya performans sorunları ortaya çıkarsa hızla geri dönebilmek için eski statik kurulumu yeterince uzun süre erişilebilir tutun.

Değişken fontlar ne zaman iyi bir üretim tercihidir?

Değişken fontlar genellikle şu durumlarda değerlendirmeye değerdir:

• Aynı aileden üç veya daha fazla ağırlık kullanıyorsanız.
• Çok sayıda şablonda bir tasarım sistemi sürdürüyor olmanız gerekiyorsa.
• Genişlik veya optik boyut kontrolüyle duyarlı tipografiye ihtiyaç duyuyorsanız.
• Kullanıcılar oturum başına yaygın olarak birden fazla sayfa geziyorsa.
• Font pipeline’ını doğru biçimde alt kümeleyip test edebiliyorsanız.

Şu durumlarda daha az ikna edicidir:

• Yalnızca regular ve bold’a ihtiyaç duyuyorsanız.
• Değişken dosya mevcut kurulumunuzdan çok daha büyükse.
• Fontun metin boyutlarında enterpolasyonu zayıfsa.
• Ekibiniz CSS’e gelişigüzel eksen değerleri serpiştirecekse.
• Yerelleştirme ve yedek davranışını test edemiyorsanız.

Sakin bakış şudur: değişken fontlar varsayılan olarak bir optimizasyon değil, bir yetenektir. Fontları zaten dikkatle yöneten ekipleri ödüllendirir. Tipografiyi dekorasyon, font yüklemeyi de sonradan düşünülecek bir konu olarak gören ekipleri cezalandırır.

<!-- tool-cta:start -->

💡 Bunu deneyin: Üretim için değişken bir fontu alt kümelere ayırıp paketlerken, Webfont Generator eşleşen CSS ile WOFF2 çıktısı üretir.

<!-- tool-cta:end -->

Üretim için temel kural

Değişken fontları karmaşıklığı azalttıklarında veya net bir tasarım sonucunu mümkün kıldıklarında kullanın. “Tek dosya” daha temiz geliyor diye kullanmayın.

En iyi üretim uygulamaları genellikle sıkıcıdır: dikkatle alt kümelenmiş tek bir değişken font, az sayıda onaylı eksen değeri, makul yedekler, ölçülü preload ve gerçek cihaz testleri. Bu, sonsuz tipografik olasılık kadar heyecan verici değildir. Sitenizi daha iyi hâle getirme olasılığı ise çok daha yüksektir.