Kullanıcıların bir web sitesindeki içeriğin yüzde 95'ini metin oluşturur. Bu rakama karşın tipografi, tasarım süreçlerinde çoğu zaman bir renk paleti veya görsel kadar ilgi görmez. Oysa yanlış yazı tipi seçimi, kötü satır yüksekliği veya zayıf tür hiyerarşisi; renk, boşluk ve görsel ne kadar güçlü olursa olsun kullanıcı deneyimini mahvedebilir.

Tipografinin Önemi

Tipografi yalnızca harflerin şekliyle ilgili değildir. Okunabilirlik, bilgi hiyerarşisi, marka algısı ve hatta dönüşüm oranları doğrudan tipografi kararlarından etkilenir.

Araştırmalar, kullanıcıların bir sayfada "okumadığını" gösteriyor. Tarıyorlar. F-pattern ve Z-pattern göz izleme çalışmaları, kullanıcının önce başlıkları, sonra alt başlıkları, sonra ilk birkaç kelimeyi taradığını ortaya koyuyor. Bu tarama davranışı, tipografi hiyerarşisini kullanıcı için görünmez bir rehbere dönüştürüyor. Doğru hiyerarşi kurulduğunda kullanıcı ne aradığını buluyor; kurulmadığında sayfa terk ediliyor.

Güven de tipografiyle inşa ediliyor. Bir finansal hizmet sitesinde Comic Sans görmek, bir lüks marka sitesinde piksel bozukluklu bir font görmek kullanıcıda anlık güvensizlik yaratıyor. Tasarımcı fark etmese de kullanıcı hissediyor. Font seçimi bir ses tonudur; siz farkında olmasanız bile kullanıcı duyuyor.

2025'te Font Seçimi

2025 itibarıyla web font ekosistemi olgunlaştı. Artık binlerce font seçeneği arasından doğru kararı vermek hem kolaylaştı hem zorlaştı. Kolaylaştı çünkü araçlar gelişti; zorlaştı çünkü seçenekler çoğaldı.

Variable fonts: Tek bir font dosyasında ağırlık, genişlik ve eğiklik gibi eksenlerin tüm değerlerini barındıran variable font'lar, 2025'te artık standart haline geldi. Bir sayfada beş farklı font ağırlığı kullanmak için eskiden beş ayrı dosya yüklenmesi gerekiyordu; variable font ile tek dosya yeterli. Bu hem dosya boyutunu hem HTTP istek sayısını azaltıyor.

Öne çıkan modern fontlar:

  • Inter: Ekran okunabilirliği için optimize edilmiş, açık kaynak ve ücretsiz. Sayısız teknoloji ve SaaS ürününde kullanılıyor. WEBAJANS.COM tüm projelerinde Inter kullanıyor.
  • Geist: Vercel tarafından geliştirilen, hem serif hem sans-serif versiyonu olan modern ve temiz bir font
  • Satoshi: Geometrik ve çağdaş duruşuyla startup ve teknoloji projelerinde yaygınlaşıyor
  • System font stack: -apple-system, BlinkMacSystemFont, Segoe UI ve benzerleri. Sıfır yükleme süresi, kullanıcının işletim sistemine uyum. Hız öncelikliyse ideal çözüm.

Font loading stratejisi: Google Fonts doğrudan embed kodu kullanmak, üçüncü parti sunucuya bağımlılık yaratır ve CLS riskini artırır. Fontları self-host ederek yüklemek ve font-display: swap kullanmak hem hızı hem kullanıcı deneyimini iyileştirir. Kritik fontlar için rel="preload" ile erken yükleme tetiklenebilir.

Okunabilirlik Kuralları

Okunabilirlik, bir fontun ne kadar güzel göründüğüyle değil; kullanıcının içeriği ne kadar kolay ve yorulmadan okuyabildiğiyle ölçülür. Bu alanda onlarca yıllık araştırmadan çıkan birkaç temel kural var.

Satır uzunluğu (measure): Optimal satır uzunluğu 65-85 karakter arasındadır. Daha uzun satırlarda göz bir sonraki satırın başını bulmakta zorlanır; daha kısa satırlarda okuma ritmi bozulur. CSS'te bu kontrolü max-width: 65ch gibi ch birimi ile sağlayabilirsiniz.

Satır yüksekliği (line-height): Paragraf metinleri için 1.5-1.7 arasında bir line-height okunabilirliği en üst noktada tutar. Başlıklar için bu değer 1.1-1.3 arasına düşebilir. Çok sıkışık satırlar nefes almayan, bunaltıcı bir sayfa yaratır; çok geniş satırlar ise metin parçalarının bağlantısını koparır.

Boyut hiyerarşisi: Modüler type scale sistemi kullanmak, başlık boyutları arasında matematiksel tutarlılık sağlar. 1.250 (Major Third), 1.333 (Perfect Fourth) veya 1.414 (Augmented Fourth) gibi oranlar her seviyenin boyutunu belirler. Bu sistem hiyerarşiyi görsel olarak tutarlı kılar.

Paragraf boyutu: Gövde metni minimum 16px olmalıdır. Daha küçük boyutlar özellikle yaşlı kullanıcılarda okunabilirlik sorunlarına yol açar ve erişilebilirlik standartlarını ihlal eder.

İyi tipografi fark edilmez. Kullanıcı içeriği okur, akışa girer. Kötü tipografi ise kendini hissettirip içerikten koparır.

Renk kontrastı: WCAG 2.1 AA standardı, normal metin için 4.5:1 kontrast oranı gerektiriyor. Koyu arka plan üzerinde açık metin veya tam tersi genellikle bu eşiği karşılar; ancak orta tonlarda kontrast tuzakları bekliyor. Figma ve Stark gibi araçlar kontrast oranını otomatik kontrol ediyor.

Tipografi ve Marka Sesi

Her font bir kişiliği taşır. Geometrik sans-serif (Futura, Circular) modernlik ve güven anlatır. Humanist sans-serif (Gill Sans, Myriad) sıcaklık ve yakınlık katar. Slab serif (Rockwell, Clarendon) güç ve kararlılık hissi verir. Klasik serif (Garamond, Georgia) prestij ve köklülük çağrıştırır.

Font seçimi marka stratejisinden bağımsız yapılamaz. "Bize modern bir font bulun" isteği tek başına bir brief değildir. Şu sorular cevaplanmadan font kararı verilemez:

  • Markanız ne söylemek istiyor? Güven mi, yenilik mi, sıcaklık mı, otorite mi?
  • Hedef kitleniz kim? 50 yaş üstü kurumsal karar vericiler mi, 25 yaş altı teknoloji meraklıları mı?
  • Rakipleriniz ne kullanıyor? Onlardan nasıl ayrışmak istiyorsunuz?
  • Font uzun vadeli mı kalacak yoksa trend mi takip edecek?

Tipografi sisteminin tutarlılığı da marka sesinin ayrılmaz parçası. Bir sayfada üç farklı font ailesinin bir arada kullanılması karmaşa yaratır. Güçlü marka kimliklerinin büyük çoğunluğu bir veya en fazla iki font ailesiyle çalışır; biri başlıklar için diğeri gövde metni için.

Web sitenizin tipografisini markanızın gerçek sesine taşımak istiyorsanız WEBAJANS.COM ile iletişime geçin. Tasarım sistemlerimiz hakkında konuşalım.