Blog İçin Doğru Font Seçimi: Okunabilirlik ve Performans

Medium’un serif yazı tipi seçimi (Charter) bir tesadüf değil. Platform, okuma odaklı bir deneyim tasarladığında bunun büyük bir parçasının yazı tipinden geçtiğini biliyor. Bir blogu tasarlarken en çok göz ardı edilen karar da bu: hangi fontu seçeceğiniz.

Serif mi, Sans-serif mi?

Basit bir test: uzun bir metni Times New Roman ile Helvetica’da yan yana okuyun. Çoğu insan uzun metinde serifli (tırnaklı) fontu daha akıcı buluyor — en azından baskılı ortamda. Dijital ekranlarda durum biraz farklı. Düşük çözünürlüklü ekranlarda serif fontlar “kirli” görünebilir. Ama günümüzün Retina ve yüksek DPI ekranlarında bu sorun büyük ölçüde ortadan kalktı.

Blog için pratik kural: ana metin gövdesi için hem serif hem sans-serif işe yarayabilir, karar nişinizin tonuna göre verilmeli. Hukuk, finans, edebiyat, gazetecilik — serif daha güvenilir ve ciddi bir ton kuruyor. Teknoloji, yazılım, startup — sans-serif daha modern ve temiz. Kişisel blog ya da yaşam tarzı — burada seçim çok daha serbest.

Google Fonts: Hız ve Estetik Dengesi

Google Fonts, ücretsiz ve kullanımı kolay olduğu için popüler. Ama her Google Fonts kombinasyonu performanslı değil. Özellikle birden fazla font ailesi ve ağırlık (weight) yüklediğinizde sayfa yüklenme süreniz etkilenebilir.

Hız açısından en güvenli yaklaşım: maksimum iki font ailesi seçin (biri başlıklar için, biri gövde metni için), her aileden yalnızca ihtiyaç duyduğunuz ağırlıkları yükleyin (genellikle 400 ve 700 yeterli). Google Fonts’u <link> etiketiyle değil @import yerine font-display: swap özelliğiyle yüklemek sayfa ilk görüntülenme süresini de iyileştiriyor.

Alternatiflere de bakmak gerek: Bunny Fonts, Google Fonts’ın GDPR uyumlu bir kopyası ve aynı font kütüphanesine erişim sağlıyor. Adobe Fonts (Typekit) ise ücretli ama kalitesi farklı.

Okunabilirlik İçin Sayısal Parametreler

Font seçiminin ötesinde, metni okunabilir kılan birkaç teknik parametre var:

  • Font boyutu: Gövde metni için 16px minimum, 18px ideal. 14px veya altı mobil cihazlarda zorluyor.
  • Satır yüksekliği (line-height): 1.5 ile 1.7 arası. Çok sıkışık metin okumayı yavaşlatıyor.
  • Satır uzunluğu (measure): Optimal bir satırda 60-75 karakter bulunmalı. Bu, container genişliğiyle ilgili — çok geniş sütunlar göz takibini zorlaştırıyor.
  • Renk kontrastı: Siyah arka plan üstüne saf beyaz (#FFFFFF) metin aslında yorucu. #333333 veya #1a1a1a gibi koyu gri, hem daha şık hem daha okunabilir.

Başlıklar İçin Farklı Font Kullanmak

Çift font kombinasyonu yaygın bir tercih: gövde için sans-serif (Inter, Lato, Source Sans Pro), başlıklar için serif (Playfair Display, Lora, Merriweather). Bu kombinasyon görsel hiyerarşiyi güçlendiriyor.

Ama ikinci fonta gerçekten ihtiyaç var mı? Eğer gövde fontunuz kendi başına güçlü bir seçimse (Inter veya Roboto gibi), başlıklar için aynı fontu sadece farklı ağırlık ve boyutla kullanmak hem performanslı hem sade bir çözüm. İki farklı font yüklemek yerine bir font ailesinin tüm imkânlarını kullanmak daha temiz bir yaklaşım.

Mobil Uyumluluk: Masaüstünde Güzel Görünen Her Zaman Mobilde Güzel Değil

Dekoratif fontlar (özellikle el yazısı ve çok ince ağırlıklı fontlar) masaüstünde etkileyici ama mobil ekranda okunamaz hale gelebilir. Her font tercihini gerçek bir mobil cihazda test edin — tarayıcının mobil simülasyonu yetmez, ekranı fiziksel olarak elinize alın.

Font büyüklüğü için sabit px yerine rem veya clamp() kullanmak, farklı ekran boyutlarına orantılı ölçekleme sağlıyor. Örneğin font-size: clamp(16px, 2.5vw, 20px) komutu, küçük ekranda 16px’den başlayıp büyük ekranda 20px’e çıkıyor.

Sonunda doğru font seçimi şu sorunun cevabında gizli: okuyucunuz bir yazınızı 800 kelime okurken yoruluyor mu? Yoruluyorsa önce font boyutuna ve satır yüksekliğine bakın. Büyük ihtimalle sorun orada.