[Ceyhun Aksan]

Ö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 typetester ile konuya gireyim. Bu sitede karşınıza çıkacak olan arayüz ile tipogarfik değişimleri gözlemleyebilir ve beğendiğiniz/uygun şekilde sitenizde 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ğrudan müdahele etme işlemlerine kullanabileceğiniz ana parametredir. Alt bö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 font türünü seçerek sayfanızda kullandığınız tasarıma uygun hale getirebilir ve 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 akarsu olarak adlandırdığımız bir yazı düzeni hatası meydana gelebilmektedir. Bunu önlemenin yolu diğer parametreler olduğu gibi kelimeler arasında satır sonlarında “-” ile de çözüm üretebilirsiniz. Aynı şekilde dul kelimeler de 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ından olan mesafelerini bu parametre ile düzenleyebilirsiniz. Her ne kadar fontsal 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ından olan mesafelerini bu parametre ile düzenleyebilirsiniz. Her ne kadar fontsal bir parametre olmasa da aynı padding parametresinde de belirttiğim gibi, düzenleme konusunda sıkça kullacağınızı söyleyebilirim.
Örnek kullanımları için tıklayınız!

[fatihcaylak]

Faydalı bir makale olmuş. Eline sağlık.

[deepblue]

font-variant: small-caps kullandığımızda Türkçe harflerde bozulmalar oluyor.

Örneğin küçük i harfi büyük İ harfine değil de I harfine dönüşüyor.

Sanırım bunun bir çözümü yok ?

[Ceyhun Aksan]

deepblue tarafından gönderilen mesaj:

font-variant: small-caps kullandığımızda Türkçe harflerde bozulmalar oluyor.
Örneğin küçük i harfi büyük İ harfine değil de I harfine dönüşüyor.
Sanırım bunun bir çözümü yok ?

Evet, maalesef ki öyle bir dezavantajı var. Ancak bu konuda içeriği yayınlarken hazırlanacak bir PHP/ASP vs. fonksiyonu ile harflerin dönüşümleri sağlanabilir. Burada ayrıca bir müdahele gerekliliği söz konusu.