İyileştirilmiş yazı tipi yedekleri

Katie Hempenius
Katie Hempenius
X

Özet

Bu makalede, yazı tipi yedeklerinin yanı sıra size-adjust, ascent-override, descent-override ve line-gap-override API'leri ayrıntılı bir şekilde ele alınmaktadır. Bu API'ler, bir web yazı tipinin boyutlarıyla yaklaşık olarak veya tam olarak eşleşen yedek yazı tipi yüzleri oluşturmak için yerel yazı tiplerinin kullanılmasını sağlar. Bu, yazı tipi değişiminden kaynaklanan düzen kaymalarını azaltır veya ortadan kaldırır.

Bu makaleyi okumayı atlamak isterseniz bu API'leri hemen kullanmaya başlamak için kullanabileceğiniz bazı araçlar şunlardır:

Çerçeve araçları:

  • @next/font: Next 13'ten itibaren next/font, eşleşen yazı tipi yedekleri sağlamak için yazı tipi metriği geçersiz kılmalarını ve size-adjust'ı otomatik olarak kullanır.
  • @nuxtjs/fontaine: Nuxt 3'ten itibaren, Nuxt uygulamanız tarafından kullanılan stil sayfalarına eşleşen yedek yazı tiplerini otomatik olarak oluşturmak ve eklemek için nuxt/fontaine'yi kullanabilirsiniz.

Çerçeve dışındaki araçlar:

  • Fontaine: Fontaine, yazı tipi metriği geçersiz kılma işlemlerini kullanan yazı tipi yedekleri otomatik olarak oluşturup ekleyen bir kitaplıktır.
  • Bu repo, Google Fonts tarafından barındırılan tüm yazı tipleri için yazı tipi metriği geçersiz kılma işlemlerini içerir. Bu değerler kopyalanıp stil sayfalarınıza yapıştırılabilir.

Arka plan

Yedek yazı tipi, birincil yazı tipi henüz yüklenmemişse veya sayfa içeriğini oluşturmak için gerekli glifler eksikse kullanılan yazı tipi yüzüdür. Örneğin, aşağıdaki CSS'de "Roboto" için yedek yazı tipi olarak sans-serif yazı tipi ailesinin kullanılması gerektiği belirtilmektedir.

font-family: "Roboto" , sans-serif;

Yedek yazı tipleri, metni daha hızlı oluşturmak için (font-display: swap kullanılarak) kullanılabilir. Bunun sonucunda sayfa içeriği daha önce okunabilir ve kullanışlı hale gelir. Ancak eskiden bu durum düzen istikrarsızlığına mal olmuştur: Düzen kaymaları genellikle, yedek yazı tipi web yazı tipiyle değiştirildiğinde meydana gelir. Ancak aşağıda açıklanan yeni API'ler, web yazı tipi muadiliyle aynı miktarda yer kaplayan yedek yazı tipi yüzleri oluşturmayı mümkün kılarak bu sorunu azaltabilir veya ortadan kaldırabilir.

İyileştirilmiş yazı tipi yedekleri

"İyileştirilmiş" yazı tipi yedekleri oluşturmaya yönelik iki olası yaklaşım vardır. Daha basit yaklaşımda yalnızca yazı tipi metriği geçersiz kılma API'si kullanılır. Daha karmaşık (ancak daha güçlü) yaklaşımda hem yazı tipi metriği geçersiz kılma API'si hem de size-adjust kullanılır. Bu makalede her iki yaklaşım da açıklanmaktadır.

Yazı tipi metriği geçersiz kılmalarının işleyiş şekli

Giriş

Yazı tipi metriği geçersiz kılmaları, bir yazı tipinin yükselişi, inişi ve çizgi aralığını geçersiz kılma imkanı sağlar:

  • Yükseliş, bir yazı tipinin karakterlerinin taban çizgisinin üzerinde uzanabileceği en uzak mesafeyi ölçer.
  • Düşeylik, bir yazı tipinin karakterlerinin yatay çizginin altında uzanabileceği en uzak mesafeyi ölçer.
  • "Boşluk" olarak da adlandırılan satır aralığı, art arda gelen metin satırları arasındaki mesafeyi ölçer.

Yazı tipinin yükselişi, inişi ve çizgi aralığını gösteren şema.

Yazı tipi metriği geçersiz kılma işlemleri, yedek yazı tipinin tırmanma, iniş ve satır aralığını web yazı tipinin tırmanma, iniş ve satır aralığıyla eşleşecek şekilde geçersiz kılmak için kullanılabilir. Sonuç olarak, web yazı tipi ve ayarlanmış yedek yazı tipi her zaman aynı dikey boyutlara sahip olur.

Yazı tipi metrik geçersiz kılma işlemleri aşağıdaki gibi bir stil sayfasında kullanılır:

body {
    font-family: Poppins, "fallback for poppins";
}

@font-face {
    font-family: "fallback for poppins";
    src: local("Times New Roman");
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

Bu makalenin başında listelenen araçlar, doğru yazı tipi metriği geçersiz kılma değerlerini oluşturabilir. Ancak bu değerleri kendiniz de hesaplayabilirsiniz.

Yazı tipi metriği geçersiz kılma işlemlerini hesaplama

Aşağıdaki denklemler, belirli bir web yazı tipi için yazı tipi metriği geçersiz kılma işlemlerini sağlar. Yazı tipi metriği geçersiz kılmalarının değerleri, ondalık sayı yerine yüzde olarak (ör. 105%) yazılmalıdır.

ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm

Örneğin, Poppins yazı tipi için yazı tipi metriği geçersiz kılma işlemleri şunlardır:

/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/

ascent-override: 105%;  /* = 1050/1000 */
descent-override: 35%;  /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */

ascent, descent, line-gap ve unitsPerEm değerlerinin tümü web yazı tipinin meta verilerinden gelir. Bu makalenin bir sonraki bölümünde bu değerlerin nasıl elde edileceği açıklanmaktadır.

Yazı tipi tablolarının okunması

Bir yazı tipinin meta verileri (özellikle yazı tipi tabloları), yazı tipi metriği geçersiz kılmalarını hesaplamak için ihtiyaç duyacağınız tüm bilgileri içerir.

FontForge'daki Yazı Tipi Bilgileri iletişim kutusunun ekran görüntüsü. İletişim kutusunda "Typo Ascent", "Typo Descent" ve "Typo Line Gap" gibi yazı tipi ölçümleri görüntülenir.
Yazı tipi meta verilerini görüntülemek için FontForge'u kullanma

Bir yazı tipinin meta verilerini okumak için kullanabileceğiniz bazı araçlar şunlardır:

  • fontkit, Node.js için geliştirilmiş bir yazı tipi motorudur. Bu kod snippet'inde, yazı tipi metriği geçersiz kılma işlemlerini hesaplamak için fontkit'in nasıl kullanılacağı gösterilmektedir.
  • Capsize, yazı tipi boyutlandırma ve düzen kitaplığıdır. Capsize, çeşitli yazı tipi metrikleri hakkında bilgi edinmek için bir API sunar.
  • fontdrop.info, yazı tipi tablolarını ve yazı tipleriyle ilgili diğer bilgileri tarayıcıdan görüntülemenize olanak tanıyan bir web sitesidir.
  • Font Forge, popüler bir masaüstü yazı tipi düzenleyicidir. ascent, descent ve line-gap öğelerini görüntülemek için: Font Info iletişim kutusunu açın, OS/2 menüsünü ve ardından Metrics sekmesini seçin. UPM'ü görüntülemek için: Font Info iletişim kutusunu açıp General menüsünü seçin.

Yazı tipi tablolarını anlama

"Artış" gibi kavramların birden fazla metrik tarafından referans aldığını fark edebilirsiniz. Örneğin, hheaAscent, typoAscent ve winAscent metrikleri vardır. Bunun nedeni, farklı işletim sistemlerinin yazı tipi oluşturmaya farklı yaklaşımlar benimsemesidir: OSX cihazlardaki programlar genellikle hhea* yazı tipi metriklerini kullanırken Windows cihazlardaki programlar genellikle typo* (sTypo* olarak da adlandırılır) veya win* yazı tipi metriklerini kullanır.

Yazı tipine, tarayıcıya ve işletim sistemine bağlı olarak yazı tipi, hhea, typo veya win metrikleri kullanılarak oluşturulur.

Mac Windows
Chromium "hhea" tablosundaki metrikleri kullanır. "USE_TYPO_METRICS" ayarlandıysa "typo" tablosundaki metrikleri, aksi takdirde "win" tablosundaki metrikleri kullanır.
Firefox "USE_TYPO_METRICS" ayarlanmışsa "typo" tablosundaki metrikleri kullanır. Aksi takdirde "hhea" tablosundaki metrikleri kullanır. "USE_TYPO_METRICS" ayarlandıysa "typo" tablosundaki metrikleri, aksi takdirde "win" tablosundaki metrikleri kullanır.
Safari "hhea" tablosundaki metrikleri kullanır. "USE_TYPO_METRICS" ayarlanmışsa "typo" tablosundaki metrikleri kullanır. Aksi takdirde "win" tablosundaki metrikleri kullanır.

Yazı tipi metriklerinin işletim sistemleri genelinde nasıl çalıştığı hakkında daha fazla bilgi için dikey metrikler hakkındaki bu makaleyi inceleyin.

Cihazlar arası uyumluluk

Yazı tiplerinin büyük çoğunluğu (örneğin, Google Fonts tarafından barındırılan yazı tiplerinin yaklaşık% 90'ı) için yazı tipi metrikleri geçersiz kılma işlemleri, kullanıcının işletim sistemini bilmeden güvenli bir şekilde kullanılabilir: Diğer bir deyişle, bu yazı tipleri için hhea, typo veya win metriklerinin geçerli olup olmadığına bakılmaksızın ascent-override, descent-override ve linegap-override değerleri tam olarak aynı kalır. Bu repo, bu durumun hangi yazı tipleri için geçerli olduğu ve hangileri için geçerli olmadığı hakkında bilgi sağlar.

OSX ve Windows cihazlar için ayrı yazı tipi metriği geçersiz kılma grupları kullanılmasını gerektiren bir yazı tipi kullanıyorsanız yazı tipi metriği geçersiz kılma ve size-adjust özelliklerini yalnızca stil sayfalarınızı kullanıcının işletim sistemine göre değiştirebiliyorsanız kullanmanız önerilir.

Yazı tipi metriği geçersiz kılma işlemlerini kullanma

Yazı tipi metriği geçersiz kılmaları, web yazı tipinin (yedek yazı tipinden değil) meta verilerinden gelen ölçümler kullanılarak hesaplandığından, yedek yazı tipi olarak hangi yazı tipinin kullanıldığına bakılmaksızın aynı kalır. Örneğin:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: "fallback for Poppins";
  src: local("Arial");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: "another fallback for Poppins";
  src: local("Roboto");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

Boyut ayarlama özelliğinin işleyiş şekli

Giriş

size-adjust CSS tanımlayıcısı, yazı tipi karakterlerinin genişliğini ve yüksekliğini orantılı olarak ölçeklendirir. Örneğin, size-adjust: 200% yazı tipi simgelerini orijinal boyutlarının iki katına, size-adjust: 50% ise orijinal boyutlarının yarısına ölçekler.

"Size-adjust: 50%" ve "size-adjust: 200%" değerlerinin sonuçlarını gösteren şema.

size-adjust, yazı tipi yedeklemelerini iyileştirmek için tek başına sınırlı uygulamalara sahiptir: Çoğu durumda, yedek yazı tipinin bir web yazı tipiyle eşleşmesi için orantılı olarak ölçeklendirilmek yerine biraz daraltılması veya genişletilmesi gerekir. Ancak size-adjust'ü yazı tipi metriği geçersiz kılmalarıyla birleştirmek, iki yazı tipinin hem yatay hem de dikey olarak eşleşmesini sağlar.

size-adjust, stil sayfalarında şu şekilde kullanılır:

@font-face {
  font-family: "fallback for poppins";
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

size-adjust değerinin hesaplanma şekli nedeniyle (sonraki bölümde açıklanmıştır), size-adjust değeri (ve karşılık gelen yazı tipi metriği geçersiz kılmaları), hangi yedek yazı tipinin kullanıldığına bağlı olarak değişir:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

Boyut ayarlama ve yazı tipi metriği geçersiz kılma işlemlerini hesaplama

size-adjust ve yazı tipi metriği geçersiz kılma işlemlerini hesaplamak için kullanılan denklemler şunlardır:

size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)

Bu girişlerin çoğu (ör. çıkış, iniş ve satır aralığı) doğrudan web yazı tipinin meta verilerinden okunabilir. Ancak avgCharacterWidth değerinin yaklaşık olarak hesaplanması gerekir.

Ortalama karakter genişliğine yakın değer

Genel olarak ortalama karakter genişliği yalnızca yaklaşık olarak hesaplanabilir. Ancak bunun tam olarak hesaplanabileceği bazı senaryolar vardır. Örneğin, sabit genişlikli yazı tipi kullanıldığında veya bir metin dizesinin içeriği önceden bilindiğinde.

avgCharacterWidth değerini hesaplamaya yönelik basit bir yaklaşım örneği, tüm [a-z\s] karakterlerinin ortalama genişliğini almaktır.

Roboto [a-zs] karakterlerinin genişliğini karşılaştıran grafik.
Roboto gliflerinin genişliği

Ancak tüm karakterlere eşit ağırlık vermek, sık kullanılan harflerin (ör. e) genişliğini yeterince azaltmaz ve sık kullanılmayan harflerin (ör. z) genişliğini yeterince artırmaz.

Doğruluğu artıran daha karmaşık bir yaklaşım, harf sıklığını hesaba katmaktır. Bunun yerine, [a-z\s] karakterinin sıklık ağırlıklı ortalama genişliğini hesaplayabilirsiniz. Bu makalede, İngilizce metinlerdeki harf sıklığı ve ortalama kelime uzunluğu hakkında bilgi verilmektedir.

İngilizce'deki harf sıklıklarını gösteren bir grafik.
İngilizcedeki harf sıklığı

Yaklaşım seçme

Bu makalede ele alınan iki yaklaşımın da avantajları ve dezavantajları vardır:

  • Yazı tipi yedeklerinizi optimize etmeye başlıyorsanız yazı tipi metriği geçersiz kılma işlemlerini tek başına kullanmak iyi bir yaklaşımdır. Bu, iki yaklaşımdan daha basit olsa da, genellikle yazı tipiyle ilgili düzen kaymalarının büyüklüğünü belirgin bir şekilde azaltacak kadar güçlüdür.

  • Öte yandan, daha fazla hassasiyet istiyorsanız ve biraz daha fazla çalışma ve test yapmak istiyorsanız size-adjust kullanmayı tercih edebilirsiniz. Bu yaklaşım doğru uygulandığında yazı tipiyle ilgili düzen kaymalarını etkili bir şekilde ortadan kaldırabilir.

Yedek yazı tipleri seçme

Bu makalede açıklanan teknikler, web yazı tipine en yakın yerel yazı tipini bulmaya çalışmak yerine yaygın olarak kullanılabilen yerel yazı tiplerini dönüştürmek için yazı tipi metriği geçersiz kılmaları ve size-adjust özelliklerini kullanır. Yerel yazı tiplerini seçerken çok az sayıda yazı tipinin yaygın olarak yerel olarak kullanılabilir olduğunu ve tüm cihazlarda tek bir yazı tipi bulunmayacağını aklınızda bulundurun.

Arial, sans-serif yazı tipleri için önerilen yedek yazı tipidir ve Times New Roman, serif yazı tipleri için önerilen yedek yazı tipidir. Ancak bu yazı tiplerinin hiçbiri Android'de kullanılamaz (Roboto, Android'deki tek sistem yazı tipidir).

Aşağıdaki örnekte, geniş kapsamlı cihaz desteği sağlamak için üç yedek yazı tipi kullanılmaktadır: Windows/Mac cihazları hedefleyen bir yedek yazı tipi, Android cihazları hedefleyen bir yedek yazı tipi ve genel bir yazı tipi ailesi kullanan bir yedek yazı tipi.

body {
  font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}

/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

Geri bildirim isteği

Yazı tipi metriği geçersiz kılma ve size-adjust özelliğini kullanma deneyiminizle ilgili geri bildiriminiz varsa lütfen bize ulaşın.