CSS ve Tipografi

Posted by admin | Filed under Yazı

Önceki makalemde uyulabilecek kurallar dahilinde ve ipuçları üzerine kısaca css ve tipografik düzen konularına değinmiştim.

�?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!

Permalink | Kasım 30th, 2006

6 Yorum to “CSS ve Tipografi”

  1. hayatin didiklenmemis yanlarina dair... - 2. Sayfa - Zoque.Forum Demis ki:
    Aralık 1st, 2006 at 6:36 pm

    [...] Re: hayatin didiklenmemis yanlarina dair…[...]

  2. Ceyhun AKSAN - Görsel İletişim & Grafik Tasarım · Bugün Web İçin Ne Yaptın? Demis ki:
    Şubat 1st, 2007 at 1:29 am

    [...] olarak site beyaz background üzerine hazırlanmış bir katmanda içeriğini oluşturuyor ve ne yazık ki CSS [...]

  3. Ceyhun AKSAN · Font Yönetimi Demis ki:
    Mart 29th, 2007 at 1:07 am

    [...] eğer tasarım ile ilgileniyorsanız yaşadığınız sorunlardan biridir yüzlerce fontun kullanımı. Farklı [...]

  4. Türkçe CSS kaynakları | Blog ve Wolkanca Demis ki:
    Nisan 6th, 2007 at 1:56 am

    [...] CSS ve Tipografi [...]

  5. evrim Demis ki:
    Ekim 13th, 2007 at 8:37 am

    Açıklamalarınız için çok teşekkür edirim ,Tipografi konusunda çok zorluk çekiyorum hangi fontu nerde kullansam bilebiyorum örnek ( savaş içeren bir sloganda,BOYCATT mı? kullanılır , ARİAL NARROW bir afişte slogandan sonra bir başlıkta kullanılabilir mi? ) bunların kurallarını fontların karakteristik ifadelerini duygularını bilmem gerek..! Bana tavsiye
    edebileçeğiniz bir kitab yada tipoğrafi dersi alabileçeğim bir yer varmı? yardımınızı bekliyorum saygılarımla..!

  6. CSS ve Tipografi | Rasim Coşkun | Web Tasarım | Web Design Demis ki:
    Ekim 22nd, 2007 at 9:48 am

    [...] http://ceyhunaksan.com/css-ve-tipografi/ [...]

Leave a Reply