Dijital Tasarımda Tipografi / 1

Gelişen teknoloji ve yeni yaklaşımlar, dijital tasarım dünyasındaki paradigmaların, kavramların ve uygulamaların değişmesine, güncellenmesine veya tamamen yıkılmasına sebep olabiliyor. Bilgi havuzumuz her geçen gün artarken aynı zamanda bilgi kirliliğinin de tehdidi altına girebiliyoruz. Bu nedenle dijitalleşen bir dünyada tasarım disiplinleri ve konseptlerini gözden geçirmek, tekrar tekrar sorgulamak gerekebiliyor.

Wlitz olarak içinde yer aldığımız dijital dünyada ise bu sorgulamaya tasarımın temellerinden birisi sayılan tipografi konusuyla başlamak istedik.

Geliştiriciler, tasarımcılar, girişimciler, konuya hobi olarak yaklaşan kişilerin aynı sayfada buluşabileceği bir içerik yazmayı amaçlıyorum. Bunu yaparken tipografinin tarihçesi ve üzerindeki felsefi tartışmalar gibi uzun konular yerine, bir zemin oluşturmak adına tipografinin genel hatlarına bir bakış atıp gerekli temel bilgileri vererek, konuya ait örnekler ve bazı uzman ipuçlarını paylaşacağım.

Yazının dili konusunda ise tipografideki teknik terimleri dünyada kabul görmüş halleriyle kullanırken, bazen dilimizdeki karşılıklarına bazen de yerel sektördeki jargon içerisinde kullanılan kelimelere yer vereceğim. Umarım okuyan herkes kendisi için yararlı bilgiler bulabilir. Sözü daha fazla uzatmadan artık konumuza giriş yapabiliriz.

Tipografi Nedir?

Tipografi yazı dilini okunaklı, okunabilir ve çekici hale getiren yazı düzenleme sanatı ve tekniğidir.

Tanımdaki okunaklılık ve okunabilirlik kavramlarına daha sonra değineceğiz. Öncesinde cümlede bahsi geçen “sanatı ve tekniği” söylemine bakmak, konsepti anlamamıza ve konu dahilinde neden önemli olduğunu fark etmemize yardımcı olacaktır.

Sanat ve Teknik

Başarılı bir tipografi, hem mühendislik becerilerine hem de sanatsal bir bakış açısına sahip olunduğunda elde edilir.

Tipografi her ne kadar sanatsal bir vizyonla ele alınan bir disiplin de olsa özellikle dijital tasarımda bağlı olduğu sistemler, uygulamalar, kullanılan araçlar veya tipografinin özünde bulunan harf aralıkları, eğri açıları, kontur kalınlıkları gibi hesaplamalar nedeniyle çok fazla mühendislik becerileri gerektirmektedir.

Bu durumu bir ucunda sanatın diğer ucunda ise tekniğin bulunduğu, doğrusal ve iki kutuplu bir model gibi düşünebilirsiniz. Model kavranılınca okunaklılık ve okunabilirlik kavramlarında neden teknik konuların daha yoğun yer aldığını veya marka çalışmalarına sadece teknik açıdan yaklaşmanın neden yetersiz geleceği anlaşılacaktır.

💡 Uzman İpucu

Modelde hangi tarafa ağırlık verilmesi gerektiğini bilmek veya dengeyi sağlamak; bilgi, deneyim ve gerekli sayıda pratikle uzmanlaşılabilecek bir durumdur. Yine de çalışmanın kapsamını bilmeniz hangi konuya daha çok eğilmeniz gerektiğini size söyleyecektir.

Font tasarımı, tasarım sistemleri, mizanpaj gibi alanlarda tipografinin teknik tarafına yoğunlaşırken görsel tasarım, kitap kapağı tasarımı veya grafiti gibi çekiciliğin önemli olduğu alanlarda modelin sanat tarafına yönelmeniz gerekebilir. Dijital tasarımda sıkça yer bulan kinetik tipografi gibi işlerde ise her iki anlayışa da dengeli yaklaşmanız ortaya daha iyi bir çalışma çıkmasını sağlayacaktır.

Hangi alanda çalışırsanız çalışın, iş hayatındaki şartlar sizi bu dengeyi kurmaktan alıkoymaya çalışabilir ancak iyi bir tipografi çalışması için her iki anlayışa da ihtiyacınız olduğunu unutmamalısınız.

Tipografinin Ana Fikri

https://dribbble.com/shots/7335353-Geometric-Logo

Özellikle güncel mobil uygulamalar, popüler trendler tipografinin amacının sadece araçlar, fontlar, filtreler ve stiller gibi görünmesini sağlayabiliyor. Bu çarpık durum ana fikrin üstünü örterek tipografi konusunda başarısız girişimlere ve değer kaybına yol açabilmektedir. Bu noktada ana fikri anlamak, daha önce değindiğimiz modelin içinin dolmasını sağlayacaktır.

Tipografi, bilgiyi okuyucuya nasıl sunduğumuzken; yazı tipi, renk, boyut ise bunu yaparken kullandığımız araçlardır.

Tipografiyi bilgi karşıya aktarılırken kullanılan görsel bir iletişim dili olarak görebilirsiniz. Birçok tasarım yaklaşımında olduğu gibi burada da içerik kraldır. İçerikteki mesajın niyetini bilirsek metnin görünümü değişecektir. Bu nedenle süreçteki ilk adım burasıdır. Bu adımdan sonra araçları kullanarak vermek istenilen mesajı arzuladığımız şekilde sunabiliriz.

Typeface ve Font

Tipografide bir diğer yanlış anlaşılma, typeface – dilimizdeki adıyla yazıyüzü – ve font konusudur. Font terimine birçok yerde rastladığımızdan dolayı neredeyse herkes tarafından bilinmektedir. Bu nedenle günlük dilde tüm tipografi söylemlerine font kelimesi ile cevap bulmaya çalışıyoruz. İki terimi birbirinden ayırt edebildiğimizde konuya daha bilinçli yaklaşabiliriz.

Typeface

Bir yazıya baktığımızda gördüğümüz karakterlerin temel formlarındaki kalınlık, eğim, uzunluk gibi özelliklerinde sahip oldukları karakteristik tasarıma typeface denir. Her typeface kendi özgün tasarımı içerisinde bu özelliklere ait varyantlarını bulundurabilir. Her bir varyant bağlı olduğu karakteristik tasarımı üzerinde taşır.

Font

Typeface içerisindeki her bir varyanta font adı verilir. Yani bir metni şekillendirirken hem kalın hem de italik varyantları kullanılırsa bir typeface içerisinde iki font seçilmiş olur. Typeface bir aile ise fontlar bu küme içerisindeki bireylerdir

Terime somut olarak yaklaştığımızda fontları, metinleri göstermek ve düzenlemek için kullandığımız araçlar olarak düşünebiliriz.

Typeface ve font örnekleri

Genelde geliştiriciler typeface terimi yerine font ailesi (font family) adını kullanırlar. “Bir typeface / font ailesi seçelim.” derken aynı şey işaret edilmektedir. Bu yüzden birbirinin yerine kullanılması yanlış değildir ancak font ailesi dendiğinde akla bir font kümesi gelirken, aslında typeface karakteristik bir formu, belli imgeleri ve sahip olduğu tarihsel mirası yansıtan geniş bir kavramı tanımlamaktadır. Buradaki ince nüansı bilmemiz, aradaki farkı anlamamız için yeterli olacaktır.

İlerleyen kısımlarda bazen yazının akıcılığı için ben de typeface yerine font ailesi adını kullanmayı uygun buluyorum. Yazıyı okurken bu noktayı unutmamanızı rica ederim.

Bonus: Typeface Superfamily

Bu terimle çok sık karşılaşmak pek mümkün değildir ancak marka çalışmalarında ihtiyaç duyulabileceğinden dolayı kısaca bahsetmek istiyorum.

FF Meta superfamily

Tipografide farklı typeface formları için kümeleşmiş stil yaklaşımları vardır. Örnek vermek gerekirse serif, sans-serif veya dilimizde bilindik haliyle tırnaklı, tırnaksız stilleri sayılabilir ancak bu stil yaklaşımları aslında çok daha fazladır. Bazı typeface örnekleri, bu tarz farklı stillerle bir bağ kurar ve üst bir tasarıma bağlı temel karakteristik özelliklerini paylaşarak farklı stil yaklaşımlarını bünyesine katar. Özetle font aileleri arasında bir kan bağı oluşur. Bu üst kümeye typeface superfamily (süper font ailesi) adı verilir.

Typeface ve font ayrımını bilmek, tipografik seçimlerimizi yaparken daha bilinçli olmamıza veya tipografide yaşanabilecek bir problemin kaynağının typeface içerisinde mi yoksa sadece bir fonta mı ait olduğunu teşhis edebilmemizi sağlar. Böylece çözüm için gerekli arayışımız kolaylaşacaktır.

Okunaklılık ve Okunabilirlik

İngilizce’de legibility (okunaklılık) ve readability (okunabilirlik) olarak yazılan ve tipografinin tanımında geçen bu terimler birbirine çok karıştırılır. Nedeni okunaklılığın, okunabilirliğin bir bileşeni olduğunun çok yaygın olarak bilinmemesidir. Okunabilirlik bütüne bakarken, okunaklılık bu bütün içindeki detaylara odaklanır. Aradaki farkın anlaşılması birçok tartışmanın önüne geçecektir. Bu yüzden iki kavramı da ayrı ayrı inceleyelim.

Okunaklılık

Okunaklılık, bir typeface içerisindeki harf ve sembolleri okurken birbirlerinden ne kadar kolay ayırt edilebildiğinin ölçümüdür. Karakterlerin formu, uzunlukları, kalınlıkları, kontur kontrastlıkları gibi okunaklılığı etkileyen birçok faktör bulunmaktadır. Elbette bunlar biçimsel etkenlerdir, günümüzde konuyu sadece bir açıdan değerlendirmek yeterli olmamaktadır.

Ortam seçimleri, çevresel olarak okunaklılığı etkilemektedir. Örnek olarak baskıda okunaklılığı yüksek bir font, dijital ortamda farklı ekran çözünürlükleri, yazılımların birbirlerinden farklı şekillerde fontları görüntülemesinden dolayı okunaklılık açısından tekrar değerlendirilmelidir.

Erişilebilirlik konusunda gelişen duyarlılık, bu zamana kadar okunaklılığı artırdığı bilinen biçimsel kuralların tekrar sorgulanması gerektiğini işaret etmektedir. Disleksiye sahip bir kişi, okunaklılığı yüksek kabul edilmiş bir font hakkında tam tersi bir görüşe sahip olabilmektedir. Font çözümlerimizi erişilebilir hale getirmek yakın gelecekte daha önemli olacak. Bu da okunaklılık kriterlerine yeni maddelerin eklenmesini sağlamaktadır.

💡 Uzman İpucu

Okunaklılığı kabul görmüş ve tanınmış fontların dijital ürünlerde yoğun kullanımı ve kullanıcı deneyimindeki yönlendirmelerde baskın olarak tercih edilmesi üzerine genel bir bilinç oluşmuştur. Bu da font seçimlerini kısıtlamakta ve markalara değer kaybettirebilmektedir.

Okunaklılığın ölçüsü, derin işleme denilen bir öğrenim sürecine temas eder. Örnek olarak dünyadaki sokak ve trafik levhalarındaki yazılar neredeyse aynı fontlarla yazılır. Bu seçim, bakan kişiler için okuma ve fark etmede bir kolaylık sağlarken akılda kalıcılık konusunda ters oranda bir sonuç yaratır. Bunun nedeni ise beynin bu yazıları okurken biçimsel olarak bir sentezde bulunmaması ve çaba sarf etmemesidir. Beynimiz efor harcamadığı şeylere karşı genelde hatırlamada daha isteksizdir.

Bu yüzden typeface seçimlerinde bu durumu göz ardı etmeyin. Özgünlüğün ve akılda kalıcılığın ön planda olduğu durumlarda farklı font seçimleri deneyin. Elbette karar verirken böyle bir olguyu savunmak kötü bir okunaklılığa sahip bir fontu daha doğru kılmayacaktır.

Okunabilirlik

Okunabilirlik, bir metni anlama kolaylığı ile okunma isteğinin ölçümüdür. Kelimelerin, satırların, cümlelerin, paragrafların okunabilmesi ve anlaşılabilmesine odaklanır. Font boyutu, harf aralığı, satır aralığı, yazı rengi, kontrastlık ve fontun okunaklılığı gibi birçok tasarımsal faktörün yanı sıra metnin uzunluğu, imla kuralları, metnin akıcılığı gibi konular da okunabilirliği etkiler.

Okunabilirliğin yüksek olması genel bir kural olarak aranır ancak tipografinin ana fikri kısmında değindiğimiz metnin niyeti aslında okunabilirliğin ölçüsünü belirler. Örnek olarak okumayı yeni öğrenen çocuklar için hazırlanan kitaplardaki metinler okunabilirliğin yüksek olması adına büyük font boyutları, geniş satır yükseklikleri ve kısa paragraflarla tasarlanır.

Bir çocuk kitabında bu niyet çok yerindeyken eğer yetişkin kitaplarını da bu formatta hazırlasaydık, Victor Hugo’nun Sefiller kitabının binlerce cilt halinde basılması gerekirdi. Bu da inanılmaz bir kâğıt israfının yanı sıra kitabı okuma isteğinin tamamen kaybolmasına sebep olurdu. Bunun yerine yetişkinlere hazırlanan kitaplar, okunabilirlik kaybı olmadan hem kâğıt hem de mürekkep tasarrufu sağlayacak en optimal şekilde tasarlanır.

🔖 Örnek Bir Vaka

Çalıştığım bir ajansın hizmet verdiği büyük bir marka, a+ müşterileri için özel bir mailing kampanyası hazırlatmak istemişti. Çalışmanın amacı hedef kitleden dönüş alabilmekti.

Kitlenin yoğun bir iş hayatı temposunda olduğuna ve onlara fayda sağlayacak bir öneriye vakit ayırmakta zorlanacaklarına dair bir içgörümüz vardı. Göz alıcı görsel bir çalışmanın yanında iletilecek mesajın okunabilirliğinin çok önemli olduğunu düşünüyorduk. Bu yüzden mesajı yalın, kısa ve öz bir şekilde hazırladık.

Daha önce bahsettiğim gibi bazen iş hayatı bu dengeleri zorlamak ister. Marka mesajın yalın, kısa ve öz olmasından tatmin olmadı. Tam aksine mesajı daha doyurucu, uzun ve detaylı tutmak istedi. Marka ile gerçekleşen diyalogdan sonra çalışma taleplerine göre düzenlenerek müşterilerle paylaşıldı. Sonuç ne mi oldu?

Dönüşüm oranını öğrendiğimizde karşımızda 0 rakamı duruyordu. Evet, bir tane bile dönüş alınamamıştı. Buradan çıkarılan ders ne olmuştu peki? Daha farklı görsel bir çalışma ve daha lirik bir metin hazırlamak.

Bazen tek bir cümle çok daha fazla şey anlatabilir. Bunu unutmayın.

Örnek Bir Çalışma

Yazıda bahsettiğim konuları pekiştirmek ve ilave bilgilerle sağlamlaştırmak adına örnek bir çalışma sürecini paylaşmak istiyorum. Siz de kendinize bir tasarım zorluğu belirleyerek denemeler yapabilirsiniz.

Marka adı ve ürün

Happy Life adında baş ve eklem ağrıları için jel bantlar üreten bir markamız olsun. Çalışmaya yazıdaki konu başlıklarına değinmek için bir de tasarım zorluğu ekleyelim: typeface seçimi olarak sadece Comic Sans MS kullanalım ve çalışmada font ailesindeki karakterler dışında herhangi bir görsel element kullanmayalım.

Bir typeface olan Comic Sans MS, yakın geçmişte internet fenomeni haline geldi. Üzerine çok fazla espri yapıldı. Bazıları dünyanın en kötü font ailesi olduğunu düşünürken, bazı anti fanlar “ban comic sans“ adlı bir hareket başlatarak kendisine karşı sanal bir savaş bile başlatmıştı. Tüm tartışmalara rağmen dünyada en çok kullanılan font ailelerinden birisi olduğu gerçeği değişmiyor.

Ön hazırlık olarak sahneye marka adını Comic Sans MS Regular fontuyla yazarak en yalın haliyle yerleştirelim. Bu adımda herhangi bir düzenleme yapmaya gerek yok ancak metne ve kullanılan fontun formuna göz gezdirmek güzel bir pratik olacaktır.

Tipografinin ana fikri kısmında metnin niyetini anlamak gerekli demiştim. Her ne kadar gerçek bir marka çalışmasında vizyon, misyon, konumlandırma, kültür, strateji gibi çok daha fazla faktörü düşünmek gerekse de örneğimizde sadece marka adına ve ürüne odaklanalım. Önce marka adımız olan Happy Life - yani Mutlu Hayat - ürün bağlamında bize neler anlatıyor bir bakalım.

Ürünümüz ağrıları gideren bir banttı. Burada ağrıları geçen bir kişinin daha mutlu olacağına dair bir varsayım yapabiliriz. Sanki çektiği ağrılar kullandığı ürünle son bulmuş, artık uzandığı yerden doğrulup acı çekmekten buruşmuş yüz ifadesi silinerek daha mutlu bir şekilde hayatına devam ediyor gibi bir içgörü de oluşturulabilir.

Örneği kısa tutmak adına seçtiğim mesaj açıktı ancak kapalı durumlarda niyeti anlayabilmek için daha fazla gözlem ve analiz yapmak gerekebilir. Şimdi de mesajı karşıya iletirken kullanabileceğimiz çağrışımlara bakalım.

Happy

Mutluluk kavramını herkes farklı deneyimlemiş ve kişilere farklı çağrışımlar yapıyor olabilir. Çok klişe olacak ama benim aklıma ilk Nâzım Hikmet’in “Sen mutluluğun resmini yapabilir misin Abidin?” sözleri geliyor :) Bu soruya verilebilecek net bir cevap bulmak zor olsa da mutluluk kelimesinin oluşturduğu çağrışımlara bakarak bir çıkarım yapalım.

Örneğin ilk akla gelebileceklerden bir tanesi, güneşli bir gün. Güneşin insan üstündeki (genellikle) olumlu etkileri bilinen bir şey. Mutluluk kavramına güneşten yola çıkarak yaklaşabiliriz. Güneş, zihnimizde yuvarlak bir şekle, sarı ve kırmızı renk tonlarına sahiptir. Resmetmek istendiğinde en bilindik haliyle sarı renkle dolu yuvarlak bir daire ve etrafında kıvılcımları anımsatan çizgiler gelecektir. Mutluluk için bu çağrışımdan yararlanabiliriz.

Life

Bir de hayat kelimesine bakalım. Sanırım mutluluğa cevap bulmak zor derken yanılmış olabilirim çünkü hayatın anlamı herkes için farklıdır ve bu farklılığı anlatmak zor olabilir. Yine de hayatın herkes için farklı olması belki bir çağrışım yaratabilir. Mesela birçok filmde, kitapta, şiirde hayatın inişli çıkışlı bir yol olduğuna dair atıflar bulunur. Hayatı inişli çıkışlı bir yol gibi düşünmek yardımcı olabilir.

Mesajı nasıl iletmek istediğimize dair çağrışımlarla ipuçları bulduğumuza göre çalışmada tipografik bir düzenleme yaparak bunu görselleştirelim.

Metnimiz biraz şekil almaya ve arzuladığımız görünüme doğru evrilmeye başladı. Artık çalışmanın tipografik özelliklerine daha fazla önem vererek örneğimize derinlik kazandırabiliriz.

Comic Sans MS, typeface stillerinden script yani el yazısı grubunun özelliklerini taşır. Genelde el yazısı fontlar görselliğe odaklandığı için okunaklılığı düşük olur. Daha çok metnin görselliğinin ön planda olması istenen çalışmalarda kullanılır. Elbette tek bir kural yok, sadeleştirilmiş hallerinde okunaklılık artabilir. Bu örnekte de karakterler net bir şekilde seçiliyor.

Comic Sans MS font ailesi

Marka adı kısa olduğu için okunabilirlik tarafında çok fazla efor sarf etmeye gerek kalmayacak, kelimelerin anlaşılabilirliğini korumak yeterli olacaktır. Karakterlerin konturları arasında kontrastlık düşük, bu durum okurken bir rutin yaratıyor ve okuma isteğini kırıyor. Font ailesinde Comic Sans MS Regular ve Comic Sans MS Bold adlarında ince ve kalın olmak üzere iki font bulunuyor. Bu farklı ağırlıktaki fontları beraber kullanıp kontrastlığı artırarak çalışmaya biraz dinamiklik katabiliriz.

Font atamalarını yaparken mesaj bağlamında kalmak yerinde olur. Bu nedenle kalın fontu mutluluğu daha çok vurgulamak için Happy kelimesinde; normal fontu da ürünün ağrıları hafifleterek kullanıcısının hayatını rahatlatacağı önerisine inanarak bunu hissettirmek adına Life kelimesinde kullanalım. Ek olarak ürünün fiziksel yapısında bulunan mavi renge de çalışmada yer verelim.

Yaptığımız düzenlemeler mesajı görsel olarak daha belirgin bir şekilde yansıtmaya başladı. Şimdi de modelimizde bahsettiğimiz sanatsal bir bakış açısıyla kompozisyon, renk, ritim, kontrast, derinlik, pattern gibi tasarım prensipleri ve özelliklerini kullanıp teknik düzenlemelerini yaparak çalışmamızı sonlandıralım.

Marka çalışmamız arzuladığımız şekline kavuştu. Son olarak markamızı canlandırmak adına bir maket üzerinde gösterelim.

Elbette bu çalışma bahsedilen konulara dikkat edilmeye başlandığında nelerin gerçekleşeceğine dair bir ön fikir oluşturması adına basit bir örnekti. Tipografi diğer tasarım disiplinleri ile birleştiğinde sonsuz olasılıkta çalışmaya imkan sağlayacaktır.