Web, tasarlanan ve büyük oranda kullanmaya çalıştığımız anlamda bilgi paylaşımı içindir. Bilgi ise yine büyük oranda metinlerden oluşmaktadır. Elbette her sunumun belirli kuralları var ve bu kurallar çerçevesinde tasarlandığında ulaşılan hedef kitle daha çok bilgiye doyabiliyor.

Özetlemek gerekirse, her mecrada olduğu gibi web'de de bilginin sunulmasında tipografik önemlilikler var, bu yazıda bunlara değinmeye çalışıp, birkaç örnek vereceğim. Başlangıç ve ileri seviye CSS kodlarıyla beraber...

Web ve eski mecralar

Web'in her ne kadar 19 senelik bir geçmişi olsa da, hayatımızda aktif olarak kullanımı 1990'lar sonrasına dayanır. Bu, bir kültürün oluşması ve kurallarının belirlenmesi için oldukça kısa bir süre. Hele bu mecra, herşeyden daha hızlı gelişiyor ve büyüyorsa.

Dolayısıyla kurallar oluşturulmaya çalışılırken basılı mecra gibi, eski iletişim araçlarından örneklenerek oluşturulmaya çalışılıyor ve çoğu zaman temeline koyulan kurallar hemen web'in davranışına göre kendini değiştiriyor, farklı bir hal alıyor. Web'de kural koymaya kalkarken yüzyıllardır varolan şeyleri örnek almak bir yere kadar doğru, bir yere kadar hatalı. Çünkü, bir bakıma herşeyi yeniden icat etmeye gerek yok, ama diğer yandan uygulanmak istenen alan yüzyıllardır insanların alıştığının çok daha dışında, farklı bir yapıda.

Bu yüzden, web için birşeyler yapıyorsanız mutlaka yeniliklere açık olmalısınız, bildiklerinizinse bir kısmını unutmalısınız belki de.

Bilgi tasarımı tipografidir

Tipografi, kısaca yazıyı düzenleme sanatıdır. Yazı tipi, boyutu, satır araları, harf araları... Hepsi tipografinin incelediği kombinasyonlar arasındadır.

Yani, biraz tipografi bilgisi bilginin doğru sunulmasında yardımcı olacaktır. Dolayısıyla iletmek istediğiniz bilgi daha rahat algılanabilecek, ulaştığınız doğru kitle sayısı artacaktır.

Sizce hangisi daha okunaklı ve şık?

Detaylar, örnekler ve CSS

Herşeyden önce web'de tipografiyle haşir neşir olacakların yeni arkadaşı CSS olacaktır. CSS bilginizin en az CSS nedir? seviyesinde olduğunu varsayarak devam ediyorum.

Yazı tipleri ve boyutlar

Basılı mecranın aksine, yeni ve okunaklı bir yazı tipi bulduğunuzu düşündüğünüzde bunu web'de anında kullanamazsınız. Kullanabileceğiniz yazı tipleri sınırlıdır. Çünkü web'e ulaştığımız araçlar, yani bilgisayarlarımız kişiye özel ve içinde bulunan herşey, bir diğer bilgisayardan oldukça farklı. Buna işletim sistemlerimiz de dahil. Kabul edersiniz ki her işletim sisteminin de kendine özgü ayar, görüntü ve özellikleri var. Bunlardan birisi de yazı tipleriç Her işletim sisteminde yüklü olan yazı tipleri belirli ortaklıklar haricinde birbirinden oldukça farklı. Kesişen yazı tiplerinin ortak özelliği ise, yukarıda bahsettiğim yüzyıllardır süren alışkanlıklar.

Bu yazı tiplerine örnek vermek gerekirse: Arial, Helvetica, Times New Roman, Verdana ve Georgia. Bunlar içerik sunumunda en çok kullanılan ve okunabilirliği en yüksek olanları.

Gelin CSS ile yazı tipimizi tanımlayalım:

.metinAlani { font-family: Arial, Helvetica, sans-serif; }

Yani, metinAlani isminde bir tanımlayıcı oluşturduk ve yazı tipinin Arial, Arial yüklü değilse Helvetica, Helvetica da yüklü değilse ilk sans-serif karakter olmasını emrettik.

Bu yazının boyutunu ayarlamak istersek:

.metinAlani { font-family: Arial, Helvetica, sans-serif; font-size: 11px; }

Alacağımız görüntü ise şu şekilde olacaktır:

Yazı rengi, satır araları

Kodumuz üzerinden devam edersek:

.metinAlani { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #333; }

En son eklediğimiz color değeri ile, yazımızın rengini ayarlıyorum. Beyaz üzerine siyah, siyah üzerine beyaz yazı kullanmak çok parlayacağı için gözü yorar ve okunmayı zorlaştırır. Ben burada koyu bir gri seçtim ki beyaz üzerinde yumuşak dursun.

Gelelim satırlar arasındaki boşluklara. Satır araları, bir yazının okunurken takip edilmesine ve birbirine girmemesini sağlayan en önemli unsur.

.metinAlani { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #333; line-height: 16px; }

Burada line-height ile yaptığım, satır aralarını 16px'lik bir yazı tipi kadar açmasını söylemek. Satır araları ferah tutulmalı ancak abartıya kaçılmamalı.

Satır aralarının dışında bir de paragraf aralarımız var. Her paragraf bir <p> olduğuna göre:

.metinAlani { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #333; line-height: 16px; }
.metinAlani p { margin-top: 0px; margin-bottom: 13px; }

Bu sefer de, metinAlani içerisindeki paragrafların yukarıdan ve aşağıdan boşluklarını ayarladım.

Son değişikliklerden sonra alacağımız görüntü ise şu şekilde:

Ne dersiniz gelişme var değil mi?

İçerik ve diğer bölümleri ayırmak

Her içerikte mutlaka başlıklar, bazen ara başlıklar ve detay alanları bulunur. Bunların birbirinden ayrılması, konunun takibini kolaylaştırır. Başlığın rengi ve boyutuyla biraz oynuyorum:

.metinAlani { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #333; line-height: 16px; }
.metinAlani p { margin-top: 0px; margin-bottom: 13px; }
.metinAlani .baslik { font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; color: #993300; font-weight: bold; }

Farklı alanları zıtlık kullanarak birbirinden ayırmak genel takibi kolaylaştıran bir çözümdür, başlık ve metin yazı tipinin farklı olması gibi.

Mola ve toparlama

Buraya kadar 3 uzun satır kod yazdık. Ama gerçek hayatta herşey bu kadar uzun değil. Yani, kodlarımız bu kadar uzun olmak zorunda değil.

.metinAlani { font: 11px/16px Arial, Helvetica, sans-serif; color: #333; }
.metinAlani p { margin: 0 0 10px 0; }
.metinAlani .baslik { font: bold 16px Georgia, 'Times New Roman', Times, serif; color: #993300; }

Gördüğünüz gibi bir sürü font-xxx özelliğini attım, yerine tek bir font kullandım. Yani:

font: stil boyut/satır arası yazı tipi ailesi;

Bize oldukça kolaylaştırıcı bir imkan sunuyor gördüğünüz gibi. Ayrı ayrı tanımlamaktansa bir kerede kısaca tanımlayabiliyoruz. Aynı şey margin ve padding için de geçerli:

margin: üst sağ alt sol;

Gelişmiş ve opsiyonel özellikler

Tabiki CSS ile yazılara yapabileceğimiz şeyler bunlarla sınırlı değil.

Bir yazıyı tamamen büyük harf yapıp, ilk harfini daha büyük gösterebiliriz:

font-variant: small-caps;

Bir yazının kelimelerinin arasını açabiliriz:

word-spacing: 15px;

Bir yazıdaki harflerin arasını daraltabiliriz:

letter-spacing: -1px;

Bir yazıdaki tüm kelimelerin ilk harflerini büyük yapabiliriz, küçük yazsak bile:

text-transform: capitalize;

Yazı içerisindeki tüm paragrafları, biraz içeriden başlatmak bizim elimizde aynı kitaplardaki örneklerinde olduğu gibi:

text-indent: 10px;

veya yazıları sol yerine sağa yaslayabiliriz:

text-align: right;

Yararlı Kaynaklar

• Çevrimiçi Türkçe CSS Kitabı (Fatih Hayrioğlu)
• W3C CSS Referansları
• W3 Schools CSS Referansları

Sonun başlangıcı

Herşey, CSS ve nimetleri elinizin altında. Bunların doğru kullanımı ise yukarıda belirttiğim küçük kurallar çerçevesinde doğru yolu buluyor. Bu kadar çok özellik kimsenin gözünü korkutmasın, zira ben bile hepsini kullanmıyorum.

Son olarak SiberKültür'deki yapıyı anlatarak yerimi sizlere bırakıyorum, yorumlarınız için.

• SiberKültür'de her yazı bloğu arasında 50px'lik bir ara bulunuyor, yazıların birbirinden kolaylıkla ayrışması için.
• Site geneli yazı büyüklüğü, 14px ve satır araları 20px.
• Ana başlıklar 30px büyüklüğünde, karakter araları 1px dar ve rengi değiştirilmiş.
• Metin içi diğer başlıklar ise 25 ve 20px boyutlarında, yine renkleri farklı.