Web'de Tipografi ve Okunabilirlik: Pratik Bir Rehber

Bir gövde metni fontu, uzun paragraflarda göz yormaması için orta genişlikte, net harflere sahip olmalı; başlık fontu ise markanın karakterini taşıyabilir, çünkü kısa metinlerde okunabilirlik daha az risk taşır. İkisini aynı fonttan seçmek zorunlu değildir, iki uyumlu font genelde daha iyi çalışır.

Bir hukuk bürosunun sitesinde ince, dekoratif bir font gövde metninde kullanılırsa, sözleşme şartları gibi uzun metinler okunması güç hale gelir; dekoratif font başlıklarda kalıp, gövde metni daha sade bir fontla değiştirilebilir.

Bir tasarımda beş altı farklı font boyutu yerine üç dört seviyeli net bir ölçek (başlık, alt başlık, gövde metni, küçük not) kullanmak hem tutarlılık sağlar hem geliştiriciye net bir kural verir. Ölçek belirlenirken her adım bir öncekinin belirgin şekilde büyüğü ya da küçüğü olmalı; birbirine çok yakın boyutlar (16px ve 17px gibi) göz farkı yaratmaz, yalnız karmaşa ekler.

Bir satırda çok fazla karakter olduğunda göz satır sonunda bir sonraki satırın başını bulmakta zorlanır; çok az karakter olduğunda ise göz sık sık satır değiştirmek zorunda kalır, okuma ritmi bozulur. İyi çalışan aralık, satır başına altmış ila seksen karakter arasıdır; bu geniş ekranlarda metin bloğunun tam genişliğe değil, sınırlı bir sütuna yayılması gerektiği anlamına gelir.

Bir zemin kaplama üreticisinin teknik döküman sayfasında metin tüm ekran genişliğine yayılmışsa, geniş bir monitörde satırlar iki yüz karakteri geçebilir; bu durumda içerik bir sütun genişliğine sabitlenir, geri kalan alan boşluk ya da görsel olarak kullanılır.

Bir font seçilmeden önce başlık ve gövde metninde geçen tüm Türkçe karakterler gerçek metinle test edilmeli, yalnız İngilizce örnek metinle değil. Bazı fontlarda ğ üzerindeki işaret çok küçük çıkar, bazılarında ş'nin altındaki kuyruk kesilmiş gibi görünür; bu detaylar ekran başında büyütülmeden fark edilmez.

• Başlık ve gövde metni gerçek Türkçe içerikle önizlenir
• ı/İ, ş, ğ, ü, ö karakterleri farklı boyutlarda kontrol edilir
• Kalın (bold) ağırlıkta Türkçe karakterlerin bozulmadığı doğrulanır
• Mobilde küçük boyutta okunabilirlik ayrı test edilir

Bazı ziyaretçiler tarayıcı ayarlarından yazı boyutunu büyütür; site bu büyütmeyi engelleyecek şekilde sabit piksel değerleriyle kurulmuşsa bu tercih işe yaramaz. Boyutları esnek birimlerle (rem gibi) tanımlamak, ziyaretçinin kendi ayarının sitede de geçerli olmasını sağlar; bu, hem erişilebilirlik hem de görme zorluğu yaşayan ziyaretçiler için pratik bir adımdır.

Bu esneklik test edilmeden varsayılmamalı; tarayıcı yazı boyutu ayarı yüzde yüz elli gibi büyük bir değere getirilip site yeniden gezilmeli, düğme metinlerinin taşıp taşmadığı, menünün bozulup bozulmadığı kontrol edilmeli. Bir zemin kaplama üreticisinin teknik döküman tablosunda büyütülmüş yazı sütunları birbirine geçiyorsa, tablo genişliği ya da yazı boyutu ölçeği yeniden gözden geçirilir.

Geleneksel kurulumda her font ağırlığı (ince, normal, kalın) ayrı bir dosyadır; değişken font (variable font) tek bir dosya içinde tüm ağırlıkları taşır, tarayıcı ihtiyaç duyduğu ağırlığı bu tek dosyadan üretir. Bu, beş altı ayrı dosya yerine tek indirme demektir.

Bir marka üç dört farklı ağırlık kullanıyorsa, değişken font kurulumu hem toplam dosya boyutunu düşürür hem de tasarımcıya ara ağırlıklar (örneğin normal ile kalın arası bir ton) kullanma esnekliği verir; her tarayıcı destekliyor olsa da eski tarayıcı desteği gerekiyorsa yedek bir kurulum bırakılmalı.

Bir fiyat tablosunda ya da teknik özellik listesinde rakamlar alt alta hizalanmıyorsa, göz karşılaştırma yapmakta zorlanır. Bunun nedeni genelde fontun varsayılan olarak orantılı genişlikte rakam kullanmasıdır; sabit genişlikli rakam ayarı açıldığında her rakam aynı genişliği kaplar, sütunlar düzgün hizalanır.

Bir jeneratör üreticisinin teknik döküman tablosunda güç değerleri hizalanmadan yan yana dururken bu ayar açıldığında tablo anında daha okunur hale gelir; bu, çoğu modern fontta CSS üzerinden tek satırlık bir ayarla açılabilir.

Bu ayar yalnız tablolarla sınırlı değil; fiyat listesi, tarih ve saat gösterimi gibi rakamların yan yana karşılaştırıldığı her yerde aynı fark hissedilir.