Web font formatları ve alt kümeleme: WOFF2 ve Türkçe

TTF, OTF ve WOFF2 aslında ne

TTF ve OTF aynı kabın iki lezzeti: her ikisi de SFNT denilen tablo tabanlı bir yapıdır. Dosyanın içindeglyf, cmap, hmtx, GSUB gibi tablolar yan yana durur. Aradaki fark eğrilerin nasıl saklandığıdır: TTF ikinci dereceden (quadratic) B-spline kullanır ve eğrileriglyf tablosunda tutar, OTF ise üçüncü dereceden (cubic) Bézier eğrilerini CFF ya daCFF2 tablosunda tutar. Ekranda gördüğünüz harf açısından pratik bir fark yoktur; ikisi de OpenType spesifikasyonunun tanımladığı aynı dosya iskeletine oturur.

Asıl fark sıkıştırmada. TTF ve OTF içinde sıkıştırma yoktur, masaüstü için tasarlanmışlardır ve dosyayı olduğu gibi taşırlar. WOFF2 yeni bir eğri biçimi değil: aynı SFNT tablolarını saran bir kaptır. İki iş yapar. Önce glyf ve loca tablolarını, eğri noktalarını daha iyi sıkışacak şekilde yeniden yazan bir dönüşümden geçirir, sonra tüm gövdeyi Brotli ile sıkıştırır. Tarayıcı dosyayı indirince dönüşümü geri alır ve elinde yine sıradan bir OpenType fontu olur.

Bu yüzden "WOFF2 kalitesi düşürür mü" sorusunun cevabı hayır: dönüşüm kayıpsızdır, tek bir kontrol noktası değişmez. WOFF 1.0 zlib kullanıyordu; WOFF2'nin Brotli ve glif dönüşümü birleşimi aynı font için belirgin biçimde daha küçük dosya üretir. Web için tek format yayınlayacaksanız WOFF2 yayınlayın; güncel masaüstü ve mobil tarayıcıların tamamı okur. TTF'yi yedek olarak eklemek yalnızca aynı fontu iki kez sunma riski doğurur.

Asıl kazanç alt kümelemede

Bir fontun boyutunu belirleyen şey, çoğunlukla içindeki glif sayısıdır. Latin, Kiril, Yunan ve genişletilmiş işaretleri birlikte taşıyan bir aile binlerce glif içerir. Türkçe bir arayüzde bunların yüzde biri bile kullanılmaz. Alt kümeleme, kullanmadığınız glifleri ve onlara bağlı cmap, kern,GSUB kayıtlarını dosyadan çıkarır. WOFF2'ye geçmek yüzde otuzlar seviyesinde kazandırırken, doğru bir alt küme aynı fontu birkaç kat birden küçültebilir. Sıralama nettir: önce alt kümele, sonra WOFF2'ye çevir.

Türkçe karakterler tam burada kırılır

Alt kümeleme yaparken en sık yapılan hata, "Latin alfabesi yeter" deyip Latin-1 aralığıyla yetinmektir. Türkçenin altı özel harfinden yalnızca üçü orada durur. ç (U+00E7), ö (U+00F6) ve ü (U+00FC) Latin-1 Supplement içindedir, ama noktasız ı (U+0131), noktalı büyük İ (U+0130), ğ (U+011F), Ğ (U+011E), ş (U+015F) ve Ş (U+015E) Latin Extended-A bloğundadır, yani U+0100 ile U+017F arasında. Latin-1 ile sınırlı bir alt küme bu harfleri dosyadan atar.

Bunun ekrandaki karşılığı sessiz bir hatadır: tarayıcı eksik harfleri yedek fontla çizer. Sayfada "ışık" kelimesi iki farklı yazı tipinden birleşmiş gibi görünür, harf genişlikleri tutmaz, satır kırılmaları kayar. Metin okunur olduğu için kimse hemen fark etmez, hata genelde bir kullanıcı ekran görüntüsü gönderdiğinde ortaya çıkar. Bunu bir kez yaşadıysanız test listesini ezbere bilirsiniz: bir sayfaya ığĞŞşçÇöÖüÜİ dizisini basıp yedek fonta düşen harf olup olmadığına bakmak yeterli.

Google Fonts tarafında bu ayrım latin ve latin-ext alt kümeleri olarak görünür; Türkçe için latin-ext şart. Kendi alt kümenizi üretiyorsanız istediğiniz karakterleri tek tek vermek yerine U+0100-U+017F bloğunu bütün olarak eklemek daha güvenlidir, çünkü marka adları, alıntılar ve kullanıcı içeriği er geç blok içindeki başka bir harfi getirir. Kullandığınız metinde hangi karakterlerin geçtiğini çıkarmak için metin temizleyici ile içeriği düzleştirip kelime sayacında gözden geçirmek pratik bir başlangıçtır.

İkinci bir tuzak: text-transform: uppercase ile büyütülen Türkçe metin, i harfini İ'ye çevirmek için lang="tr" bilgisine ihtiyaç duyar. Dil etiketi yoksa tarayıcı i harfini I yapar ve fontunuzda İ hiç kullanılmadığı için eksiklik gözden kaçar, ta ki bir kullanıcı adı İ ile başlayana kadar.

unicode-range ve bölünmüş alt kümeler

Tek bir büyük alt küme yerine dosyayı parçalara bölüp her parçaya unicode-range vermek, tarayıcıya hangi parçayı indireceğini seçme imkânı tanır. Tarayıcı sayfadaki karakterleri tarar ve yalnızca aralığı kesişen @font-face tanımlarını indirir. Türkçe içerikli bir sayfada Kiril parçası hiç indirilmez.

İki ayrıntı sonucu belirler. Birincisi, eşleşme karakter bazında değil dosya bazında çalışır: sayfada tek bir ğ geçiyorsa Latin Extended-A parçasının tamamı iner. Bu yüzden Türkçe siteler için mantıklı bölünme "latin + latin-ext" ikilisi yerine çoğu zaman tek birleşik parçadır; iki istek yerine bir istek yaparsınız. İkincisi, aralıklar çakışırsa tanım sırası önem kazanır, bu yüzden parçaların aralıklarını kesişmeyecek şekilde yazmak gerekir. CSS tarafını okunur tutmak için CSS biçimlendirici uzun @font-face bloklarını düzenli hale getirir.

font-display: FOIT mi FOUT mu

Font inerken tarayıcının iki seçeneği var: metni hiç çizmemek ya da yedek fontla çizip sonra değiştirmek. Birincisi FOIT (görünmeyen metin), ikincisi FOUT (biçimsiz metin). font-display tanımlayıcısı bu tercihi iki pencereyle yönetir: blok süresi boyunca metin görünmez kalır, takas süresi boyunca yedek fontla çizilir ve font gelirse değiştirilir.

• block: kısa bir blok, ardından sınırsız takas. Logo benzeri, yanlış fontla görünmesi kabul edilemez metinler için.
• swap: neredeyse sıfır blok, sınırsız takas. Metin hemen görünür, font gelince yerini alır. Gövde metni için makul varsayılan.
• fallback: çok kısa blok, kısa takas. Font geç gelirse yedek fontta kalınır, geç gelen bir değişim yaşanmaz.
• optional: çok kısa blok, takas yok. Tarayıcı fontu kullanmamaya karar verebilir; bağlantı yavaşsa ilk ziyarette yedek fontta kalırsınız.

FOUT'un bedeli düzen kaymasıdır: yedek font ile asıl fontun harf genişlikleri farklıysa metin yerine oturduğunda satırlar zıplar. Bunu ortadan kaldırmanın yolu takası kapatmak değil, yedek fontu asıl fonta yaklaştırmaktır. @font-face içinde yerel yedek için tanımlanan size-adjust,ascent-override ve descent-override tanımlayıcıları tam bunun içindir.

Ön yükleme ne zaman işe yarar

Bir web fontu iki adımda bulunur: tarayıcı önce CSS dosyasını indirir, orada @font-face görür ve ancak o fontu kullanan bir metin oluştuğunda font isteğini başlatır. Bu zincir, fontun ekrana geç girmesinin asıl sebebidir. <link rel="preload" as="font" type="font/woff2" crossorigin> zinciri kısaltır.

İki kural var. crossorigin niteliği, dosya kendi alan adınızda dursa bile zorunludur, çünkü fontlar anonim CORS modunda indirilir; niteliği unutursanız tarayıcı aynı dosyayı iki kez indirir. İkincisi, ön yükleme bir öncelik aracıdır: her şeyi öne alırsanız hiçbir şeyi öne almamış olursunuz. İlk ekranda gerçekten görünen bir ya da iki yüzle sınırlı tutun.

Değişken font ne zaman kazandırır

Değişken font, ağırlık ya da genişlik gibi eksenleri tek dosyada taşır. Dosya tek bir statik ağırlıktan büyüktür, ama dört ayrı ağırlığın toplamından genelde küçüktür. Kabaca eşik ikiyle üç ağırlık arasındadır: yalnızca normal ve kalın kullanıyorsanız iki statik dosya büyük ihtimalle daha hafif kalır, üç ve üzeri ağırlıkta değişken sürüm öne geçer. Değişken sürümü alırken ağırlık eksenini de alt kümeye dahil edip kullanmadığınız eksenleri çıkarabilirsiniz.

Ağırlığı font-variation-settings yerine font-weight ile sürmek daha güvenlidir:@font-face içinde font-weight: 100 900 yazıp CSS tarafında sıradanfont-weight değerleri kullanırsanız tarayıcının kendi yedekleme ve sentetik kalınlaştırma mantığı doğru çalışır.

Lisans: en çok burada hata yapılıyor

Bir masaüstü font lisansı, fontu bilgisayarınızda kurup belge tasarlama hakkı verir. Aynı dosyayı WOFF2'ye çevirip sunucudan yayınlamak ayrı bir kullanımdır ve çoğu ticari lisansta ayrıca satın alınır; web lisansları genelde alan adı ya da aylık sayfa görüntüleme sayısı üzerinden fiyatlanır. "Dönüştürücüden geçirdim, format değişti" savunması lisans metninde karşılık bulmaz.

SIL Open Font License altındaki aileler bu sorunu ortadan kaldırır: web'de kullanmak, alt kümelemek ve değiştirmek serbesttir. Karşılığında iki kural vardır: font dosyalarını tek başına satmamak ve lisansta "Reserved Font Name" olarak işaretlenmiş adı, değiştirdiğiniz sürümde kullanmamak. Alt kümeleme teknik olarak bir değişikliktir, bu yüzden üretilen dosyayı özgün adıyla dağıtıyorsanız lisans metnini de yanında taşıyın.

Fontu kendi sunucunuzdan yayınlamak ayrıca gizlilik tarafında sadeleşme sağlar: üçüncü taraf bir font sağlayıcısına yapılan her istek, ziyaretçinin IP adresini o servise taşır. Ölçülebilir hız kazancı da genelde aynı yöndedir, çünkü ekstra bir alan adına bağlanma maliyeti ortadan kalkar.

Özet akış

1. Lisansın web kullanımını kapsayıp kapsamadığını doğrulayın.
2. Alt kümeyi Latin-1 ile bırakmayın, U+0100-U+017F bloğunu ekleyin.
3. Alt kümelenmiş dosyayı WOFF2 olarak üretin, başka format yayınlamayın.
4. Gövde metni için font-display: swap, yedek fontu size-adjust ile hizalayın.
5. İlk ekrandaki tek yüzü crossorigin ile ön yükleyin.
6. Yayından önce ığĞŞşçÇöÖüÜİ dizisini gerçek sayfada test edin.

Platform "yazı tipleri" aslında font değil

Bu yazının anlattığı her şey, tarayıcıya indirilen bir dosyanın harfleri nasıl çizdiğiyle ilgili. Oyun adlarında ve sosyal medya profillerinde görülen süslü yazılar ise başka bir mekanizmadır: orada indirilen bir font yoktur. Unicode'un matematiksel alfabe, daire içine alınmış harf ve tam genişlik gibi bloklarında, görünüşü A harfine benzeyen ayrı kod noktaları bulunur ve süsleme, A yerine o kod noktasını yazmaktan ibarettir.

Ayrım sayfaların adına rağmen nettir: Roblox yazı tipleri ve Adopt Me yazı tipleri sayfaları bir font dosyası üretmez, karakter değiştirir. Zaten bir oyun kendi fontunu kendi paketinde taşıdığı için dışarıdan yazı tipi yüklemenize izin vermez; değiştirebildiğiniz tek şey yazdığınız karakterlerin kendisidir. Aynı mantık Instagram, Discord ve Twitter sayfaları için de geçerli.

Pratikte iki sonuç doğar. Bir arayüzün gerçekten başka bir yazı tipiyle görünmesini istiyorsanız tek yol yukarıdaki akıştır: alt kümelenmiş bir WOFF2 dosyası yayınlamak. Bir kullanıcı adını süslemek istiyorsanız font değil karakter değiştirirsiniz ve bedeli okunabilirliktir, çünkü ekran okuyucular bu kod noktalarını harf olarak seslendirmez ve arama motorları kelimeyi eşleştiremez. Genel amaçlı karşılıkları Unicode metin stilleri ve Unicode sembolleri araçlarında bulabilirsiniz. Oyun adlarında bunun nerede işe yarayıp nerede geri teptiğini ayrıca ele alan bir yazı var: oyun yazı tipleri ve Unicode gerçeği.