Defter · Not 002 · Tipografi

On dil, üç yazı tipi dosyası

Bir siteyi on dile açarken ilk kırılan şey yazı tipi bütçesidir. Kırılmadı. Ama Kiril ve Arap harfleri için başka bir bedel ödendi ve o bedel gizlenmedi.

Sitenin tipografisi üç aileden kuruluydu: başlıklar için Archivo, gövde için Instrument Sans, sayılar ve etiketler için Martian Mono. Üçü de değişken yazı tipi. Beş dilde sorun yoktu. On dile çıkarken iki sorun aynı anda büyüdü: indirilen bayt ve alfabe kapsamı.

Neyi neyle karşılaştırdığımız

Ham TTF dosyalarıyla yayımladığımız WOFF2 dosyalarını karşılaştırmak dürüst olmaz; aradaki farkın büyük kısmı sıkıştırmadan gelir, alt kümeden değil. Anlamlı karşılaştırma, gerçekten var olan alternatifle yapılan karşılaştırmadır: aynı üç aile Google Fonts'tan gelseydi ne inecekti.

Dokuz dosyanın hepsi inmez. Tarayıcı unicode-range alanına bakıp yalnız sayfanın ihtiyacı olan alt kümeleri çeker. Türkçe bir sayfa için bu, aile başına latin + latin-ext demek:

latin          88.0 KB  <-
latin-ext      83.8 KB  <-
vietnamese     33.6 KB
latin          29.2 KB  <-
latin-ext      10.8 KB  <-
latin          23.0 KB  <-
latin-ext      15.5 KB  <-
cyrillic       10.3 KB
cyrillic-ext    3.1 KB

Turkce sayfanin indirecegi: 250 KB (6 dosya)

Baytın yanında iki şey daha kazanıldı: altı istek üçe indi ve iki dış kökene açılan DNS + TLS el sıkışması tamamen kalktı. İlk boyamayı engelleyen kaynak sorununun nasıl kapandığı son 18 puan notunda anlatılıyor.

Üç tuzak

Bir: latin-ext alt kümesinde temel Latin harfleri yok

İlk denemede Google Fonts'un latin-ext dosyası indirilip alt kümeye sokuldu. Çıkan dosyada 130 glif vardı ve rakamlar yoktu. Sebep basit: latin-ext, latin'in üstüne binen bir ek kümedir, kendi başına tam bir alfabe değildir. Doğru yol, google/fonts deposundaki tam değişken yazı tipini indirip alt kümeyi kendin çıkarmaktır.

İki: kullanılmayan eksenler sabitlenmezse dosya beş katına çıkıyor

Değişken yazı tipinin her ekseni dosyaya ağırlık ekler. Tasarımda yalnızca kalınlık ve genişlik kullanılıyor; kalan eksenler varsayılan değerlerine sabitlenmezse hepsinin verisi dosyada kalır.

tam = {a.axisTag: a.defaultValue for a in t['fvar'].axes
       if a.axisTag not in eksen}
tam.update(eksen)
# wght/wdth disindaki eksenler varsayilana sabitlenir,
# yoksa dosya bes kati oluyor

Üç: gvar tembel yüklenir

fontTools ile eksen sabitledikten sonra doğrudan alt küme almaya kalkınca KeyError: space alınıyor. Sebep, değişken glif verisinin (gvar) tembel yüklenmesi: sabitleme sonrası nesne bellekte tutarlı görünür ama alt küme alıcı onu okuyamaz. Çözüm dolambaçlı ama tek satır: dosyayı geçici bir TTF olarak kaydet, yeniden aç, sonra alt kümeyi al.

Kiril ve Arapça: ödenen bedel

Archivo'da Kiril harfi yok, Instrument Sans'ta da. Arap harfi hiçbirinde yok. Bu iki dil için ayrı aile seçmek zorunluydu ve seçim keyfî yapılmadı.

• Rusça: Roboto Flex. Tek yapısal eşleşme oydu: genişlik ekseni var. Yani CSS'teki tüm font-variation-settings değerleri hiç değiştirilmeden çalışıyor. Tek dosya hem başlık hem gövde görüyor; Rusça sayfa Latin sayfadan hafif kalıyor.
• Arapça: Noto Sans Arabic. Genişlik ekseni olan tek aday. Tek dosya 144 KB ve üç rolü birden görüyor, yani Arapça sayfa Latin sayfadan az indiriyor.

Bedel şurada: Noto Sans Arabic'te → ve ✓ simgeleri yok. Arapça sayfada bu iki işaret yedek yazı tipinden geliyor ve komşusundan hafif farklı duruyor. Bunu gizlemek yerine CSS'e yorum olarak yazdık, çünkü bir sonraki kişi aynı farkı görüp hata sanacak.

Sağdan sola düzen ayrı bir iş: ok yönleri çevrildi, konum özellikleri mantıksal karşılıklarıyla değiştirildi (margin-inline-start, inset-inline-start), böylece aynı CSS iki yönde de doğru çalışıyor.

Küçük bir ayar: Martian Mono neden optional

Üç ailenin ikisi font-display:swap kullanıyor. Martian Mono optional. Sebep ölçülmüş bir şey: swap ile Martian geç gelip menü düğmesini yeniden ölçtürüyor ve 0,015'lik bir düzen kayması yaratıyordu. Ön yüklendiği için pratikte zaten yetişiyor; yetişemediği tek durumda da sayfa kaymıyor, yedek yazı tipiyle kalıyor.

On dilde toplam yazı tipi klasörü 404 KB. Hiçbir ziyaretçi bunun tamamını indirmiyor; her sayfa yalnız kendi dilinin dosyalarını çekiyor.