Blog Yazı Tipi (Font) Tercihi ve Bazı Öneriler

26.08.2014 | 21:05 Dokümanlar , Kişisel 5 Yorum

Aslında blog’un yazı tipi hakkında birkaç şeyden bahsetmek niyetiyle yola çıkmıştım ama post yine aldı başını gitti. Bu yüzden yazının sonuna geldiğimde başa dönüp bu paragrafı eklemem gerekti :) Üşenenler için yazının özeti şöyle: Bir süredir Google Font’lardan Open Sans olarak okuduğunuz bu blog’un yazı tipini Verdana olarak değiştirdim. Öte yandan bu değişikliği neden yaptım? Yaparken nelere dikkat ettim? Gözlerinizin sağlığını sizden daha fazla düşünüyor olabilir miyim? gibi soruların yanıtlarını merak ediyorsanız yazının devamını okumalısınız.

Blog’u takip edenler hatırlayacaktır. Geçen senenin sonlarına doğru blog için yeni bir tema hazırlamış ve giydirmiştim. ITBlog v1 isimli şu an gördüğünüz temayı aşağı yukarı 8 aydır kullanıyorum. Bu süre zarfında herhangi bir problem yaşanmadığını ve tüm fonksiyonların hatasız çalıştığını söyleyebilirim. Ama yazı tipi meselesini (typeface & font) ayrı tutuyorum çünkü bu konu bir türlü içime sinmedi ve 8 aydır resmen paçamdan çekiyor :) Aslında teknik olarak bir problem yok. Ama görüntüsü pek hoşuma gitmiyordu ve bence okurken yorucuydu. Geçen gün bir fırsatını buldum ve yazı tipi konusunda kafama takılan meseleleri kökten hallettim. O meseleler ve yeni yazı tipi tercih ederken nelere dikkat ettiğimi de bir blog post olarak eklemek istedim ki belki birilerinin işine yarar ve web’in daha güzel görünmesine katkım olur.

Geçen sene bu temaya geçerken ve hazır sıfırdan tasarlıyorken modern bir yazı tipi tercih etmek istemiştim. Aslında modernden kastım hani şu Windows 8’in kullanıcı arayüzü ana yazı tipi Segoe UI gibi, Mac OS ve iOS’lerin Helvetica varyasyonları, Android’lerin Droid’leri gibi şeyler. Bu yazı tipleri belirli üreticiler ve ürünleri için lisanslı olduğundan alıp kendi web sitende veya uygulamanda kullanma şansın olmuyor. Ha kullanmak teknik olarak mümkün ve hatta çok ta basit ama pek bana göre değil ve dahası ortalıkta yığınla yazı tipi tasarımı varken ne gerek var diyerek başladım incelemeye. Bir süre böyle geçti tabi.

Bir yazı tipi için bu kadar tantanaya değer mi demeyin. Karakterlerin boyutları, kalınlıkları, eğrilerin açıları, harfler yan yana geldiğinde ki okunabilirlik gibi şeyler oluşacak görsel kompozisyon için önemlidir. Bu yüzden dünyaya mal olmuş birçok font aslında oldukça profesyonel çalışmaların eseridir. Bu konu gerçekten başlı başına bir alan ve ilgi duyanlar için süper eğlenceli. Türkiye’deki çoğu reklam-tasarım ajansının bihaber olduğu tipografi (typography) kavramı tam olarak bu meseleler üzerinde çalışır ve bu gün bu yazıyı okuyabildiğiniz için teşekkür etmek isterseniz, sadece teknolojiye değil aynı zamanda bir tipograf’a da teşekkür etmelisiniz.

Eğer tipografi konusuna giriş için bir öneri isterseniz, Matthew Butterick’in Practical Typography’siyle başlayabilirsiniz.

Font font diyoruz da aslında font, yazı tipini (typeface) ifade etmek için doğru kelime değil. Geleneksel tipografiye göre font, bir yazı tipi (typeface) içindeki belirli boyut, genişlik ve sitillerdeki karakterleri ve onlardan oluşan setleri (grupları) ifade eder. Aslında tercih edilmek istenen şey bir fonttan ziyade bir yazı tipidir (typeface) ama nedense font terimi daha yaygındır. Dijital tipografinin hızlı ve kontrolsüz genişlemesi ve font kelimesinin fonetik olarak daha kolay seslendirilebilmesi bu konuda etkili olmuş sanırım. Mesela Verdana, Arial, Tahoma, Helvetica, Segoe UI aslında birer yazı tipi ailesidir (typeface family). Font’lar ise bu yazı tiplerini oluşturan çeşitli sitillerdeki harf ve diğer karakter gruplarıdır. Bu fontların dijital karşılığı ise çeşitli formatlardaki font dosyalarıdır.

yazi-tipi-ornekleri

Bir yazı tipi genelde set olarak hazırlanır; yani light’tan black’e, condensed’den extended’e bir ailesi olması gerekir. Mesela Segoe bir yazı tipi ailesidir (typeface family). Segoe UI ise aslında Segoe ailesine üye bir alt yazı tipi ailesidir (bazen böyle durumlar da oluyor). Segoe UI’ın light, italic veya bold niteliğindeki karakterleri ise font gruplarını (yani fontları) temsil eder. Bu karakterlerin bir uygulama veya işletim sisteminde görünmesini sağlayan şeyler ise font dosyalarıdır. Ama sonuç olarak ekranda görünen şey bir font değil aslında Segoe UI yazı tipinin örneğin bold italic fontuyla render edilmiş bir metindir.

segoe-ui-font-ailesi

Temayı tasarlarken görsellik çok önemliydi ama daha önemlisi yazı tipi meselesiydi. Mesela ben kısa süre önce şuna karar verdim: Çoğunluğun tercih ettiği font her zaman en iyi seçenek olmadı. Bu yüzden web’de en çok tercih edilen font’lar konulu yazıları bir kenara bırakın. Eğer bir yazı tipi tercih etmeye çalışıyorsanız öncelikle metnin dijital mi yoksa fiziksel bir yüzeye basılı olarak mı gösterileceğine karar verin. Bu önemlidir çünkü bazı yazı tipleri dijital ekranlarda gösterilmek üzere optimize edilmişken, bazı yazı tipleri kağıt ve benzer yüzeylere basıldığında başarılıdır.

Google Font Problemi Neydi?

Eğer ürün, hizmet veya bir şirket web sayfası konuşuyor olsaydık Google web font’lar hala en iyi tercihler arasında yer alabilirdi. Ama söz konusu blog gibi yoğun metin içeriğinden oluşan web sayfaları olunca bence bu konuyu tekrar düşünmek lazım. Problem Google Font’larda mı, Windows’ta mı yoksa tarayıcılarda mı burası tartışılır. Ama ortada bir gerçek var ki o da şu: Google Font’lar Windows tabanlı tarayıcılar üzerinde hala sınıfta kalıyor. Bu yüzden yazının buradan sonrasını Windows, Internet Explorer, FireFox ve Google Chrome parantezine alıyorum.

Google Fonts ve Google Fonts API Nedir?

Google Font’lar, Google tarafından özellikle Web için tasarlanıp optimize edilen yazı tipleri ve font gruplarıdır. Bu fontlar bir dizin altında toplanmıştır ve tüm dünyanın kullanımına açıktır. Google Font’ların en önemli 3 karakteristik özelliği ise bence şöyle: 1) Genelde günümüz çizgileriyle uyumlu ve modern tasarımlara sahip olmaları. 2) Google Fonts API sayesinde oldukça kolay entegre edilebilmeleri. 3) Ücretsiz olmaları. Kullanmak için yapmanız gereken şey bir yazı tipi ve font seçeneklerine karar vermek, web sitenizin sitil kodlarında gerekli tanımlamaları yapmak ve fontları barındıran dosyanın yer aldığı url’i sayfa yüklenmeden hemen önce kullanıcıya import etmek.

Google Font Problemi

Problem gayet açık. Windows üzerinde çalışan tüm yaygın tarayıcılar (ki Internet Explorer’ı geçtim Google’ın kendi tarayıcısı Chrome bile) bu fontları mürekkebi bitmek üzere olan tükenmez kalem gibi render ediyor. Ve bu konuda her tarayıcının ürettiği sonuç birbirinden farklı. Aynı sayfa içeriğini ve fontları biri öbüründen daha kalın hatlarla veya öteki diğerinden daha silik tonlarda gösterebiliyor. Aşağıya Internet Explorer, FireFox ve Chrome için örnek bir ekran görüntüsü ekledim. Ama bence bunun yerine tarayıcınızı açın, Google Font kullanan ve yazı oranı yüksek bir sayfaya girip alıcı gözüyle bakın. Ne demek istediğimi anlayacaksınız.

tarayici-font-isleme-sonuclari

Teknik bir analize dayanmayan, göz var izan var temelli gözlemlerime göre 3 tarayıcının Google Font’ları render etme başarı sıralaması şöyle: FireFox > Internet Explorer > Google Chrome

Zaten Google Chrome’un font rendering problemini kabul ettiğini ve bunu düzeltmek bir süredir çalıştığını biliyoruz. Bu konuda bazı öneriler (DirectWrite gibi) var ama hiçbiri doğal değil. Her şey bir tarafa, yahu yazılım/donanım almış başını gitmiş ama 3 tane tarayıcı bir fontu düzgün render edemiyor. İnsan gerçekten hayret ediyor.

Özetle Google Font’lar Windows tabanlı sistemlerde biraz daha yol kat etmeliler. Eğer bir ürün/servis web sitesi tasarlıyorsanız, içerik daha çok görsel materyallerden oluşuyor ve ziyaretçilerin sayfalarda kalma (aslında okuma) süresi zaten düşük ise, Google Font’ları kullanmak modern bir görüntü yakalamanıza yardımcı olabilir. Ama bu blog’da olduğu gibi kullanıcılara uzun dokümanlar gösteriyorsanız ve bunu Google Font’lar ile yapıyorsanız bence siz Göz Hastanelerine çalışıyorsunuz :)

Font Rendering Meselesi

Bir yazı tipi tasarlandıktan sonra basılı veya dijital olarak çeşitli mecralarda kullanılabilir. Eğer söz konusu kitap, dergi, pankart gibi basılı materyaller ise işin içinde farklı parametreler de söz konusu. Eğer konu web sayfaları gibi dijital mecralar ise, üzerinde konuşulması gereken konu font rendering; yani yazı tipini oluşturan fontların ekran üzerinde istenen sitillerde gösterilme işlemi. Bu işlemin başarısı ekranda gösterilecek yazının okunabilirliği ve netliğini, tamamlanma süresi ise web sayfasının ekranda oluşturulma hızını doğrudan etkiler. Ayrıca neredeyse tüm web tarayıcıların bu konudaki çıktısı farklıdır. Aynı web sayfasını ziyaret ettiğiniz farklı tarayıcılar, aynı sitildeki fontları farklı render sonuçlarıyla ekrana basar.

Google Fonts Render Sonuçları

Beğendiğiniz herhangi bir yazı tipini web’de kullanmanın önündeki bir diğer önemli engel ise şu: Tasarladığınız sayfada kullandığınız yazı tipine ait fontlar eğer sayfayı açan kullanıcının bilgisayarında/cihazında yüklü değilse (ki yaygın olmayan yazı tipleri için genelde durum budur) ya sayfa yükleme anında önce yazı tipine ait font dosyasının yüklenmesini ve daha sonra sayfanın gösterilmesini sağlayacaksınız (örneğin html <head> içinde), ya da ikinci-üçüncü sırada birkaç generic yazı tipi tanımlayarak (sans-serfi gibi) asıl fontun yüklü olmadığı kullanıcılarda sayfanızın diğer fontlardan biriyle açılmasını sağlayacaksınız. Bu da o modern tasarımın büyük oranda çöpe gitmesi demek :)

Ama mesela ben özgün bir font tercih edeceğim, font dosyasını kullanıcıya yüklemeye razıyım ve html <head> bölümünde önce font dosyasını göndereceğim diyebilirsiniz. Bu durumda da karşınıza şöyle problemler çıkıyor: Ziyaretçi işletim sistemi çeşitliliğine göre font dosyası formatı çeşitliliği, font dosyası boyutu, w3c standartlarıyla uyumsuz durumlar oluşma ihtimali vs.. vs..

Sırf bu ihtimaller ve çeşitlilik yüzünden yıllar önce core web fonts diye bir fikir ortaya atıldı. 1996 yılında Microsoft tarafından başlatılan Core fonts for the Web projesinin amacı internet için standart kabul edilecek bir font paketi oluşturmaktı. Her ne kadar %100 başarıya ulaşamasa da bu web fontlar bugün birçok sistemde önceden yüklü olarak geliyor. Aşağıdaki yazı tiplerinin yer aldığı bu paket içerisinde her font grubunun Windows’lar için executable file (.exe) halleri ile Macintosh’lar için BinHexed Stuff-It archives (“.sit.hqx”) halleri yer alır. Freeware olarak sunulmasına rağmen bazı kullanım ve dağıtım limitlerine tabidirler. Buraya bakabilirsiniz.

Windows DirectWrite

Windows tabanlı DirectX API’larından olan DirectWrite, yüksek kalitede metin işleme, çözünürlükten bağımsız ana hat fontlar, full unicode text ve layout desteği gibi şeyler sunan gelişmiş bir metin işleme teknolojisidir. DirectWrite API’larından faydalanan uygulamalar (tarayıcı gibi) daha başarılı font rendering sonuçları üretebiliyor. Mesela Google Chrome geçici çözüm olarak bir süre DirectWrite önerdi.

windows-directwrite-google-chrome

Geçici çözüm dedim çünkü DirectWrite desteği düne kadar Google Chrome’da deneysel olarak yer alıyordu, bir nevi beta. Dün yayınlanan güncelleme ile birlikte Windows DirectWrite desteği version 37.0.2062.94 m Google Chrome tarayıcılara resmi olarak eklenmiş oldu. Tarayıcınızı güncelleyerek bu desteğe sahip olabilirsiniz. Ancak şunu söylemek isterim: ben güncelleme sonrasında yukarıya eklediğim ekran görüntüsündeki sonuçlara ulaşamadım. Hatta bazı sayfalar eskisinden daha kötü görünüyor bile diyebilirim. Ama bir de göz doktorunu deneyeceğim :)

Yeni Yazı Tipi Seçerken Benim Kriterlerim

Aşağıda yer alan maddeler bilimsel çalışmalar olmadığı gibi ben bu konuda otorite de değilim. Ama iyi bir gözlemciyim ve yıllardır web’de tarayıcılarla bir şeyler okurum. Yani iyi bir son kullanıcıyımdır da aynı zamanda. Font, renk, lezzet, fayda gibi meseleler çoğu zaman göreceli olmuştur. Bu yüzden aşağıdakilerin sadece öneri niteliği taşıdığını unutmayın.

Benim yazı tipim ve font grubu;

  • Çoğunlukla dijital olarak görüntüleneceği için ekranda gösterim için uygun olmalıydı.
  • Blog içeriğini yerel dilde yazdığım için mutlaka “doğal” Türkçe karakter desteği olmalıydı.
  • Lisansı satın alınabilir veya ücretsiz kullanım için uygun olmalıydı.
  • Blog’un ziyaretçi kitlesi büyük oranda Windows işletim sistemi kullanıcılarından oluştuğu için Windows üzerindeki tarayıcılar tarafından doğru işlenebilmeli ve kaliteli görüntülenebilmeliydi. (font rendering)
  • Kullanıcıların işletim sistemlerinde önceden yüklü olmayan bir font yerine mümkünse zaten önceden yüklü bir font olmalıydı. Bu, aynı zamanda sayfaların ekranda oluşturulma hızını da gerçekten önemli oranda etkiliyor.
  • Font’ları kolay okunabilir ve yormayan bir yazı tipi olmalıydı. Ben bu konuya destek olması için ayrıca zemin rengi, font rengi, satır ve paragraf aralığı gibi çeşitli parametreleri de ayrıca optimize ettim.
  • Mümkünse modern görünümlü ve tasarımla uyumlu olmalıydı.

Görsellik tabii ki önemli. Ama burası teknik içeriklerden oluşan bir blog olduğu için asıl amaç şuydu: okuyucunun (yani senin) hayatını kolaylaştırmak ve okurken maksimum konfor sağlamak.

Blog Yazı Tipi Olarak Neden Verdana Seçtim?

Cevap basit: Çünkü yukarıdaki kriterlerin tamamını karşılıyor.

Verdana’nın günümüz monitörleri için pek uygun olmadığı düşünülse de, aslında en başından itibaren dijital ortamlar için optimize edilmiş fontlara sahiptir. Ama bu, kağıt üstünde kötü durduğu anlamına gelmez. Verdana ile yazılmış dijital metinleri print ettiğinizde de kaliteli görüntü elde edersiniz. Boyutu ne kadar küçük olursa olsun rahatlıkla okunabilen fontlara sahiptir ve uygulamalar tarafından düzgün render edilir. Doğal Türkçe karakter desteği vardır. Windows ve MAC OS dışında birçok Linux dağıtımında da önceden yüklü olarak gelir. Ayrıca belirli sürümleri freeware durumdadır.

Özetle sevgili okur, yazı tipi olarak bir süre Verdana ile devam ediyoruz.

Yazı Etiketleri: , ,

Sayfa Başı ▲

Yorumlar (5)

  1. Vedat Kılıç

    Kendi sitemi açtıgımda en çok zorlandıgım konu yazı tipi oldu. Hepsinde bir kusur oluyor, örnegin arial küçüldükçe silikleşiyor verdana ise büyüdükçe dagılıyor. Şu ana kadar mükemmel bir yazı tipine rastlamadım. Şimdiki kullandıgım yazı tipi {Merriweather Sans} en hoşuma giden yazı tipi oldugu halde bu da rakamları hatalı gösteriyor. Bilgisayarımda xp, 7 ve linux işletim sistemi yüklü, yazınızı xp ve firefox ile okudum, “Nasıl derseniz” çok berbat görünüyor, harfler okuyucudan saklanıyormuş gibi bir görüntüsü var.
    Ancak girdigim bir çok sitenin yazı görüntüsünden de iyi oldugunu söyleyebilirim. Saygılar…

  2. Erkan

    Klavyenen sağlık çok istifadeli bir yazı olmuş.
    Teşekkürler.

  3. ahmet

    teşekkürler

  4. Sahibinden

    teşekkürler

  5. Hasan

    Kelin merhemi olsa, başına sürer.

Yorum Ekle