Web Sitesinde Okunabilirlik İçin Yazı Tipi ve Satır Uzunluğu

[eski_toprak]

Web sitesinde yüksek okunabilirlik sağlamak, sadece estetik bir tercih değil; aynı zamanda performans ve erişilebilirlik açısından kritik bir faktördür.
Yazı Tipi Seçimi

• Sistem fontları (Arial, Helvetica, sans-serif) tarayıcı önbelleğinde olduğundan ek ağaçlama yapılmaz.
• Web fontları (@font-face) yüksek kalitede görsel sunar, fakat font-display: swap; kullanılarak başlangıçta fallback gösterilmesi, render‑blocking süresini azaltır.
• Font boyutu 16 px içinde tutulur; 12 px altında çok sık kullanılmamalıdır, çünkü mobil ekranlarda kısaltma gerekir.

Satır Uzunluğu

• 45 – 75 karakter arası satır uzunluğu, gözün kaydırmasını minimumda tutar.
• max-width kullanarak satır genişliğini sınırlamak, hem desktop hem de mobil için vazgeçilmezdir.
• Örneğin, max-width: 70ch; ile 70 karakterden fazla olmayan satırlar oluşur.

Line‑Height

• 1.4 – 1.6 arası line‑height, metni sıkıştırmadan rahat okunabilirlik sunar.
• Çok yüksek line‑height, sayfa yüksekliği artar; çok düşük ise göz yorgunluğuna neden olur.

Performans ve Kaynak Kullanımı

• Web font dosyasının boyutu genellikle 200 – 600 KB arasındadır; çok sayıda font varsa toplam yükleme süresi artar.
• font-display: optional; ile font gecikmeli yüklenebilir ve performans daha da iyileşebilir.

Erişilebilirlik

• WCAG 2.1’e göre minimum kontrast oranı 4.5:1 olmalıdır.
• em veya rem ölçü birimleri kullanarak, kullanıcıların tarayıcıda büyütme yapmak istemesi durumunda metnin ölçeklenmesi sağlanır.

Pratik İpucu

• font-family: "Open Sans", Arial, sans-serif; gibi fallback zincirleri kurarak, ilk önce web font yüklenir; yoksa sistem fontuna geçilir.
• preload ile kritik fontları önceden yüklemek, render‑blocking sürelerini azaltır.

Soru
Bir sayfa tasarlarken, yazı tipi ve satır uzunluğunu optimize ederken maliyet, kaynak tüketimi ve kullanıcı deneyimini en iyi dengeleyen strateji sizce nedir?

İlgili konular​

• Web Tabanlı Ton & BPM Bulucu Arayüzü Tasarımında Dikkat Edilmesi Gerekenler