Arayüz Tipografisi: Ölçü, Satır Uzunluğu ve Türkçe Ayrıntılar
Tipografi tartışmaları genelde font seçiminde tıkanır: hangi aile, hangi karakter, marka neyi çağrıştırsın. Oysa ekranda okumayı kolaylaştıran ya da zorlaştıran şeylerin çoğu ölçüdür. Satır uzunluğu, satır yüksekliği, harfin gerçekte kaç piksel göründüğü. Font adı bunların yanında ikinci sırada kalır.
Punto yanıltır, x yüksekliği yanıltmaz
Aynı punto iki fontta aynı büyüklük demek değildir. 16 piksel Verdana ile 16 piksel Times New Roman'ı yan yana koyun: Verdana gözle görülür biçimde daha iri durur, çünkü küçük harflerin gövde yüksekliği (x yüksekliği) daha fazladır. Punto, harfin değil, harfin içine yerleştiği kutunun ölçüsü.
Pratik sonucu şu: bir fonttan diğerine geçerken punto değerini sabit tutmak, algılanan boyutu sabit tutmaz. Yeni fontu eskisiyle aynı irilikte göstermek için genelde bir iki piksel oynamak gerekir. Bu ayarı yalnızca başlıklara bakarak vermek de en sık görülen hata; başlıkta fark etmeyen bir kayma, uzun bir gövde metninde okuma hızına yansır.
Tipografinin dönüşüm oranını artırdığı iddiası bu yüzden temkinli okunmalı. Okunmayan bir metni okunur hale getirmek elbette işe yarar. Ama bir satın alma akışındaki değişimi font ailesine bağlamam; o akışta aynı anda değişen onlarca şey vardır ve font bunların en zayıfıdır.
45-75 karakter kuralı telefonda tersine döner
Satır uzunluğu için verilen klasik aralık 45 ila 75 karakter. Bu aralık basılı metinden ve geniş ekrandan geliyor. Orada asıl risk satırın fazla uzaması: göz satırın sonundan bir sonrakinin başına dönerken yerini kaybediyor.
Telefonda böyle bir risk yok. 390 piksel genişliğinde bir ekranda iki yana 16'şar piksel boşluk bırakınca metne 358 piksel kalır. 16 piksellik bir sans serifte ortalama karakter genişliği kabaca 8 piksel olduğuna göre satıra yaklaşık 45 karakter sığar, yani aralığın tam alt sınırı. Erişilebilirlik gerekçesiyle sık verilen "gövde metnini 18 piksele çıkarın" tavsiyesini uyguladığınızda satır 40 karakterin altına iner ve aralığın dışına çıkar.
Yani iki yaygın tavsiye küçük ekranda birbiriyle çelişiyor. Çözüm satırı daha da kısaltmak değil. max-width: 65ch gibi bir sınır masaüstünde gerçekten koruyucudur, telefonda hiçbir şey yapmaz; oradaki tek kaldıraç punto ile kenar boşluğu arasındaki takas. İkisini birden büyütecek yer yok.
Kaç font değil, kaç dosya
"En fazla iki üç font kullanın" tavsiyesi doğru ama yanlış birimden konuşuyor. Tarayıcı aile indirmez, dosya indirir. Bir aileden düz, italik, yarı kalın ve kalın kesitleri kullanıyorsanız dört dosya iner. İki aile yaparsanız sekiz. Tasarım dosyasında iki font görünürken ağda sekiz istek oluşur.
Değişken fontlar bu tabloyu değiştirdi: ağırlık ekseninin tamamı tek dosyada gelir ve 300 ile 700 arasındaki her değer ek indirme maliyeti olmadan kullanılabilir. Üç farklı ağırlığa ihtiyaç duyan bir tasarımda yol budur.
Yükleme davranışını da açıkça belirtin. font-display: swap tanımlanmamışsa tarayıcı font inene kadar metni görünmez tutabilir ve kullanıcı boş bir alana bakar. Sistem fontuyla açılıp sonra özel fonta geçmek, birkaç saniye hiç metin göstermemekten iyidir.
Türkçe metnin iki ayrıntısı
Eksik glif sessizce bozar
Fontu kendiniz barındırıp alt küme oluşturuyorsanız ya da seçtiğiniz aile Latin Extended-A kapsamıyorsa ğ (U+011F), ş (U+015F) ve ı (U+0131) eksik kalır. Sonuç çökme değil, sessiz bir bozulma: sayfanın çoğu seçtiğiniz fontla, birkaç harf tarayıcının yedek fontuyla çizilir. Aynı kelimenin içinde harf değiştirir. Bunu tasarımcının ekranında görmek zordur, kullanıcının ekranında gözden kaçmaz.
Font seçerken deneme metnini İngilizce bırakmayın. "Şişli'de yağmurlu bir öğle" gibi Türkçeye özgü harflerin hepsini içeren kısa bir dize, aday fontları birkaç saniyede eler.
Büyük harfe çevirmek dil bilgisi ister
text-transform: uppercase uygulanan "istanbul" kelimesi, sayfanın dili belirtilmemişse "ISTANBUL" olur. HTML kökünde lang="tr" varsa tarayıcı Türkçe kurallarını uygular ve sonuç "İSTANBUL" olur; küçültmede de I harfi ı'ya döner. Menü ve buton etiketlerini CSS ile büyütmek yaygın olduğuna göre, tek öznitelikle çözülen ama sitenin her sayfasında görünen bir hatadan söz ediyoruz.
Hiyerarşi az sayıda karar demektir
Başlık, alt başlık, gövde, yardımcı metin. Dört kademe çoğu arayüze yeter ve kademeler arasındaki fark gözle ayırt edilebilecek kadar açık olmalı. 16 ile 17 piksel iki ayrı kademe değil, aynı kademenin tutarsız iki uygulamasıdır. Ölçeği tasarımın başında sabitlemek, sonra her yeni ekranda punto kararını yeniden vermemek; tipografide alınabilecek en ucuz ve en uzun ömürlü önlem bu.