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.