Okunabilir web tipografisi için temel ilkeler


Web’de okunabilirlik en az diğer medyalarda olduğu kadar önemli bir faktördür. Tipografi bir web sitesinin beğenilmesini ya da hemen çıkılmasını belirleyen önemli faktörlerdendir. İlk kez gelen bir ziyaretçi için belki de en önemli unsurdur. İlk bakışta beğenilmeyen bir sayfa rahatlıkla hemen terkedilebilir. Sayfalarımıza gelen ziyaretçilerimize rahat okuyabilecekleri kaliteli görünümler sunmamız gerekir. Aşağıda okunabilir web tipografisi için dikkat edilmesi gereken maddeler sıralanmıştır.

1:Okunabilirlik nedir? Nasıl sağlanır?

a: Hiyerarşi

Sayfalarımızda kolay bir okunabilirlik sağlamak için yazılarımızın hiyerarşisine dikkat etmek gerekir. Burada hiyerarşiden kasıt ziyaretçinin sayfadaki içeriği nasıl daha kolay okuyabileceğidir. Buna ulaşmak için başlıklar, altbaşlıklar ve yazıların düzgün bir hiyerarşi içinde sayfada gösterilmesi gerekir. Örneğin altbaşlıkların yazıyla aynı boyutta olması, hangisinin yazı hangisinin altbaşlık olduğunun anlaşılmasını zorlaştırır.

Web hiyerarşisi

b: Kontrast

Yazı ile kontrast oluşturan zemin rengi okunabilirlik açısından iyi sonuçlar verebildiği gibi, bazende seçilen renkler sonucunda işleri çok daha zorlaştırabilir. Aşağıdaki örnekteki gibi beyaz zemin üzerindeki siyah yazı rahatlıkla okunabildiği halde aynı yazı yanlış renk seçiminden dolayı ikinci örnekte okunamaz durumda.  Böyle bir durumla karşılaşmamak için okunabilir renk paletleri kullanmak lazım.

okunabilir bir metin

Kontrast

c: Satır yüksekliği

Satır yüksekliği metindeki her satırın birbiriyle olan uzaklığıdır. Satır yüksekliği her medyada olduğu gibi webde de bir çok soruna yol açabilir. Çok az verilmiş satır yükseklikleri yazıların okunmasını zorlaştırdığı gibi, çok fazla verilmiş satır aralıkları da yazıların birbirinden ayrılmış yazı parçaları gibi görünmesine sebep olabilir.

yanlış ayarlanmış satır yüksekliği

d: Harf Aralığı

Harf aralıkları da web tipografisi için satır yükseklikleri gibi okunabilirlik açısından temel faktörlerdendir.  Fazla veya az verilmiş harf aralıkları yazılarımızın okunmasını zorlaştırır ya da imkansız hale getirebilir.

e: Satır Uzunluğu

Satır uzunluğu yukarıdaki faktörler kadar dikkate alınmasa da, okunabilir web tipografisi için en az harf aralığı ve satır yüksekliği kadar önemlidir. Yanlış ayarlanmış bir satır uzunluğu, metinlerde okumayı oldukça zorlaştırır. Çok kısa tutulmuş satırlarda, göz aşağı satıra fazlaca kayacağından,  okumada bütünlük kaybolabilir. Çok uzun satırlarda ise, göz kaldığı satırı takip edemeyebilir. İyi ayarlanmış bir satır uzunluğu sayesinde, göz bir alt satırı sanki devamıymış gibi okur.

2:Okunabilir bir tipografi için önemli noktalar

Okunabilirliğe ulaşmak kolaydır ancak belirli prensiplere uymak mutkala gerekli. Okunabilirliği yüksek bir sayfa, sitenize gelen ziyaretçi ile kuracağınız ilk etkileşimin olumlu sonuçlanmasını sağlar. 

a: Kullanıcı dostu başlıklar

Başlıklar diğer medya öğelerinde (basılı medya vb.) olduğu gibi web tipografisinin de temel öğelerindendir. Başlık boyutları en az gövde metin boyutu kadar önemlidir. Başlıklar ve alt başlıkların yazı ile boylarının uyuşması gerekir. Çok büyük başlık boyutu kullandığımızda ziyaretçilerin dikkati dağılabilir ya da çok küçük başlıklar kullanırsak istediğimiz dikkati çekemeyebiliriz.

b: Taranabilir, okunabilir metin

Bir metnin taranabilir olmasından kasıt o metnin göz ile ne kadar rahat tarandığı ile alakalıdır. Kitap formatında bloklanmış şekildeki yazılar metnin okunabilirliğini azaltır. Özellikle web tipografisinde taranabilir metinlerin önemi daha da artar. Taranabilir metinle okunabilir metin birlikte değenlendirilmelidir. Peki bir metni taranabilir yapan nedir? Başlıkların boyutu ve sayfa içindeki yerleşimi, gövde metninin boyutu, metnin satır yüksekliği, kullanılan renk kontrastı, paragraf kullanımı, alt başlıklar ve vurgulanmak istenen konuların birbirinden nasıl ayrıldığı metni taranabilir yapan faktörlerdir. 

c:Tutarlılık

Tutarlılık genellikle kullanılabilirliğin önemli bir faktörü olarak değenlendirilir ancak tutarlılık okunabilirlik için de oldukça önemlidir. Sayfalarımızın hepsinde bir tutarlılık gerekir. Mesela, başlıkların ve yazıların boyları her sayfada aynı olmalıdır. Çünkü ziyaretçi sayfayı okumaya başladığında gözleri sayfaya alışır ve alıştığını aramaya başlar. Sürekli değişen boyutlarda yazılar göstermek belki görünüm olarak güzel olabilir ama yazı içerikli bir siteniz varsa okunma zorluğu yaşatır. Sayfalardaki yazı başlıkları, alt başlıklar, yazı boyutları sitenin tümüyle bir tutarlılık sergilemelidir. 

c: Beyaz dengesi

Yazı yoğunluklu sitelerde, alanlar arasındaki boşluklar içeriğin okunabilirliğini  arttırır. Beyaz alanlar okuyucunun gözünün metin içinde rahatlıkla hareket etmesini sağlar. Ayrıca, sayfa içindeki görsellerin ve metinlerin birbirinden ayrılmasını sağlar. Aşağıdaki örnekte gördüğünüz gibi, beyaz alanları bir tablonun görünmez sütun ve sıraları olarak da düşünebiliriz. 

başarılı uygulanmış beyaz dengesi

 

d: Yoğunluk dengesi

Yoğunluk dengesi sayfaya yerleştirilen metin ve kelimelerin tamamının sayfa geneliyle olan dengesinden ibarettir. Bu yoğunluk içeriğin okunabilirliğini doğrudan etkiler. Bu dengeyi sağlamak için harf aralığından, satır yüksekliğinden, metin boyutundan ve beyaz alanlardan yararlanılır. Sitede dengeli bir yoğunluk seviyesi sağlanması okunabilirlik ve taranabilirlik açısından başarı sağlar ve en önemlisi göze hoş gözükür. 

e: Önemli noktalara vurgu

Yazılardaki önemli noktaları değişik özelliklerle vurgulamak okunabilirlik açısından oldukça faydalıdır. Örneğin yazımızın içersinde geçen vurguları bold yazmak, daha az önemli yerleri italik yapmak, ya da farklı renklerle yazmak gibi. Bu 3 özellik gözün metni en rahat şekilde taramasını sağlar. 

f:Bilginin Düzenlenmesi

İyi düzenlenmiş bir sayfada aranılan bilginin bulunması daha kolaydır. Sayfalarımızı hazırlamadan önce iyi organize etmemiz yazıların daha düzenli gözükmesine yardımcı olur. 

g:Grafik yardımcılar

Yazılan her yazının zaman zaman çeşitli görsellerle desteklenmesi gerekir. Bu bir resim olabilir, ikon olabilir, grafik ya da illüstrasyon olabilir. Burada önemli olan yukarıda bahsettiğimiz yoğunluk dengesine dikkat etmek ve metinle görsel arasında yeterli alanı bırakmaktır.

h:Separatör kullanmak

Bir metni kendi içinde bölümlere ayırmanın en temiz yollarından biri de separatör kullanmaktır. Bu separatörler başlık ve yazıyı ayırmak için kullanıldığı gibi, bölümleri birbirinden ayırmak için de kullanılabilir. Bu separatörlerin en basit şekli tek bir çizgi kullanmaktır. 

İçeriği bölmenin bir diğer yolu da kutular kullanmaktır. Bu sayede ziyaretçi sayfadaki öğelerin birbirinden ayrılmış farklı öğeler olduğunu kolayca anlıyabilir.

Ayraçlar

ı:Kenar boşlukları-margin

Tipografideki beyaz alanlar aslında okuyucunun ilgisini metne çekmek için kullanılır. Boş alan yani beyaz alan, gözü metni okumaya zorlar. Dolayısıyla, beyaz alan metnin okunabilirliğini doğrudan etkiler. Beyaz alanı kullanmanın yollarından biri de margin kullanmaktır. Margin ile içeriği site genelinden ayırabiliriz. Aşağıda gördüğünüz ızgaralı tasarımda parçaları birbirinden ayıran tek özellik margin. Sonuç ise gayet temiz, okunabilir ve tutarlı bir sayfa

Kenar Boşlukları

Okunabilir web tipografisini başarıyla uygulayan bir kaç örnek site konuları anlamanıza yardımcı olabilir.

Northtemple

northtemple

 

Miles Dowsett

miles dowsett

 

Digimurai

digimurai

Bu yazı smashingmagazine.com’dan türkçe’ye çevrilmiştir. Yazının orjinali için burayı ziyaret edebilirsiniz.

Bu yazıyı beğendiyseniz lütfen paylaşın
  • Digg
  • del.icio.us
  • StumbleUpon
  • Facebook
  • Technorati
  • Design Float

İlginizi çekebilecek benzer yazılar:

  1. Joomla 1.0.x ve 1.5.x için YooTools Full Paket Joomla’ya tema ve çeşitli araçlar geliştiren YooTheme‘den YooTools araçları. Bu araçları temaların içinde görmüş olabilirsiniz....
  2. Photoshop CS4′ün yeni özelliklerini kavramak için 13 video Web Design Ledger, Photoshop CS4 ile yeni gelen özelliklerin tamamının yer aldığı bir tutorial toplaması...

Yorumlar

Bu yazıya henuz yorum yapılmamış.

Fikrinizi Paylaşın