İçeriğe geç
KTYAPTECH

Rehber

Web sitesinde tipografi: okunabilirliği artıran temel kurallar

Tipografi, bir web sitesinin en çok göz ardı edilen ama okunabilirliği doğrudan etkileyen tasarım unsurudur. Temel kurallar ve yaygın hatalar.

2 dk okumaBaşlangıç seviyesi
Web sitesinde tipografi: okunabilirliği artıran temel kurallar — editoryal kapak görseli

Bir web sitesinin görsel kimliği genellikle renk paletine ve görsellere odaklanılarak tasarlanır, ancak ziyaretçilerin sitede geçirdiği zamanın büyük bölümü metni okumakla geçer. Tipografi kuralları doğru uygulanmadığında, en iyi tasarlanmış sayfa bile okunması yorucu hale gelir.

Temel tipografi kuralları

Web tipografisinde okunabilirliği belirleyen boyut, satır yüksekliği, satır uzunluğu ve kontrast unsurlarını gösteren diyagram
Web tipografisinde okunabilirliği belirleyen dört temel unsur: boyut, satır yüksekliği, satır uzunluğu, kontrast.
UnsurGenel kabul gören aralıkNeden önemli
Gövde metni font boyutu16-18px (masaüstü)Daha küçük boyutlar mobil ve yaşlı kullanıcılar için okumayı zorlaştırır
Satır yüksekliği (line-height)1.4-1.6 × font boyutuÇok sıkışık satırlar gözü yorar, çok geniş satırlar metni birbirinden koparır
Satır uzunluğu45-75 karakterÇok uzun satırlar gözün satır sonunda kaybolmasına neden olur
Metin/arka plan kontrastıEn az 4.5:1 (WCAG AA)Düşük kontrast, özellikle parlak ortamda okumayı zorlaştırır
Web tipografisinde okunabilirliği belirleyen temel unsurlar

Font çifti seçimi

Bir sitede genellikle iki font yeterlidir: başlıklar için karakteristik bir font, gövde metni için yüksek okunabilirliğe sahip sade bir font. Üç veya daha fazla farklı font kullanmak, görsel tutarlılığı bozar ve sayfanın amatör görünmesine neden olabilir.

Hiyerarşi kurmak

Başlık, alt başlık ve gövde metni arasındaki boyut/kalınlık farkı yeterince belirgin olmalı ki kullanıcı sayfayı tarayarak (scan) gezinebilsin. Tüm metinlerin birbirine yakın boyutta olması, hangi bilginin daha önemli olduğunu görsel olarak belirsizleştirir.

Mobilde tipografi

  • Mobil ekranlarda gövde metni boyutunu masaüstünden küçültmek yerine genellikle aynı veya yalnızca hafif küçük tutmak, okumayı kolaylaştırır
  • Satır uzunluğu mobilde doğal olarak kısalır — bu genellikle olumludur, ekstra müdahale gerekmez
  • Dokunma hedefleri (bağlantılar, butonlar) yeterince büyük ve aralıklı olmalı

Sık yapılan hatalar

  • Gövde metnini 13-14px gibi küçük bir boyutta bırakmak (yalnızca görsel olarak 'zarif' görünmesi için)
  • Dekoratif/el yazısı fontları uzun paragraflarda kullanmak (yalnızca kısa başlıklarda kullanılmalı)
  • Tamamı büyük harfle yazılmış uzun paragraflar (okuma hızını belirgin şekilde düşürür)
  • Yetersiz kontrastlı açık gri metin/açık arka plan kombinasyonları

Sonuç

İyi tipografi, fark edilmeyen tipografidir — kullanıcı fontun kendisini değil, içeriği rahatça okuduğunu fark eder. Yukarıdaki temel kurallar, görsel çekicilikten ödün vermeden bu hedefe ulaşmanın pratik yoludur.

Kategoriler

Etiketler

Paylaş

İlgili içerikler