Tipografi ne demek #
Kelime, Yunanca biçim anlamına gelen typos ile yazmak anlamına gelen graphia sözcüklerinden gelir. Bugün tipografi dediğimizde yazı karakteri seçiminden satır uzunluğuna, harf aralığından başlık ile gövde metni arasındaki orana kadar metnin görünümünü belirleyen bütün kararları kastediyoruz.
Yazı karakteri ile font sık sık birbirinin yerine kullanılır ama ikisi aynı şey sayılmaz. Yazı karakteri bir tasarım ailesinin adıdır. Font ise o ailenin belirli bir ağırlık ve stildeki dijital dosyasıdır; OTF, TTF ya da web için WOFF2 gibi. Değişken fontlar bu ayrımı biraz esnetir, çünkü tek bir dosya ağırlık ve genişlik gibi eksenlerde birçok varyasyonu birlikte taşıyabilir.
Basılı bir afişte tipografi sabit bir kompozisyondur. Dijital üründe durum farklıdır. Aynı başlık telefonda, dizüstü bilgisayarda ve geniş ekranda farklı genişlikteki alanlara yerleşir. Kullanıcı tarayıcıda metni büyütebilir, karanlık moda geçebilir, sistem genelinde yazı boyutunu değiştirebilir. Tipografi kararlarının bu değişkenlerin hepsinde ayakta kalması gerekir.
Okunabilirlik tipografinin ilk işidir #
İyi dizilmiş bir metinde okuyucu harflerle uğraşmaz, içeriğe odaklanır. Kötü dizilmiş bir metinde ise dikkat harflere, satır sonlarına ve sıkışık paragraflara gider. Sunumdan ürün arayüzüne kadar her mecrada okuyucunun ilgisini kaybetmesinin en hızlı yolu okunması zor bir metindir.
Pratikte okunabilirliği birkaç karar belirler:
- Gövde metni için ekranda rahat okunan bir boyut seçin ve kullanıcının tarayıcıdan metni büyütmesini engellemeyin.
- Satır uzunluğunu sınırlayın. Çok uzun satırlarda göz bir sonraki satırın başını bulmakta zorlanır, çok kısa satırlarda ise okuma sürekli kesilir.
- Gövde metninde satır aralığını başlıklardan daha geniş tutun.
- Metin ile zemin arasında yeterli kontrast bırakın. Açık gri zemin üstünde gri metin şık görünebilir ama birçok kullanıcı için okunmaz.
Erişilebilirlik standartları bu kararları ölçülebilir hale getirir. WCAG 2.2, normal boyuttaki metin için metin ile arka plan arasında en az 4.5:1 kontrast oranı ister. Metin aralığı kriteri de kullanıcı satır yüksekliğini yazı boyutunun en az 1.5 katına çıkardığında içeriğin kaybolmamasını şart koşar. Sabit yükseklikli kutular ve taşan metni kesen bileşenler bu yüzden erişilebilirlik testinden geçemez.
Bilgi hiyerarşisini tipografi kurar #
Kullanıcı bir sayfayı okumaya başlamadan önce tarar. Başlık, ara başlık, gövde metni ve yardımcı metin arasındaki boyut ve ağırlık farkı, taramanın nereden başlayıp nereye gideceğini belirler. Bu fark net olduğunda kullanıcı aradığını daha kısa sürede bulur.
Bunun için her ekranda boyutları yeniden seçmek yerine bir tip ölçeği kullanırız. Material Design 3 bu ölçeği display, headline, title, body ve label rolleriyle tanımlar. Rol adlarıyla çalışmak tasarımcı ile geliştiricinin aynı dili konuşmasını kolaylaştırır. Bir başlığın değerini değiştirmek istediğinizde tek bir yerde değiştirirsiniz ve ürünün tamamı güncellenir.
Hiyerarşiyi yalnızca boyutla kurmak zorunda değilsiniz. Ağırlık, renk tonu, büyük harf kullanımı ve boşluk da ayrım yaratır. Aynı sayfada beş farklı vurgu tekniği kullanıldığında ise hiyerarşi bulanıklaşır, çünkü her şey aynı anda öne çıkmaya çalışır.
Türkçe arayüzlerde büyük harfe dikkat etmek gerekir. Sayfanın dili tr olarak tanımlanmadığında tarayıcı i harfini noktasız I olarak büyütebilir. Büyük harfli etiketlerde dil tanımını kontrol edin ya da metni baştan büyük harfle yazın.
Tipografi markanın sesini taşır #
Aynı cümle farklı yazı karakterleriyle farklı bir ton kazanır. Geometrik bir sans serif net ve teknik bir izlenim bırakırken, yüksek kontrastlı bir serif daha editoryal ve ağırbaşlı bir ton verir. Kullanıcı bir markanın yazısını logosundan çok daha sık gördüğü için bu seçim kimliğin en görünür parçalarından biridir.
Tutarlılık burada belirleyicidir. Web sitesi, uygulama, sunum ve sosyal medya aynı tipografik sistemi kullandığında insanlar markayı başka bir mecrada gördüklerinde de tanır. Bir kanal kendi fontunu ve kendi ölçeğini kullanmaya başladığında bu birikim bölünür.
Font seçerken lisansı da inceleyin. Masaüstü kullanım için alınmış bir lisans web sitesinde ya da mobil uygulama içinde kullanımı kapsamayabilir. Açık lisanslı kütüphaneler bu riski azaltır. Markaya özel ya da daha az kullanılan bir yazı karakteri ise kimliği daha ayırt edici kılar. Bütçe ile ayırt edicilik arasındaki bu tercihi projenin başında bilerek yapmak, ileride yeniden tasarım maliyetini önler.
Web ve uygulamada tipografinin teknik tarafı #
Tipografi kararları performansı da etkiler. Her ağırlık ve stil ayrı bir dosya demektir. Dört ağırlık, iki stil ve iki aile seçtiğinizde fontlar kolayca sayfanın en ağır kaynakları arasına girer ve ilk görünümü geciktirir.
- Yalnızca gerçekten kullandığınız ağırlıkları yükleyin ve web için WOFF2 formatını tercih edin.
- Birçok ağırlığa ihtiyaç varsa tek dosyalık bir değişken font aynı aralığı daha düşük maliyetle karşılayabilir.
- Kullandığınız alt kümenin ğ, ş, ı ve İ gibi Türkçe karakterleri içerdiğinden emin olun. Eksik glif sistem fontuna düşer ve metin yamalı görünür.
- Font yüklenene kadar metnin görünmez kalmaması için font-display ayarını bilinçli seçin.
Mobil uygulamalarda kullanıcı yazı boyutunu sistem ayarlarından değiştirebilir. Apple İnsan Arayüzü Yönergeleri, arayüzün Dynamic Type ile büyüyen metne uyum sağlamasını önerir. Tasarımı yalnızca varsayılan boyutta kontrol etmek, büyük metinle çalışan kullanıcılarda kırılan ekranları gözden kaçırmak anlamına gelir.
Bir ürün için tipografi sistemi kurmak #
Tipografiyi projenin sonunda yapılan bir font seçimi olarak gören ekipler, genellikle her yeni ekranda aynı kararları yeniden verir. Biz tipografiyi tasarım sisteminin ilk katmanlarından biri olarak ele alıyoruz ve şu sırayla ilerliyoruz:
- İçeriği inceleyin. En uzun başlığı, en yoğun tabloyu ve en küçük etiketi önce görün.
- Bir ya da iki aile seçin ve bunları gerçek içerikle, Türkçe karakterlerle deneyin.
- Rol tabanlı bir tip ölçeği tanımlayın ve değerleri tasarım token'ı olarak saklayın.
- Kontrastı, metin büyütmeyi, karanlık modu ve küçük ekranları test edin.
- Kuralları kısa bir dokümanla ekibin tamamıyla paylaşın.
Böyle kurulan bir sistem yeni bir sayfa ya da özellik eklendiğinde karar yükünü azaltır. Ürün büyüdükçe metinler aynı mantıkla dizilmeye devam eder ve marka her ekranda aynı sesle konuşur.
Kaynaklar #
- Typography, Material Design 3; Rol tabanlı tip ölçeği ve display, headline, title, body, label rolleri
- Understanding Success Criterion 1.4.3: Contrast (Minimum), W3C WAI; Normal metin için en az 4.5:1 kontrast oranı
- Understanding Success Criterion 1.4.12: Text Spacing, W3C WAI; Satır yüksekliği yazı boyutunun 1.5 katına çıktığında içeriğin korunması
- Typography, Apple Human Interface Guidelines; Dynamic Type ve mobilde ölçeklenen metin
