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
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: Tipografi tarihi hakkında hoş bir video, yazı uzun geldiyse bari bunu izleyin.
Ek 3: 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…
FATMA ÖZGÜR
Bilgileri sıkmadan kısa kısa ve videolarla desteklediğiniz için teşekkürlerr.. Harika bir yazı dizisi olmuş emeğinize sağlık..
Serdar A
Okuduğunuz için ben teşekkür ederim, öğrendiklerimi fırsat buldukça yazmaya çalışıyorum böyle olunca daha akılda kalıcı oluyor. Bir çeşit arşiv gibi:)
Onur
Main line ile ascender arasındaki bölüme Türkçe olarak ”Çıkış”
Base line ile descender arasındaki bölüme ise ”İniş” desek nasıl olur ?
Bu arada çok güzel bilgiler ve paylaşımları olan bir site olmuş elinize emeğinize sağlık.. :)
rahmi
Harflere ve cizimlere ilgiliydim simdi hayranlikla okuyorum ogrenecegim cok sey var
Nida
Burası yeri mi bilmiyorum ama nette bulamadığım için yazıyorum.
bir font oluşturmak istiyorum. Bu fontta iki harf aynı harf (aa, ff, gg gibi) yanyana geldiğinde ikinci harfin benim belirlediğim gibi olmasını istiyorum. fontcreator kullanıyorum.
Bu şekilde karakter setleri mevcut . IJ ($0132), Dz ($01F2) gibi.
örnek yanyana üç nokta koyduğumda word bunu tek karakterli üç nokta olarak … ellipsis ($2026) olarak kendisi otomatik yapıyor.
mümkün müdür?
Serdar A
Karakter setlerinin dışına çıkıp yeni bir karakter adresi verdiğimde (Örn: YTL) hepsinin yerinin kaydığını görmüş ve o işten uzak durmuştum. Üzgünüm, bu konuda net bir cevap veremeyeceğim, bana zor görünüyor. Font tasarımının en dip noktalarından bahsediyorsun.
Cem
İnternette tipografi hakkında yazılar okumak için gezinirken rastladım sayfanıza. Harika bir yazı olmuş, baştan sona keyifle okudum. Ayrıca Open Sans Serif iyi bir seçim olmuş :)
Mustafa Barış Arslantaş
Çok gerekli bir içerik paylaşmışsınız öncelikle teşekkür ediyorum. Bir sıkıntım var, yardımcı olabilirseniz sevinirim. Biliyorsunuzdur meb eğitimde bitişik eğik yazı tipini kullanmaya başladı. Taramalarımda konuda 10 farklı font bulabildim, malesef tümü sıkıntılı fontlar. bu fontlardan herhangi birini otomatik olarak bold dönüşümünü yapabileceğim bir uygulama yada yöntem varmıdır. Cevabınız için şimdiden teşekkür ederim.
Serdar A
Maalesef bilmiyorum.
Uğur
Bu güzel yazı için teşekkür ederiz, tipografi ile ilgili türkçe bir kaynak var mıdır? kitap vs.
Tipografide derinleşmek için neler yapmalıyız?
Kitap buldum :)
https://serdara.com/grafik-tasarim-kitaplari/
Enis
Çok teşekkürler. Fontlar hakkında güzel bilgiler edindim.
Dünya çapında bilinen bir font ailesi yapmanız dileğiyle.
ckur
Merhaba Serdar Bey, Yazınızı beğenerek ve ilgi ile okudum. Web tasarımı üzerine kendimi geliştirmeye çalışıyorum. Bu konuda yazılan metinlerin, başlıkların daha etkili olması açısından bana tavsiye ve kaynaklar varsa yardımcı olursanız sevinirim. Şimdiden teşekkürler..
Serdar A
Belki bu yazı yardımcı olur: serdara.com/grafik-tasarim-kitaplari/
redwon
merhaba serdar bey kurallara bağlı kalmak doğru bişeymi çok kurallı matematik gibi
Serdar A
bunlar kural değil, tasarım sırasında gerek duyulan ve kullanılan terimler. amaçları yardımcı olmak.
hüsna
merhaba ben fontlar hakkında araştırma yapıyorum da black ıtc fontu hakkında bilginiz varsa paylaşabilir misiniz?
teşekkürler..
fatih
merhabalar yazınız bilgiler çok güzel tez için konum font üzerine ve bu font hakkında yazılmış kitaplara ulaşamadım daha doğrusu kitap isimleri bulamadım kaynak bulmakta zorlanıyorum yardımcı olur musunuz ?
Ozgur Serdar
Kusura bakmayın şu an İngiltere’de olduğum için pek yardımcı olamıyorum şu yazıdaki https://serdara.com/grafik-tasarim-kitaplari/#TipografiKitaplari
önerilerim belki yardımcı olur. Bu da yetmez ise gen.lib.rus.ec sitesinde konu ile ilgili bir çok kaynağa erişebilirsiniz.
Asuman
Tipografi ile ilgili araştırma yaparken bu sayfaya geldim. Her yönüyle harika. Konunun anlatımı, iletişim dili, örnekler, çeşitlilik, düşünsel birikim… Böyle bir blog yaratmayı sadece hayal etsem bu kadar güzel olmazdı. Teşekkürler.
Ozgur Serdar
Çok teşekkürler :D
Selahattin Özpalabıyıklar
Türkçe Tipografi Topluluğu’nun Facebook sayfasından: https://www.dropbox.com/s/64q4rs22yp2xvh4/TTTTipografikAnatomiI70x50.pdf?dl=0
Ozgur Serdar
Harika bir Türkçe kaynak. Teşekkürler.