Web yazı tipi boyutunu küçült

Ilya Grigorik

Jeremy Wagner

Tasarım, markalama, okunabilirlik ve erişilebilirliğin en önemli unsuru yazı tipidir. Web yazı tipleri yukarıdakilerin hepsini ve daha fazlasını sağlar: Metin seçilebilir, aranabilir, yakınlaştırılabilir ve yüksek DPI uyumludur. Böylece ekran boyutu ve çözünürlüğünden bağımsız olarak metinler tutarlı ve net bir şekilde oluşturulur. WebFonts; iyi tasarım, kullanıcı deneyimi ve performans için çok önemlidir.

Web yazı tipi optimizasyonu, genel performans stratejisinin kritik bir parçasıdır. Her yazı tipi ek bir kaynaktır ve bazı yazı tipleri, metnin oluşturulmasını engelleyebilir. Ancak sayfanın WebFonts kullanması, daha yavaş oluşturulması gerektiği anlamına gelmez. Aksine, yazı tiplerinin yüklenmesi ve sayfada uygulanması için mantıklı bir stratejiyle birlikte optimize edilmiş yazı tipleri, toplam sayfa boyutunu küçültmeye ve sayfa oluşturma sürelerini iyileştirmeye yardımcı olabilir.

Bir web yazı tipinin anatomisi

Web yazı tipi bir glif koleksiyonudur ve her glif bir harfi veya sembolü açıklayan bir vektör şeklidir. Sonuç olarak, belirli bir yazı tipi dosyasının boyutunu belirleyen iki basit değişken vardır: her bir glifin vektör yollarının karmaşıklığı ve belirli bir yazı tipindeki glif sayısı. Örneğin, en popüler WebFonts metinlerinden biri olan Open Sans, Latin, Yunan ve Kiril karakterlerinin de içinde bulunduğu 897 glif içerir.

Yazı tipi seçerken hangi karakter kümelerinin desteklendiğini göz önünde bulundurmak önemlidir. Sayfa içeriğinizi birden fazla dile çevirmeniz gerekiyorsa kullanıcılarınıza tutarlı bir görünüm ve deneyim sunabilecek bir yazı tipi kullanmalısınız. Örneğin, Google'ın Noto yazı tipi ailesi dünyadaki tüm dilleri desteklemeyi amaçlamaktadır. Bununla birlikte, tüm diller dahil Noto'nun toplam boyutunun 1,1 GB'ın üzerinde ZIP indirmesiyle sonuçlandığını unutmayın.

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

Web yazı tipi biçimleri

Bugün web'de kullanılmak üzere önerilen iki yazı tipi kapsayıcısı biçimi bulunmaktadır:

• UD
• TTF
• DEVRE DIŞI
• WOFF2:

WOFF ve WOFF 2.0, geniş kapsamlı bir desteğe sahiptir ve tüm modern tarayıcılar tarafından desteklenir.

• Modern tarayıcılara WOFF 2.0 varyantı sunun.
• Kesinlikle gerekliyse (örneğin, hâlâ Internet Explorer 11'i desteklemeniz gerekiyorsa) WOFF hizmetini yedek olarak sunun.
• Alternatif olarak, eski tarayıcılar için web yazı tiplerini kullanmamayı ve sistem yazı tiplerine geri dönmeyi düşünün. Bu da eski ve daha kısıtlı cihazlarda daha iyi performans gösterebilir.
• WOFF ve WOFF 2.0, halen kullanılmakta olan modern ve eski tarayıcılar için tüm temelleri kapsadığından, EOT ve TTF kullanımı 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 bir sıkıştırma özelliği vardır. WOFF 2.0'ın dahili sıkıştırması Brotli'yi kullanır ve WOFF'dan% 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 gerekli olmayabilecek yazı tipi ipucu ve aralık bilgileri gibi ek meta veriler içerdiğini de belirtmek isteriz. Bu durum, dosya boyutu optimizasyonuna olanak tanır. Örneğin Google Fonts, her yazı tipi için 30'dan fazla optimize edilmiş varyant sağlar ve her platform ile tarayıcı için en uygun varyantı otomatik olarak tespit edip sunar.

@font-face ile yazı tipi ailesi tanımlayın

@font-face CSS kuyruklu a kuralı, belirli bir yazı tipi kaynağının konumunu, stil özelliklerini ve kullanılması gereken Unicode kod noktalarını tanımlamanıza olanak tanır. 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 için bu tür @font-face bildirimlerinin bir kombinasyonu kullanılabilir.

Değişken bir yazı tipi kullanma

Değişken yazı tipleri, birden fazla yazı tipi varyantına ihtiyaç duyduğunuz durumlarda yazı tiplerinizin dosya boyutunu önemli ölçüde küçültebilir. Normal ve kalın stillerin yanı sıra bunların italik sürümlerini yüklemek 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 olur (ancak birçok varyantın kombinasyonundan daha küçüktür). Değişken tek bir büyük yazı tipi yerine, önemli yazı tipi varyantlarının önce, diğer varyantların ise daha sonra indirilmesi daha iyi olabilir.

Değişken yazı tipleri artık tüm modern tarayıcılar tarafından desteklenmektedir. Daha fazla bilgiyi Web'deki değişken yazı tiplerine giriş bölümünde bulabilirsiniz.

Doğru biçimi seçin

Her @font-face bildirimi, yazı tipi ailesinin adını sağlar. Bu ad, birden çok bildirimden oluşan mantıksal bir grup görevi görür. Yazı tipi ailesi adı, stil, ağırlık ve stretch gibi yazı tipi özellikleri ve yazı tipi kaynağı için önceliklendirilmiş bir konum listesi belirten src açıklayıcıdır.

@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 kaynakları grubunu işaret eden iki stile (normal ve italik) sahip tek bir Harika Yazı Tipi ailesi tanımladığını unutmayın. Buna karşılık, her src açıklayıcısı kaynak varyantlarının önceliklendirilmiş, virgülle ayrılmış bir listesini içerir:

• local() yönergesi, yerel olarak yüklü yazı tiplerine başvurmanıza, bunları yüklemenize ve kullanmanıza olanak tanır. Kullanıcının sisteminde yazı tipi zaten yüklüyse, bu işlem ağı tamamen atlar ve en hızlı yöntemdir.
• url() yönergesi, harici yazı tiplerini yüklemenize olanak tanır ve sağlanan URL'nin başvuruda bulunduğu yazı tipinin biçimini belirten isteğe bağlı bir format() ipucunu içerebilir.

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

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'ne (CSSOM) dahil olmayan yazı tipleri, gerekli olmadığından tarayıcı tarafından indirilmez.
2. Gerekli her yazı tipi için tarayıcı, yazı tipinin yerel olarak kullanılabilir olup olmadığını kontrol eder.
3. Yazı tipi yerel olarak kullanılamıyorsa tarayıcı, harici tanımlar üzerinde iterasyon yapar:
   • Biçim ipucu varsa, tarayıcı indirme işlemini başlatmadan önce ipucunu destekleyip desteklemediğini kontrol eder. Tarayıcı ipucunu desteklemiyorsa bir sonrakine geçer.
   • Biçim ipucu yoksa tarayıcı kaynağı indirir.

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

Unicode aralığı alt ayarı

Stil, ağırlık ve esneme gibi yazı tipi özelliklerine ek olarak, @font-face kuralı her kaynak tarafından desteklenen bir dizi Unicode kod noktası tanımlamanıza olanak tanır. Böylece, büyük bir Unicode yazı tipini daha küçük alt kümelere (ör. Latin, Kiril ve Yunanca alt kümeleri) bölebilir ve yalnızca metni belirli bir sayfadaki metni oluşturmak için gereken karakterleri indirebilirsiniz.

unicode-range açıklayıcısı, aralık değerlerinin virgülle ayrılmış bir listesini belirtmenize olanak tanır. Her değer, üç farklı biçimde olabilir:

• 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??): ? karakter, herhangi bir onaltılık rakamı belirtir

Örneğin, Harika Yazı Tipi ailenizi, tarayıcı gerektiği şekilde indiren Latin ve Japonca alt kümelerine bölebilirsiniz:

@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ık alt kümelerinin ve yazı tipinin her biçimsel varyantı için ayrı dosyaların kullanılması, hem daha hızlı hem de daha verimli bir şekilde 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 kullanmayabilecekleri alt kümeleri de indirmek zorunda kalmazlar.

Neredeyse tüm tarayıcılar unicode-range dilini destekler. Eski tarayıcılarla uyumluluk için "manuel alt ayar"a geri dönmeniz gerekebilir. Bu durumda, gerekli tüm alt kümeleri içeren tek bir yazı tipi kaynağı sağlamaya geri dönmeniz ve geri kalanları tarayıcıda gizlemeniz gerekir. Örneğin, sayfada yalnızca Latin alfabesi karakterleri kullanılıyorsa diğer karakterleri çıkarabilir ve söz konusu alt kümeyi bağımsız bir kaynak olarak sunabilirsiniz.

1. Hangi alt kümelerin gerekli olduğunu belirleyin:
   • Tarayıcı, Unicode aralığı alt ayarlarını 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 aralığı alt ayarlarını desteklemiyorsa sayfanın gereksiz tüm alt kümeleri gizlemesi, yani geliştiricinin gerekli alt kümeleri belirtmesi gerekir.
2. Yazı tipi alt kümeleri oluşturun:
   • Yazı tiplerinizi alt gruplara 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 bir şekilde alt kümelere ayrılır.
   • Bazı yazı tipi hizmetleri, sayfanız için gerekli alt kümeyi manuel olarak belirtmek üzere kullanabileceğiniz özel sorgu parametreleri aracılığıyla manuel alt ayarlamaya izin verir. Yazı tipi sağlayıcınızın dokümanlarına bakın.

Yazı tipi seçimi ve sentez

Her yazı tipi ailesi, birden fazla stil varyantı (normal, kalın, italik) ve her stil için birden fazla ağırlık içerebilir. Bu değerlerin her biri de çok farklı glif şekilleri (örneğin, farklı boşluk, boyut veya tamamen farklı bir şekil) içerebilir.

Yukarıdaki şemada, üç farklı kalın yazı tipi ağırlığı sunan bir yazı tipi ailesi gösterilmektedir:

• 400 (normal).
• 700 (kalın).
• 900 (ekstra kalın).

Aradaki diğer tüm varyantlar (gri renkle belirtilmiştir), tarayıcı tarafından otomatik olarak en yakın varyasyonla eşlenir.

Yüz içermeyen bir ağırlık belirtildiğinde, yakın ağırlığı olan bir yüz kullanılır. Genel olarak, kalın yazı tipindeki ağırlıklar, daha ağır ve hafif yüzler ile daha hafif yüzler eşleştirilir.

CSS yazı tipi eşleştirme algoritması

Benzer bir mantık, italik varyantlar için geçerlidir. Yazı tipi tasarımcısı, hangi varyantları oluşturacağını, sayfada hangi varyantları kullanacağınızı siz kontrol edersiniz. Her varyant ayrı bir indirme olduğundan, varyant sayısını az tutmak iyi bir fikirdir. Örneğin, Harika Yazı Tipi ailesi için iki kalın yazı tipi 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 glif grubunu (U+000-5FF) kapsayan iki kaynaktan oluşan, ancak normal (400) ve kalın (700) olmak üzere iki farklı "ağırlık" sunan iki kaynaktan oluşan Harika Yazı Tipi ailesi tanımlanmaktadır. Ancak, CSS kurallarınızdan biri farklı bir yazı tipi ağırlığı belirtirse veya font-style özelliğini italic olarak ayarlarsa ne olur?

• Tam yazı tipi eşleşmesi yoksa, tarayıcı en yakın eşleşmeyi değiştirir.
• Biçimle ilgili bir eşleşme bulunmazsa (örneğin, yukarıdaki örnekte italik varyant 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 400 ağırlıklı tek bir yazı tipinden oluşturulur. Gördüğünüz gibi, sonuçlarda belirgin bir fark var. Kalın ve eğik varyantların nasıl oluşturulacağıyla ilgili ayrıntılar belirtilmemiş. 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 kontrol listesi

• Yazı tipi kullanımınızı denetleyip izleyin: Sayfalarınızda çok fazla yazı tipi kullanmayın. Her yazı tipinde, kullanılan varyantların sayısını en aza indirin. Bu sayede kullanıcılarınıza daha tutarlı ve daha hızlı bir deneyim sunulur.
• Mümkünse eski biçimlerden kaçının: EOT, TTF ve WOFF biçimleri WOFF 2.0'dan daha büyüktür. EOT ve TTF kesinlikle gereksiz biçimlerdir, çünkü Internet Explorer 11'i desteklemeniz gerekiyorsa WOFF kabul edilebilir. Yalnızca modern tarayıcıları hedefliyorsanız yalnızca WOFF 2.0'ı kullanmak en basit ve en yüksek performanslı seçenektir.
• Yazı tipi kaynaklarınızı alt gruplara taşıyın: Birçok yazı tipini alt gruplara taşıyabilir, birden fazla unicode aralığına ayırabilirsiniz. Böylece belirli bir sayfada yalnızca gerekli karakterleri sunabilirsiniz. Bu işlem, dosya boyutunu küçültür ve kaynağın indirme hızını iyileştirir. Ancak alt kümeleri tanımlarken, yazı tiplerinin yeniden kullanımını optimize etmeye dikkat edin. Örneğin, her sayfada farklı ancak çakışan bir karakter grubu indirmeyin. Alfabeye göre (ör. Latin ve Kiril) alt gruplara ayırmak iyi bir uygulamadır.
• src listenizde local() öğesine öncelik verin: src listenizde ilk olarak local('Font Name') öğesini listelemeniz, halihazırda yüklü olan yazı tipleri için HTTP isteklerinin yapılmamasını sağlar.
• Metin sıkıştırmayı test etmek için Lighthouse'u kullanın.

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örebilmesi için bu makaledeki öneriye uyarak web yazı tiplerinizin mümkün olduğunca küçük olmasını sağlamak çok önemlidir.

Optimizasyon çabalarınıza rağmen sayfa metninin büyük web yazı tipi kaynağı nedeniyle çok uzun süre görüntülenmesini istemiyorsanız font-display özelliğinde, bir yazı tipi indirilirken görünmez metinlerden kaçınmanıza yardımcı olabilecek çeşitli ayarlar bulunur. Bununla birlikte, swap değerinin kullanılması, sitenizin Cumulative Layout Shift (CLS) değerini etkileyen önemli düzen kaymalarına neden olabilir. Mümkünse optional veya fallback değerlerini kullanın.

Web yazı tipleriniz marka bilinci oluşturma ve dolayısıyla kullanıcı deneyimi açısından çok önemliyse tarayıcının istek göndermeye başlaması için yazı tiplerinizi önceden yüklemeyi düşünün. Bu, font-display: swap kullanıyorsanız değişim süresini veya font-display kullanmıyorsanız engelleme süresini kısaltabilir.