Görsel Olarak Kararlı Yedek Yazı Tipleri

Web yazı tipleri yüklendiğinde, her ikisi de aynı font-size değerine ayarlanmış olsa bile genellikle farklı boyutlara sahip bir yedek yazı tipinin yerini alır. Bu durum, "düzen kaymasına" (Cumulative Layout Shift) neden olur ve yedeğin küçük harfleri (x yüksekliği) tercih edilen yazı tipinden önemli ölçüde farklıysa metnin okunamaz hale gelmesine yol açabilir.

font-size-adjust özelliği, yazı tipi boyutunu belirli bir metriğe (genellikle x yüksekliği) göre normalleştirerek bu sorunu çözer ve o anda hangi yazı tipinin etkin olduğuna bakılmaksızın metnin aynı görsel alanı kaplamasını sağlar.

Uygulama adımları

1. Tercih ettiğiniz yazı tipinin en-boy oranını belirleme

Yedekleri normalleştirmek için birincil yazı tipinizin "en boy değerine" (küçük harflerin yazı tipi boyutuna oranı) ihtiyacınız vardır.

• Otomatik keşif (Önerilen): Tarayıcının, birincil web yazı tipinizden oranı ayıklaması için from-font anahtar kelimesini kullanın.
• Manuel hesaplama: Belirli bir değeri biliyorsanız (ör. Verdana için 0,545) daha hassas kontrol için bu değeri doğrudan sağlayabilirsiniz.

2. Metin kapsayıcısına font-size-adjust özelliğini uygulayın

Özelliği öğeye veya üst kapsayıcıya uygulayın. Bu sayede, birincil yazı tipi yüklenemezse veya yüklenme aşamasındaysa yedek yazı tipi, birincil yazı tipinin görsel boyutuna uyacak şekilde ölçeklendirilir.

.text-content {
  /* Define your font stack as usual */
  font-family: "MyWebFont", "Arial", sans-serif;
  font-size: 1rem;

  /* MANDATORY: Normalize the font size based on the primary font's x-height.
     This ensures that if 'Arial' is used as a fallback, it is scaled 
     to match the x-height of 'MyWebFont'. */
  font-size-adjust: from-font;
}

3. (İsteğe bağlı) Belirli metrikler için ayarlama yapma

x yüksekliği varsayılan ve en yaygın olanıdır ancak cap-height (tamamı büyük harf olan başlıklar için kullanışlıdır) veya ch-width (sabit boşluklu yazı tipleri için kullanışlıdır) gibi diğer metriklere göre de normalleştirme yapabilirsiniz.

h1 {
  /* Normalize based on the height of capital letters */
  font-size-adjust: cap-height from-font;
}

4. Görsel kararlılığı doğrulama

font-size-adjust değerinin, yedekle doğru şekilde hizalandığından emin olun. Bunu test etmek için web yazı tipini geçici olarak engelleyebilir veya tarayıcınızın Geliştirici Araçları'nda font-family bildirimini ayarlayabilir ve metin düzeninin sabit kaldığını doğrulayabilirsiniz.

Yedek stratejiler

font-size-adjust özelliğini desteklemeyen tarayıcılarda yazı tipi, varsayılan ölçeğinde oluşturulur. Bu durum, yazı tipi değişiklikleri sırasında düzen kaymalarına veya okunabilirlikte değişikliklere neden olabilir.

font-size-adjust olmadan bu sorunu azaltmak için @font-face tanımlayıcıları size-adjust, ascent-override ve descent-override kullanarak yedek yazı tiplerini manuel olarak ayarlayabilirsiniz. Ancak bunların hesaplanması tek bir font-size-adjust değerine göre daha karmaşıktır.