Ekranda okunan yazıyı tasarlamak: arayüz tipografisinin yöntemi

Arayüz tipografisi basılı tipografiden nasıl ayrılır?

Arayüz tipografisi, ekranda işlev gören metnin seçimi ve düzenidir: düğme etiketi, form alanı, tablo hücresi, bildirim, menü. Bu metin edebi bir akış içinde okunmaz; taranır, karşılaştırılır, hızla bulunur. Dolayısıyla amaç güzel görünmekten önce, kullanıcının doğru yere doğru sürede bakmasını sağlamaktır.

Basılı işte sabit bir sayfa ve bilinen bir okuma mesafesi varken arayüzde her şey değişkendir: ekran boyutu, piksel yoğunluğu, kullanıcının yazı boyutu ayarı, aydınlık ya da karanlık tema, hatta ortam ışığı. Tipografi kararı bu değişkenlerin hepsinde ayakta kalmalıdır. Bu yüzden arayüz tasarımcısı sabit ölçü yerine oranlarla ve kurallarla düşünür.

İyi tipografinin görevleri bellidir: bilgiyi hiyerarşiye dizmek, okumayı yormamak ve markanın sesini taşımak. Bu görevlerin sırası da önemlidir; marka sesi hiyerarşiyi ya da okunabilirliği bozuyorsa vazgeçilen marka sesi olmalıdır.

Yazı tipi nasıl seçilir?

Seçim ölçütleri tasarım zevkinden önce işlevseldir: • Okunabilirlik: Küçük boyutta harfler birbirine karışıyor mu? Büyük I, küçük l ve rakam ile büyük O harfi gibi benzer karakterler ayırt edilebiliyor mu? • Türkçe karakter desteği: ç, ğ, ı, İ, ö, ş, ü harfleri yazı tipinde eksiksiz ve tasarımı bozmadan çizilmiş mi? Noktalı büyük İ ve noktasız küçük ı özellikle sınanmalıdır. • Ağırlık ve stil çeşitliliği: Başlık, gövde ve vurgu için yeterli ağırlık seçeneği var mı? • Lisans: Ürünün kullanım biçimine, yani web, mobil uygulama ya da gömülü kullanım, lisans izin veriyor mu? • Performans: Dosya boyutu ve yükleme davranışı sayfa hızını etkiler.

Kural olarak arayüzde bir ya da birkaç yazı tipi ailesi yeter. Sistem yazı tipleri hızlıdır ve platformla uyumludur; özel yazı tipi marka kimliği katar ama yükleme maliyeti ve lisans yükü getirir. Başlık ve gövde için ayrı aile seçilecekse karşıtlık belirgin olmalıdır, benzer ama aynı olmayan farklı aileler birbirini bozar. Kararsızsanız tek aileyi farklı ağırlıklarla kullanmak güvenli bir başlangıçtır.

Tip ölçeği: boyutları rastgele değil sistemle belirlemek

Tip ölçeği (type scale), kullanacağınız yazı boyutlarının önceden tanımlanmış kümesidir. Gövde metni tabanıdır; başlık düzeyleri bu tabana belirli bir oranla büyür, yardımcı metinler biraz küçülür. Oran tutarlı olursa ekranlar arasında hiyerarşi kendiliğinden oluşur ve tasarımcı her yeni ekranda boyut tartışmak zorunda kalmaz.

Ölçeği kurarken izlenecek adımlar şunlardır. Önce gövde metninin okunabilir taban boyutunu belirleyin. Sonra başlık düzeylerini oransal olarak türetin ve her düzey için satır yüksekliği, harf aralığı ve ağırlık tanımlayın. Ardından ölçeği tasarım aracında metin stilleri, koda ise değişken (token) olarak aktarın. Ölçekte olmayan bir boyutun kullanılması istisna sayılmalı ve gerekçelendirilmelidir.

Boyutları piksel yerine kullanıcının yazı boyutu ayarına saygı gösteren göreli birimlerle tanımlamak, erişilebilirlik açısından da önemlidir. Kullanıcı tarayıcıda yazıyı büyüttüğünde düzen çökmemelidir.

Okunabilirliği belirleyen kararlar

Okunabilirlik tek bir ayar değil, birbirini etkileyen küçük kararların toplamıdır.

Satır uzunluğu: Çok uzun satır gözün bir sonraki satırı bulmasını zorlaştırır, çok kısa satır ritmi böler. Uzun metinde satır genişliği sınırlandırılmalıdır; bu yüzden geniş ekranda metin bloğunu ekranın tamamına yaymak yerine okunabilir bir sütunda tutmak gerekir.

Satır yüksekliği: Gövde metninde satırlar arası boşluk, harf boyuna göre cömert olmalı; başlıklarda ise sıkılaşmalıdır. Büyük başlığı gövdeyle aynı oranda aralıklamak başlığı dağınık gösterir.

Kontrast: Metin ile zemin arasındaki kontrast oranı erişilebilirlik kılavuzlarının tanımladığı eşiklere göre denetlenmelidir. Açık gri üzerine gri yazı şık görünür ama okunmaz. Karanlık temada saf beyaz yazı yoğun parlaklık yaratabilir; hafifçe yumuşatılmış bir ton daha rahat okunur.

Hizalama: Uzun metinde sola hizalama, tablolarda sayıların sağa ya da ondalık noktasına hizalanması okumayı hızlandırır. Tamamen yaslı (justify) metin dar sütunlarda kelime aralıklarını bozar.

Hiyerarşi ve bilgi yoğunluğu: örnek bir yönetim paneli ekranı

Örneğin bir yönetim panelinde tablo, filtre çubuğu, sayfa başlığı ve eylem düğmeleri bir arada bulunuyor. Her şey aynı boyut ve ağırlıkta yazıldığında gözün tutunacağı bir yer kalmaz. Çözüm, birkaç düzeyle yetinmektir: sayfa başlığı, bölüm başlığı, gövde, yardımcı metin. Düzeyleri ayırmak için boyutun yanında ağırlık ve renk tonu da kullanılır; yardımcı metin hem biraz küçük hem de biraz soluk olur, ancak kontrast eşiğinin altına düşmez.

Tabloda yoğunluk arttıkça yazı boyutunu küçültmek cazip gelir. Oysa okunabilirliği korumanın yolu satır yüksekliğini ve sütun aralığını ayarlamak, gereksiz sütunları gizlemek ve sayısal veride eş genişlikli rakam sağlayan bir yazı tipi özelliği kullanmaktır. Rakamlar alt alta düzgün hizalanınca karşılaştırma kolaylaşır.

Büyük harfle yazılmış etiketler az kullanılmalıdır. Türkçede büyük harfe çevirirken noktalı ve noktasız i ayrımı bozulabilir; etiketleri baştan doğru büyük harfle yazmak ya da büyük harfe dönüştürmeyi dil ayarına duyarlı yapmak gerekir.

Erişilebilirlik, performans ve belgeleme

Tipografi kararı erişilebilirliği doğrudan etkiler. Disleksi ve görme zorluğu olan kullanıcılar için benzer karakterlerin ayırt edilebilirliği, yeterli harf aralığı ve metin büyütme uyumu belirleyicidir. Metin içine gömülmüş görseller yazı boyutu ayarından etkilenmez; mümkün olduğunda gerçek metin kullanın.

Performans tarafında özel yazı tipi dosyalarının boyutu ve yüklenirken görünen geçici yazı tipi davranışı kullanıcının ilk izlenimini etkiler. Yalnızca gerçekten kullanılan ağırlıkları yüklemek, Türkçe karakter kapsamı olan alt kümeyi seçmek ve yazı tipi yüklenene kadar yakın görünümlü bir yedek tanımlamak düzen kaymasını azaltır.

Son olarak karar belgelenmelidir. Hangi aile, hangi ölçek, hangi satır uzunluğu sınırı ve hangi kontrast kuralı kullanılıyor? Bu bilgi tasarım sisteminde ya da stil kılavuzunda yazılı değilse, ürün büyüdükçe farklı ekipler farklı kararlar verir ve arayüz tutarsızlaşır.

Sık yapılan hatalar

• Çok fazla yazı tipi ailesi ve ağırlık kullanmak; sayfa dağınık ve yavaş olur.
• Süslü başlık yazı tipini gövdede kullanmak; uzun okumada yorar.
• Türkçe karakterleri sınamadan yazı tipi seçmek; ı, İ ya da ğ eksik çizilebilir ya da yedek yazı tipine düşebilir.
• Hiyerarşiyi yalnızca renkle kurmak; renk körlüğü olan kullanıcı farkı göremez.
• Gri tonlarda kontrastı tasarım aracında gözle değerlendirmek; ölçmeden karar vermeyin.
• Boyutu piksel olarak sabitleyip kullanıcının yazı boyutu tercihini yok saymak.
• Prototipi yalnızca büyük monitörde incelemek; gerçek cihazda küçük ekranda okunabilirlik farklı çıkar.

Mindset programlarında nerede çalışılır?

Arayüz Tipografisi ve Okunabilirlik eğitimi, arayüz tipografisinin temelleri, yazı tipi seçimi ve lisanslama, tip ölçeği kurulumu, okunabilirlik kararları, hiyerarşi ve bilgi yoğunluğu ile erişilebilirlik, performans ve belgeleme modüllerinden oluşur.