Web Tipografi Klavuzu

1991 senesinde Tim Berners-Lee anahtarı çevirdiği andan itibaren Web için Tipografi temelleri atılmaya başlamıştır. IE1.0’ ın günlerine dönersek, iyi web tipografisi iki zıt kelime gibiydiler. Bugün herşey değişmiştir. Sadece resimleri destekleyen tarayıcılarla değil,harika tipografi ile web sayfalarımızı hayata geçirme fırsatına sahibiz. İlk olarak, tipografi sadece yazı tipi seçimi, ya da bir yazı biçimini diğerinden ayır etmeye yaramaz. Son zamanlardaki denemeler, eğitilmiş olarak bizler Helvetica’ yı %90 tanıyabiliyoruz.

Bugün web tipografiden 4 ana malzemeden oluşan reçeteymiş gibi konuşacağız. Sufle pişirmeyi denerseniz, reçetenin ne kadar önemli olduğunu anlarsınız. Bu reçeteyi kullanırsanız tipografiniz şunun gibi ayaklanacaktır.. Aşçılıkla ilgili bu kadar konuşma yeter, pişirmeye başlayalım :

Karşıtlık

Soluk mavi arkaplanda soluk pembe yazı belki bluzunuza yakışır, ama iyi okunamaz. Var olan yazıları okuyabilmek için; arkaplanla yeteri kadar karşıt renklerde olduğundan emin olun, sonra sayfanızın ekran resmini (screen dump) alarak resimde bir resim düzenleyici yazılımıyla gri tonlama yapın. Böylece yeterli karşıtlığa sahip olup olmadığınızı test edebilirsiniz. Robert Bringhurst, mükemmel dizgici içeriği onurlandırmak için tipografi vardır der. Eğer sayfalarımızın içeriğini, yazıları okuması zor bir şekilde tasarlarsak içeriği onurlandırmış olurmuyuz?

Kişisel olarak uzun karşıtlaştırılmış(örneğin; koyu ya da siyah arkaplan üzerine beyaz yazılar) yazıları okumayı sevmem; ne kadar sıklıkla kitapların bu şekilde düzenlendiğini görürüz? Ekranda kısa yazılar için uygun olabilir, ama belli bir sure içinde okumayı çok yorucu bulurum.

Boyut

Web 2.0’ ın doğumuyla küçük yazı denen bayağı rahatsız edici genel eğilimi farkettim. Hatta site yazarlarına varsayılan yazı boyutunu büyültmeleri için e-posta bile yolladım. Bu mesajlarıma teşekkür olarak kendine gözlük al gibi karışık sert cevaplar aldım. Hatta küçücük gövde metninin “minimalist tasarımıma uyum sağlıyor” gibi savunulduğuna şahit oldum. Super Man ve Vision Girl (Marvel komikleri) sizin tek okuyucularınız değilse küçük yazı tipleri sizing için uygun değildir.

Gövde metnini 10 veya 12px altında kullanmayın ve mümkünse daha da büyültün. 65” lik HD plazma monitörünüzde size iyi görünen 15” lik MacBook’ ta iyi görüntülenemeyebilir. Şüpheniz var ise büyültün.

Hiyerarşi

İçeriği ayırmanın en iyi yollarından biri yazı boyutunu değiştirmektir. Renkler ve güzel kutular yardımcı olabilir, ama sayfalarınızda devamlı olarak kullanılan farklı boyuttaki yazılar, sayfalarınızdaki bağıl önemlilik taşıyan unsurları yüksek sesle ve açıkça işaret ederler. Bu aynı zamanda eğer okuyucularınız acele içindeyse, kolaylıkla önemli parçaları okuyabilirler ve bu onların okumaya devam ederek daha uzun kalacakları anlamına gelir.

Hiyerarşiye başka yollarla da ulaşılabilir. Sadece farklı boyutlu yazılardan bahsettik, ama aynı zamanda farklı yazı stillerini kullanarak; örneğin; tümü büyük harf kullanarak, veya alt başlıklarda italik kullanarak. Serif ve sans serif stilleri iyi etki bırakmak için karıştırılabilir.

Boşluk

Yazınızın nefes almasını sağlayın. Sayfalarınızda boş yerler bırakmaya korkmayın. Bu negatif ve beyaz boşluk yazı üzerinde odaklanmayı sağlayacak ve yazının yüksek sesle konuşmasını böylece duyulmasını sağlayacaktır. Sonra, CSS özelliklerinden satır yüksekliğini unutmayın; pratik olarak satır-boşluğu en az yazı boyutunuzun%140 olmalıdır. İyi yazı tasarımcıları yazı içinde duran mikro boyuttaki beyaz boşluk yerleştirmek için bir sürü emek harcarlar. Sayısızca saatleri yazı ve yazıyı kaplayan boşluk arasında denge sağlamak için harcarlar. Bunun gibi yazı bloklarını şekillendirmek için bırakılacak büyük beyaz boşluk için de zaman harcanmalıdır.

Unutmayın, bunlar kural değil ama önerilerdir, Bununla birlikte, karşıtlık, boyut, hiyerarşi, ve boşluk uygulayın ve tipografinizin Gordon Ramsay’ in Suflesi gibi kabardığını görün.