Web Tipografisi: Font Boyutu, Satır Aralığı ve Kontrast

Bir metnin okunup okunmayacağını çoğu zaman içeriği değil, satır aralığıyla kontrast oranı belirler. Tipografi bu yüzden sayfanın süsü değil, arayüzün kendisidir. İşin iyi tarafı, okunabilirliği belirleyen sayıların çoğu bellidir ve tahmin gerektirmez; kötü tarafı, bu sayıların Türkçe kaynaklarda sık sık yanlış aktarılması.

Serif ve sans-serif arasındaki fark neyi çözer

Serif fontlar harflerin uçlarında küçük tırnaklar taşır (Georgia, Times New Roman), sans-serif olanlar taşımaz (Arial, Helvetica). Ekranda okunabilirliği belirleyen şey bu tırnaklar değil, x yüksekliği: küçük harflerin gövde boyunun büyük harfe oranı. Georgia ekranda iyi çalışır çünkü x yüksekliği geniştir, tırnaklı olduğu için değil. "Ekranda sans-serif, baskıda serif" kuralı düşük çözünürlüklü ekranlardan kalma bir alışkanlıktır, piksel yoğunluğu artınca dayanağı büyük ölçüde kalmadı.

Boyut, hiyerarşi ve o "2,5 kat" meselesi

Gövde metni için başlangıç noktası 16 piksel. Gövde metnini bunun altına indirmem; 14 piksel hâlâ yaygın ama masaüstünde bile göz kıstırıyor, küçük ekranda tamamen tuzak.

Başlık ölçüsü için dolaşan "gövdenin 2,5 katı" oranı, 36-38 piksel başlık ile 14-16 piksel gövdenin ortalamasından çıkarılmış bir sayı. Uçları eşleştirin, çarpan 2,25 ile 2,71 arasında geziniyor. Yani sabit bir kural değil, bir aralığın ortası. Tek çarpan ezberlemek yerine modüler ölçek kurun: 16'dan başlayıp her adımda 1,25 ile çarpın, elinizde 16, 20, 25, 31, 39 dizisi olur. Diziyi h4'ten h1'e doğru dağıttığınızda ara başlıklar da kendiliğinden yerine oturur.

Satır aralığı ve satır uzunluğu

Satır aralığını birimsiz yazın: line-height: 1.5. Bu, 16 piksellik metinde 24 piksele denk gelir, ama asıl kazanç oran olarak miras alınmasıdır. 24px yazarsanız içindeki daha büyük fontlu bir eleman da 24 piksele sıkışır ve satırları birbirine girer.

Satır uzunluğunda 75-85 karakter aralığını sık görürsünüz, fazla geniş. Bringhurst'ten bu yana tekrarlanan aralık 45-75 karakter, 66 civarı ideal sayılır. Türkçe kelime ortalaması İngilizceden uzun olduğu için üst sınıra yaklaşmak makul, ama 85 karakterde göz satır sonundan bir sonraki satırın başına dönerken hedefi kaçırmaya başlar. CSS'te ch birimi işi kolaylaştırır: max-width: 68ch. Ayrıntı için MDN'in metin biçimlendirme bölümü iyi bir başlangıç.

Kontrast oranı: 3:1 yeterli değil

"W3C en az 3:1 ister" cümlesi eksik bir aktarım. WCAG 2.1'in AA seviyesi normal gövde metni için 4,5:1 ister. 3:1 eşiği yalnızca büyük metinde (24 piksel, kalın yazılmışsa 18,66 piksel) ve arayüz bileşenlerinin sınırlarında geçerlidir. AAA seviyesine çıkmak isterseniz eşik 7:1.

Bu fark pratikte şuna benziyor: beyaz zeminde #767676 grisi 4,54:1 verip geçer, bir ton açığı olan #777777 4,48:1'de kalıp kalır. Gözünüz iki griyi ayırt edemez, denetim aracı eder.

Ters tarafı da var. Saf siyahın beyaz üstünde 21:1 vermesi onu otomatik olarak iyi bir seçim yapmaz, uzun metinlerde bu parlaklık yorucu bulunur. Gövde rengini #1a1a1a civarına çekmek oranı 17:1'in altına düşürmez, yani konforu erişilebilirlikten ödün vermeden alırsınız.

Türkçe karakterler ve font yükleme

Google Fonts üzerinden bir font eklerken varsayılan latin alt kümesiyle yetinirseniz Türkçe kırılır. ğ, Ğ, ş, Ş ve İ harfleri o aralıkta yok, latin-ext içinde. Eksik olduklarında tarayıcı sadece o harfleri yedek fonttan çizer ve aynı kelimenin içinde iki ayrı font görürsünüz. Bağlantıya latin-ext eklemek sorunu kapatır.

Yükleme davranışı ayrı bir konu. font-display: swap vermezseniz tarayıcı, font inene kadar metni üç saniyeye varan bir süre görünmez tutabilir. swap ile metin yedek fontla hemen çıkar, font gelince yerini alır. Takas anında düzenin zıplamasını istemiyorsanız yedek fontu @font-face içinde size-adjust ile asıl fontun metriklerine yaklaştırın.

Bir de ağırlık sayısı var: yüklediğiniz her kalınlık ayrı bir dosya demek. 400 ve 700 çoğu siteye yeter. Gerçekten daha fazlasını kullanacaksanız fontun değişken sürümü hepsini tek dosyada taşır.

Ölçeklenme ve küçük ekranlar

Boyutları rem ile verin. rem, kök elemanın font boyutuna göre hesaplanır ve kullanıcı tarayıcı ayarından yazıyı büyüttüğünde onunla birlikte büyür. Piksel büyümez, o ayarı sessizce yok sayar.

Başlıkları ekran genişliğiyle akıtmak isterseniz clamp() işinizi görür: clamp(1.75rem, 1.2rem + 2.5vw, 2.75rem). Ortadaki ifadenin rem'li bir parçası olması şart, çünkü yalnızca vw ile yazılmış metin kullanıcı yakınlaştırma yaptığında hiç büyümez.

Son olarak sahada çok görülen küçük bir davranış: iOS Safari, font boyutu 16 pikselin altında olan bir form alanına dokunulduğunda sayfayı kendiliğinden yakınlaştırır. Input'lara 16 piksel verdiğinizde o zıplama kaybolur.