Önceki makalede ve sevgili Manhem`in makalesinde de uyulabilecek kurallar dahilinde ve ipuçları üzerine kısaca css ve tipografik düzen konularına değinilmişti.

Şimdi ise css ile nasıl düzenli ve görsel olarak tasarım üzerinde hoşduran yazılar yazılabilir buna değineceğim. Öncelikli olarak typetesterile konuya gireyim. Bu sitede karşınıza çıkacak olan arayüz iletipogarfik değişimleri gözlemleyebilir ve beğendiğiniz/uygun şekildesitenizde kullanabilirsiniz, faydalı bir araç.

Kısaca kullanılabilecek özellikleri -css özelliklerini- anlatarak örneklerle konuları pekiştireceğim. Öncelikli olarak ise tipografi kullanımında başarılı bulduğum bir siteyi paylaşarak başlıyorum.

font-size
     Font-size ile font büyüklüğünüzü ayarlayabilirsiniz. Bu konuda dikkat edilmesi gereken diğer makale de belirttiğim gibi başlık ve açıklama ayrımını düzgün kullanmanız.

font
Genel olarak font tanımlaması üzerinden doğrudanmüdahele etme işlemlerine kullanabileceğiniz ana parametredir. Altbölümlerde alt parametreleri ayrıntılı olarak açıklayacağımdan şimdilikörnek kullanımını buradan inceleyebilirsiniz.

font-size;
     xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length, % değerleri ile ayarlamalar yapabiliyor olmanız.
   Örnek kullanımları için tıklayınız!

font-family;
     serif, sans-serif şeklinde fonttürünü seçerek sayfanızda kullandığınız tasarıma uygun hale getirebilirve bu şekilde tasarımı bir bütünlük içerisinde sunabilirsiniz.
   Örnek kullanımları için tıklayınız!

font-size-adjust;
   Kullandığınız font türüne uygun olarak hesaplanarak font sığasını bu özelliği kullanarak belirleyebilirsiniz.
   Örnek kullanımları için tıklayınız!

font-stretch;
   Fontların uzama özelliklerini “ultra-condensed, wider, narrower…” bu parametreden düzenleyebilirsiniz.
   Örnek kullanımları için tıklayınız!

font-style;
     İtalic, bold, oblique değerleri ile fontunuzun stil düzenlemelerini ayarlayabilirsiniz.
   Örnek kullanımları için tıklayınız!

font-variant;
   Yazılarınızın büyüklük / normallik ayarlarını yapmanıza olanak sağlana bu özelliğin “small-caps, normal” değerlerini kullanarak fontlarınızın caps/ normal görünürlüklerini değiştirebilirsiniz.
   Örnek kullanımları için tıklayınız!

font-weight;
   Font genişliğinizin değerlerini kontrol etmek maksadı ile kullanabileceğiniz bu parametrenin aldığı değerler numeric (100, 200, 300…), bold, bolder, normal şeklindedir.
   Örnek kullanımları için tıklayınız!
 Font işlemlerinden sonra font düzenlemenizi -görsel olarak- etkileyecek olan diğer parametrelere geçelim.

text-decoration;
   Yazılarınızın altını, üstünü vs. çizgi hattı ile düzenlemek, yanıp sönmesini sağlamak istediğinizde kullanabileceğiniz bir parametredir. Aldığı değerler none, underline, overline, line-through, blink şeklindedir.
   Örnek kullanımları için tıklayınız!

text-align;
   Yazılarınızın hizalamasını sağlayacağınız bu parametre ile sağa, sola, her iki yana yaslama işlemlerini yapabilirsiniz. Her iki yana yaslama parametresini kullandığınızda -justify, kelimeler arasında akarsuolarak adlandırdığımız bir yazı düzeni hatası meydana gelebilmektedir.Bunu önlemenin yolu diğer parametreler olduğu gibi kelimeler arasındasatır sonlarında “-” ile de çözüm üretebilirsiniz. Aynı şekilde dul kelimelerde bu hataya neden olabilmektedirler. Yazılarda mümkün olduğunca planlıilerleme bu hataların büyük bir kısmını önlemenize yardımcı olacaktır.
   Aldığı değerler left, right, center, justify`dir. Aks belirtilmedikçe default -varsayılan- ayar left değerindedir.
   Örnek kullanımları için tıklayınız!

letter-spacing;
     Aldığı sayısal değerler ile (px, em, %…) kelime bünyesinde bulunan harfler arasındaki boşlukları düzenleyebilmektesiniz.
   Örnek kullanımları için tıklayınız!

text-indent;
   İlk satıra başlandığında eğer paragraf kullanacaksanız kullanabileceğiniz bu özellik ile paragrafın kenar alanına olan mesafesini sayısal değerler ile belirleyebilmektesiniz.
   Örnek kullanımları için tıklayınız!

text-transform;
   Kelimelerin tamamının büyük/ küçük, ilk harfinin büyük vs. şeklinde olmasını istediğiniz durumlarda kullanabileceğiniz bu parametre, uppercase, capitalize, lowercase… değerlerini almaktadır.
   Örnek kullanımları için tıklayınız!

white-space;
   Yazı bloklarınızın nasıl görüntülenmesini/ hareket etmesini istediğinizde kullanabileceğiniz bu parametre ile yazının yazıldığı gibi -pre-, aralıksız/ satır bitene kadar -nowrap- ya da normal şekilde hareket etmesini sağlayabilirsiniz.
   Örnek kullanımları için tıklayınız!

word-spacing;
   Kelimeler arasındaki boşluğu sayısal olarak düzenleyebileceğiniz bu parametre ile dul kelime ve akarsu hatalarını düzenlemekte büyük kolaylık görebilirsiniz.
   Örnek kullanımları için tıklayınız!

padding;
Yazılarınızın yer aldığı blokların iç alanındanolan mesafelerini bu parametre ile düzenleyebilirsiniz. Her ne kadarfontsal bir parametre olmasa da düzenleme konusunda sıkça kullacağınızısöyleyebilirim.
   Örnek kullanımları için tıklayınız!

margin;
Yazılarınızın yer aldığı blokların dış alanındanolan mesafelerini bu parametre ile düzenleyebilirsiniz. Her ne kadarfontsal bir parametre olmasa da aynı padding parametresinde debelirttiğim gibi, düzenleme konusunda sıkça kullacağınızısöyleyebilirim.
   Örnek kullanımları için tıklayınız!

Yazar: Ceyhun Aslan