Web tipografisi: okunabilir bir site için bilmeniz gereken 6 ayar

Bir web sitesinin içeriğinin neredeyse tamamı yazıdır. Tipografi bu yüzden dekorasyon değil, işin kendisidir.

1. Gövde metni 16 pikselin altına düşmesin

Telefonda 14 piksel metin, okunabilir ama yorucudur. 16-18 piksel aralığı gövde metni için doğru bölgedir. Küçük yazı "zarif" görünür ama kimse okumaz.

2. Satır uzunluğunu 60-75 karakterde tutun

Göz, satır sonundan yeni satırın başına dönerken yerini bulmak zorundadır. Satır çok uzunsa kaybolur, çok kısaysa göz sürekli zıplar.

Geniş ekranda metin sütununu sınırlayın. Metnin 1400 piksel genişliğinde akması, ekranı kullanmak değil okumayı zorlaştırmaktır.

3. Satır aralığı 1.5 civarı olsun

Gövde metninde satır yüksekliği, yazı boyutunun yaklaşık 1.5 katı olmalı. Sıkışık satırlar metni blok hâline getirir ve göz satır atlar.

Başlıklarda tam tersi: büyük yazıda satır aralığı azaltılır, yoksa başlık dağılır.

4. Harf aralığını yalnızca büyük yazıda oynatın

Büyük başlıklarda harfler arası boşluk fazla görünür; hafifçe kısmak (negatif tracking) başlığı toparlar. Küçük yazıda aynı şeyi yapmak okunabilirliği bozar.

Tamamı büyük harf yazılan kısa etiketlerde ise aralığı açmak gerekir.

5. En fazla iki yazı tipi kullanın

Bir başlık fontu, bir gövde fontu yeter. Üçüncüsü neredeyse her zaman gereksizdir ve sayfayı dağıtır.

İki font seçerken birbirine benzemesin — ayrımın belirsiz olması, uyumsuzluktan daha kötü görünür.

6. Türkçe karakterleri kontrol edin

Her yazı tipi ğ, ı, İ, ş, ç desteklemez. Destekleyen ama kötü çizen fontlar da vardır. Font seçerken mutlaka şu cümleyi deneyin: "Pijamalı hasta yağız şoföre çabucak güvendi."

Google Fonts kullanıyorsanız latin-ext alt kümesini yüklemeyi unutmayın; yoksa Türkçe harfler başka bir fonttan düşer ve metin alacalı görünür.

Sık yapılan bir hata

Metni ortalamak. Kısa başlıklarda sorun değil ama iki satırdan uzun paragrafları ortalamak okumayı zorlaştırır — her satırın başlangıcı farklı yerde olur ve göz her seferinde yeniden arar. Paragrafları sola yaslayın.

• #tipografi
• #tasarım
• #okunabilirlik