Bir web sitesini ziyaret ettiğinizde içeriğin yüzde sekseninden fazlası yazıdan oluşuyor. Kullandığınız font, boyut hiyerarşisi ve satır aralığı — bunların hepsi ziyaretçinin içeriği ne kadar rahat okuduğunu, markanızı nasıl hissettiğini ve ne kadar süre sayfada kaldığını doğrudan belirliyor. Tipografi görünmez tasarım değil, sessiz iletişim.
Ekranlar için tasarlanmış fontlar, baskı fontlarından farklı kurallara göre çalışır. Düşük çözünürlüklü ekranlarda ince çizgilerin kaybolması, farklı işletim sistemlerinde aynı fontun farklı render edilmesi ve sayfa yükleme hızına etkisi — tüm bunlar web tipografisinin kendine özgü zorluklarını oluşturuyor.
Google Fonts, Adobe Fonts ve sistem fontları web tasarımında en yaygın kullanılan kaynaklardır. Google Fonts'un ücretsiz ve erişilebilir olması onu öne çıkarıyor; ancak her sayfa yüklenişinde harici bir kaynaktan font çekmek performansı olumsuz etkileyebilir. Bu yüzden fontları kendi sunucunuzda barındırmak (self-hosting) hem hız hem de GDPR uyumluluğu açısından giderek daha yaygın bir tercih haline geldi.
Serif fontlar — Times New Roman, Georgia, Playfair Display — harflerin köşelerindeki küçük çıkıntılarla tanınır. Geleneksel, güvenilir ve prestijli bir his verir. Basılı medyadan gelen bu his ekranda da geçerliliğini korur; yayıncılık, hukuk, finans ve lüks markalar için güçlü bir tercih.
Sans-serif fontlar — Inter, Roboto, DM Sans — çıkıntısız, temiz ve modern. Dijital ortamın yerli fontları bunlar. Küçük boyutlarda ve düşük çözünürlüklü ekranlarda okunabilirliği serife kıyasla üstün. Teknoloji şirketleri, startup'lar ve minimalist markalar için doğal tercih.
Display fontlar — Clash Display, Bebas Neue gibi — başlıklarda güçlü görsel etki yaratmak için tasarlanmış. Uzun metinlerde kullanılmamalı; logo, başlık veya kısa etkili mesajlar için idealdir.
Monospace fontlar — JetBrains Mono, Fira Code — her karakterin eşit genişlikte olduğu fontlar. Kod bloklarında standart; teknik veya geliştirici odaklı sitelerde kimlik oluşturmak için kullanılabilir.
Tek bir font kullanmak tutarlılık sağlar ama dinamizm eksikliği yaratabilir. İki font birleştirmek ise görsel hiyerarşiyi güçlendiriyor — ancak bu birleştirmenin kuralları var.
Başarılı eşleştirmelerin ortak paydası kontrast. Başlık için güçlü bir display veya serif font seçerken gövde metni için yüksek okunabilirliğe sahip bir sans-serif kullanmak klasik ama her zaman işleyen bir formül. Çok benzer iki font yan yana geldiğinde ne uyumlu ne de kontrastlı görünür — bu orta bölge kaçınılması gereken yer.
Font Pair, Fontjoy gibi araçlar eşleştirme önerileri sunuyor. Google Fonts'un kendi arayüzünde de eşleştirme önerileri mevcut.
Başlık, alt başlık, gövde metni ve dipnot — bunların her birinin boyutu arasındaki oran sayfanın okunabilirliğini belirliyor. Hiyerarşi zayıfsa ziyaretçi nereye bakacağını bilemez, dikkat dağılır.
Modular scale adı verilen yaklaşımda her seviye bir öncekinin belirli bir katı. Popüler oranlar 1,25 (Major Third) ve 1,333 (Perfect Fourth). Gövde metni 16px ise başlık bu orana göre 32px veya 48px olur. Bu matematik gözün rahatça gezindiği dengeli bir hiyerarşi yaratır.
Tipografik kararlar estetikle sınırlı değil. Okunabilirliği doğrudan etkileyen teknik değerler var:
Her font dosyası bir HTTP isteği demek. Birden fazla ağırlık ve stil yüklüyorsanız bu yük hızla artıyor. Yalnızca kullandığınız ağırlıkları (weights) isteyin — tüm paketi değil. Variable font teknolojisi tek bir dosyada tüm ağırlıkları sunarak bu sorunu büyük ölçüde çözüyor. font-display: swap özelliği de font yüklenirken sayfanın sistem fontuyla gösterilmesini sağlayarak görsel kararlılığı koruyor.
