İyileştirilmiş yazı tipi yedekleri

Katie Hempenius

Twitter

Özet

Bu makalede, yedek yazı tipleri ile size-adjust, ascent-override, descent-override ve line-gap-override API'leri ayrıntılı bir şekilde açıklanmaktadır. Bu API'ler, bir web yazı tipinin boyutlarına yakın veya tam olarak eşleşen yedek yazı tipi yüzleri oluşturmak için yerel yazı tiplerinin kullanılmasını mümkün kılar. Bu, yazı tipi değişikliğinden 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: Sonraki 13'ten itibaren next/font yazı tipi metriğini geçersiz kılmalarını ve eşleşen yazı tipi yedeklerini sağlamak için size-adjust özelliğini otomatik olarak kullanır.
• @nuxtjs/fontaine: Nuxt 3'ten itibaren, eşleşen yazı tipi yedeklerini otomatik olarak oluşturmak ve Nuxt uygulamanız tarafından kullanılan stil sayfalarına eklemek için nuxt/fontaine kullanabilirsiniz.

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

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

Arka plan

Yedek yazı tipi, birincil yazı tipi yüzü henüz yüklenmediğinde kullanılan veya sayfa içeriğini oluşturmak için gereken glifler eksik olduğunda kullanılan yazı tipi yüzüdür. Örneğin aşağıdaki CSS, "Roboto" için sans-serif yazı tipi ailesinin yedek yazı tipi olarak kullanılması gerektiğini belirtir.

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

Yedek yazı tipleri, metinlerin daha hızlı oluşturulması için (yani font-display: swap kullanılarak) kullanılabilir. Sonuç olarak sayfa içeriği daha önce okunabilir ve kullanışlıdır. Ancak, önceden bu durum düzen kararsızlığına neden 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ı tipiyle aynı miktarda alan kaplayan yedek yazı tipi yüzleri oluşturmaya olanak tanıyarak 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şım yalnızca yazı tipi metriğini geçersiz kılma API'sini kullanı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, bu yaklaşımların her ikisi de 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 çıkış, iniş ve satır boşluğunu geçersiz kılma yöntemi sağlar:

• Takım, yazı tipindeki gliflerin referans değerden daha uzun olduğu en uzun mesafeyi ölçer.
• İniş, yazı tipi gliflerinin referans değerin altına uzandığı en uzun mesafeyi ölçer.
• "Önde gelen" olarak da adlandırılan satır boşluğu, ardışık metin satırları arasındaki mesafeyi ölçer.

Yazı tipi metriği geçersiz kılmaları; web yazı tipinin çıkış, iniş ve çizgi boşluğuyla eşleşecek şekilde yedek yazı tipinin çıkış, iniş ve çizgi boşluğunu geçersiz kılmak için kullanılabilir. Sonuç olarak, web yazı tipi ve ayarlanan yedek yazı tipi her zaman aynı dikey boyutlara sahip olacaktır.

Yazı tipi metriği geçersiz kılmaları, şuna benzer 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ılmaları hesaplanıyor

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

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

Not: Em başına birim sayısı (UPM), yazı tipi tasarlarken kullanılan ızgara boyutunu ifade eder. Başka ızgara boyutları da olsa da 1000 (1000x1000 ızgara) veya 2048 (2048x2048 ızgara) açık ara en popüler olanlardır. Diğer metrikleri değerlendirmek için UPM'yi bilmek önemlidir. Örneğin, 900'a çıkış, yazı tipinin UPM'sinin 1000 veya 2048 olmasına bağlı olarak çok farklı anlamlara gelir.

Örneğin, Poppin'ler yazı tipi için yazı tipi metriği geçersiz kılmaları aşağıdaki gibidir:

/*
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ı okuma

Yazı tiplerinin meta verileri (özellikle de yazı tipi tabloları), yazı tipi metriği geçersiz kılmalarını hesaplamak için ihtiyacınız olan tüm bilgileri içerir.

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 oluşturulmuş bir yazı tipi motorudur. Bu kod snippet'inde, yazı tipi metriği geçersiz kılmalarını hesaplamak için fontkit'in nasıl kullanılacağı gösterilmektedir.
• Capsize, bir yazı tipi boyutu ve düzen kitaplığıdır. Capsize, çeşitli yazı tipi metrikleri hakkında bilgi almaya yönelik bir API sunar.
• fontdrop.info, yazı tipi tablolarını ve yazı tipiyle 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ü, ardından Metrics sekmesini seçin. UPM öğesini görüntülemek için: Font Info iletişim kutusunu açın, ardından General menüsünü seçin.

Not: Yazı tipiyle ilgili bazı JavaScript kitaplıkları, tuvale glifler çizerek ve sonucu ölçerek çıkış, iniş ve çizgi boşluklarını tahmin eder. Ancak bu yaklaşım, yazı tipi metriklerini doğrudan yazı tipi tablosundan okumaktan daha az doğrudur.

Yazı tipi tablolarını anlama

"Çıkış" gibi kavramlara birden fazla metrik ile atıfta bulunulduğunu fark edebilirsiniz. Örneğin, hheaAscent, typoAscent ve winAscent metrikleri vardır. Bu durum, farklı işletim sistemlerinin yazı tipi oluşturma konusunda farklı yaklaşımlar benimsemesinden kaynaklanır. OSX cihazlardaki programlar genellikle hhea* yazı tipi metriklerini kullanırken Windows cihazlardaki programlar genellikle typo* (sTypo* olarak da bilinir) veya win* yazı tipi metriklerini kullanır.

Not: Daha açık belirtmek gerekirse, Windows cihazlardaki programlar genellikle bir yazı tipi USE_TYPO_METRICS ayarlandıysa typo* metriklerini kullanma, yoksa win* metrikleri kullanma kuralını uygular. USE_TYPO_METRICS, tasarımcıların typo* ve win* metriklerini kullanma arasında tercih belirtmesine olanak tanımak için kullanıma sunulan bir boole parametresidir.

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

	Mac	Windows
Chromium	"hhea" tablosundaki metrikleri kullanır.	"USE_TYPO_METRICS" ayarlanmışsa "typo" tablosundaki metrikleri kullanır, 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" ayarlanmışsa "typo" tablosundaki metrikleri kullanır, 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 sistemlerinde nasıl çalıştığı hakkında daha fazla bilgi için dikey metriklerle ilgili bu makaleyi inceleyin.

Cihazlar arası uyumluluk

Yazı tipi metriklerinin büyük çoğunluğunda (örneğin, Google Fonts tarafından barındırılan yazı tiplerinin yaklaşık% 90'ı) kullanıcının işletim sistemi bilinmeden güvenli bir şekilde kullanılabilir. Diğer bir deyişle, bu yazı tipleri için ascent-override, descent-override ve linegap-override değerleri hhea, typo veya win metriklerinin geçerli olmasından bağımsız olarak tamamen aynı kalır. Bu depo, bunun hangi yazı tipleri için geçerli olduğu ve hangi yazı tipleri için geçerli olmadığı hakkında bilgi sağlar.

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

Not: Bu bölümde, bir yazı tipinin hem OSX hem de Windows cihazlarda aynı yazı tipi metriği geçersiz kılmalarını kullanıp kullanmadığının nasıl belirleneceği açıklanmaktadır. Öncelikle, yazı tipinin USE_TYPO_METRICS özelliğini etkinleştirip etkinleştirmediğini belirleyin.

• USE_TYPO_METRICS etkinleştirilirse yazı tipi, OSX cihazlarda hhea ve Windows cihazlarda typo metrikleri kullanılarak oluşturulur.
• OSX'te normal satır yüksekliğini hesaplamak için şu denklemi kullanın: (hheaAscent + hheaDescent + hheaLineGap)/unitsPerEm.
• Windows'da normal satır yüksekliğini hesaplamak için şu denklemi kullanın: (typoAscent + typoDescent + typoLineGap)/unitsPerEm.
• OSX ve Windows'da satır yüksekliği aynıysa her iki işletim sisteminde de aynı yazı tipi metriği geçersiz kılmalarını kullanabilirsiniz.
• USE_TYPO_METRICS etkinleştirilmezse yazı tipi, OSX cihazlarda hhea metrikleri ve Windows cihazlarda win metrikleri kullanılarak oluşturulur.
• OSX'te normal satır yüksekliğini hesaplamak için şu denklemi kullanın: (hheaAscent + hheaDescent + hheaLineGap)/unitsPerEm.
• Windows'da normal satır yüksekliğini hesaplamak için şu denklemi kullanın: (winAscent + winDescent)/unitsPerEm. (Not: winLineGap diye bir şey yoktur).
• Aşağıdaki koşulların her ikisi de geçerliyse OSX ve Windows'da aynı yazı tipi metriği geçersiz kılmalarını kullanabilirsiniz: a) hheaLineGap == 0, b) OSX ve Windows'da satır yüksekliği aynıdır.

Yazı tipi metriği geçersiz kılmalarını kullanma

Yazı tipi metriği geçersiz kılmaları, web yazı tipinin meta verilerinden (yedek yazı tipi değil) 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 düzenlemenin işleyiş şekli

Giriş

size-adjust CSS açıklayıcısı, yazı tipi gliflerinin genişliğini ve yüksekliğini orantılı olarak ölçeklendirir. Örneğin, size-adjust: 200%, yazı tipi gliflerini orijinal boyutlarının iki katı olacak şekilde ölçeklendirir. size-adjust: 50%, yazı tipi gliflerini orijinal boyutlarının yarısına ölçeklendirir.

size-adjust, tek başına yedek yazı tipini iyileştirmek için sınırlı uygulamalara sahiptir: Çoğu durumda, yedek yazı tipinin web yazı tipiyle eşleşmesi için (orantılı olarak ölçeklenmek yerine) biraz daraltılması veya genişletilmesi gerekir. Bununla birlikte, size-adjust ile yazı tipi metriği geçersiz kılmalarının birlikte kullanılması, iki yazı tipinin hem yatay hem de dikey olarak birbiriyle 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 özelliğinin hesaplanma yöntemi nedeniyle (bir sonraki bölümde açıklanmıştır), size-adjust değeri (ve ilgili yazı tipi metriği geçersiz kılmaları), kullanılan yedek yazı tipine göre 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%;
}

Not: Yazı tipi metriği geçersiz kılmaları ve size-adjust, yüzde değerleri kullanılarak beyan edilir. Ancak bu yüzdeler farklı şekilde tanımlanır: Örneğin, size-adjust: 10% bir yazı tipini orijinal boyutunun 1/10'u kadar ölçeklendirir. Ancak ascent-override: 10%, yazı tipini her zaman küçültmez. Bunun yerine, yazı tipinin oranlarını değiştirir (yani, çıkış boyutu UPM'nin% 10'una eşit olur).

Boyut düzenleme ve yazı tipi metriği geçersiz kılmalarını hesaplama

Bunlar, size-adjust ve yazı tipi metriği geçersiz kılma işlemlerini hesaplamaya yönelik denklemlerdir:

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 (yani çıkış, iniş ve çizgi boşluğu) doğrudan web yazı tipinin meta verilerinden okunabilir. Ancak, avgCharacterWidth değerinin yaklaşık olması gerekir.

Yaklaşık ortalama karakter genişliği

Genel olarak, ortalama karakter genişliği yalnızca yaklaşık olarak tahmin edilebilir. Ancak bunun tam olarak hesaplanabileceği bazı senaryolar vardır: örneğin, tek aralıklı yazı tipi kullanılırken veya bir metin dizesinin içeriğinin önceden bilindiği durumlarda.

Not: Yazı tipleri tek aralıklı veya sabit genişlikli olabilir. Tek aralıklı yazı tiplerinde tüm karakterler aynı miktarda yatay alan kaplar. Sabit genişlikli yazı tiplerinde karakterler farklı genişliklere sahiptir. Sabit aralıklı yazı tipleri, IDE'lerde yaygın olarak kullanılır ancak web'de sabit genişlikli yazı tiplerine kıyasla daha az yaygındır.

Not: Kolaylık sağlaması açısından bu makalede gliflerin "genişliği" ile ilgilidir. Bu terminoloji kendi başına yanlış olmasa da "ilerletme", "ilerileme genişliği" veya "yatay ilerleme" genellikle tipografi alanında kullanılan terminolojidir.

avgCharacterWidth hesaplamasına yönelik naif bir yaklaşıma örnek, tüm [a-z\s] karakterlerinin ortalama genişliğini almaktır.

Roboto gliflerinin genişliği

Bununla birlikte, tüm karakterlerin eşit şekilde ağırlanması, muhtemelen sık kullanılan harflerin genişliğinden (ör. e) düşük ve nadiren kullanılan harflerin genişliğinden de (ör. z) fazla ağırlığa neden olacaktır.

Doğruluğu artıran daha karmaşık bir yaklaşım, harf sıklığını hesaba katmak ve bunun yerine [a-z\s] karakterin sıklık ağırlıklı ortalama genişliğini hesaplamaktır. Bu makale, İngilizce metinlerin harf sıklığı ve ortalama kelime uzunluğu için iyi bir referanstır.

İngilizce harf sıklığı

Not: Bu makalede, İngilizce metinde kullanılacak yedek yazı tipi için avgCharacterWidth değerinin nasıl hesaplanacağı açıklanmaktadır. Ancak bu kavramlar, diğer diller ve karakter kümeleri için de uygulanabilir. İngilizce olmayan içeriklerde bu tekniği kullanma deneyiminizi öğrenmek isteriz.

Not: avgCharacterWidth tahmini için başka bir olası yaklaşım da xAvgCharWidth kullanmaktır. xAvgCharWidth, bir yazı tipinin OS/2 tablosunda bulunan, önceden doldurulmuş bir değerdir. Ancak bu metriğin her zaman doğru olmadığını unutmayın. Örneğin, bir yazı tipine glif eklendiğinde veya mevcut bir yazı tipinden glif kaldırıldığında birçok yazı tipi alt ayarlama aracı xAvgCharWidth uygulamasını güncellemez. Ayrıca, xAvgCharWidth doğru şekilde hesaplanmış olsa bile xAvgcharWidth hesaplama metodolojisi yıllar içinde değişmiştir: xAvgCharWidth değerinin, yazı tipi tarafından OS/2 tablosunun hangi sürümünün kullanıldığına bağlı olarak değişmesini bekleyebilirsiniz.

Yaklaşım belirleme

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

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

• Diğer yandan, daha fazla kesinlik istiyorsanız ve biraz daha fazla çalışma ve test yapmak istiyorsanız size-adjust işlevini kullanmak iyi bir yaklaşımdır. Bu yaklaşım doğru uygulandığında, yazı tipiyle ilgili düzen kaymalarını etkili bir şekilde ortadan kaldırabilir.

Not: Yazı tipi metriğini geçersiz kılma veya size-adjust yerine neden sabit bir line-height kullanamadığınızı merak ediyor olabilirsiniz. line-height bazen yazı tipiyle ilgili düzen kaymalarını azaltmak veya ortadan kaldırmak için başarıyla kullanılabilir. Ancak bu önerilmez. Yazı tipi metriği geçersiz kılmaları ve size-adjust, web yazı tipi/yedek yazı tipi uyumsuzluklarının temelinde yatan temel sorunu ele alır (line-height, CSS satır kutusunun yüksekliğini ayarlar).line-height Ayrıca, bu amaçla line-height kullanmanın başlangıçta beklediğinizden daha kafa karıştırıcı olduğunu fark edebilirsiniz. line-height ile çalışırken dikkat etmeniz gereken noktaları bu makalede bulabilirsiniz.

Yedek yazı tiplerini seçme

Bu makalede açıklanan teknikler, web yazı tipine yakın bir yerel yazı tipi bulmaya çalışmak yerine, yazı tipi metriği geçersiz kılma işlemlerini ve yaygın olarak kullanılan yerel yazı tiplerini dönüştürmek için size-adjust'yi kullanmaya dayanır. Yerel yazı tiplerini seçerken, çok az yazı tipinin yaygın bir şekilde yerel olarak kullanılabildiğini ve tüm cihazlarda tek bir yazı tipinin bulunmayacağını unutmayın.

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

Aşağıdaki örnekte geniş cihaz kapsamı sağlamak için üç yedek yazı tipi kullanılmaktadır: Windows/Mac cihazları hedefleyen yedek bir yazı tipi, Android cihazları hedefleyen bir yedek yazı tipi ve genel 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%;
}

Not: Yedek yazı tipi olarak kullanılabilecek başka yerel yazı tipleri de vardır ancak bunu yapmak için kullanıcının işletim sistemini bilmeniz gerekir. Örneğin "Calibri", "Lucinda Sans" ve "Impact", diğer işletim sistemlerinde bulunmayan ancak Windows'da yaygın olarak kullanılabilen yazı tipleridir.

Geri bildirim isteği

Yazı tipi metriği geçersiz kılma özelliği ve size-adjust ile ilgili deneyiminiz hakkında geri bildirim vermek isterseniz bizimle iletişime geçebilirsiniz.