Tipografi Nedir? Tasarımda Yazı Kullanımı Rehberi

Bir markanın logosunu kapatın, sadece yazı tipini bırakın. İnsanların büyük kısmı yine de markayı tanır. Tipografi tam olarak burada çalışıyor: kelimeleri okumadan önce, onların nasıl göründüğünden bir izlenim ediniyorsunuz.

Tipografi, yazıyı okunabilir ve anlamlı kılacak şekilde düzenleme sanatı. Yazı tipi seçiminden harf aralığına, satır uzunluğundan başlık hiyerarşisine kadar metnin görünen her yanı bu işin içinde. 2012'den beri ajans-marka eşleşmelerini izliyoruz ve tasarım brief'lerinde en çok atlanan başlık bu. Renk paleti üç toplantıda tartışılıyor, yazı tipi ise "sonra bakarız" diye erteleniyor.

Sonra da web sitesi yayına girdiğinde "bir şey eksik ama ne olduğunu bilemiyorum" cümlesi geliyor.

Kısa bir geçmiş: neden bu kadar kurallı bir alan?

Tipografi, matbaanın hareketli harflerle çalışmaya başladığı dönemde doğdu. Harfler tek tek metal bloklara dökülüyor, dizgici bunları elle sıraya diziyordu. Boşluk da fiziksel bir nesneydi — harflerin arasına ince metal parçalar konuyordu.

Bugün kullandığımız terimlerin çoğu oradan kalma. "Leading" (satır aralığı) kelimesi, satırların arasına konan kurşun şeritlerden geliyor. "Uppercase" ve "lowercase" ise büyük ve küçük harflerin durduğu üst ve alt çekmecelerden.

Bu tarih, alanın neden bu kadar kural içerdiğini açıklıyor. Her ayar, yüzyıllar boyunca binlerce sayfa basılırken gözlemlenmiş bir okuma sorununun çözümü. Modern tasarım araçları bu ayarları varsayılan olarak veriyor, ama varsayılanlar her metin için doğru olmuyor.

Tipografi, font ve yazı tipi aynı şey değil

Günlük konuşmada üçü birbirinin yerine kullanılıyor, ama aralarında gerçek bir fark var ve ajansla konuşurken bu fark işinize yarıyor.

Typeface (yazı karakteri) tasarımın kendisi — harflerin ortak bir mantıkla çizilmiş ailesi. Helvetica bir typeface.

Font o ailenin belirli bir varyasyonu: Helvetica Bold 14 punto. Dijital dünyada font, bilgisayarınızdaki dosya.

Tipografi ise bunları kullanma disiplini. Hangi yazı tipini seçtiğiniz kadar, onu nasıl dizdiğiniz de tipografi.

Pratikte şu anlama geliyor: pahalı ve güzel bir yazı tipi satın alıp berbat bir tipografi yapabilirsiniz. Tersi de mümkün — ücretsiz bir yazı tipiyle çok temiz bir iş çıkabilir.

Harflerin anatomisi: neye bakıyoruz?

Tasarımcıyla aynı dili konuşmak için birkaç terim yeterli.

Bu terimleri ezberlemek gerekmiyor. Ama bir ajans size "x-yüksekliği düşük olduğu için mobilde 14 punto yetmez" dediğinde, o cümlenin teknik bir gerekçe mi yoksa kaçamak mı olduğunu anlarsınız.

Yazı tipi sınıfları ve ne zaman hangisi

"Serif kurumsal, sans serif modern" gibi bir kural yok. Bunlar eğilim, kanun değil. Finans teknolojisi girişimlerinin çoğu sans serif kullanıyor ve hiçbiri güvensiz görünmüyor. Seçim, markanın söylemek istediği şeyle metnin okunacağı ortamın kesişiminde yapılıyor.

Tipografi nasıl yapılır? Altı ayar

Yazı tipini seçtiniz. Asıl iş şimdi başlıyor.

Bu ayarlar bir web tasarım projesinin en görünmez ama en çok fark yaratan bölümü. Tasarım dosyası güzel görünüp canlıda dağılıyorsa sorun neredeyse her zaman burada.

Türkçe karakter tuzağı — dışarıdan alınan yazı tiplerinde

Türkiye'de çalışan bir markanın en sık düştüğü tipografi hatası bu ve genelde yayına çıktıktan sonra fark ediliyor.

Uluslararası font kütüphanelerindeki yazı tiplerinin bir kısmı Latin genişletilmiş karakter setini tam desteklemiyor. Sonuç: ı, İ, ğ, Ğ, ş, Ş harfleri ya hiç görünmüyor ya da başka bir yazı tipinden ödünç alınıp araya sıkıştırılıyor. İkinci durum daha sinsi, çünkü sayfa çalışıyor gibi görünüyor — sadece bazı harfler ötekilerden farklı çizilmiş oluyor.

Noktasız "ı" ile noktalı "i" ayrımı özellikle sorunlu. Birçok yazı tipi büyük "İ" harfini hiç barındırmıyor.

Kurumsal kimlik çalışması yaptıran markalar için bu, sözleşmeye yazılması gereken bir madde. Marka oluşturma ajanslarıyla çalışırken teslim listesine "seçilen yazı tipi ailesinin tam Türkçe karakter desteği" satırını ekleyin.

Yazı tipi eşleştirme: iki aile nasıl birlikte çalışır?

Başlık ve gövde için farklı aileler seçtiğinizde ikisinin uyumlu olması gerekiyor. "Uyumlu" burada benzer değil, birbirini tamamlayan anlamına geliyor.

Birbirine çok benzeyen iki yazı tipi en kötü sonucu veriyor. Göz farkı algılıyor ama nedenini çözemiyor; sayfa yanlış hizalanmış gibi duruyor. Kontrast ya belirgin olmalı ya da hiç olmamalı.

İşe yarayan üç yaklaşım var:

Eşleştirmeyi denerken metni Lorem Ipsum ile değil gerçek içerikle test edin. Türkçe metnin harf dağılımı ve kelime uzunluğu Latince yer tutucu metinden farklı; sayfa dokusu da farklı çıkıyor.

Bir diğer nokta rakamlar. Bazı yazı tiplerinde rakamlar harflerin arasına gömülü yükseklikte çizilmiş oluyor. Fiyat listesi veya veri tablosu tasarlıyorsanız, rakamların hepsinin eşit genişlikte olduğu bir kesim seçmek sütunların hizada kalmasını sağlıyor.

Font lisansı: sessizce büyüyen bir risk

Yazı tipleri telif hakkıyla korunuyor ve lisansları kullanım biçimine göre ayrılıyor. Bir tasarımcının bilgisayarındaki font, sizin web sitenizde kullanılabilir anlamına gelmiyor.

Ajans değiştirdiğinizde eski ajansın satın aldığı lisans genelde onların adına kayıtlı oluyor. Marka kimliğinizi taşıyan yazı tipinin lisansını kendi şirketiniz adına almak, sonradan yaşanacak bir kimlik değişikliğinden çok daha ucuz.

Tipografik hata ne demek?

Terim iki farklı anlamda kullanılıyor ve karıştırılıyor.

Gündelik kullanımda tipografik hata, yazım sırasında oluşan dizgi hatası demek — yanlış tuşa basmak, harf atlamak. İngilizcedeki "typo" karşılığı.

Tasarım disiplininde ise tipografi hatası, yazının düzenlenmesindeki kusurları anlatıyor. Sık görülenler:

• Dul ve yetim satırlar: Paragrafın son satırında tek bir kelimenin kalması, ya da başlığın alt satıra tek kelime taşması.
• Nehirler: İki yana yaslanmış metinde kelime aralarının açılıp sayfada dikey boşluk kanalları oluşturması.
• Sahte kalın ve italik: Yazı tipinin gerçek Bold veya Italic kesimi yerine, yazılımın harfleri esnetip kalınlaştırması. Harf formları bozuluyor.
• Çok fazla aile: Bir sayfada dört farklı yazı tipi. Hiyerarşi yerine gürültü çıkıyor.
• Yanlış tırnak: Düz tırnak (") yerine tipografik tırnak (") kullanılmaması — küçük ama profesyonellik algısını doğrudan etkiliyor.

Bunların hiçbiri sitenizi çökertmiyor. Toplandıklarında ise "amatör duruyor" hissi yaratıyorlar ve o hissin nereden geldiğini kimse tarif edemiyor.

Ekranda tipografi: baskıdan farkı

Basılı işte kağıt sabit, ekran değil. Aynı metin 6 inçlik telefonda ve 27 inçlik monitörde okunacak.

Bu yüzden dijital tipografide birkaç ek başlık var:

Punto sabit değil, akışkan. Gövde metni masaüstünde 18 punto, telefonda 16 punto olabilir. Ama telefonda 14 puntonun altına inmek, kullanıcıyı yakınlaştırma yapmaya zorluyor.

Font yükleme performansı. Yazı tipi dosyası indirilene kadar tarayıcı ya metni hiç göstermiyor ya da geçici bir yazı tipiyle gösterip sonra değiştiriyor. İkincisi sayfanın gözünüzün önünde zıplamasına yol açıyor. Çözüm, yazı tipi ağırlıklarını gerektiği kadar yüklemek — bir markanın gerçekten kaç ağırlığa ihtiyacı olduğunu sorun. Genelde üç yeterli.

Erişilebilirlik. Metin kontrastı ve yeniden boyutlandırılabilirlik, artık tasarım tercihi değil standart. Görme güçlüğü olan kullanıcılar metni büyüttüğünde düzenin dağılmaması gerekiyor.

Marka tipografisi: kimliğin sessiz bileşeni

Logo, markanın imzası. Tipografi ise el yazısı — her yerde, sürekli görünüyor.

Bir marka kılavuzunda tipografi bölümünün cevaplaması gerekenler:

• Birincil ve ikincil yazı tipi aileleri hangileri, hangi ağırlıklar kullanılıyor
• Başlık, alt başlık, gövde, açıklama metni için punto ve satır aralığı değerleri
• Yazı tipine erişimi olmayan ortamlar için yedek aileler (e-posta şablonları, ofis dokümanları)
• Reklam görsellerinde metin hiyerarşisi
• Türkçe ve varsa yabancı dil sürümleri için karakter kontrolü

Marka sloganı da bu bölümün parçası — bir sloganın nasıl yazıldığı kadar hangi yazı tipiyle dizildiği de akılda kalıcılığı etkiliyor.

Tipografi örnekleri: iyi işte ne görürsünüz?

Örnek toplarken güzel görünen tasarımları biriktirmek işe yaramıyor. Neye baktığınızı bilmek gerekiyor. Topladığınız örnekleri düzenli bir yöne dönüştürmek istiyorsanız moodboard hazırlama adımlarına bakın.

Gazete ve dergi sayfaları. Basılı yayın tipografisi, sınırlı alanda maksimum okunabilirlik üzerine kurulu. Sütun genişliği, başlık kademeleri ve ara başlık kullanımı için en iyi kaynak hâlâ burası.

Yazılım arayüzleri. Uzun süre kullanılan panellerde tipografi yorulmadan okunacak şekilde ayarlanıyor. Bir arayüzde kaç farklı punto olduğunu saymak öğretici — genelde beşi geçmiyor.

Ambalaj. Raf mesafesinden okunması gereken ürün adı ile arka yüzdeki içindekiler listesi aynı ambalajda yaşıyor. İki uç arasındaki hiyerarşiyi kurmak, tipografinin en zor sınavlarından.

Tipografik afiş çalışmaları. Görselin olmadığı, tüm anlatımın yazıyla kurulduğu işler. Harflerin kendi başına görsel olabildiğini gösteriyorlar. Ajans portföylerinde bu tür işler varsa, ekipte tipografiye ayrı emek veren biri var demektir.

Örnekleri incelerken şu üç soruyu sorun: Kaç yazı tipi ailesi kullanılmış? Hiyerarşi kaç kademe? Metin bloğunun etrafındaki boşluk metnin kendisi kadar düşünülmüş mü? Üçüncü soru en çok atlanan. Tipografi sadece harflerle değil, harflerin çevresindeki boşlukla yapılıyor.

Ajans seçerken tipografiyi nasıl değerlendirirsiniz?

Portföye bakarken şu üçü ayırt edici oluyor:

Farklı sektörlerde farklı tipografi var mı? Her işte aynı iki yazı tipini kullanan bir ajans, tipografiyi bir tercih değil alışkanlık olarak görüyor demektir.

Mobil ekran görüntüsü paylaşıyorlar mı? Sunumlarda hep masaüstü görselleri varsa mobilde ne olduğunu görmediniz.

Teslim listesinde font lisansı yazıyor mu? Yazmıyorsa sorun. Cevap net değilse, sorun sizde birikiyor.

Grafik tasarım ajansları tipografiyi genelde tek iş üzerinden ele alıyor; kreatif ajanslar ise marka kimliğinin tamamını kurduğu için tipografiyi sistem olarak tasarlıyor. Hangisine ihtiyacınız olduğu, işin tek seferlik mi yoksa süreklilik gerektiren bir kimlik çalışması mı olduğuna bağlı.

Sıkça Sorulan Sorular

Tipografi nedir kısaca?

Yazıyı okunabilir, anlaşılır ve markaya uygun biçimde düzenleme disiplini. Yazı tipi seçimi, harf ve satır aralıkları, boyut hiyerarşisi ve hizalama gibi kararların tamamı tipografinin kapsamına giriyor.

Tipografik hata ne demek?

Gündelik kullanımda dizgi hatası — yanlış tuşa basmak, harf atlamak. Tasarım alanında ise yazının düzenlenmesindeki kusurları anlatıyor: dul satırlar, sahte kalın kullanımı, aşırı yazı tipi çeşitliliği, yanlış tırnak işaretleri gibi.

Serif nedir, sans serif ile farkı ne?

Serif, harflerin uçlarındaki küçük tırnaklara verilen isim. Serif yazı tiplerinde bu tırnaklar var, sans serif ("serifsiz") olanlarda yok. Serif aileler uzun metinde ve basılı işte, sans serif aileler ekran arayüzlerinde ve küçük puntolarda daha çok tercih ediliyor.

Tipografi nasıl yapılır?

Önce metnin nerede okunacağını belirleyin, sonra o ortama uygun yazı tipini seçin. Ardından başlık-gövde hiyerarşisini kurun, oransal bir punto ölçeği belirleyin, satır aralığını punto boyutunun yaklaşık 1,5 katına açın ve satır uzunluğunu 50-75 karakterle sınırlayın. Son adım kontrast kontrolü.

Ücretsiz yazı tipleri ticari işlerde kullanılabilir mi?

Bir kısmı kullanılabiliyor, hepsi değil. Açık kaynak lisanslı aileler genelde ticari kullanıma açık, ancak "kişisel kullanım için ücretsiz" etiketli yazı tipleri ticari projelerde lisans ihlali oluşturuyor. Lisans metnini indirmeden önce okuyun.

Bir markada kaç farklı yazı tipi kullanılmalı?

İki genelde yeterli: başlıklar için karakterli bir aile, gövde için okunabilir ve nötr bir aile. Üçüncü bir aile ancak belirgin bir işlevi varsa ekleniyor. Fazlası hiyerarşiyi güçlendirmiyor, görsel gürültü yaratıyor.