Daha önce yazı tipi hakkında bir çok makale yazmıştım. 

• Yazı Tipi özellikleri
• CSS’de Metin Özellikleri
• CSS ve Tipografi
• Metin Yerine Resim/Flash Ekleme Teknikleri (Image Replacement)
• @font-face kullanımı
• CSS ile metinlere gölge vermek
• vd. metin ile ilgili makaleler

Yukarıda görüldüğü gibi yazı tipi ve web sitelerinin tipografisi ile alakalı bir çok konuyu ele aldık. Peki yeterli mi? hayır bence henüz yeterli değil. Henüz tam olarak yeterli değil. Hala bazı sorunlar mevcut bu konuda.

Biz web sitelerimizde yazı tiplerini kullanırken genel kullanıcı bilgisayarındaki yazı tiplerini kullanmak zorunda idik. Eğer kullanıcının bilgisayarında olmayan bir yazı tipi kullanılmış ise tasarımda bu yazıyı çeşitli yöntemler kullanarak sitemize ekliyorduk ve hala ekliyoruz. Bu yöntemler yukarıda linkinide verdiğim Metin Yerine Resim/Flash ekleme teknikleri yazısında anlattım. Bu şekilde yapılan çözümlerin anlamlı kod yazma, esnek kodlama, erişebilirlik vd. yönlerden sakıncalarıda olsa diğer yöntemlere göre daha avantajlıdır.

Daha sonra web geliştiricileri ve standart oluşturucular bu konudaki sorunları gidermek için @font-face kullanımını çıkardılar. Bu yöntem ile web sitesinde her türlü yazı tipi kullanabiliyoruz, tabi bunun için ilk önce yazı tipimizi kullanıcının bilgisayarına yüklüyoruz ve sonra sitemizde istediğimiz yerde bu yazı tipini kullanabiliyoruz. Bu yöntemide @font-face kullanımı adlı yazımda açıkladım.

Gelelim sorunlara;

Lisans Sorunu

İlk sorun yazı tipi geliştiricilerinden geldi, her ne kadar ülkemizde pek ses getirmesede dünyada genel olarak lisans hakkı sorunu çıktı. Bu sorun üzerinde çalışmalar yapılıyor, çeşitli topluluklar konu üzerinde çalışıyor. Bazı gelişmeler olsada kesin bir çözün bulunabilmiş değil.

Yazı Tipi Uzantılarında Standartlaşamama Sorunu

@font-face yazımda belirttiğim gibi neredeyse her tarayıcının kendine özgü bir yazı tipi mevcut, ve diğerlerini desteklemiyor.

Ancak son zamanlarda bu konuda da büyük bir gelişme oldu. En büyük ayak diretici Microsoft yeni çıkaracağı sürümde(ie9) woff desteğini getireceğini duyurdu ve woff grubu ile çalışmayı kabul etti. Diğer yazı tipi uzantılarından daha küçük boyutlara sahip olan woff gelecek için ümit veriyor. Bu konuda gelecek ümit verici.

Yazı Tipi Kenarlarını Yumuşatamama Sorunu

Tasarımcıların kullandığı grafik geliştirme araçlarındaki(Phoshop, Fireworks vd.) yazı tiplerini daha estetik gösteren yazı tipi aliasing sorunu var. Aşağıdaki örnektede görüldüğü gibi @font-face ile uyguladığımız yazı tiplerinde bu sorun nedeni ile tam olarak sitelerimizde bu özelliği kullanamıyoruz.

Burada şöyle bir sorunda daha varki ClearType özelliği başlangıçta seçili olarak gelmeyen Windows Xp hala dünyada çok büyük bir yüzdeye sahip. Bu konuda Mac’ler gayet güzel sonuçlar verdiğinin söyleyebiliriz.

Bu konuda her ne kadar yenide olsa webkit’ten gelen güzel bir haber var. -webkit-font-smoothing özelliğini üzerinde çalışılıyor. Bu özellik eğer standartlaşırsa süper olacak. Sonuçları görmeden konuşmak için erken.

Yazı Tipi Yüklenme Sorunu

@font-face kullanımındaki bir diğer sorunumuzda yazı tipinin kullanıcının bilgisayarına yüklenmesinden kaynaklana sorunlar var. Eğer kullanıcının internet hızı yavaş ise içerikler yükleniyor ve sonra yazı tipi yüklendikten sonra siteye uygulanıyor. Buda site sahiplerinin istemediği bir durum. Konu hakkında farklı tarayıcılarda farklı sorunlarda var.

İşte bu noktada Google her zaman ki gibi web mecrasının geliştirmek ve hızlandırmak konusundaki çabaları kendini gösterdi ve Google Font API aracını bizlerin kullanımına sundu.

Peki bu araç ne işimize yarayacak? Bu araç sayesinde ortak bir yazı tipi havuzu oluşturulmuş olacak. Ayrıca bir çok site tarafından kullanılınca bu araç sizin kullandığınız yazı tipini daha önce bilgisayarına bir defa yüklemiş bir kullanıcı sizin sitenize geldiğinde yazı tipi uyarlaması daha hızlı çalışacaktır. Yani kullanıcının ön belleğinde tutulma yüzdesini arttırmış oluyoruz böylece. Yazı tipi bant genişliği sorunlarıda giderilmiş oluyor ayrıca.

Tabi burada da şöyle bir sorunumuz varki oda Google Font Apı’nin içerdiği yazı tiplerinde şimdilik Türkçe karakter yok. Ümit ediyoruz ki yakında eklenir ve bizlerde bu kaynaktan yararlanırız. 

Sonuç

Her ne kadar burada yazdığım sorunlar şimdilik giderilmese de ilerisi için atılan adımlar olumlu yönde. Ümit ediyorum yakında metinlerimiz daha özgür olacaktır. Arayüz geliştiricilerinin eli daha da kuvvetlenecektir.

Kalın Sağlıcakla

Kaynaklar

• http://www.ozdtasarim.com/blog/googledan-font-face-hizmeti-google-font-api.html
• http://code.google.com/apis/webfonts/docs/getting_started.html
• http://css-tricks.com/google-font-api-interview/
• http://designshack.co.uk/articles/css/how-to-use-the-new-google-font-api
• http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-google-fonts-api-youre-going-to-love-this/
• http://www.bloggerbuster.com/2010/05/how-to-use-googles-font-api-with.html
• http://mashable.com/2010/05/27/type-and-the-web
• http://sixrevisions.com/web_design/google-font-api-guide/

@font-face özelliği web sitelerimizde sistemde yüklü olmayan yazı tiplerini kullanma imkanı verir. @font-face kodu ile kullanıcının bilgisayarına kullanılacak yazı tipleri yüklenir. @font-face özelliği ilk olarak CSS2 ile birlikte geldi, ancak sonradan bazı problemlerden dolayı CSS2.1′de kaldırıldı ve şimdi CSS3 ile birlikte yeniden geldi.

Tipografi hakkında bir çok makale yazıldı ve yazılmaktadır. Bende zamanında CSS ve Tipografi adlı bir makale yayınlamıştım ve orada yazı tipi seçiminin öneminden bahsetmiştim. Biz halihazırda farklı yazı tiplerini sitelerimizde kullanmak için sIFR,  Cufón vd. bazı yöntemleri kullanmaktayız. Bu yöntemler işimizi görse de bazı dezavantajları yok değildi. @font-face bu sorunları gidermek ve yenilikler getirmek için bizlere sunuldu. Bu konuda ümitliyim.

@font-face özelliğini tüm yeni nesil tarayıcılar destekliyor. Diğer özelliklerden farklı olarak ilk defa bu özelliği Firefox, Opera ve Safari sonradan destekledi. Şu an ki durumda kullanmak mümkün olsa da bence en az 4-5 aylık(Firefox’un eski sürümlerinin yerini Firefox 3.5 alması için) bir süre sonra tam anlamıyla bir projede kullanılabilir. Tabi tek sorunumuz bu ise.

Kaynak: Vikipedia

@font-face Yazı tipi Çeşitleri

@font-face kullanımında farklı tarayıcılar farklı yazı tipi dosya uzantılarını desteklediği için birden fazla yazı tipi dosyası hazırlamalıyız. İnternet Explorer .eot uzantılı yazı tiplerini desteklerken, diğer tarayıcılar .ttf ve .otf uzantılı yazı tiplerini desteklemektedir. Biz kullanacağımız yazı tiplerinin ie için .eot uzantılı ve diğerleri için .ttf veya .otf uzantılı dosyalarını hazırlamamız gerekecektir. Ayrıca Opera9 ve Google Chrome içinde .svg uzantılı dosya hazırlamalıyız. 

@font-face kodu ile sayfalarımıza ekleyebileceğimiz yazı tipi çeşitlerini incelersek;

• .eot Uzantılı dosyalar: .eot(Embedded OpenType) Microsfot’un baştan beri desteklediği yazı tipi dosya uzantısıdır. Diğer yazı tipi çeşitlerine destek vermeyi pek düşünmeyen İnternet Explorer bu konuda da ayak bağı olacağa benzer. WEFT aracı ile .ttf uzantılı dosyalarınızı .eot uzantılı dosyalara çevirebilirsiniz. Biraz karışık geldi bu program bana.
• .ttf ve .otf uzantılı dosyalar: Genelde Windows işletim sistemininde kullandığı bu yazı tipi dosya çeşitlerini Firefox, Safari, Opera desteklemektedir. 
• .svg uzantılı yazı tipi dosyaları: Vektörel, esnek yapılı yazı tipi dosya çeşidi. Safari, Google Chrome, Opera destekliyor. FontForge sitesindeki SVG uzantılı oluşturulan Opera’da sorun oluyor. Batik bu araç var, ama nasıl kullanıldığını öğrenebilmiş değilim.
  Önerim fontsquirrel.com sitesindeki aracı kullanmanız.
• woff uzantılı yazı tipi dosyaları: Web için kullanılacak bir standart. Boyut olarak diğelerine nazaran %40′lara varan bir avantaj sağlıyor. Firefox 3.6 sonrasında destekleyeceğini açıkladı.

Yazı tip dosyalarını birbirine çevirme araçları

• ttf yazı tipinizi font-face’in desteklediğin tüm yazı tiplerini(.eot, .svg, ttf, woff) üreten güzel bir araç: http://www.fontsquirrel.com/fontface/generator
• ttf yazı tiplerini eot’ya çevirmek için çevirim içi araç: http://www.kirsle.net/wizards/ttf2eot.cgi
• Farklı yazı tiplerini birbirine çeviren çevirim içi araç: http://onlinefontconverter.com/
• ttf’den eot ye çeviren başka bir çevirim içi araç http://ttf2eot.sebastiankippe.com/
• ttf’den svg’ye çevirme aracı: http://xmlgraphics.apache.org/batik/tools/font-converter.html

Bunların dışında bazı programlar varsa da bunlar yeterli araçlar bence.

Burada şunu söylemeden geçemeyeceğim, fontsquirrel.com sitesi farklı yazı tipi dosyaları üretmede çok yardımcı oldu. Bir çok site ve program farklı yazı tipi dosyaları üretirken Ethan’ın sitesi web’de kullanılacak tüm yazı tipi dosya uzantılarını üreterek bana çok yardımcı oldu. İlk kez fontsquirrel.com sitesindeki aracı kullandığımda .svg uzantılı dosyaların Opera’da kesik göründüğünü fark ettim. Sonra bu sorunu site sahibi ile paylaşmak istedi, sağ olsun Ethan ilgilendi ve aracı geliştirdi. Buradan Ethan’a tekrar teşekkürlerimi sunuyorum. Thanks, Ethan  

@font-face Kodu

Evet yazı tipi dosyalarımız hazırsa kodumuzu yazmaya başlayabiliriz. @font-face kod yapısı

        @font-face {
        font-family: Gentium;
        src: url(http://site/fonts/Gentium.ttf);
        }

        p { font-family: Gentium, serif; }

Kod yapımız iki kısımdan oluşmaktadır. İlk başta özel yazı tipimizi sisteme yüklüyoruz. Sonra da bu yazı tipini kullanıyoruz. 

Ancak durum bu kadar kolay değil. Buradan itibaren ie kendini gösteriyor ve farklı yazı tipi ile farklı kod yazmamız gerekiyor. Bundan başka bir kaç sorunuda gidermek için Paul Irish‘in yazdığı makaleden çıkardığımız kod:

@font-face {
    font-family: 'Graublau Web';
    src: url('GraublauWeb.eot');
    src: local('Graublau Web Regular'), local('Graublau Web'),
    url('GraublauWeb.woff') format('woff'),
    url('GraublauWeb.svg#GraublauWeb') format('svg'),
    url('GraublauWeb.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

p { font-family: "Graublau Web", serif; }

11 Kasım 2011 eklendi: font-weight: normal; font-style: normal; Chrome’un kalın ve normal anlama problemi nedeni ile eklendi.

Bu kodlamanın özel yazı tipini sisteme tanıtırken ilk olarak .eot uzantılı yazı tipini ekliyoruz ie için. Sonrasındaki satır ise diğer tarayıcılar için yazılan kod. Buradaki yereldeki (local) tanımı eğer bu yazı tipi kullanıcının bilgisayarında var ise yüklenmeden kullanılması için ve de  sonraki kodu ie’den gizlemek içindir. Devamı kodlamada diğer tarayıcılar içindir.

Kendi Örneğimizi Yapalım

Hasan Yalçın’ın sitesinden Türkçe yazı tipi indiriyoruz. TR Centurion Old Italik.TTF yazı tipini seçtim, sonra http://www.fontsquirrel.com/fontface/generator sitesinden farklı yazı tiplerini ürettim. Şimdi elimde hem .ttf uzantılı hemde .eot uzantılı yazı tipim var.

.ttf ve .eot uzantılı dosyalarım hazırsa kodu yazmaya başlayabiliriz.

@font-face {
        font-family: 'TR Centurion Old  Italic';
        src: url('TR_Centurion_Old_Italik.eot');
        src: local('TR Centurion Old  Italic'), local('TRCenturionOldItalic'), url('TR_Centurion_Old_Italik.woff') format('woff'), url('TR_Centurion_Old_Italik.svg#TRCenturionOldItalic') format('svg'), url('TR_Centurion_Old_Italik.TTF') format('truetype');
}

Daha sonra bu yazı tipini sayfamızda kullanabiliriz.

h1{font:44px 'TR Centurion Old Italic', Arial, sans-serif; color:#1259C7;}
h3{font:24px 'TR Centurion Old Italic', Arial, sans-serif; color:#1259C7;}
p.ilkParagraf{font:16px/1.5em 'TR Centurion Old Italic', Arial, sans-serif;}

Örnek sayfayı görmek için tıklayınız. Yazı tipi özgürlüğüne hoş geldiniz. 

@font-face Yükleme Zamanı

Kullanıcının bilgisayarına yükletilen yazı tipi dosyaları yüklü dosyalar olabiliyor. Sitede kullanılmayacak bazı yazı tipi karakterleri kaldırılabilir. Bazı TTF dosyaları 1Mb bulduğunu düşünürsek biraz yükleme zamanını düşünmek lazım. Yazı tipi dosyaları belli karakter setlerini içerir. Latin harfleri, Yunan harfleri, Para işaretleri vd. Bu karakter setlerinde kullanmadıklarımızı silip yazı tipi dosyasının boyutunu azaltabiliriz. Aynı şekilde tek tek karakterleride silebiliriz. 

Yazı tipi dosyaların iki şekilde yorumlanıyor. İlk olarak Firefox’un yorumlaması; Sayfa genel yazı tipi ile açılıyor taki gömülen yazı tipi dosyası yüklenene kadar. Yazı tipi dosyası yüklenince asıl yazı tiplerini görüyoruz. İkinci yorum ise diğer tarayıcıların tercih ettiği yol. Bu yorumda yazı tipi dosyası yüklenene kadar kullanıcı bekliyor, yükleme tamamlanınca yazı görünüyor.

Bu nedenden dolayı font-face tanımını sayfamızın en üstüne koymalıyız. Script dosyalarımız varsa onları tanımlamamızdan sonraya koymalıyız.

Yazı tipi dosyalarımızı sıkıştırabiliyoruz. sunucumuz gzip’i destekliyorsa yazı tipi dosyalarımızı sıkıştırıp zaman kazanabiliriz. Ayrıntılı bilgi için tıklayınız.

Yazı tipi dosyaları ön belleğe alındığı için kullanıcının sonraki ziyaretlerinde daha az bekleme yapacaktır.

@font-face Sorunları

• Örnek sayfamıza farklı tarayıcılarda baktığımızda her bir tarayıcının ufak tefek farklılıklarla sayfayı gösterdiğini göreceğiz. Ben yaptığım örneklerde yazı tipine göre değişiyor bazı yazı tiplerinde mükemmele yakın sonuç verirken bazılarında köşeleri yumuşatmadığı için kötü sonuçlar elde edebiliyoruz. Bizim kullandığımız yazı tipi(TR Centurion Old Italik) eğik olduğu için pek belirgin bir fark görünmüyor, gayetde hoş oldu. 
• En büyük sorunlarda biri hala ağırlıklı olarak kullanılan Windows XP’de ClearType seçeneğinin başlangıçta aktif olmamasıdır. Mac kullanıcılarının işletim sisteminin yazıları daha yumuşak kenarlı göstermesinden dolayı yazıları daha göze hoş şekilde göreceklerdir. Windows kullanıcılarının ClearType seçili durumda standarda nazaran daha iyi görüntüler elde edeceği aşikar, ancak Mac’e göre kıyaslarsak Mac bayağı bir fark atıyor PC’ye. 
• @font-face’in sifR vd. yöntemlere göre en büyük dezavantajı anti-aliasing özelliğinden yoksun olması. Ancak kullanılan yazı tiplerinin seçiminde eğer daha seçici olursak bu durumu halledebiliriz.
• font-face kullanımındaki en büyük sorunlardan biriside kullanıcının bilgisayarına indirilebilen ve isteyenleri kolayca elde edebileceği yazı tipi dosyalarının lisans haklarının nasıl korunacağı konusundadır. CSS2.0 sonrası kaldırılmasının ana nedenlerinden biriside budur. Bazı çözümler üretilse de tam anlamıyla bir çözüm elde edilmiş değildir.
• Firefox 3.5 ile font-face kullanımını desteklemeye başladı. Firefox farklı hostlardan yazı tipi kullanmaya izin vermiyor(Böyle bir durum için .htcaccess dosyasına bir ekleme yapmak gerekiyor). Ayrıca font-stretch, unicode-range ve SVG yazı tipi dosyalarını da desteklemiyor. Firefox 3.6 sürümünden sonrası için yeni yazı tipi gelişmelerini destekleyeceğini açıkladı.
• Opera’da local() yazı tipi tanımlamasında tırnak kullanmayınca sorun yaşayabilirsiniz. Bu nedenle tanımlarda hep tek veya çift tırnak kullanmalıyız.
• Ziyaretçinin bilgisayarındaki isim ile bizim yazı tipi ismi aynı değilse local() tanımı pek bi işe yaramayacaktır. Bu nedenle bildiğimiz tüm isimleri ard arda local() tanımı içinde yazarak bu sorunu aşabiliriz.
  src: local("TR Centurion Old Italik"),
  local(‘TRCenturionOldItalik‘),
  local("Centurion Old Italik"),
  local(‘CenturionOld‘),
  url(../font/font.ttf) format(‘truetype’);
• FontForge programı ve fontsquirrel.com sitesinde üretilen .svg dosyaları Opera’da içiçe görünüyor. Çözüm için Batik‘i öneriyorlar.
• Bir çok ücretsiz yazı tipi indirebileceğimiz site var ve bir çoğu yabancı site. Burada şöyle bir sorun var, çoğu Türkçe karakter içermiyor. Bunun için bizim bu karakterleri eklememiz gerekiyor. Google’da şöyle bir arama yaptım "Font türkçeleştirme" bu işi anlata bir çok site var. 
• Firefox kullanıcıları ilk olarak yazı tipi gömülmemiş halini görürler, ne zaman yazı tipi yüklenirse o zaman özel yazı tipimizi görürler.

@font-face’in Geleceği ve Sonuç

Genel olarak küçük boyutlu fontlar güzel görünürken büyük boyutlu fontlarda iyi görüntü alamayabiliyoruz. Ayrıca kıvrımlı hatlara sahip yazı tiplerinde kenarlar daha pürüzlü görünüyor. Bence kullandığınız fontu Windows xp’de test etmeden yayına almayınız. 

Tarayıcı kullanım oranlarını incelediğimizde %94′lik bir font-face destekleyen tarayıcı grubu var. 4-5 ay sonra bu oran 98 – 99 civarına gelecektir.

@font-face özelliğinin bu kadar geç desteklenmesindeki en büyük sebep elbetteki yazı tipi üretenlerin haklarının korunmasıdır. 

@font-face kullanılan sayfalardaki sonuçlar zamanla daha iyi sonuçlar vereceğini düşünüyorum. İşletim sistemleri, tarayıcılar ve yazı tipi geliştiricileri zamanla bu özelliğin farkına varıp buna göre kendilerini geliştireceklerini düşünürsek zamanla daha iyi sonuçlar alacağımız kesin.

Yazı tipi özelinde Tipografi genelindeki bu konuda araştırdığımız ve öğrendiğimiz kadarını sizlerle paylaşmaya çalıştım, ancak konu çok geniş ve derin olduğu için bir çok yönden eksik kalmış olabilir. Bir kusurumuz aksaklığımız oldu ise affola.

Kaynaklar

• http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/ (ayrıntılı makale)
• http://nickcowie.com/2008/font-face/
• http://www.w3.org/TR/css3-webfonts/#font-descriptions
• http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ (kod yapısı)
• http://www.kadirgunay.com/font-face-kullanimi-ve-kolayliklari.html
• http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ (detaylı)
• http://randsco.com/index.php/2009/07/04/p680 (farklı tarayıcılar için)
• http://craigmod.com/journal/font-face/
• http://nimbupani.com/blog/font-in-your-face.html
• http://opentype.info/blog/2009/07/29/why-webfont-services-are-the-future-of-fonts-on-the-web/ (detaylı anlatım)
• http://www.zeldman.com/2009/08/17/web-fonts-and-standards/
• http://blog.themeforest.net/tutorials/css-font-face-and-15-free-fonts-you-can-use-today/
• http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/(hız)
• http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master
• http://randsco.com/index.php/2009/09/04/better_font_face_syntax
• http://hacks.mozilla.org/2009/10/font-control-for-designers/ (Firefox 3.6 ile yeni font tipi desteği)
• http://www.font-face.com/
• http://www.alistapart.com/articles/cssatten
• http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
• http://reference.sitepoint.com/css/at-fontface
• http://www.seomium.com/xhtml-css-javascript-kodlama/ucretsiz-ve-yasal-fontlarla-font-face-kullanimi.html
• http://randsco.com/index.php/2009/07/04/p680
• http://opentype.info/demo/webfontdemo.html (örnek)
• http://devfiles.myopera.com/articles/593/webfonts.html (örnek)
• http://www.hipertipo.org/stuff/webfonts/ModularSerif.html (örnek)
• http://www.typotheque.com/webfonts/sample (örnek)
• http://nimbupani.com/blog/about-fonts-in-svg.html (SVG hakkında)
• http://www.spoono.com/html/tutorials/tutorial.php?id=19 (EOT hakkında bilgi)
• http://www.phpied.com/gzip-your-font-face-files/ (optimizasyon)
• http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/
• http://paulirish.com/2009/the-direction-forward-with-web-fonts/
• http://spyrestudios.com/21-awesome-font-face-embedable-typefaces/ (örnekler)
• http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/

Geolocation

Geode internet tarayıcıları için yeni kavram. Mozilla laboratuarlarının geleceğin tarayıcıları hakkındaki düşüncelerinden biri idi bu. Kullanıcıların yerini belirleyip ona göre sayfalar ve içerikler sunmak . Örneğin yeni bir yere taşındınız ve en yakın yemek yyiyecek yeri veya marketi bulmak için internet tarayıcını size yardımcı olabilecek.

Firefox 3 ile eklenti yardımı ile gelen bu özelliği, isterseniz deneyebilirsiniz. Buradan indirip deneyebilirsiniz. Deneme yapmak için örnek bir siteye yönlendiriyor, ancak Türkiye’den kullananlar için hata veriyor. Türkiye’deki ip durumu düşünüldüğünde pek kullanışlı bir araç olmayacak. Ama ne diyelim gelecekten ümitliyiz.

Gizlilik konusuda düşünülerek kullanıcının verdiği kadar bilgi ile sonuçları gösteriyor. Üst barda çıkan bilgi ekranı yardımı ile yapılacak.

Firefox3.1 ile birlikte gelecek olan özellik Geode eklentisinden daha iyi olacağı W3C Geolocation specification standartlarını destekleyen bir yapı kullanılacağı belirtiliyor. Bu standardı javascript gibi düşünebiliriz.

İnternet tarayıcıları gittikçe kullanıcıya daha çok düşünen araçlar olmaya başlıyor. Son zamanlardaki rekabet en çok kullanıcıya yaradığı kesin.

http://www.informationweek.com/galleries/showImage.jhtml?galleryID=263&articleID=211201744 sitesinde 3-10 arasındaki resimler bize işleyişin nasıl olduğunu güzel bir şekilde gösteriyor.

@font-face ile yazı tipi desteği

Web kod yazarları ve tasarımcıların en büyük sorunlarından birisi işletim sistemin desteklediği başlangıçta yüklü yazı tipleri dışındaki yazı tiplerini web sitelerinde kullanamama sıkıntısıdır. Tam bir kullanamama diyemeyiz tabi kullanabiliyoruz ama başlangıçta yüklü olanlar gibi değil.

Firefox 3.1 ile birlikte gelen bu özellik desteği sayesinde farklı yazı tipleri kullanımında büyük bir adım daha atılmış oluyor. Gelecek ümit veriyor bize.

Mac ve Windows kullanıcıları için eklenen bu özelikle Linux için Firefox 3.1 kararlı sürümü ile birlikte gelecekmiş.

Beni en çok sevindiren özelliği bu oldu açıkçası.

@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

Video ve Auido Desteği

HTML 5 ile birlikte gelen <video> ve< auido> elemanı desteği Firefox 3.1 ile birlikte geliyor. Bu elemanlar sayesinde görüntülü ve işitsel öğeleri web sayfalarına eklemek daha basit olacak. Ayrıca Javascript ile bu nesneleri etkileşimli kullanabileceğiz.

Adres Çubuğunda Yenilikler

Adres çubuğunda özel karakterler ile arama sağlanarak sınırlarımızı belirlememiz sağlanmış. Yeni çıkan tarayıcılarda adres çubuğu artık çok fonksiyonlu hale getirilmeye başlandı. Firefox3.1 ile gelen özel arama karakterleri yardımı ile aramayı neredeyse tek adres çubuğuna taşımışlar diyebiliriz.

^ işareti ile geçmişte gezdiğimiz sayfalarda arama yapabiliyoruz.
* işareti ile favorimize eklediğimiz sitelerde arama yapabiliyoruz
+ işareti ile eklediğimiz etiketlerde arama yapabiliyoruz.
# işareti hem başlıkta hemde etiketde arama yapmak için kullanıyor.

Yeni Javascript Motoru – TraceMonkey

Yeni Javascript motoru ile Google Chrome’un tahtını elinden aldı. SunSpider JavaScript testinde bir numara. Google Chrome’un geliştirdiği Javascript motoru ile tarayıcılar Javascript motorlarını tekrar gözden geçirmek zorunda kaldı. Firefox yeni Javascript motoru ile hızını arttırdı. Rekabet kullanıcıya yarıyor.

TraceMonkey başlangıçta kapalı geliyor açmak için

1. Adres bara about:config yazın
2. Filter alanında javascript.options.jit.content girip üzerine iki kere tıklayıp false olan değeri true yapın
3. Tarayıcıyı açıp kapatın

XHR

XMLHttpRequest (XHR) API’si. Javascript ve diğer diller tarafından kullanılan bu API, sunucu ve istemci arasında XML ve diğer verilerin aktarılmasını sağlıyor. Bu API’nin Firefox 3.0 ile beraber gelmemesine sebep olarak, XHR’nin spesifikasyonlarının kesinleşmesi ve güvenlik modelinin iyileştirilmesi için biraz daha zamanın olmasıymış. Mozilla yeterli zamanın geçtiğine kanaat getirmiş ki 3.1 bu özelliği eklemiş.

Bu özelliklere ek olarak

• Web Standartlarına daha uygun: Gecko düzen motorunu web standartlarına daha uygun hale getirilmiş. Acid 3 testinden 89 alarak mevcut tarayıcılar(Google Chrome, İnternet Explorer7 – 8 b2) arasındaki en iyi notu aldı.
• CSS 2.1 ve CSS 3 özelliklerinin desteği eklenmiş
• Daha önce eklenti ile yapılan sekmeler arası geçiş için ön izleme görünümü eklenmiş.
• Adres bar da girdiğimiz kelimeleri filtreleme özelliği eklenmiş.

Kararlı Sürüm ile gelecek özellikler

Özel Mod

Google Chrome ve Internet Explorer 8 ile birlikte gelen özel mod özelliği Firefox 3.1 ile birlikte gelecek. Bu özellik sayesinde

Speed Dial

Speed Dial ile yeni açılan sekmede en sık kullanılan web sitelerini küçük resimleri ile birlikte listeleyebiliyoruz. Daha önce eklentiler ile kullandığımız bu özellik yeni sürüm ile birlikte geliyor.

Daha fazla yenilik

Bunun haricinde Firefox 3.1 ile birlikte bir çok kullanışlı özellikler getirilecek.

• http://developer.mozilla.org/web-tech/2008/10/14/firefox-31-beta-1-an-overview-of-features-for-web-developers/
• http://www.siberkultur.com/?q=firefox-3-1
• http://mehmetergin.blogspot.com/2008/10/firefox-geolocation-api-specification.html
• http://lifehacker.com/5063481/firefox-31-adds-keyword-filters-to-the-awesomebar
• http://lifehacker.com/396154/firefox-31-new-features-already-in-the-works
• http://lifehacker.com/5048604/firefox-31-to-add-private-browsing-mode
• http://lifehacker.com/5049728/firefox-31-to-enable-color-profile-support-by-default
• http://lifehacker.com/5062744/firefox-31-to-include-smarter-session-restore
• http://lifehacker.com/5063202/firefox-31-beta-1-now-available-for-download-first-look
• http://www.readwriteweb.com/archives/firefox_31_beta_1_geolocation.php
• http://blogs.zdnet.com/hardware/?p=2781
• http://news.cnet.com/8301-17939_109-10066397-2.html?part=rss&tag=feed&subj=Webware
• http://ed.agadak.net/2008/07/firefox-31-restricts-matches-keywords
• http://www.tgdaily.com/html_tmp/content-view-39752-140.html
• http://www.informationweek.com/galleries/showImage.jhtml?galleryID=263&articleID=211201744
• http://www.pclabs.com.tr/2008/05/23/mozilla-firefox-31-bu-sene-sonunda-cikiyor/

İlk CSS derslerimizde CSS’in avantajlarını sıralarken metinlere daha fazla hükmetme özelliğine sahip olduğumuzdan bahsetmiştik. Tipografihakkında sizlere genel bir bilgi verecek değilim, bu benim haddimede değil zaten. Biz buradadaha çok Stil Şablonlarının bize tipografi adına kazandırdıklarını göstermeyeçalışacağız ve CSS ile sayfalarımızı daha dikkat çekici ve okuna bilir hale getireceğimizi göreceğiz. Tipografihakkında genel bir bilgi vermesi açısından güzel bir çalışma olan Doç. Hasip Bektaş’ın “İnternetteki Tipografi Sorunları ve GörselKirlenmeye Karşı Öneriler” adlı makalesini okumanızı tavsiye ederim. Ayrıca kaynakçakısmındaki linklerden de daha fazla bilgi alabilirsiniz.

Diğer makaleleri yazarken bazı konularda kaynak bulma konusunda ciddi sorunlar yaşadığım oldu, ancak tipografi hakkında makale yazmaya karar verip bilgi toplamaya başladığımda önceki yazılarımın aksine tipografi hakkında çok fazla bilgi bulunduğunu gördüm. Ne yazık ki bunların çoğu yine İngilizce. Bu kaynak çokluğu bu makalemin gecikmesine neden oldu. Ama olsun bilginin fazla olmasınınbir sakıncası yok.

CSS ile birlikte gelen bir çok avantaj mevcut bunları önceki derslerimizde yazdık. Şunu söyleyebilirim ki web sitelerine CSS en büyük katkıyı tipografi kısmından yapmıştır. CSS ile birlikte gelen özellikler sayesinde yazılarımızın birçok özelliğine tek elden kontrol imkanına sahibiz. CSS’in tipografiye direk etkisi olan capitalize, uppercase, lowercase, text-decoration, letter-spacing, word-spacing, text-indent ve line-height özelliklerinin yanı sıra dolaylı etkisi olan margin, border, padding, background-color ve background-images özelikleride vardır.

Ölçü

İlk olarak sayfanın ölçüsüne bakalım. Okunabilir sayfalar yaparken kullanıcıya sunulan metinlerin genişlikleri önem kazanmıştır. Birçok kaynakta sayfanın ölçüsü verilirken karakter sayısı bir birine yakın değerler verilmektedir. Genel olarak tek kolonlu yapı kullanan sayfalarda kolon genişliği 52-78 karakter(boşluklar dâhill) içerecek şekilde ayarlanması tipografi bakımdan uygun görülmüştür. İki kolon bir yapı düşünülüyor ise her bir kolonun 40-50 karakter içermesi daha uygun görülüyor.

400px genişliğinde bir katman içine 12px boyutunda 66 karakter sığdırabiliriz. Ancak yazı boyutunu 16px çıkardığımızda karakter sayısı 50′ye düşecektir.



Eğer genişliklerimizi em cinsinden verir isek katman genişliğini 33em yapıp yazı boyutunu 1em olarak belirlediğimizde 77 karakter sığacaktır. Yazı boyutunu arttırdığımızda mesela 1.5em’e çıkardığımızda satır içindeki karakter sayısı değişmeyecektir, çünkü genişlik değerimizde yazı boyutu ile bağlantılı olduğu için oda artacaktır. Em genellikle elastik sayfalar oluştururken kullanırız. Em ve elastik sayfalar hakkında daha ayrılı bilgi için CSS Birimleri ve CSS İLE WEB SAYFASI OLUŞTURMA II makalelerine  göz atın.

Yazı Tipleri

Tipografi yazı tipi seçimi ile başlar. Bir çok yazı tipi olmasına karşın web’de sadece kullanıcıların bilgisayarında bulunan yazı tiplerini kullanmamız gerekir. Web tarayıcı ve işletim sistemine göre yazı tipi kullanılma oranları gösteren visbone.com listesine bir göz atmanızı tavsiye ederim. Kullanıcının bilgisayarında bulunmayan yazı tiplerinin kullanımı sayfalarımızın kullanıcının bilgisayarında kötü görünmesine neden olabilir.

Burada bir konuya daha değinmeliyiz ki kullanıcının bazı tercihlerine karşı bizim yapacak pek bir şeyimiz kalmaz. Mesela Anti-aliasing(Yazı kenarlarındaki keskin hatların, kırıklıkların giderilmesi, etrafının yumuşak hatlar ile doldurulması.) seçimi genelde Windows kullanıcıları ve Mac kullanıcıları için standart gelen bir seçimdir. Bu yazılarımızın daha oval yani güzel görünmesini sağlar. Ancak kullanıcı anti-aliasing özelliğini kapatması halinde sitemizde kullandığımız yazı tiplerinin görünümü keskin kenarlı görünecektir ve bu bizim istediğimiz olay değildir.

Web üzerinde genel olarak yazı tiplerini iki gruba ayırabiliriz. serif yazı tipi ailesi ve san-serif yazı tipi ailesi. Bu ayrımı aşağıdaki resimde çok iyi bir şekilde görmekteyiz.

serif fontlar yazılı alanda bayağı popülerdir. Web âleminde ise sans-serif fontlar daha popülerdir. Bu söylediğimden web’de hiç serif font kullanılmaz diye bir mana çıkaramayız elbette kullanılabilir ancak sans-serif daha çok tercih edilir. Genel font kullanımı:

body{
	font-family:Arial, Helvetica, sans-serif
}

Şeklindedir. Burada birincil fontumuz Arial’dir alternatifi Helvatica ve yazı tipi ailesi sans-serif olduğunu belirtiyoruz. Normalde sadece Arial yazmamızda yeterlidir, ancak kullanıcının bilgisayarında bu yazı tipinin olmaması durumu düşünülerek alternatif yazı tipi ve yazı tipi ailesi yazılmıştır.

Her ne kadar sadece kullanıcının bilgisayarında bulunan yazıtiplerinin kullanılması önerilmekte ise farklı yazı tipi kullanımınada olanak vardır. Macromedia Flash’ın font gömme özelliğinden yararlanarak istediğimiz yazı tiplerini web sayfamızda kullanabiliriz. Yöntem biraz karmaşık olasada isteyenler için iyi bir çözümdür. Ayrıntılı bilgi için “Metin Yerine Resim/Flash Ekleme Teknikleri (Image Replacement)” makalemize bir göz atın. Ayrı Microsoft’un yazı tipi gömmek üzerine çalışmaları sürmektedir. Eğer bu çalışmalar olumlu sonuç verirse tipografi açısından çok güzel gelişmeler yaşanacağı kesindir.

Yazı tipi seçimi için bazı kaynaklarda öneriler vardır. Daha geniş ve yüksek yazı tiplerinin web’de daha iyi seçilebildiği ve okunduğu belirtilerek Verdana, Trebuchet ve Helvatica yazı tiplerinin kullanılması önerilmektedir. Ancak ben bu konuyu tasarımcılara bırakmayı yeğlerim açıkçası.

Yazı Boyutu

Web tipografisinde en çok kullanılan özellik yazı boyutudur. Ekran kullanımını en kolay şekilde ayarlamamıza yardımcı olur. Yazı boyutunu belirlerken iki ölçümüz vardır sabit değerler(px vb.) ve göreceli değerler(em, % vb.) Farklı yazı boyutları ile sayfamızdaki hiyerarşiyi ayarlayabiliriz. Bölyelikle daha okunabilir ve düzenli sayfalar elde edebiliriz.

Bir çok web sayfası kodlayıcısı aşağı yukarı tüm sayfalarında belli standart yazı boyutları kullanır. Bizde burada bu genel kullanılan yazı boyutları önerilerini sıralayalım:

• İçerik metinleri için 11px/16.5px arasında değerler
• Ana başlıklar(Anasayfa, Ürünler gibi başlıklar için) 24px
• Ana başlıkların altındaki ikincil başlıklar için 18px
• Menü elemanları ve üçüncü derece başlıklar için 16px
• Diğer başlıklar için 13px

Genel bir css kodunu yazarsak

body {font: 11px/1.5em "Lucida Grande"; } 

h1, h2, h3, h4, h5, h6 {font-family: helvetica, arial, verdana, sans-serif; font-weight: normal;} 

h1 { font-size: 24px; }

h2 { font-size: 18px; }

h3 { font-size: 16px; line-height:2; }

h4 { font-size: 13px; line-height:1.25; font-weight:bold; }

h5 { font-size: 12px; font-weight:bold; }

h6 { font-size: 12px; }

veya em cinsinden

body {font: 11px/1.5em "Lucida Grande";} 

h1, h2, h3, h4, h5, h6 {font-family: helvetica, arial, verdana, sans-serif; font-weight: normal;} 

h1 { font-size: 3em; }

h2 { font-size: 2em; }

h3 { font-size: 1.5em; line-height:2; }

h4 { font-size: 1.2em; line-height:1.25; font-weight:bold; }

h5 { font-size: 1em; font-weight:bold; }

h6 { font-size: 1em; }

Bu konuda çok güzel bir doküman hazırlayan BluePrint CSS Anaçatısının tipografi kısmına göz atmanızı tavsiye ederim.

Satır Yüksekliği(line-height)

Web tipografisinin en önemli özelliklerinden biridir satır yüksekliği tanımı. Metinlerin görünümünde büyük etkisi vardır. Satır yüksekliği için genel kabul yazı boyutunun1.4-1.6 katı kadar bir mesafedir.

body {
    font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
    line-height: 1.5em;
}

CSS kısaltmalarında tek yazı tipi değerine tüm yazı özellikleri ekleme imkanı sunar.

body {
	font:11px/1.5em "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}

Yazılara Vurgu Eklemek

CSS ile yazılarımızın önemli kısımlarını vurgulamak için bir kaç yöntem kullanırız.

Kalın: Vurgu için en çok kullanılan özellik yazıyı kalın yapmaktır. Normalde yazı tiplerinin kalın halleride vardır ancak web yazı tiplerinde böyle bir seçim yapamıyoruz bu nedenle yazılarımıza kalınlık kazandırmak için

h1{
	font-weight:bold;
}

kodunu kullanırız. Kalın yazılmış yazılar diğer yazılara göre  daha dikkat çekici görünecektir. Genelde başlıklar ve önemli alanlar kalınlaştırılır.

Eğik: Vurgu için ikinci olarak eğik(italik) yazı şekli kullanılır. Eğik yazı şekli ekranda okunurluğu azaltsa da kullanıcıya farklı bir görünüm ile dikkat çeker.

blockquote  { margin: 1.5em 0 1.5em 1.5em; color: #666; font-style: italic; }

Altıçizili: Üçüncü olarak altı çizili yazılar kullanılır. Web’de genelde altı çizili yazılar link olarak kullanılır ve böyle algılanır.

a{ color: #125AA7; text-decoration: underline; outline: none; } 

Renk: Yazılarımızda farklı alanlara vurgu yapmak için kullanılan özelliklerden biride renk(color) özelliğidir. Meselahatalı alanları belirlemek için kırmızı renk kullanımı yaygındır.

.hata{ color:#f00}

Büyük Yazı: Vurgu yapmak için nadiren de olsa tipografi bakımdan buda kullanılabilir bir seçenektir ama en azkullanılan vurgu tipidir.

Metin hizalama

CSS’in metin ve sayfa yatay hizalaması içintext-align özelliğini kullanırız. 

Aldığı değerler:  left(metni sola yaslar), right(metni sağa yaslar)ve  justify (metni iki yana yaslar) ve center(metini ortalar). Genelde leftdeğeri kullanılır. justify değeri uzun içerikli metinlerde kullanılanılabilir ancakbazı bölümlerde kötü görünüme neden olabilir. Özellikle son satırda sorunları vardır.

justify(iki yana hizalı)  kullanımında meydana gelen sorunları gören W3C çalışmaları devam eden CSS3 ile birlikte inter-word veinter-character özelliklerini eklenmiştir.Bu özellikler yardımı ile ileride justify özelliğini daha fazla kullanacağımızıdüşünüyorum.

Ayrıca CSS3 ile birlikte text-align-lastözelliğide gelmektedir ki  bu özellik sayesinde justify ataması yaptığımızmetinlerin son satırında meydana gelen kelimeler arası fazla boşluk sorununuçözmüş olacağız. Ancak biraz daha sabır gerekiyor.

Harf Aralığı(letter-spacing)

Aslında bir kod yazarı letter-spacing özelliğine pek dokunmaz. Webtarayıcılarının tercihine bırakır bu değeri. Genelde atanan değerler makuldeğerlerdir, ancak mesela başlıklarda daha yüksek harf aralıkları kullanarakbaşlık ve metin arası farklılığı belirtilmiş olur ve başlıklarımız daha belirginhale getirebiliriz. Özel kullanımlarda yararlı olabilecek bir özelliktir.

Sözcükler Arası Mesafe(word-spacing)

Bu özellikte genelde dokunulmayan özellikler arasındadır. Ancak her web sayfası aynıdeğerleri kullanacak diye bir şey yoktur. Bazen farklı sonuçlar elde etmek içinfarklı değerler kullanabiliriz.

p {word-spacing: .2em;} 

Paragrafın ilk satırını içeriden başlatmak (text-indent)

Birçok dergi, gazete ve yazıda karşılaştığımız bu yöntemi CSS yardımı ile çok basit bir şekilde yaparız.

p {
	text-indent: 2.5em;
}

Göreceli değer kullanmak daha mantıklıdır.

Sonuç

blueprint tipografi uygulamalarını göz atın . http://bjorkoy.com/blueprint/typography-test.html

Web tipografisinde CSS’in yeri çok önemlidir. sFIR gibi yeni metotların geliştirilmesi ile web’de tipografi bakımından daha iyi sonuçlar alacağımıza inanıyorum. Ancak sFIR bana biraz zorlama bir metot gibi geliyor. Bu konuda işletim sistemi üreticilerinin daha farklı çözümlere gitmeleri gerektiğini düşünüyorum. Microsoft‘un bu yönde çalışmaları var ancak hala tam sonuçlanmış çözümler değil.

Son olarak CSS ile yapılabileceklere bir örnek olması açısından 3point7designs.com yaptıklarına bir göz atmanızı öneriyorum. Sınırları zorlayan güzel örnekler

Kaynaklar

• http://webtypography.net/toc/
• http://www.sitepoint.com/print/anatomy-web-fonts
• http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography/
• http://www.digital-web.com/articles/css_typography/ (css ve tipografi hakkında genel bir yazı)
• http://www.digital-web.com/articles/css_101/ (uygulamalı css ve tipografi)
  
• http://www.fotografya.gen.tr/issue-6/hasip.html (genel tipografi bilgisi Türkçe)
  
• http://www.webmonkey.com/design/fonts/tutorials/tutorial3.html (Çok geniş bir tipografi bilgisi)
  
• http://clagnut.com/search/index.php?q=typography (tipografi linkleri)
• http://www.wpdfd.com/issues/23/typography/ (genel bilgi)
• http://www.3point7designs.com/blog/2006/09/20/advanced-typography-techniques-using-css/  (farklı metin uygulamaları)
  
• http://www.alistapart.com/articles/sizematters/ (font boyutunu farklı tarayıcılarda farklı olma sorunu ve çözümü)
  
• http://www.lifeclever.com/web-typography-40-resources-tools/ (Tipografi araçları)
  
• http://www.mandarindesign.com/troops.html (uygulamlar var)
  
• http://www.3point7designs.com/blog/2007/08/16/web-typography-50-sources-for-inspiration-and-instruction/
• http://typetester.maratz.com/
• http://www.webstyleguide.com/type/
• http://www.sitepoint.com/blogs/2007/04/30/typography-baseline-rhythm-deciphered/
  
• http://ceyhunaksan.com/css-ve-tipografi/
• http://topfunky.com/baseline-rhythm-calculator/ (tipografi çevirimiçi aracı)
• http://www.wpdfd.com/issues/23/typography/
• http://www.peachpit.com/store/product.aspx?isbn=0321305256

Örneğin sitemizde kullanılan genel yazı tipi ve yazı tipi rengini body içinde tanımlayarak bir çok tekrarı engellemiş oluruz.

body {
	font:Arial, Helvetica, sans-serif;
	color: #474747
}

body{
	font-family: times, "times new roman", serif;
}