Konu Başlıkları
Yükleniyor...

Web Font Seçimi: Okunabilirlik, Türkçe Karakter ve Yükleme Maliyeti

Web Font Seçerken Nereye Bakılır? Pratik Bir Kılavuz

Yazı tipi seçmek göründüğünden daha az estetik, daha çok mühendislik kararı. Ekranda güzel duran font, sayfayı yavaşlatan ya da Türkçe karakterleri düşüren font olabiliyor. Seçim aslında iki soruya iniyor: metin rahat okunuyor mu, bu görünüm kaç dosyaya mal oluyor.

Font seçmek aynı zamanda bir yükleme kararı

Web fontu, tarayıcının sayfayla birlikte indirdiği bir dosyadır. Arial, Georgia, Times New Roman ise çoğu işletim sisteminde zaten kurulu; indirilmez, ilk boyamada hazırdır. Popüler font listelerinde bu ikisi yan yana anılır ama maliyetleri aynı değildir. Roboto ya da Poppins kullanmaya karar verdiğinde, kullandığın her ağırlık ve her stil ayrı bir dosya demektir: iki aile, üçer ağırlık, italikleriyle birlikte on iki dosya eder.

Gövde metnini genelde tek bir değişken fontla çözerim; ağırlık geçişleri tek dosyanın içinden geldiği için başlığa ayrı aile açmaya çoğu projede gerek kalmıyor.

Türkçe metinde asıl tuzak

Bir fontun Türkçe göründüğüne bakarak karar verme. Süslü ve gösteri fontlarının önemli bir kısmında ğ, ş, ı ve noktalı İ ya hiç yoktur ya da sonradan, gövdenin geri kalanına uymayan bir çizimle eklenmiştir.

Bu eksiklik boş kutu olarak görünmez, o yüzden gözden kaçar. Tarayıcı sadece o harfleri yedek fonttan alır ve tek bir kelimenin içinde iki ayrı yazı tipi yan yana durur. Kendi sunucunda barındırıyor, dosyayı pyftsubset ya da benzeri bir araçla küçültüyorsan risk ikiye katlanır: latin aralığıyla üretilmiş bir alt küme Türkçe harflerin çoğunu dışarıda bırakır.

Kontrolü otuz saniye sürer. Seçtiğin fontu tarayıcıda açıp içine gerçek bir Türkçe cümle yaz, büyük harfe de çevir, sonra harflere tek tek bak. Iğdır, şişli, öğütücü, İzmir gibi kelimeler eksik ne varsa ortaya çıkarır.

Kaç aile, kaç ağırlık

Bir aile çoğu siteye yeter, iki aile üst sınır olsun. Hiyerarşiyi yeni font ekleyerek değil, boyut, ağırlık ve boşlukla kurarsın. Üçüncü aileyi eklemek istediğini hissettiğin an, aslında ilk ikisinin arasındaki kontrastı yeterince kullanmamış olursun.

Ağırlık sayısında da aynı cimrilik işe yarar. Gövde için bir normal, vurgu için bir kalın; başlıklarda ekstra ağırlık gerçekten farklı görünüyorsa eklenir.

Serif mi, sans-serif mi

Ekranda serif okunmaz iddiası, düşük çözünürlüklü ekranların kaldığı dönemden geliyor. Bugünkü ekranlarda Georgia ya da Merriweather uzun metinde çoğu sans-serif kadar rahat okunur, çünkü belirleyici olan tırnak değil x yüksekliğidir: küçük harflerin gövdesi ne kadar iri, harf aralığı ne kadar açık.

Okunabilirliği asıl belirleyen üç ayar fonttan bağımsız. Gövde boyutunu 16 pikselin altına indirme, satır yüksekliğini 1,5 civarında tut, satır uzunluğunu 45 ile 75 karakter arasında sınırla. Bu üçü yanlışsa dünyanın en iyi fontu metni kurtarmaz; doğruysa font tercihi bir üslup meselesine iner.

Yükleme davranışı ve ölçüm

Font dosyasını WOFF2 olarak sun, eski formatları taşıma. Gövde fontuna font-display: swap ver ki metin fontu beklerken görünmez kalmasın; sadece dekoratif bir başlık fontu için optional daha doğru davranış, gelmezse gelmesin.

Sonra ölç. Tarayıcının ağ sekmesinde fontlara filtre uygula, kaç istek gittiğine ve toplam boyuta bak. Üç dosyadan fazlasını indiriyorsan sorun fontun kendisinde değil, seçimin genişliğindedir; ağırlık silmek, optimizasyon eklentisi kurmaktan hızlı sonuç verir.