Öncelikle tipografi kavramına değinelim:Tipografi bir grafik tasarım kavramıdır ve dilimize Yunanca’dan girmiştir. Yazı tipini bir forma, biçime sokma sanatı olarak tanımlanır. Tasarım kavramının yer aldığı (Web tasarımı da dahil olmak üzere) neredeyse her noktada büyük önem taşıyan bir olgudur.
Css ile Tipografi
Tipografi Neden Bu Kadar Önemli
Tipografi, tasarımda metinsel içeriğin ziyaretçi veya izleyici tarafından okunacak öğeler haricinde görsel bütünlüğün bir parçası olarak ele alınmasına dayanır.Yani eğer hazırladığınız projenin konusuyla alakalı olmayan ya da görsel konsept bütünlüğünü bozacak yazı tipi stillendirmelerine girerseniz, tasarımsal kriterlere göre pek başarılı bir sonuç elde etmemiş olacaksınız.Peki, Web Tasarımında Tipografinin Getirisi Ne Olacak?
Elbette, öncelikle daha akıcı bir içerik görünümü elde edeceksiniz.Hazırladığınız Web sitesinin yapısıyla uyumlu ve okunaklı yazı tipi büyüklükleri ve renk tonlamaları, metinsel içeriğin görsel hiyerarşisi, siteyi görüntüleyen ziyaretçinin içeriği sıkıntı çekmeden rahat bir şekilde okumasını ve izlemesini sağlayacaktır.CSS yardımıyla, Web dokümanlarımızdaki yazı tipi ve metinsel içeriğin görünüm düzenlemesini yaparak göze daha akıcı ve okunaklı bir içerik yapısı hazırlayacağız.CSS Yardımıyla Şık Görünümlü Yazı tipi Oluşturmak
Yazı tipi, tasarımcılar olarak Web tasarımında en sıkıntı duyduğumuz konulardan biridir. HTML dokümanına atayarak tanımladığımız bir yazı tipi, bununla hazırladığımız bir Web sitesini gezen ziyaretçinin bilgisayarında yüklü olmayabilir, bu da sitemizin içeriğini ziyaretçinin tarayıcısının kendi standart yazı tipi görünümünde görüntülemesine sebep olarak görsel problemler yaratabilir.Bu nedenledir ki, elimizdeki 9-10 kadar kısıtlı, her bilgisayarda yüklü olan standart yazı tipi aileleriyle yetinmek durumunda kalıyoruz. Bu yazı tipleriyle oluşturduğumuz Web siteleri böylece her bilgisayar tarafından tüm tarayıcılarda sorunsuzca görüntülenebiliyor.Yazı tipi adedimizdeki limitlere rağmen, CSS içindeki yazı tipi özellikleri (property) yardımıyla bu problemi mümkün olduğunca giderebilecek, yaratıcılığımızı kısıtlayan bu sıkıntıyı bir nebze olsun azaltabileceğiz.Şimdi, bu bahsettiklerimle ilgili kısa bir ön çalışma yapalım ve oluşturacağımız bir h1 başlığın yazı tipi özelliklerini biçimlemeye çalışalım:
Css ile Tipografi
CSS Zen Bahçesi – Merhaba
Stillendirmemizi henüz uygulamadığımız için, yukarıdaki görüntüde h1 başlığımızın stilsiz, tarayıcı standardı yazı tipiyle (çoğunlukla “Times New Roman”) yer aldığını görüyoruz.Şimdi, bu başlığa biraz stil atayalım:
Burada kullandığımız özellikler ve uyguladığımız biçimlemeler:1.font-family özelliğiyle selektöre yazı tipini değiştireceğimizi belirttik.2.font-family özelliğine atadığımız çoklu değerlerle tarayıcıya şunları demiş olduk:a.Ziyaretçinin bilgisayarında Verdana yazı tipi yüklüyse h1 başlığı bu yazı tipiyle görüntüle.b.Verdana yazı tipi yüklü değilse Arial ile görüntüle.c.Arial da bulunmuyorsa Helvetica ile görüntüle.d.O da yoksa Tahoma yazı tipiyle görüntüle.Ziyaretçilerimizin bilgisayarlarında, bu yazı tipleri sistem fontları olduğundan, en az bir tanesi mutlaka bulunacaktır (onlar kendi elleriyle özel olarak bu yazı tiplerini silmemişlerse). Font-size ile yazı tipi ebadını değiştireceğimizi tanımladık ve verdiğimiz değerle yazı tipinin ebadını, sahip olacağı standart ebadından 4 kat daha büyük görüntülemek istediğimizi belirttik. font-size özelliğine atayabileceğimiz değerler yalnızca örnekteki gibi yüzde “%” ile sınırlı değildir. Yazı tipi ebat değeri girerken piksel “px” ve punto “pt” ve % gibi bağıl bir değer olan Emphasis “em” oranları girerek de yazı tipine ait net boyut tanımlamaları yapabiliriz.Örnekte yaptığımız değişikliklerin sonucuna tarayıcıda bakalım:
Css ile Tipografi
Böylece dokümanımızdaki h1 başlıklarımızın görünümüne standart görünümden farklı bir biçim kazandırmış olduk.Şimdi, başlığımızın yazı tipine bir kaç özellik daha ekleyelim:
“letter-spacing” özelliğiyle yazı tipimizin sahip olduğu karakterlerin arasındaki boşluk oranını değiştireceğimizi belirttik ve bu özelliğe atadığımız değerle karakter aralarının -5px oranında daralacağını tanımlamış olduk.letter-spacing özelliği font-size’da olduğu gibi, “px”,”pt”,”%” ve “em” değerlerini alabilir.
Css ile Tipografi
Şimdiden, yalnızca ufak düzenlemelerle bile CSS yardımıyla Web dokümanlarımıza daha yaratıcı bir açı katabildiğimizi görebiliyoruz.Biçimlemeye devam edelim. Negatif değer verilmiş harf arası boşluğu gördük.Şimdi de pozitif uygulayalım. Yani harflerin arasını kısmak yerine açacağız:
Css ile Tipografi
Burada harflerin aralarının açılması haricinde bir önceki örneklere oranla bacakları daha ince bir yazı tipi görüyoruz. Bunu font-weight özelliğine normal değeri vererek sağladık. Böyle yapmamızın sebebi, bazı metinler (h1, h2 gibi başlıklar) tarayıcı standardı stillendirmede büyük puntolarla görüntülenmelerinin haricinde kalın olarak taranırlar. Bunu bazen değiştirme ihtiyacı duyabiliriz.Veya normal bir metin içeriğinin belli bir kısmını kalın göstermek isteyebiliriz. Bu durumda da, font-weight özelliğine bold değerini atıyor olacağız. İki stillendirmeye daha değinmek istiyorum.Şimdi, başlığımızın yukarıdaki özelliklere ek olarak italik ve tamamı küçük harflerle görüntülenmesini sağlayalım:
Css ile Tipografi
Oldukça etkileyici, değil mi? text-transform özelliğine uppercase değerini atamış olsaydık, bu kez tüm karakterler büyük harfle görünecekti. text-transform özelliğiyle benzer bir etkiye sahip olan font-variant özelliğinden de bahsetmek istiyorum:
Özellikle farklı platformlardan (pda, cep telefonu) erişen ziyaretçilerin çok büyük yazı tipi boyutlandırmalarında sorun yaşamamaları için bazı durumlar da text-transform yerine font-variant özelliğini kullanmamız gerekebilir veya bunu sadece estetik amaçlı kullanabiliriz.CSS ile başlıkların nasıl düzenleneceğini gördük. Bir daha ki yazımda konulara yazdığımız metinleri düzenleme ile ilgili bilgilere göz atmayı planlıyorum. Aslında mantıkları aynı. Yapmanız gereken sadece CSS ile metinlere atama yapmanız. Bu konuyuda buradapaylaştım. Bu iki konuyu birleştirerek kendinize tipografi alanında benzersiz bir site yapabilirsiniz. Günümüz de tipografi o kadar çok önem kazandı ki bu konuda uzmanlar ortaya çıkmaya başladı. Tabi ki yurt dışında bu uzmanlar iyi para kazanırken ülkemizde sadece büyük ve bilindik şirketler önemsemekte.
