Web yazı tipi boyutunu küçült

Ilya Grigorik

Jeremy Wagner

Tipografi; iyi tasarım, markalama, okunabilirlik ve erişilebilirlik için temeldir. Web yazı tipleri yukarıdakilerin tümünü ve daha fazlasını sağlar: Metin seçilebilir, aranabilir, yakınlaştırılabilir ve yüksek DPI ile uyumludur. Bu sayede, ekran boyutu ve çözünürlüğünden bağımsız olarak tutarlı ve net metin oluşturma olanağı sunar. Web yazı tipleri; iyi tasarım, kullanıcı deneyimi ve performans açısından kritik öneme sahiptir.

Web yazı tipi optimizasyonu, genel performans stratejisinin önemli bir parçasıdır. Her yazı tipi ek bir kaynaktır ve bazı yazı tipleri metnin oluşturulmasını engelleyebilir. Ancak sayfa WebFonts kullanıyor diye daha yavaş oluşturulması gerekmez. Aksine, optimize edilmiş yazı tipleri, sayfada nasıl yüklendikleri ve uygulandıklarıyla ilgili akıllıca bir stratejiyle birleştirildiğinde sayfanın toplam boyutunu azaltmaya ve sayfa oluşturma sürelerini iyileştirmeye yardımcı olabilir.

Web yazı tipinin anatomisi

Web yazı tipi, gliflerden oluşan bir koleksiyondur ve her glif, bir harfi veya sembolü tanımlayan bir vektör şeklidir. Sonuç olarak, belirli bir yazı tipi dosyasının boyutunu iki basit değişken belirler: her glifin vektör yollarının karmaşıklığı ve belirli bir yazı tipindeki glif sayısı. Örneğin, en popüler web yazı tiplerinden biri olan Open Sans, Latin, Yunan ve Kiril karakterlerini içeren 897 glif içerir.

Yazı tipi seçerken hangi karakter kümelerinin desteklendiğini göz önünde bulundurmanız önemlidir. Sayfa içeriğinizi birden fazla dile yerelleştirmeniz gerekiyorsa kullanıcılarınıza tutarlı bir görünüm ve deneyim sunabilen bir yazı tipi kullanmalısınız. Örneğin, Google'ın Noto yazı tipi ailesi, dünyadaki tüm dilleri desteklemeyi amaçlar. Ancak tüm dillerin dahil olduğu Noto'nun toplam boyutunun 1,1 GB'tan fazla olduğunu ve ZIP dosyası olarak indirildiğini unutmayın.

Bu yayında, web yazı tiplerinizin teslim edilen dosya boyutunu nasıl küçülteceğinizi öğreneceksiniz.

Web yazı tipi biçimleri

Web'de şu anda iki önerilen yazı tipi kapsayıcı biçimi kullanılmaktadır:

• EOT
• TTF
• WOFF
• WOFF2.

WOFF ve WOFF 2.0 geniş çapta desteklenir ve tüm modern tarayıcılar tarafından desteklenir.

• Modern tarayıcılara WOFF 2.0 varyantını sunun.
• Kesinlikle gerekliyse (örneğin, Internet Explorer 11'i desteklemeye devam etmeniz gerekiyorsa) WOFF'u yedek olarak sunun.
• Alternatif olarak, eski tarayıcılar için web yazı tiplerini kullanmamayı ve sistem yazı tiplerine geri dönmeyi düşünebilirsiniz. Bu yöntem, daha eski ve sınırlı cihazlarda da daha iyi performans gösterebilir.
• WOFF ve WOFF 2.0, modern ve hâlâ kullanımda olan eski tarayıcıların tüm ihtiyaçlarını karşıladığından EOT ve TTF kullanmak artık gerekli değildir ve web yazı tipi indirme sürelerinin uzamasına neden olabilir.

Web yazı tipleri ve sıkıştırma

Hem WOFF hem de WOFF 2.0'da yerleşik sıkıştırma bulunur. WOFF 2.0'ın dahili sıkıştırması Brotli'yi kullanır ve WOFF'a kıyasla% 30'a kadar daha iyi sıkıştırma sunar. Daha fazla bilgi için WOFF 2.0 değerlendirme raporuna bakın.

Son olarak, bazı yazı tipi biçimlerinin, bazı platformlarda gerekmeyebilecek ek meta veriler (ör. yazı tipi ipucu ve karakter aralığı bilgileri) içerdiğini ve bu sayede dosya boyutunun daha da optimize edilebileceğini belirtmek isteriz. Örneğin, Google Fonts, her yazı tipi için 30'dan fazla optimize edilmiş varyantı korur ve her platform ile tarayıcı için optimum varyantı otomatik olarak algılayıp sunar.

@font-face ile yazı tipi ailesi tanımlama

@font-face CSS at-rule, belirli bir yazı tipi kaynağının konumunu, stil özelliklerini ve hangi Unicode kod noktaları için kullanılması gerektiğini tanımlamanıza olanak tanır. Bu tür @font-face bildirimlerinin bir kombinasyonu, tarayıcının hangi yazı tipi kaynaklarının indirilmesi ve geçerli sayfaya uygulanması gerektiğini değerlendirmek için kullanacağı bir "yazı tipi ailesi" oluşturmak üzere kullanılabilir.

Değişken yazı tipini kullanma

Bir yazı tipinin birden fazla varyantına ihtiyacınız olduğunda değişken yazı tipleri, yazı tiplerinizin dosya boyutunu önemli ölçüde küçültebilir. Normal ve kalın stilleri ile bunların italik sürümlerini yüklemeniz gerekmez. Bunun yerine, tüm bilgileri içeren tek bir dosya yükleyebilirsiniz. Ancak değişken yazı tipi dosya boyutları, tek bir yazı tipi varyantından daha büyük, birçok varyantın birleşiminden ise daha küçüktür. Tek bir büyük değişken yazı tipi yerine, kritik yazı tipi varyantlarını önce sunmak, diğer varyantları ise daha sonra indirmek daha iyi olabilir.

Değişken yazı tipleri artık tüm modern tarayıcılarda destekleniyor. Daha fazla bilgiyi Web'de değişken yazı tiplerine giriş başlıklı makalede bulabilirsiniz.

Doğru biçimi seçme

Her @font-face bildirimi, yazı tipi ailesinin adını (birden fazla bildirimin mantıksal grubu olarak işlev görür), stil, ağırlık ve genişletme gibi yazı tipi özelliklerini ve yazı tipi kaynağının konumlarının öncelikli listesini belirten src tanımlayıcısını sağlar.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

Öncelikle, yukarıdaki örneklerin her biri farklı bir yazı tipi kaynağı grubuna işaret eden iki stile (normal ve italik) sahip tek bir Awesome Font ailesi tanımladığını unutmayın. Buna karşılık, her src tanımlayıcısı, önceliklendirilmiş ve virgülle ayrılmış bir kaynak varyantları listesi içerir:

• local() yönergesi, yerel olarak yüklenen yazı tiplerine referans vermenize, bunları yüklemenize ve kullanmanıza olanak tanır. Kullanıcının sisteminde yazı tipi zaten yüklüyse ağ tamamen atlanır ve bu yöntem en hızlısıdır.
• url() yönergesi, harici yazı tiplerini yüklemenize olanak tanır ve sağlanan URL tarafından referans verilen yazı tipinin biçimini belirten isteğe bağlı bir format() ipucu içerebilir.

Tarayıcı, yazı tipinin gerekli olduğunu belirlediğinde belirtilen sırayla sağlanan kaynak listesinde yinelenir ve uygun kaynağı yüklemeye çalışır. Örneğin, yukarıdaki örneğe göre:

1. Tarayıcı, sayfa düzenini gerçekleştirir ve sayfada belirtilen metnin oluşturulması için hangi yazı tipi varyantlarının gerekli olduğunu belirler. Sayfanın CSS Nesne Modeli (CSSOM)'nin parçası olmayan yazı tipleri, gerekli olmadıkları için tarayıcı tarafından indirilmez.
2. Tarayıcı, gerekli her yazı tipi için yazı tipinin yerel olarak kullanılabilir olup olmadığını kontrol eder.
3. Yazı tipi yerel olarak kullanılamıyorsa tarayıcı, harici tanımlamaları yineler:
   • Biçim ipucu varsa tarayıcı, indirme işlemini başlatmadan önce ipucunu destekleyip desteklemediğini kontrol eder. Tarayıcı ipucunu desteklemiyorsa bir sonraki ipucuna geçer.
   • Biçim ipucu yoksa tarayıcı kaynağı indirir.

Yerel ve harici yönergelerin uygun biçim ipuçlarıyla birlikte kullanılması, mevcut tüm yazı tipi biçimlerini belirtmenize ve gerisini tarayıcının halletmesine olanak tanır. Tarayıcı, hangi kaynakların gerekli olduğunu belirler ve en uygun biçimi seçer.

Unicode-range alt kümesi oluşturma

@font-face kuralı, stil, ağırlık ve genişletme gibi yazı tipi özelliklerinin yanı sıra her kaynak tarafından desteklenen bir Unicode kod noktası grubu tanımlamanıza da olanak tanır. Bu özellik, büyük bir Unicode yazı tipini daha küçük alt kümeler (ör. Latin, Kiril ve Yunan alt kümeleri) halinde bölmenize ve yalnızca belirli bir sayfadaki metni oluşturmak için gereken glifleri indirmenize olanak tanır.

unicode-range tanımlayıcısı, her biri üç farklı biçimde olabilen, virgülle ayrılmış bir aralık değerleri listesi belirtmenize olanak tanır:

• Tek kod noktası (örneğin, U+416)
• Aralık aralığı (örneğin, U+400-4ff): Bir aralığın başlangıç ve bitiş kod noktalarını gösterir.
• Joker karakter aralığı (örneğin, U+4??): ? karakterleri herhangi bir onaltılık rakamı belirtir.

Örneğin, Awesome Font yazı tipi ailenizi Latin ve Japonca alt kümelerine ayırabilirsiniz. Tarayıcı, bu alt kümelerin her birini gerektiğinde indirir:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

Unicode aralığı alt kümelerinin ve yazı tipinin her stilistik varyantı için ayrı dosyaların kullanılması, hem daha hızlı hem de daha verimli indirilebilen birleşik bir yazı tipi ailesi tanımlamanıza olanak tanır. Ziyaretçiler yalnızca ihtiyaç duydukları varyantları ve alt kümeleri indirir. Sayfada hiçbir zaman görmeyecekleri veya kullanmayacakları alt kümeleri indirmeye zorlanmazlar.

Neredeyse tüm tarayıcılar unicode-range'ı destekler. Eski tarayıcılarla uyumluluk için "manuel alt kümeleme"ye geri dönmeniz gerekebilir. Bu durumda, gerekli tüm alt kümeleri içeren tek bir yazı tipi kaynağı sağlamanız ve geri kalanını tarayıcıdan gizlemeniz gerekir. Örneğin, sayfada yalnızca Latin karakterleri kullanılıyorsa diğer glifleri kaldırabilir ve bu belirli alt grubu bağımsız bir kaynak olarak sunabilirsiniz.

1. Hangi alt kümelerin gerekli olduğunu belirleyin:
   • Tarayıcı, unicode-range alt kümelemeyi destekliyorsa doğru alt kümeyi otomatik olarak seçer. Sayfanın yalnızca alt küme dosyalarını sağlaması ve @font-face kurallarında uygun unicode aralıklarını belirtmesi gerekir.
   • Tarayıcı, unicode-range alt kümelemeyi desteklemiyorsa sayfanın tüm gereksiz alt kümeleri gizlemesi gerekir. Yani geliştirici, gerekli alt kümeleri belirtmelidir.
2. Yazı tipi alt kümeleri oluşturma:
   • Yazı tiplerinizi alt kümeye ayırmak ve optimize etmek için açık kaynaklı pyftsubset aracını kullanın.
   • Google Font gibi bazı yazı tipi sunucuları varsayılan olarak otomatik alt küme oluşturur.
   • Bazı yazı tipi hizmetleri, özel sorgu parametreleri aracılığıyla manuel alt küme oluşturmaya izin verir. Bu parametreleri, sayfanız için gerekli alt kümeyi manuel olarak belirtmek üzere kullanabilirsiniz. Yazı tipi sağlayıcınızın belgelerine bakın.

Yazı tipi seçimi ve sentezi

Her yazı tipi ailesi, birden fazla stilistik varyanttan (normal, kalın, italik) ve her stil için birden fazla ağırlıktan oluşabilir. Bunların her biri de çok farklı glif şekilleri (ör. farklı aralık, boyut veya tamamen farklı bir şekil) içerebilir.

Yukarıdaki şemada, üç farklı kalınlık seçeneği sunan bir yazı tipi ailesi gösterilmektedir:

• 400 (normal).
• 700 (kalın).
• 900 (çok kalın).

Diğer tüm ara varyantlar (gri renkte gösterilir) tarayıcı tarafından otomatik olarak en yakın varyantla eşlenir.

Yüzü olmayan bir ağırlık belirtildiğinde, yakındaki bir ağırlığa sahip yüz kullanılır. Genel olarak, kalın ağırlıklar daha ağır ağırlıklı yüzlerle, ince ağırlıklar ise daha hafif ağırlıklı yüzlerle eşleşir.

CSS yazı tipi eşleştirme algoritması

Benzer mantık, italik varyantlar için de geçerlidir. Yazı tipi tasarımcısı, hangi varyantları üreteceğini kontrol eder. Siz de sayfada hangi varyantları kullanacağınızı kontrol edersiniz. Her varyant ayrı bir indirme işlemi olduğundan varyant sayısını az tutmanız önerilir. Örneğin, Awesome Font ailesi için iki kalın varyant tanımlayabilirsiniz:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

Yukarıdaki örnekte, aynı Latin glifleri grubunu (U+000-5FF) kapsayan ancak iki farklı "ağırlık" sunan iki kaynaktan oluşan Awesome Font ailesi tanımlanmaktadır: normal (400) ve kalın (700). Ancak CSS kurallarınızdan biri farklı bir yazı tipi ağırlığı belirtirse veya font-style özelliğini italic olarak ayarlarsa ne olur?

• Tam olarak eşleşen bir yazı tipi yoksa tarayıcı en yakın eşleşeni kullanır.
• Stilistik eşleşme bulunmazsa (örneğin, yukarıdaki örnekte italik varyantlar bildirilmemişse) tarayıcı kendi yazı tipi varyantını sentezler.

Yukarıdaki örnekte, Open Sans için gerçek ve sentezlenmiş yazı tipi sonuçları arasındaki fark gösterilmektedir. Sentezlenen tüm varyantlar, tek bir 400 ağırlıklı yazı tipinden oluşturulur. Gördüğünüz gibi, sonuçlar arasında belirgin bir fark var. Kalın ve eğik varyantların nasıl oluşturulacağıyla ilgili ayrıntılar belirtilmemiştir. Bu nedenle, sonuçlar tarayıcıdan tarayıcıya değişir ve yazı tipine büyük ölçüde bağlıdır.

Web yazı tipi boyutu optimizasyonu yapılacaklar listesi

• Yazı tipi kullanımınızı denetleyin ve izleyin: Sayfalarınızda çok fazla yazı tipi kullanmayın ve her yazı tipi için kullanılan varyant sayısını en aza indirin. Bu sayede kullanıcılarınız daha tutarlı ve hızlı bir deneyim yaşar.
• Mümkünse eski biçimleri kullanmayın: EOT, TTF ve WOFF biçimleri WOFF 2.0'dan daha büyüktür. EOT ve TTF kesinlikle gereksiz biçimlerdir. WOFF ise Internet Explorer 11'i desteklemeniz gerekiyorsa kabul edilebilir. Yalnızca modern tarayıcıları hedefliyorsanız yalnızca WOFF 2.0 kullanmak en basit ve en iyi performanslı seçenektir.
• Yazı tipi kaynaklarınızın alt kümesini oluşturun: Birçok yazı tipi, yalnızca belirli bir sayfanın gerektirdiği glifleri sunmak için alt kümelere ayrılabilir veya birden fazla Unicode aralığına bölünebilir. Bu, dosya boyutunu küçültür ve kaynağın indirme hızını artırır. Ancak alt kümeleri tanımlarken yazı tipinin yeniden kullanılması için optimizasyon yapmaya dikkat edin. Örneğin, her sayfada farklı ancak çakışan bir karakter grubu indirmeyin. İyi bir uygulama, komut dosyasına göre alt küme oluşturmaktır. Örneğin, Latin ve Kiril.
• src listenizde local() öğesine öncelik verin: src listenizde local('Font Name') öğesini ilk olarak listelemek, zaten yüklenmiş olan yazı tipleri için HTTP isteklerinin yapılmamasını sağlar.
• Lighthouse'u kullanarak metin sıkıştırması olup olmadığını test edin.

Largest Contentful Paint (LCP) ve Cumulative Layout Shift (CLS) üzerindeki etkiler

Sayfanızın içeriğine bağlı olarak, metin düğümleri Largest Contentful Paint (LCP) için aday olarak kabul edilebilir. Bu nedenle, kullanıcılarınızın sayfanızdaki metni mümkün olan en kısa sürede görmesi için bu makaledeki tavsiyelere uyarak web yazı tiplerinizin mümkün olduğunca küçük olmasını sağlamanız çok önemlidir.

Optimizasyon çalışmalarınıza rağmen büyük web yazı tipi kaynağı nedeniyle sayfa metninin görünmesinin çok uzun sürebileceğinden endişeleniyorsanız font-display özelliğinde, yazı tipi indirilirken görünmez metinlerden kaçınmanıza yardımcı olabilecek çeşitli ayarlar bulunur. Ancak swap değerini kullanmak, sitenizin Cumulative Layout Shift (CLS) değerini etkileyen önemli düzen kaymalarına neden olabilir. Mümkünse optional veya fallback değerlerini kullanabilirsiniz.

Web yazı tipleriniz markanız ve dolayısıyla kullanıcı deneyimi için çok önemliyse tarayıcının yazı tiplerini istemeye önceden başlaması için yazı tiplerinizi önceden yükleyebilirsiniz. Bu, font-display: swap kullanıyorsanız takas süresini, font-display kullanmıyorsanız engelleme süresini kısaltabilir.