Ö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!
Yazı Kategorisinden Son Yazılar
- Font Kullanımları - 24 October 2008
- DinoDream v2 - 25 September 2008
- "Fikir" Ä°le Ä°lgili Cevherler - 24 September 2008
- Markalarla Bir Hafta - 23 June 2008
- 3Jam, Kısa Mesaj Servisi - 19 June 2008
01 Aralık 2006, 6:36 pm tarihinde.
[...] Re: hayatin didiklenmemis yanlarina dair…[...]
01 Åžubat 2007, 1:29 am tarihinde.
[...] olarak site beyaz background üzerine hazırlanmış bir katmanda içeriğini oluşturuyor ve ne yazık ki CSS [...]
29 Mart 2007, 1:07 am tarihinde.
[...] eğer tasarım ile ilgileniyorsanız yaşadığınız sorunlardan biridir yüzlerce fontun kullanımı. Farklı [...]
06 Nisan 2007, 1:56 am tarihinde.
[...] CSS ve Tipografi [...]
13 Ekim 2007, 8:37 am tarihinde.
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..!
22 Ekim 2007, 9:48 am tarihinde.
[...] http://ceyhunaksan.com/css-ve-tipografi/ [...]