Tipografiye Giriş: Tipografi Font Typeface Nedir?

Tipografi ile ilk defa Web-Grafik kursunun düzenlediği bir seminerde tanıştım. Her afişin, her ilanın, her etiketin içinde duruma göre değişen font aileleri vardı. Anladım ki sadece sözcüklerin anlamları değil, harflerin şekilleri de duygu içerebiliyordu. O gün ‘type’ gözüm açıldı ve dünyayı daha farklı görmeye başladım. Biraz tecrübe kazandıktan sonra birkaç font seti bile yaptım. İsterseniz, tipografi nedir ve bu alanda kendimizi nasıl geliştirebiliriz bildiğim kadarını aktarmaya çalışayım.

Not: Bu makalenin gövde metni, tırnaksız “Open Sans” fontu ile yazılmıştır. Başlık metninde ise tırnaklı “Caudex” fontu kullanılmıştır. Her iki font da güzel yazıyüzlerine (‘typeface’lere) sahiptir ve ikisi de gerçek (true) italik görünümünü desteklemektedir. Hangi terimlerle mi konuşuyorum? Tipografi terimleriyle. Eğer çevrenizi saran harflerin oluşturduğu bu gizemli göstergeler dünyası ilginizi çektiyse okumaya devam edin. Çekmediyse siz bilirsiniz.

 

Tipografi Nedir?

Eski Yunancadaki ‘typos: form’ ve ‘graphia: yazmak‘tan türetilen tipografi, yazıyı belli tekniklerle belirli şekillere sokma sanatıdır. Fantastik bir tabirle tipografi harf bükücülüğüdür. Tipografi, kimine göre sanat, kimine göre bilim, kimine göre eğlence, bana göre hepsinin bir karışımıdır. Bu bağlamda tipografi, sesleri karşılayan harflere ve dolayısıyla metne görsel açıdan daha fazla anlam yükleme sanatıdır. Harfler arasında geometrik ve oransal uyumun bilimidir. Tipografi, harf içeren bir posterlerdeki duyguyu daha iyi aktarma yoldur.

 

Font – Typeface Ayrımı

İnternette en çok karıştırılan terimler font ve typeface (yazıyüzü) kavramlarıdır. Font .ttf .otf gibi uzantıları olan bilgisayara yüklenebilen dijital bir dosyadır. Yazıyüzü (typeface) ise o fontun biçimine, yani tasarımına göndermede bulunur. (Ayrıntısı İçin: Font Yazıyüzü Farkı)

 

Serif – Sans Serif Ayrımı

“Serif” tırnak demektir. “Sans” ise Fransızca’da olumsuzluk (without) anlamı verir: “sans-serif” ise tınak-sız “Arial” fontu gibi düz fontlara verilen isimdir. Buna karşın “Times New Roman” tırnaklı (serif’li) bir fonttur. Aynı mantıkla “Sans Herif” herif-siz yani erkek-siz anlamına gelir ve feminist bir font olarak Elif Sans Herif buna eğlenceli bir örnek olabilir. (Fontumun reklamını yaparım.) Serif-Sans kullanım hakkında güzel bir yazı da bu linkte var.

 

İtalik – Oblik Ayrımı

Dik Fontlar: Roman = Regular = Book. Hepsi de yakın anlamlara sahiptir ve dik fontları karşılar. Office programında iyi tanıdığınız “Times New Roman” fontu, ilk olarak düz tasarlanmıştır. İtalik  yani doğal eğik durumu ayrıca tasarlanmıştır. Belirli programlarla biz onları açılı olarak eğdiğimizde hakiki bir italiklik elde edemeyiz, bu duruma ise oblik deriz, yani yapay eğik. Bu farkı en iyi küçük a harfinden anlarsınız, a harfi eğildiğinde boğulur ve okunaklı görünmez, içi geniş eğik a harfi daha rahat bir okunma sağlar. Yukarıdaki örnekte de açıkça görülmektedir.

 

Dikkat Komik Sans Çıkabilir!

İlginçtir tipograflar arasında en sevilmeyen font “comic sans serif” fontudur. Bu font aslında 1994’te, aynı zamanda Trebuchet MS gibi çok güzel bir fontun yaratıcısı Vincent Connare tarafından çizgi roman baloncuklarını doldurmak için üretildi. Fakat ilgili ilgisiz herkes bu sempatik fontu kullanmaya başladı. Obsesif tasarımcılar da bu meseleyi o kadar ciddiye aldılar ki bu fontun kullanımını yasaklamak için  “Ban Comic Sans” adlı bir site bile yaptılar. Siz siz olun bu fontu kullanmadan önce iki kere düşünün ya da gelecek eleştirilere hazırlıklı olun. Fakat bu fontun seveni de var. Aşağıdaki videoda gençler, fonta olan sevgilerini anlatmışlar.

Şahsen bu fontu ben de tercih etmiyorum; ama aşırı bir alerjim de yok. Zaten dünyada font kıtlığı da yok. Düşünün, benim bile tasarımlarımın bulunduğu ücretsiz font indirebileceğiniz bir çok site var. Buna en güzel örnek dafont.com sitesidir. Siteyi gezdiğinizde bana hak vereceksiniz. Comic Sans’tan çok daha comic bir sürü font var.

 

Font Kontrastı

Font kontrastı, harf içindeki hatların kalınlık değişimidir. Örneğin Helvetica fontunun kontrastı düşüktür; çünkü harfler özdeş kalınlıkta çizilmiştir. Diğer yandan Bodoni fontu yüksek kontrasta sahiptir. Yukarıda iki fontun da karakteristik yapısı net olarak görülmektedir.

Kontrast olayı çok derin bir konudur. Harf düzeyindeki kontrast ayrı, sayfa düzeni açısından kontrast ayrı ve renk kontrastı ayrı konulardır ve tasarımcıya birçok kombinasyon şansı sağlar. Şunu mutlaka yapın diye bir kural yoktur. Önemli olan metnin okunaklı olması ve gözü yormamasıdır. (Ayrıntısı için: Webdesignerwall)

 

Font İsimlendirme

Fontlara daha bilinçli yaklaşmak için onların isimlerinin ne anlama geldiğini de bilmek gerekiyor. Helvetica bir yazıtipi (font) ailesidir, Narrow genişliktir, Bold ağırlıktır, Oblique ise eğimdir. Book, Roman gibi tabirler ise o yazı tipini stilini belirtir.

 

Font Anatomisi

Artık bazı terimler o kadar yerleşmiş ki Türkçeleştiremedim. Türkçeye özgü hatlar var ki onlara da henüz isim bulamadım. (Öneriniz varsa lütfen yorum yapın.) Fakat faydalı bir çizelge oldu. Aşağıdaki ise güzel bir siteden bulduğum çizelge, ayrıntısı için resme tıklayabilirsiniz.

 

Tipografide Duygu

Açıkçası tüm mesele duyguyu aktarabilmek. Göstergelerle dolu dünyamızda harfler de bu meselde büyük öneme sahip. Artık siz de fark etmişsinizdir ki bu yazıyüzlerinin belirli karaterleri var. Eğlenceli bir kaç örnek buldum, fontları hayvanlarla eşleştirmişler.

http://iwastesomuchtime.com/on/?i=24814
http://weruletheinternet.com/2012/02/17/cats-as-fonts-20-pics/

Hatırlarsanız, yazını başında belirtmiştim: bu sayfanın gövde metninde Open Sans Serif, başlık metninde ise tırnaklı Caudex fontları, @font-face yöntemiyle kullanılmıştır. Sanırım terimler biraz daha tanıdık geliyor. Ne dersiniz?

Öğrenmeye devam, iyi tasarımlar…

Ek 1: Ayırca ciddi ve klasik İngiliz fontu “Times New Roman” hakkında güzel bir video buldum.

Ek 2: Fontların adlarının yarattığı duygulara yönelik bir video daha. Comic Sans’a dikkat;)

Ek 3: Tipografi tarihi hakkında hoş bir video, yazı uzun geldiyse bari bunu izleyin.

Ek 4: Tipografik kar tanesi yapan bir site buldum harika bir fikir gibi geldi. Herkes kendi adına özgü bir kar tanesi yapabilir.

Aşağıdaki bölümde ise tipografide rastladığım birkaç kavrama daha değindim, mesela ‘dul’ ve ‘yetim’ nedir bilmiyordum, bu yazıyı yazarken öğrendim. Umarım geleceğin tipograflarına faydalı olacak bir yazı olmuştur. 

Tipografi Terimleri Sözlüğü

Uppercase (Majuscules): Büyük harfler. Otorite ve sağlamlık duygusu verirler. Hele ki aralarındaki mesafe açıksa kudretinden geçilmez. Kurumsal çalışmalarda iyi gider.
Lowercase (Minuscules): Küçük harfler. Tahmin edeceğiniz gibi daha sıcak sempatik samimi duygular uyandırır. Çiçekçi ya da bir anaokulu logosu düşünüyorsanız yakışabilir.

Leading: Bir paragraf içindeki satırlar arası boşluk.
Tracking: Bir satır içindeki karakterler arası boşluk.
Kerning: Harfler arası boşluk. Manşet gibi büyük yazı karakterleri kullanıldığında önemli etkiye sahiptir. Yan yana gelen “Ty” harfleri, “y” nin kuyruğunun “T” nin kanadı altına girmesi için ayar gerektirir

Dul: Paragraf sonunda kalan yalnız sözcük veya hece parçası.
Yetim: Çoklu sütunlu bir sayfa düzeninde sütun başında kalan sözcük parçası. Bunların sütun rengi açısından olmasını istemeyiz. Okunaklılığı olumsuz etkiler. Bu yüzden tracking (satırlar arası boşluk) çok önemlidir.

Espas: Karakterler, kelimeler ve paragraflar arasındaki boşluk.
Display Type (Başlık Metni): Gövde metninden daha büyük olan, manşet ve başlıklarda kullanılan yazı.Başlığın okunaklı olma gibi bir derdi olmadığı için her türlü şekilde seçebilirsiniz.
Text Type (Gövde Metni): Bir dokümanın başlık ve spotlarından ayrışan ana metni.Gövde metni bir mesaj iletme gayesi güttüğü için okunaklı olmalıdır ve fontları da ona göre seçilmelidir.

Bloklu: Metin genellikle sadece bir marja sola ya da sağa hizalanır. Metin hem sol ve hem sağ marjlarına hizalıysa bloklanmış olur.
Dikit: Bir yazı tipinde/k,b ve d harflerin diğer küçük harflerin x yüksekliğinin üstüne taşan kısmı.
Dingbat: Harf veya rakam (alfasayısal) olmayan karakter. Dingbant fontlar tamamen bu karakterlerden oluşur ve oklar, madde imleri ve araçlar gibi sembol ve diğer süslerin kaynağıdır.

Tipografik Ölçüler

Dijital Ölçüler: 12 punto (point) = 1 em (pica),
Baskı Ölçüleri:  1 punto = 0,376 mm, 72 punto (point) = 6 pika (pica) = 1 inç (inch)
Ölçü ayrıntısı için bu viki makalesine başvurabilirsiniz.

Web (Dijital) Tipografi Terimleri

Web Safe Fonts: Tüm bilgisayarlarda olduğu kabul edilen font aileleridir: Arial, Times New Roman, Courier gibi…

@font-face: Bilgisayarımızda kayıtlı olmayan ancak web sitesinin düzgün görünmesi için gereken fontları çağırmada kullanılan CSS yöntemidir. (Ayrıntısı: Font-face kullanımı)
Cufon Fonts: Web safe olmayan bir fontu sitemizde göstermek için kullandığımız başka bir yöntemdir. Font dosyası javascript dosyasına çevrilir. Bu durumda da yine Türkçe harf desteği olan fontlara dikkat etmek gerekir. (Ayrıntısı: Cufon Kullanım)
Google Web Fonts: Web Safe fontların yetersiz kaldığı durumlarda google’ın ücretsiz olarak kullanıma açtığı web fontlarıdır. En büyük sıkıntısı çoğunun Türkçe karakter desteğinin olmamasıdır. Bazı sitelerde gördüğünüz başına buyruk ş, ğ harfleri bunun göstergesidir. Bu fontlar hem @font-face hem de cufon yöntemiyle siteye çağrılabilir. (Kaynak: Google Web Fonts )
Görsel terim kılavuzu: https://www.supremo.tv/typeterms/

Ve dahası…

Poriodik Yazıyüzü Tablosu: Periodic Table of  Typefaces
Lynda.com – Tipografi Eğitimi: Foundations of  Typography
Ücretsiz font yapma sitesi: Fontstruct.com
Fontları sitenize gömmeye yarayan site: Fontsquirrel.com
Piyasadaki en detaylı font tasarım programı: FontLab Studio
FontLab’ın ücretsiz alternatifi: Fontforge
Evet, bu işin sonu yok…