Web Sitesinde Yazı Tipi ve Okunabilirlik: Boyut, Satır ve Kontrast

Kısa cevap: Okunabilir bir web sitesinde gövde metni mobilde ve masaüstünde rahat okunacak boyuttadır, satırlar ne çok uzun ne çok kısadır, metin ile arka plan arasında yeterli kontrast vardır. Genellikle gövde metni için 16 piksel ve üzeri, satır aralığı için yazı boyutunun yaklaşık 1,5 katı, satır uzunluğu için ise satır başına yaklaşık 50–75 karakter önerilir. Erişilebilirlik yönergesi WCAG, normal metinde en az 4,5:1, büyük metinde en az 3:1 kontrast oranını hedefler. Az sayıda, iyi okunan yazı tipi kullanmak ve fontları hızlı yüklemek hem okuru hem sayfa hızını korur.

Yazı tipi nasıl seçilir?

• Türkçe karakter desteği: Seçilen yazı tipinde ğ, ş, ı, İ gibi harflerin tüm kalınlıklarda doğru göründüğü kontrol edilir.
• Sade gövde fontu: Uzun metinlerde açık harf formlarına sahip, ekranda net görünen yazı tipleri tercih edilir; süslü fontlar yalnızca başlık ya da logo için kullanılır.
• Az çeşit: Genellikle bir ya da iki yazı ailesi ve birkaç kalınlık yeterlidir; her ek font sayfayı yavaşlatır.
• Sistem fontu seçeneği: Hız öncelikliyse cihazın kendi yazı tipleri de kullanılabilir.

Boyut, satır ve boşluk ayarları

• Gövde metni: Mobilde küçültülmez; kullanıcı yakınlaştırmadan okuyabilmelidir.
• Satır uzunluğu: Geniş ekranlarda metin alanı sınırlandırılır; çok uzun satırlar gözün bir sonraki satırı bulmasını zorlaştırır.
• Satır aralığı ve paragraf: Paragraflar kısa tutulur, paragraflar arasında belirgin boşluk bırakılır.
• Başlık hiyerarşisi: H1, H2 ve H3 başlıkları boyut ve kalınlıkla açıkça ayrılır; başlıklar yalnızca görünüş için değil içerik yapısı için kullanılır.
• Hizalama: Uzun metinler sola hizalanır; iki yana yaslama kelime aralarında düzensiz boşluklar oluşturabilir.

Kontrast ve yükleme hızı

1. Açık gri üzerine gri gibi düşük kontrastlı renk çiftlerinden kaçınılır; renkler bir kontrast ölçüm aracıyla kontrol edilir.
2. Görsel üzerine yazılan metinlerde okunabilirliği korumak için koyu bir katman ya da düz arka plan kullanılır.
3. Bağlantılar yalnızca renkle değil, alt çizgi gibi ek bir işaretle de ayırt edilir.
4. Fontlar modern WOFF2 biçiminde, yalnızca gereken kalınlıklar ve karakter setleriyle yüklenir.
5. Font yüklenirken metnin görünmez kalmaması için yedek yazı tipiyle gösterim ayarlanır.

Engelli kullanıcılar için genel kuralları web sitesi erişilebilirliği, font ve dosya yükünü web sitesi hız optimizasyonu, tipografisi güçlü tema seçimini WordPress tema seçimi yazımızda anlattık.

Sık sorulan sorular

Web sitesinde kaç farklı yazı tipi kullanılmalı?

Çoğu kurumsal site için başlık ve gövde metni olmak üzere en fazla iki yazı ailesi yeterlidir. Daha fazla font hem görsel bütünlüğü bozar hem de sayfa yükünü artırır.

Google Fonts kullanmak siteyi yavaşlatır mı?

Dış kaynaktan çok sayıda font ve kalınlık yüklemek sayfayı yavaşlatabilir. Yalnızca gereken kalınlıkları seçmek ya da fontları kendi sunucunuzdan sunmak bu etkiyi azaltır. Ölçüm yöntemlerini teknik SEO kontrol listesi yazımızda ele aldık.

Okunabilirlik SEO ve yapay zeka görünürlüğünü etkiler mi?

Dolaylı olarak evet. Kolay okunan, başlıklarla düzenlenmiş metin kullanıcıların sayfada kalmasını kolaylaştırır ve içeriğin yapısının arama motorları ile yapay zeka sistemleri tarafından anlaşılmasına yardımcı olur. Ayrıntılar yapay zeka aramalarında görünürlük yazımızda.