Dijital Yayıncılıkta Ekran Tipografisine Başlangıç
Gün geçtikçe daha fazla “ekran okuması” yapmaktayız. Kağıdın yanına gelen bu zenginlik, tasarımcıları dijital yayın tekniklerine doğru yöneltmektedir. Bu yazı, dijital yayıncılıktaki tipografiyi oluşturan temeller üzerinedir.
Dijital yayıncılıkta tipografi üzerine “ekran okuması deneyimi” yaşayan tasarımcıların, bu yeni deneyim içerisinde tipografiyi daha özel bir yere koyduğunu düşünüyorum. Tipografi Bilimi — Ellen Lupton konulu yazıda belirtildiği gibi, ekran üzerinde okunabilinirlik çalışması sonucunda asıl sorunun ekranın verimsiz görüntüleme performansı değil; suçun, metnin sunulma şeklinde (metinsel biçimlendirme), kısacası tasarımda olduğu belirtilmiştir.
Dijital yayıncılıkta “metinsel biçimlendirme” -yani araştırma yazısında metnin sunulma şekli olarak yazılan tanım-, öncelikle teknik bilgi ve bu bilgi ile edinilen deneyime sahip olmayı gerektirmektedir. Teknik bilgi derken, tarayıcının (browser) görüntüleme (render) davranışını anlama deneyimini işaret etmekteyim. Bunun dışında okur tarafından rahat ve iyi bir okuma yapılması adına tipografik kuralları bilmek önemlidir. Tipografi kurallarını ise bir tarayıcı da ortaya koymak istiyorsak temel teknik bilgilere ihtiyaç var demektir. Her bir tarayıcı veya okuma sisteminin farklı görüntüleme davranışını olduğu düşünürsek; ekran tipografisini tasarlamak kağıda baskıdan oldukça farklıdır. Deneyime sahip olmak için “kod yaz-test et” döngüsünü yaşamak önemlidir.
Ekran tipografisini sadece mobil cihazlara özgü algılamamak gerekir. Televizyon için belirli stil (CSS) kuralları geliştirilmiştir. Kaldı ki işletim sistemine sahip, tarayıcı içeren “akıllı televizyonlarda” (smart tv) ekran tipografinizi üretip test etmek, tasarım öğrenenler için faydalı olacaktır.
Ekran Tipografisinde Temel Fontlar
Tarayıcı (browser) tabanlı dijital yayıncılıkta tipografinin temelini, HTML elementleri ve stil (CSS) belirlemektedir. Eğer tasarımcı, HTML veya XHMTL içerisinde “Embeded-font” tekniği ile çok özel bir font kullanmamış ise -okuma sistemi olarak adlandırdığımız- tarayıcının desteklediği beş temel (default) font bulunmaktadır. Stil (CSS) ile yazdırılarak bu beş temel font tarayıcıda görüntülenir.
“Sans-serif, serif, monospace, fantasy, cursive” adıyla CSS diliyle görüntülenen bu fontlardan serif fontta harflerin üst, alt veya kenarlarında tırnak benzeri çıkıntılar vardır. Sans-serif fontlar ise tırnaksız düz karakterler olup, algılaması çok kolay olduğu için teknik kitaplarda, web sayfalarında, standart mail gönderiminde ya da aplikasyonlar içerisinde kullanılması tercih edilir. Sans-serif fontlara örnek olarak Helvetica, Verdana fontlarını verebiliriz. Monospace fontlar ise genellikle yazılım kodları gösterilirken kullanılır. Fantasy font ise adında anlaşılacağı gibi fantazi bir fonttur. Cursive ise el yazısı fontudur.
Şekil 1'de sunulan CSS kodundaki font-family değeri ile browser tabanlı okuma sistemlerinde temel fontlar gösterilecektir. Şekil 2–3'de gösterilen bu beş temel fontu, stil ile (CSS) daha iyi şekilendirerek, okunabilinir özelliklere sahip bir ekran tipografisi oluşturulacaktır. Not: Şekil 2–3'de tipografi HTML sayfanın Safari’de görüntülenmesi ile elde edilmiştir.
Ekran Tipografisinde Temel HTML Elemenleri
Tarayıcı tabanlı dijital yayıncılıkta HTML semantik dili, yani HTML elementleri ekran tipografisini font büyüklüğü ile bold/normal olmak üzere metnin biçimlendirilmesini sağlar. Şekil 4'de gösterilen <h1> <h2> <h3> <h4> <p> <h5> ve <h6> tipografi elementleri kullanılarak HTML sayfalara biçim verilmektedir. Her bir elementin tarayıcıda sabit (default) dört görüntüleme davranışı vardır: Font büyüklüğü, kalınlık, satır arası ve margin (elementlerin birbirine olan uzaklığı).
Elbette stil (CSS) ile bu dört davranış değiştirilebilir. Böylece ekran tipografisine fazla zenginlik katılacaktır. Fakat ekran tipografisinde temel elementleri çok az stil ile yeniden tasarlamak sayfanın çok daha kısa sürede görüntülenmesine katkı sağlayacaktır. Çok fazla ya da karmaşık stil yapısı her zaman bir handikaptır. Ayrıca öz bir stil yapısı çapraz platform denilen farklı sistamlerdeki tarayıcılarda ortak bir ekran tipografisi oluşturacaktır.
HTML semantik dili elementleri içerisinde kullanılan her yazının piksel cinsinden değeri bilmek tasarımcı için önemlidir. <h1> 32 piksel, <h2> 24 piksel, <h3> 19 piksel, <h4> 16 piksel, <p> 16 piksel, <h5> 13 piksel, <h6> 12 piksel puntodur. <p> elementi paragraf kullanımı için tasarlanmıştır. Bu nedenle yazıyı kalın (bold) yapmaz. Diğer elementler ise yazıyı kalın yapan bir davranışa sahiptir.
Ekran tasarımı üzerine çalışan tasarımcıların taslak çalışmalarında bu temel bilgiyi kullanmaları avantaj sağlayacaktır. Şekil 5'de elementlerin puntolarını topluca görebilirsiniz.
Televizyonda Tipografi Deneyimlemesi
Televizyon günümüzde oldukça sık kullanılan bir reklam aracı. Daha geniş bir ekranda rahat okuma yapılması için çıkış noktası olabilecek temel bilgilere sahip olmak güzel. Şekil 6'da Samsung firmasının yayınladığı bir kılavuzdan alıntı yaptım. Akıllı televizyondaki tarayıcıyı kullanarak yaptığım testler arasında e-kitap sayfa tasarımları da var. Televizyonda e-kitap okuma deneyimi testlerimde bu kılavuz bilgiyi, bahsettiğim HTML elementlerini stil ile şekillendirerek kullandım.
Tasarımcılar İçin Kılavuz
Dijital yayıncılık ile ilginen günümüz tasarımcılarının faydalanması amacıyla Fontlar e-kitabını tasarladım. Bu e-kitap, IOS mobil cihazlarında Safari veya iBooks için (EPUB format) içerik tasarlama çalışmasında faydalı bir tipografi kılavuzu olacağını düşünüyorum. IOS cihazlarınıza indirdikten sonra iBooks uygulamasında bu kılavuzu açabilirsiniz. Ücretsiz EPUB3 format e-kitabı indirmek için buraya dokunun.
N. Erhan Üzümcü, Sanat Yönetmeni ve EPUB Developer
