Herkese merhaba, şimdi “CSS ile ilişkisel Font-Size da ne?” dediğinizi duyar gibi oluyorum:) Açıkçası tam olarak nasıl ifade edebileceğimi bilemedim.  Bu yazımda bir web uygulamasında, CSS yoluyla etiketler arasında font-size değerlerinin nasıl atanması gerektiğini, nasıl bir yapı kurmamız gerektiğini incelemeye çalışacağım.

Klasik HTML yoluyla font değerlerinin etiketler içerisinden tanımlandığı taş devrini geride bıraktık artık. Bugün CSS teknolojisiyle etiketlere dair font parametrelerini CSS üzerinden tanımlayabiliyoruz.

Genel Font-Size Tanımı

Pratik durum üzerinden devam edersek, bir web uygulaması geliştirdiğimizi düşünelim ve tabi ki font özelliklerimizi CSS dosyamızda tanımlıyoruz. İlk font tanımlamamızı nerede yapmamız uygun olur? Hep birlikte aşağıdaki gibi bir başlangıç yapalım…

body {font-size: 12px;}

Burada body etiketi için font-size tanımlamamızı yapmış ve değerini 12 piksel olarak atamış olduk. Font-boyut değerleri diğer alt etiketler tarafından miras (inheritance) alınmaktadır. Inheritance konusunda detaylı makaleye buradan ulaşabilirsiniz. Yapmış olduğumuz bu tanımlama, site için font boyut değerinin her yerde 12 piksel olmasını sağladı.

Burada dikkat edilirse font büyüklüğü px cinsinden verilmiştir. Font büyüklük birimleri sabit ve ilişkisel olmak üzere ikiye ayrılmaktadır. Px birimi ilişkisel bir birimdir ve monitörün çözünürlüğüne bağımlıdır. Font büyüklük değerinin px olarak verilmesi son kullanıcı açısından bazı erişilebilirlik problemleri oluşturmaktadır.

px, %, em

Örneklemek gerekirse, modern web tarayıcılarında kullanıcılar kendi ihtiyaçlarına göre erişilebilirlik standartları çerçevesinde tarayıcı ayarlarından metin boyutlarını ayarlayabilmektedirler. Gözleri az gören bir amcamız bu şekilde metin boyutunu büyüterek içeriği okuyabilmektedir. Fakat IExplorer üzerinden konuşursak; px birimiyle yapılmış bir ölçülendirme kullanıcın IExplorer üzerinden metin boyut ayarlaması yapmasını engellemektedir. Bu sebeple pixel dışında monitor çözünürlüğünden bağımsız bir ilişkisel ölçü birimi kullanmamız doğru olacaktır. Ben kendi uygulamalarımda % kullanarak body {} içerisinden tanımlamamı gerçekleştiriyorum.

 body {font-size:75%;}

Tabi sadece body etiketi için böyle bir tanımlama yapmak yeterli olmuyor. Uygulamanın ihtiyaçları neticesinde CSS dokümanımızda pek çok font büyüklük tanımlaması yapıyoruz. Bu tanımlamalarda da aynı şekilde net-kesin tanımlamalar yapmak yerine ilişkisel tanımlamaları tercih etmeliyiz.

body {font-size:75%;}
p {font-size:11px;}

Eğer CSS dokümanımızda, yukarıdaki örnekteki gibi font büyüklük tanımlamaları bazı yerlerde ilişkisel, bazı yerlerde ise sabit değerler üzerinden yapılmışsa; IExplorer üzerinde metin boyut ayarı yapmak isteyen kullanıcı, sadece sitenin paragraf etiketi dışında kalan font büyüklüklerini değiştirebilecektir. Paragraf içerisindeki metin boyutu ise hiç etkilenmeyecek ve hep 11px olarak kalacaktır. Bu da pek hoş bir durum oluşturmayacaktır.

Satır Yüksekliği Atayalım

Peki, paragraf için font büyüklük değerinin de ilişkisel olarak yazalım ve body için bir satır yüksekliği değeri tanımlayalım.

body {font-size: 75%; line-height:16px;}
p {font-size:0.9em}

Bu durumda yine benzer bir sorunla karşılaşmaktayız. Kullanıcı yine metin boyut ayarı yapmak istediğinde bu sefer paragraf içindeki metinlerde aynı oranda büyüyecektir. Ama bu seferde satır yüksekliği aynı değerde kaldığı için metin boyutu büyüdükçe daka sıkışık bir yapı oluşacak, satırlar birbirine girecektir. Bu yüzden satır yüksekliğini de ilişkisel tanımlamamız doğru olandır.

body {font-size: 75%; line-height:1.5em;}
p {font-size:0.9em}

Tasarımcı Açısından Problem

Son kullanıcıyı bir kenara bırakıp biz web geliştiricileri açısından düşündüğümüzde de başka bir sorunla karşılaşırız. Web uygulamaları geliştirirken CSS içerisinde pek çok font-size ataması yaparız. Eğer bir gün web uygulamasındaki font büyüklüğünün genel olarak değiştirilmesini gerekirse, ilişkisel bir yapıda sadece body etiketi içerisindeki boyutun değiştirilmesi yeterli olacaktır. Paragraf ve satır yüksekliği bu değişiklikten otomatik olarak etkilenecektir.

body {font-size: 85%; line-height:1.5em;}
p {font-size:0.9em}

Eğer yapımız ilişkisel değil ve kesin font boyut değerleri içeriyorsa manuel olarak bu değerleri tek tek değiştirip, yeniden ayarlama yapmak zorunda kalacağız. Şimdi uğraş dur:)

Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.