Marka kimliği çoğu zaman logoyla anılır, oysa bir markayı ekranda taşıyan asıl unsurlar tipografi ölçeği ve renk sistemidir. Ziyaretçi logoyu bir kez görür; başlıkları, gövde metnini ve düğme renklerini sayfa boyunca yüzlerce kez görür. Bu iki sistem tutarlı ve erişilebilir kurulmadığında marka, ne kadar iyi çizilmiş olursa olsun dağınık görünür.
Modüler ölçek: keyfî boyutlar yerine oran
Tipografi ölçeği, metin boyutlarının rastgele değil, bir orana göre türetilmesidir. Bir taban boyut seçilir (ekranda genellikle 16 piksel civarı) ve bir oranla çarpılarak üst basamaklar üretilir. Yaygın oranlar şunlardır: 1,125 (majör ikili) çok sakin ve bilgi yoğun arayüzler için; 1,25 (majör üçlü) genel amaçlı ve dengeli; 1,333 (dörtlü) editoryal ve iddialı; 1,5 ve üzeri ise ancak çok az basamağın kullanıldığı, kahraman başlıklı düzenlerde okunaklı kalır.
Pratikte altı ila sekiz basamak yeterlidir: gövde, küçük metin, iki alt başlık, iki başlık ve bir de kahraman boyutu. Basamak sayısı arttıkça ekipler birbirine çok yakın iki boyut arasında sürekli tereddüt eder ve tutarlılık kaybolur. Basamakları isimlendirin; piksel değeriyle değil rolüyle çağırın. Böylece ölçeği ileride değiştirmek, yüzlerce ekranı elle gözden geçirmek anlamına gelmez.
Duyarlı tasarımda her basamağı ayrı ayrı kesme noktasına bağlamak yerine, akışkan bir aralık tanımlamak daha az bakım gerektirir. Modern CSS'te alt sınır, tercih edilen değer ve üst sınır birlikte verilebilir; böylece başlık küçük ekranda taşmaz, büyük ekranda cılız kalmaz. Yalnız akışkanlığı gövde metninde abartmayın: okuma boyutunun ekrandan ekrana belirgin değişmesi, kullanıcı için hiçbir fayda üretmez.
Satır uzunluğu, satır aralığı ve ritim
Okunabilirliğin en çok göz ardı edilen değişkeni satır uzunluğudur. Uzun metinlerde satır başına yaklaşık 45-75 karakter aralığı, tipografi literatüründe yerleşik bir rahat okuma bandıdır. Bu bandın altına inildiğinde göz sürekli satır atlar, üstüne çıkıldığında satır sonundan bir sonraki satır başına dönmek zorlaşır. Metin sütunlarını piksel yerine karakter birimiyle sınırlamak bu kontrolü kolaylaştırır.
Satır aralığı ile boyut arasında ters bir ilişki vardır: boyut büyüdükçe göreli satır aralığı azalır. Gövde metninde 1,5 civarı rahat bir değerdir; büyük başlıklarda 1,1-1,2 aralığı daha derli toplu durur. Harf aralığında da aynı mantık geçerlidir; büyük başlıklarda hafif negatif aralık sıkı ve editoryal bir his verirken, küçük ve büyük harfle yazılmış etiketlerde pozitif aralık okunabilirliği artırır.
Türkçe içerik üretiyorsanız yazı tipi seçiminde bir kontrol daha yapın: ğ, ş, ı ve özellikle noktalı büyük İ karakterleri her ailede iyi çizilmez. Yazı tipini yerel barındırıp yalnızca gerekli karakter aralığını içeren bir alt küme kullanmak hem bu sorunu görmenizi hem de dosya boyutunu düşürmenizi sağlar.
Kontrast: markanın erişilebilirlikle buluştuğu yer
WCAG 2.1 ve 2.2, AA düzeyi için normal boyuttaki metinde en az 4,5:1, büyük metinde (yaklaşık 24 piksel ve üzeri, ya da kalın 18,66 piksel ve üzeri) en az 3:1 kontrast oranı ister. Çoğu ekibin atladığı madde ise metin dışı ögelerdir: form alanı kenarlıkları, ikonlar, grafik göstergeleri ve odak halkası gibi arayüz bileşenleri de komşu renklere göre en az 3:1 oranını sağlamalıdır. İnce açık gri bir kenarlıkla çizilmiş form alanı estetik görünebilir ama düşük ışıkta veya düşük kaliteli bir ekranda kaybolur.
Marka renkleri bu eşikleri her zaman kendiliğinden karşılamaz. Canlı bir turuncu, beyaz zemin üzerinde metin olarak nadiren yeterlidir. Çözüm markadan vazgeçmek değil, rol ayrımı yapmaktır: vurgu rengini geniş yüzeylerde ve grafik ögelerde kullanın, o rengin metin için kullanılan koyulaştırılmış bir sürümünü ayrıca tanımlayın. Yani her marka rengi için ekranda birden fazla basamak üretin ve hangisinin metin, hangisinin zemin rolü üstlendiğini sistemde açıkça belirtin.
Koyu tema bu işi iki kat zorlaştırır. Açık temada geçerli bir çift, ters çevrildiğinde sıklıkla eşiğin altına düşer. Bu yüzden kontrast kontrolünü tema geçişinden sonra tekrarlayın. Ayrıca koyu zeminde saf beyaz metin kullanmak, parlama ve bulanıklaşma hissi yarattığı için genelde hafif kırılmış bir beyaz tercih edilir.
Bilgiyi yalnızca renge yüklemeyin
Kontrast kadar önemli bir kural daha var: rengi tek bilgi taşıyıcısı yapmayın. Hata durumunu yalnızca kırmızı kenarlıkla, zorunlu alanı yalnızca renkli bir yıldızla, grafikteki seriyi yalnızca renkle ayırmak, renk körlüğü olan kullanıcılar için bilgiyi yok eder. Metin etiketi, ikon veya desen ekleyerek ikinci bir işaret verin. Bu ilke aynı zamanda siyah beyaz çıktı alan, ekran parlaması altında çalışan ya da renk ayarları bozuk cihaz kullanan herkese yarar.
Tipografi ölçeği ve renk sistemini tanımladıktan sonra ikisini de tasarım token'ı olarak sabitleyin. Böylece marka kılavuzu bir sunum dosyasında kalmaz, doğrudan üretime bağlanır. Bu kurgunun uçtan uca nasıl işlediğini marka kimliği hizmetimiz sayfasında ayrıntılandırıyoruz.
