Web Tipografisinde Font Eşleştirme: Neyi Seçmeli, Neyi Test Etmeli
Font seçimi görsel bir tercih gibi görünür; uygulamada okunabilirlik ve yükleme maliyeti kararıdır. İki yazı tipi çoğu arayüz için fazlasıyla yeter, asıl iş seçtiğiniz fontun rolünü netleştirmek ve metni gerçek puntosunda ekranda görmektir. Sınanmamış font kararı tasarım kararı değil, tahmindir.
Sınıflar seçim yapmaz, seçeneği daraltır
Serif, sans-serif, slab-serif, script, display, monospace. Bu ayrım bir başlangıç noktasıdır, ölçüt değil. Serifin "güven verdiği" cümlesi çok tekrarlanır ama arayüzde güveni yaratan şey harflerin ayakları değil, metnin okunma kolaylığı ve tutarlılığıdır. Sınıfları eleme için kullanın: gövde metni serif ya da sans-serif ailesinden çıkar, script ve display yalnızca başlıkta ve kısa metinde iş görür, monospace kod ve tablo dışında yerinden olur.
Her fonta tek bir rol verin
Bir arayüzde iki yazı tipi yeter, biri başlık biri gövde. Roller birbirine karışmaya başladıysa çözüm üçüncü fontu eklemek değil, ikinciyi kaldırmaktır. Tek aile de çoğu zaman yeterlidir: aynı ailenin farklı ağırlıkları hiyerarşiyi zaten kurar ve iki ayrı ailenin x-yüksekliğini birbirine uydurmakla uğraşmazsınız. İki font kullanacaksanız aralarındaki fark belirgin olsun; birbirine yakın iki sans-serif, tasarımı zenginleştirmez, sadece hata gibi görünür.
Ağırlık hiyerarşisinin sınırı
Başlıkta kalın, gövdede normal ağırlık standart bir düzendir. Sık verilen bir tavsiye ise burada ters çalışır: buton, etiket, yardım metni gibi küçük elemanlar için ince ağırlık ya da italik önerilir, oysa punto küçüldükçe harf gövdesinin taşıdığı kontrast düşer ve ilk kaybedilen şey ince ağırlığın okunurluğu olur (bu tavsiyeyi olduğu gibi uygulamayı hata sayarım). Küçük metinde ağırlığı azaltmak yerine rengi ve boşluğu kullanın.
Ağırlığın bir de faturası var. Statik fontlarda her ağırlık ve her italik ayrı bir dosyadır; regular, medium, bold ve bunların italikleri dediğinizde tek aile için altı ayrı istek çıkarsınız. Değişken font bunu tek dosyaya indirir ve aradaki ağırlıkları da açar. Üçten fazla ağırlık kullanacaksanız değişken sürümü tercih edin, altında kalıyorsanız yalnızca kullandığınız dosyaları yükleyin.
Türkçe karakterleri baştan kontrol edin
Türkçe arayüzlerde en sık atlanan adım budur. Bir fontun Latin desteği olması ı, İ, ğ, Ş, ç karakterlerini doğru taşıdığı anlamına gelmez. Özellikle display ve script ailelerinde noktasız ı ile noktalı İ ya eksiktir ya da tarayıcı bunları yedek fonttan doldurur, sonuç aynı satırda iki ayrı yazı tipi gibi görünür. Google Fonts kullanıyorsanız latin-ext alt kümesini açıkça istemeniz gerekir.
Kontrolü gözle yapın. Hem Türkçe karakterleri hem de birbirine benzeyen harfleri içeren bir satırı gerçek gövde puntosunda ekrana basın: Iğdır'da İlgi Çeken Şişli 0O1lI. Finans, sağlık ve kamu arayüzlerinde bu adım zorunludur, çünkü 1, l ve I'nin ayırt edilememesi doğrudan veri hatasına dönüşür.
Yükleme davranışı da tipografiye dahildir
Font geç geldiğinde tarayıcının iki seçeneği vardır: metni gizlemek ya da yedek fontla gösterip sonra değiştirmek. Birinde boş ekran, diğerinde satırların yerinden oynaması. font-display: swap metni hemen görünür kılar, karşılığında düzen kaymasını kabul edersiniz; kaymayı küçültmek için yedek fontu gerçek fontun x-yüksekliğine ve harf genişliğine yakın seçin. Hiç kullanmadığınız ağırlıkları da sayfaya yüklemeyin, en hızlı font indirilmeyen fonttur.
Karar sırası
- Önce gövde fontunu seçin, başlık ondan sonra gelir. Metnin neredeyse tamamı gövdededir.
- Türkçe karakterleri ve benzeşen harfleri gerçek puntoda ekranda görün.
- Kaç ağırlık kullanacağınıza karar verin, üçü aşıyorsanız değişken sürüme geçin.
- Lisansı okuyun. Web kullanımı ayrı lisanslanır, masaüstü lisansı siteye taşınmaz.