HD Ekranlarda Yazı Tipi Seçimi: Serif mi Sans-Serif mi Sorusunun Sonu
Sans-serif önerisi ekran kaynaklı bir zorunluluktu: düşük piksel yoğunluğunda serif uçları bulanıklaşıyordu. 220 PPI ve üzeri ekranlarda o zorunluluk kalktı. Geriye kalan soru artık hangi ailenin daha okunaklı olduğu değil, fontu hangi puntoda, hangi alfabe desteğiyle ve nasıl yüklediğiniz.
Eski tavsiye kendi içinde çelişiyor
Konuyla ilgili metinlerin çoğu iki şeyi yan yana söyler: yüksek çözünürlüklü ekranlarda serif ile sans-serif arasındaki fark neredeyse yok oldu, ama uzun metinde serif, başlıkta sans-serif kullanın. İkisi aynı anda doğru olamaz. Fark ortadan kalktıysa bu ayrım da bir okunabilirlik kuralı değil, üslup tercihidir; Times New Roman ile Helvetica arasındaki seçim marka kararıdır, erişilebilirlik kararı değil.
Pratik sonucu şu: font ailesini beğeninize göre seçin, sonra asıl işe girişin.
Aile yerine bakılacak dört ölçü
Gövde metnini 16 pikselin altına indirmeyin. Mobilde 17-18 piksel daha rahat okunur ve kimse yakınlaştırmak zorunda kalmaz.
Aynı puntoda iki font tamamen farklı büyüklükte görünebilir, çünkü belirleyici olan x-yüksekliği: küçük harflerin gövde yüksekliği. Garamond 16 piksel küçücük durur, Verdana aynı değerde iri. Bir fontu değiştirdiğinizde punto değerini de yeniden ayarlamanız gerekiyor, eski değeri devralmayın.
Satır uzunluğunu 60-75 karakter bandında tutun, satır aralığını gövde metninde 1,5 civarına çekin. Geniş ekranda tam genişlik metin bloğu, yüksek çözünürlüğün getirdiği en yaygın hata. Ekran büyüdükçe metin sütunu değil, çevresindeki boşluk büyümeli.
Türkçe metinde asıl tuzak alfabe desteği
Font seçerken beğenilen örnek genellikle İngilizce bir pangram üzerinde görülür ve ğ, ş, ı, İ karakterlerinin o ailede nasıl durduğu hiç test edilmez. Google Fonts'tan yalnızca latin alt kümesini çektiğinizde bu harfler eksik kalır ve tarayıcı onları yedek fonttan doldurur; sonuçta aynı cümlede iki farklı yazı tipi görünür. latin-ext alt kümesini de istemeniz gerekiyor.
İkinci tuzak büyük harfe çevirmede. Menüde ya da başlıkta text-transform: uppercase kullanıyorsanız, tarayıcı "i" harfini varsayılan olarak "I" yapar; Türkçede doğrusu "İ". Bunu düzeltmek için ayrı bir eklentiye gerek yok, kök elemana lang="tr" yazmanız yeterli. Tarayıcılar büyük harf eşlemesini dile göre uyguluyor.
Fontu nasıl servis ettiğiniz, hangisini seçtiğinizden daha çok fark yaratıyor
Fontu kendi sunucunuzdan servis etmeyi Google Fonts'tan çekmekten daha güvenilir buluyorum. Sebebi ideolojik değil: tarayıcı önbelleği 2020'den beri siteye göre bölünmüş durumda, yani ziyaretçinin başka bir sitede indirdiği font sizin sitenizde yeniden iniyor. Paylaşılan önbellek avantajı ortadan kalkınca geriye üçüncü bir alan adına yapılan DNS ve TLS el sıkışması kalıyor, o da ilk açılışa doğrudan gecikme olarak yansıyor.
Ağırlık sayısını üçle sınırlayın: normal, kalın, bir de italik. Dört beş ağırlığa ihtiyaç duyuyorsanız değişken font sürümünü tek dosyada alın. Font dosyalarına font-display: swap ekleyin, böylece font inene kadar metin görünmez kalmaz, yedek fontla okunur.
Bu üç ayar, serif ile sans-serif arasında haftalarca gidip gelmekten daha çok kazandırır. Aile seçimi zevk meselesi; punto, alfabe desteği ve yükleme davranışı ölçülebilir.