Geri gel Times New Roman!
Evet, pek çok tasarımcı Times New Roman’dan nefret eder. Fakat hepimizin kabul etmesi gereken bir gerçek var: Web’te az sayıda yazı tipini güvenle kullanabiliyoruz. Diğerlerini bilemeyeceğim ama, ben internette Serif formatında tek yazı tipi olarak Georgia’yı görmekten sıkıldım.
Üzülmeyin, ümit var! Evet, Times New Roman, çok sık (Üstelik genelde de amatörler tarafından) kullanılan, çirkin bir yazı tipi ama CSS ve tipografinin gücünü kullanarak bu yazı tipini işe yarar hale getirebiliriz.
Font boyutu ve ağırlığı, aralıklar, karakter boşlukları gibi temel CSS özelliklerini kullanarak yüzlerce değişik kombinasyon belirleyebilir ve Times New Roman’ı çok daha gösterişli bir hale getirebiliriz. Özellikle tırnaklı serif yapısı sebebiyle, Times New Roman’ın küçük puntolarda zor okunan bir yazı tipi olduğunu düşünüyorum, ama yazı puntosunu büyüttüğümüzde detaylara daha çok hakim olabiliyoruz.
Zenginlik ve başlıklar
Yalnızca yazı puntosunu büyütüp akıllıca aralıklar vererek neler yapabildiğimize bir bakalım:
Whitespace güzeldir
.luxury {
font-size: 36px;
font-style: italic;
letter-spacing: 1em;
font-family: 'Times New Roman';
};
Yazı tipini büyütüp, aralıkları biraz genişletip, hoş bir alt çizgi eklersek, başlıklarımız çok daha tatlı görünebilirler.
Peki, ya bloğumuzda klasik bir başlık tarzı kullanmak istiyorsak ve Georgia’dan sıkılmışsak?
Büyüklü Küçüklü Başlıklar
28 TEMMUZ 2007, Çarşamba ~ WEB TASARIMI ~ TİPOGRAFİ ~ CSS
.headline {
font-family: 'Times New Roman';
font-size: 36px;
letter-spacing: -.04em;
line-height: 1em;
border-bottom: 1px solid #EEEEEE; margin: 0;
}
.meta {
text-transform: uppercase;
font-size: 12px;
letter-spacing: -.04em;
font-style: italic;
margin: 0;
}
Başlıkta kelimelerde düşük karakter boşluğu kullanmamız, her kelimenin kendi içinde bütünlük oluşturmasını sağladı. Aşağıda kullandığımız sıkı karakter boşluklarıysa, yazı bilgisinin kısa ve özlü görünmesine yaradı.
Kenarlarla eğlenin
A unique and fancy headline
.Fancy {
font-size: 36px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
line-height: 1em;
font-family: 'Times New Roman';
Üst ve alt kenarlar (border), dikkatin başlıkta odaklanmasını sağlıyorlar. İtalik ve italik olmayan karakterler kullanarak q ve y harflerinin alt çizgiyle kesişmesini sağlıyoruz.
Verdiğimiz örneklerdeki gibi, CSS kodlarında yapacağınız minik farklılıklarla, çok daha kaliteli tipografi çalışmaları gerçekleştirebilirsiniz.
Bu yazı 3point7designs sitesinde yayınlanan Taking Back: Times New Roman yazısından Türkçe’ye tercüme edilmiştir.
