Tipografi Sanatı
Merhaba, ben İTÜ Endüstriyel Tasarım öğrencisi Merve.
Endüstriyel Tasarım bölümü öğrencileri olarak kurduğumuz ITUX kulübünün bir üyesiyim. Burada kendi kulüp kimliğimizi oluşturmak adına ilk adımlarımızı attık ve kendi kimliğimizi oluştururken öncelikle bilmemiz gereken temel elementleri ve alanları ben, Burak Çevik ve Arda Genç bir araya getirip düzenleyerek diğer arkadaşlarımıza sunduk. Ben tipografi sanatını anlattım.
Eğitim hayatım boyunca öğrendiğim ve uygulamaya çalıştığım tipografi sanatını sunumumda kendi bilgilerime de dayanarak üç başlık altında topladım. Bunlar tipografi elementleri, tipografide temel terimler/konseptler ve web tasarımında tipografi. Aynı zamanda sunumu hazırlarken 2019–2020 Güz dönemi Tipografi dersi eğitmenimiz Koray Gelmez’in ders dokümanlarından da yararlandım. Kavramları İngilizce’sine aşina olmak adına koruyarak Türkçe bir içerik hazırladım. Size bu yazımda tipografi sanatını basit bir şekilde elimden geldiğince anlatacağım. Umarım yararlı olur :)
Öncelikle “Tipografi nedir?” sorusuyla başlayalım.
Tipografi iletişim tasarımında önemli bir rol oynayan bir düzenleme sanatıdır. Kaligrafiden dijitale kadar tüm harf ve sembollerin düzenlenme ve tasarlanmasıdır. Tipografinin iki işlevi yerine getirmesi gerekmektedir: Legibility ve Readability. Bu iki amaca göre tipografiyi anlamak ve uygulamak bizi doğru yere götürecektir.
Legibility her bir karakterin font içerisindeki diğer tüm karakterlerden anlaşılır ve ayırt edilebilir olmasıdır. Readability ise metinsel materyalin, anlamı olabildiğince açık bir şekilde iletebilme becerisidir. Bir okuyucunun bilgiler arasında kolayca gezinmesi için okuyucuya yardım etmemiz gerekir. Bu iki kavram karıştırılmamalı ve doğru kavranmalıdır.
Tipografi nedir sorusunu cevapladığımıza göre üç alt başlıktan biri olan tipografi elementlerine geçebiliriz.
Tipografi Elementleri
· Typeface/Fonts
· Weights & Styles
· Typeface Anatomy
· Basic Categorization
Typeface/Fonts
Typeface ve Font birbirinden farklı kavramlardır. Typeface bir font ailesidir (Futura, Times New Roman gibi). Font ise bu ailenin içindeki bir ağırlık/kalınlık veya stildir (Futura Bold, Times New Roman Italic gibi). Aralarındaki farkı albüm ve şarkı arasındaki ilişkiye benzetebiliriz.
Weights & Styles
Weight kavramı genellikle “light”, “thin”, “regular ”,“ medium ”,“ bold ”, veya “black ”olarak sınıflandırılır ve bunların her biri, karakterleri oluşturan konturların kalınlığını ifade eder. Style olarak ifade ettiğimiz kavram ise fontların stilini ifade eder ve genel olarak kullanılan üç stil vardır: italik, eğik ve küçük/büyük harfler.
Typeface Anatomy
Burada bir typeface anatomisi görüyoruz. Daha sonra bahsedeceğim kavramların ne olduğunu gösteren bir harita olarak bu görseli kullanıyorum.
1. Bowl; 2. Stem; 3. Counter; 4. Arm; 5. Ligature; 6. Terminal; 7. Spine; 8. Ascender; 9. Apex; 10. Serif; 11. Ear; 12. Descender; 13. Crossbar; 14. Finial; 15. Ascender height; 16. Cap height; 17. X-height; 18. Baseline; 19. Descender line
Basic Categorization
‘Typeface’leri 5 kategoride sınıflandırabiliriz. Temel olarak bu kategoriler nedir onlara bakalım.
· Serif
Serif ‘typeface’ler, yüzdeki karakterlerin ana konturlarına eklenmiş küçük satırlara referansla “serif” olarak adlandırılır. Serif fontlar çoğunlukla basılı belgelerdeki gövde metni için olduğu kadar çevrimiçi gövde metni ve başlıklar için de kullanılabilir.
· Sans Serif
Sans-serif ‘typeface’ler, karakterlerle ilgili serif detaylarından yoksun oldukları için böyle adlandırılır. Sans-serif fontlar genellikle seriflerden daha modern görünümdedir.
· Scripts
Scripts ‘typeface’ler el yazısına dayanır ve harfleri çok akıcıdır. Gövde metinlerinde (body paragraph) kullanılmak için uygun değildir.
· Display
Display ‘typeface’ler muhtemelen en geniş kategoridir ve en fazla varyasyonu içerir. Bu kategoriye ait fontlar, body paragraph için uygun değildir. Display fontlar başlıklar veya dikkat çekmesi amaçlanan kısa metinler için uygundur.
· Dingbats and Specialty
Dingbat ‘typeface’ler, harfler yerine sembollerden ve desenlerden oluşan özel fontlardır.
Tipografi elementlerini öğrendiysek tipografide temel terimler ve konseptler alt başlığımıza geçebiliriz. Terimler ve konseptler nedir temel olarak bahsedeceğim.
Tipografide Temel Terimler ve Konseptler
· Leading
· Alignment
· Tracking
· Kerning
· Proportional / Monospaced
· Direction
· Uppercase / Lowercase
· Ligature
Leading
Leading satır aralığıdır, metin satırları arasındaki boşluk miktarını tanımlar. İki satır taban çizgisi arasındaki mesafeyi hesaplayarak satır aralığını ölçebilirsiniz.
Alignment
Alignment kavramı metni hizalamaktır. Metninizi nasıl hizaladığınız, insanların onu nasıl okuyup algılayacağı üzerinde büyük bir etkiye sahiptir. Uyum kararı, tasarım temanız göz önünde bulundurularak, legibility ve readability gözetilerek yapılmalıdır.
Tracking
Tracking karakter grupları arasındaki boşluktur. Loose veya tight olarak tanımlanabilir. Loose tracking harflerin aralarında daha büyük bir mesafe olmasıdır. Tight tracking ise harflerin daha yakın olmasıdır.
Kerning
Kerning karakter aralığıdır, iki karakter arasındaki boşluk miktarını tanımlar. Tracking, tüm karakterlerin ne kadar yakın olduğunu etkileyen küresel bir ayar olsa da, karakter aralığı iki harf arasındaki boşluğun mikroskobik görünümüdür.
Proportional / Monospaced
Proportional font, her karakterin yalnızca ihtiyaç duyduğu genişlikte yer almasıdır. Monospaced font ise her karakterin yatay bir metin satırında aynı miktarda yer kaplamasıdır.
Direction
Uppercase / Lowercase
Ligature
Ligature, yazma ve tipografide, iki veya daha fazla grafik veya harfin tek bir glif olarak birleştirildiği bir yazımdır.
Tipografi elemenleri, tipografide temel terimler ve konseptler nedir temel olarak gördük. ITUX kulübü olarak hitap ettiğimiz web dünyasında kimliğimizi oluşturmada tipografi nedir ve nasıl işler son olarak da bundan bahsedeceğim. Bu alt başlıkta birkaç kaynaktan yararlandım:
https://www.toptal.com/designers/typography/web-typography-infographic
https://medium.com/@Seyyahil/ui-ux-ve-web-tasar%C4%B1m%C4%B1nda-typography-prensipleri-90f107bd6893
Web Tasarımında Tipografi
Öncelikle kimliğimizi oluştururken izleyeceğimiz iki adım var. İlki typeface/font seçmek, ikincisi ise oluşturacağımız metinleri biçimlendirmek.
Typeface/Font Seçimi
Typeface/Font seçimi yaparken hedef kitlenin ve içeriğin karakteristik özellikleri dikkate alınır. Font seçmeden önce hedeflerin, hedef kitlenin ihtiyaçlarının ve tercihlerinin belirlenmesi gerekir.
En fazla 3 font seçmek daha düzenli ve profesyonel görünmemizi sağlar. Birden fazla font seçimi yaparken ‘typeface’lerin karakter genişliklerine (character width) göre birbirlerini tamamlıyor olmalarına dikkat etmek readability açısından önemlidir. Kullanıcılar tasarladığımız dijital ürünlere farklı ekran boyutları ve çözünürlüklerine sahip cihazlardan erişecekleri için birden çok boyutta ve strok kalınlığında (thin, bold, regular..) iyi çalışan bir font seçmek readability ve kullanabilirlik açısından önemlidir.
Bu seçimleri yaparken dikkat etmemiz gerekenleri şöyle sıralayabiliriz:
- Standart fontları kullanmayı denemek
- Net ve tanınabilir fontları seçmek
- Heading Tags
· Standart fontları kullanmayı denemek
Standart fontlar kullanıcılar tarafından daha iyi bilinmekte ve daha hızlı ve doğru bir readability sunmaktadır. Marka bilinci oluşturmak veya farklı bir deneyim sunmak gibi amaçlarımız yoksa standart fontlardan dışarı çok çıkmamak daha güvenli olacaktır.
· Net ve tanınabilir fontları seçmek
Metin, göz harfleri kolayca ayırt edebildiğinde en okunaklıdır. Net ve tanınabilir fontları seçmek de readability ve legibility açısından önemlidir. Burada dikkat etmemiz gereken dört özellik vardır:
Distinctive Letters/Ayırt Edici Harfler: Çok tekrar eden formlar metni okunamaz hale getirebilir, bu nedenle her harfin kendine özgü bir şekli olmalıdır.
Open Forms/Açık Formlar: Havadar ve açık harflerin kapalı şekillerde bulanıklaşma olasılığı daha düşüktür.
Clear Terminals: Belirgin başlangıçlar ve harflerin sonları, gözün bireysel formları tanımasına yardımcı olur.
Letterform Contrast: Body paragraph (gövde metni), harf kontur genişliği içinde bir miktar kontrast gerektirir, ancak belirli konturların kaybolmaya başladığı yerde çok ileri gidilmemelidir.
· Heading Tags
Heading tags metne görsel bir hiyerarşi vermek için kullanılır. Web sayfasında başlıkları tanımlamak için HTML kodu içinde <h1> dan <h6>’ya kadar heading tags etiketleri kullanılır. <h1> en kalın ve sayfadaki en kritik içerik, <h6> en küçük ve en az önem taşıyan başlıklar için kullanılır.
Metin Biçimlendirme
Typeface/Font seçimi yaptık sıra metinlerimizi biçimlendirmeye geldi. Bir font seçtikten sonra, onu ekranda okumak için biçimlendirmek de aynı derecede önemlidir. Renk ve boyut gibi kararlar her zaman okuma deneyimine katkıda bulunur. Metni biçimlendirirken dikkat etmemiz gerekenleri ise şöyle sıralayabiliriz:
- Body text size
- Leading
- Line Length
- Apply Alignment Correctly
- Colour Contrast
· Body text size
Kullanıcılar farklı ekran boyutları ve çözünürlükleri olan cihazlardan erişim sağladığı için her boyutta iyi çalışabilecek fontları seçmek gerekmektedir.
· Leading
Leading satırlar arası boşluğu ifade etmektedir. Satırlar arasındaki boşluk fontun boyutlarına bağlıdır. Readability gözetilerek satırlar arası boşluğun karakter yüksekliğinden yaklaşık olarak % 30 daha fazla olmasına dikkat edilmelidir. Başlık ve metin arasındaki satır aralığı ise başlığın büyüklüğüne göre 15px, 20px veya 30px boşluk olacak şekilde ayarlanmalıdır.
· Line Length
Masaüstü ve mobil cihazlarda farklılık gösteren satır uzunluğu masaüstü için en fazla 40–60, mobil cihazlar için ise 30–40 karakter olacak şekilde ayarlanmalıdır.
· Apply Alignment Correctly
Hiyerarşi ve hizalama okunabilirliği arttıracak şekilde doğru ayarlanmalıdır.
· Colour Contrast
Web İçeriği Erişilebilirlik Yönergeleri’ne (WCAG) göre en az 4.5:1 kontrast oranı sağlayan renkler tüm okuyucu türleri için metni okunaklı hale getirmektedir.