Syne'nin g harfi: hata değil tasarım, yine de iki harfi değiştirdim

01Kırık görünen bir harf

Sitenin başlıkları Syne ile, çoğunlukla 800 ağırlıkta yazılıyor. Geniş, karakterli bir font ve sitenin kimliğinin büyük kısmını o taşıyor. Ama küçük g harfi büyük boyutlarda bize hep tuhaf geldi. İlk bakışta bir render hatası sandık: harf, sanki bir parçası eksikmiş ya da yanlış yerleşmiş gibi duruyordu. Türkçede ğ sık geçtiği için sorun yalnızca İngilizce kelimelerde değil, Türkçe başlıklarda da göze batıyordu.

02Önce hatayı kendimde aradım

Akla gelen şüpheliler belliydi: Google Fonts'un gönderdiği alt küme, tarayıcının sentetik kalınlaştırması ya da benim CSS'imdeki bir ayar. Bunları tek tek eledim. Harfi, paylaşım kartlarında da kullandığım tam karakter setli Syne TTF dosyasıyla karşılaştırdım; aynı şekil oradaydı. Fontun stilistik setlerine de baktım, beklediğim türde bir alternatif g bulamadım.

Sonuç netti: bu bir hata değil, Syne'nin orijinal tasarımı. Bunu bilmek önemliydi, çünkü bir hata olsaydı doğru dosyayı yüklemek ya da bir ayarı düzeltmek yeterdi. Tasarım olduğu için önümde üç yol vardı: başlık fontunu tamamen değiştirmek, harfi olduğu gibi kabul etmek ya da yalnızca bu iki harfi başka bir fonttan almak. İlki sitenin görünüşünü baştan değiştirirdi, ikincisi bizi rahatsız etmeye devam ederdi. Üçüncüsünü seçtim.

03İki harflik bir font

Yedek font olarak Archivo'yu seçtim. Archivo'nun bir genişlik ekseni var ve wdth 125 değeri Expanded kesimine karşılık geliyor; bu geniş oranlar, benim gözümde Syne'nin yanında en az sırıtan seçenekti. Google Fonts'un css2 adresi text parametresini destekliyor: yalnızca istenen karakterleri içeren bir font dosyası döndürüyor. text=g%C4%9F, yani gğ. Sitede --f-display 800 ve 600 ağırlıkta kullanıldığı için 600, 700 ve 800 ağırlıklarını istiyorum. Stil dosyası media="print" ve onload hilesiyle, ilk boyamayı bloklamadan yükleniyor.

<!-- index.html -->
<link rel="stylesheet" media="print" onload="this.media='all'"
  href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@125,600;125,700;125,800&text=g%C4%9F&display=swap" />

/* src/styles/tokens.css */
--f-display: 'Archivo', 'Syne', 'Space Grotesk', sans-serif;

Google'ın bu isteğe döndürdüğü CSS'e bakmak öğretici. Her ağırlık için ayrı bir @font-face kuralı var: font-family 'Archivo', font-stretch 125% ve unicode-range: U+67, U+11F, U+306. İlk ikisi g ve ğ. Üçüncüsü birleşen breve işareti; ğ harfi g ile bu işaretin birleşimi olarak da yazılabildiği için o da dosyada. Sonuç, iki harf için birkaç KB'lık bir font.

04Geri düşme harf harf çalışır

İşin geri kalanını tarayıcının font eşleme kuralları yapıyor. --f-display listesinde Archivo ilk sırada. Tarayıcı bir metni çizerken her karakter için listedeki ilk uygun yüzü arıyor; karakter bir @font-face kuralının unicode-range aralığında değilse ya da fontta o glif yoksa sıradaki aileye geçiyor. Yani "doğru" kelimesinde d, o, r ve u Syne'den, ğ Archivo'dan geliyor. Büyük G bu listede olmadığı için o da Syne'de kalıyor.

Ağırlıklar da aynı mantıkla eşleşiyor. Archivo için her ağırlık ayrı bir @font-face kuralı olduğundan, 800 ağırlıklı bir başlıkta g harfi de Archivo'nun 800 kesiminden geliyor; .ablead gibi 600 ağırlıklı metinlerde ise 600 kesiminden. Listenin üçüncü sırasındaki Space Grotesk, Syne henüz yüklenmemişken ya da hiç yüklenemezse devreye giren bir güvenlik ağı; en sondaki sans-serif de onun yedeği.

unicode-range'in bir faydası daha var: tarayıcı bu font dosyasını yalnızca sayfada o aralıktaki bir karakter bu font yığınıyla çizileceği zaman indiriyor. g ya da ğ içermeyen bir başlık için Archivo hiç istenmiyor. Bir de dürüst olmak gerekirse küçük bir bedeli var: stil dosyası bloklamadan ve display=swap ile yüklendiği için, Archivo gelene kadar g harfi bir an Syne ile görünüp sonra değişebiliyor.

Açılış ekranı bu kuralın dışında. Oradaki DEVILYXRD yazısı --f-display değil doğrudan Syne kullanıyor; yazı büyük harf olduğu ve içinde g bulunmadığı için yamaya ihtiyacı yok.

05Aynı yama paylaşım kartlarında

Paylaşım kartlarını çizen Satori'de unicode-range ve harf başına geri düşme yok, bu yüzden aynı ayrımı elle yapmak gerekiyor. scripts/og.mjs build sırasında aynı Archivo alt kümesini Google Fonts'tan TrueType olarak indiriyor. displayText başlığı kelimelere, kelimeleri de g ve ğ dizileri ile geri kalanı olarak bölüyor; g ve ğ dizileri Archivo ailesiyle çiziliyor. Ağ yoksa yama atlanıyor ve kartlar Syne'nin g harfiyle çiziliyor.

const runs = hasPatch ? w.split(/([gğ]+)/).filter(Boolean) : [w]
return h('span', { display: 'flex' },
  ...runs.map((r) => (/^[gğ]+$/.test(r)
    ? h('span', { fontFamily: 'Archivo' }, r)
    : r)))

Bir fontu değiştirmeden onun iki harfini değiştirmek mümkün; tarayıcı zaten harf harf seçiyor.