Web tasarımında font seçimi: Okunabilirlik ve marka uyumu
- Sezer DEMİR
- 2 Şub 2025
- 3 dakikada okunur
Font seçimi web tasarımı projelerinde sıklıkla estetik bir tercih olarak görülür — oysa aynı zamanda okunabilirlik, performans ve marka algısını doğrudan etkileyen teknik bir karardır. Yanlış font kombinasyonu sayfa hızını düşürür, Türkçe karakterleri bozar ve kullanıcıların metni okuma isteğini azaltır.
Bu yazıda web tasarımında font seçimi sürecini: serif vs sans-serif tercihinden Google Fonts optimizasyonuna, Türkçe karakter desteğinden marka kişiliği uyumuna kadar ele alıyoruz.
⠀
Serif ve sans-serif: Ne zaman hangisi?
⠀
Font seçimi web tasarımı kararlarının başında serif ile sans-serif arasındaki tercih gelir.
Sans-serif fontlar (Inter, Roboto, Open Sans, Lato) ekran okunabilirliği açısından küçük boyutlarda daha performanslıdır. Dijital arayüzlerde, özellikle mobil ekranlarda sans-serif standart olarak önerilir. Modern, temiz ve erişilebilir bir algı yaratır.
Serif fontlar (Merriweather, Playfair Display, Lora) uzun form içerik, premium marka kimliği veya gazetecilik-yayıncılık sektörüne yönelik siteler için tercih edilir. Başlıklarda güçlü görsel etki oluşturur; ancak küçük gövde metinlerinde okunabilirliği azalabilir.
Genel kural: gövde metni için sans-serif, başlıklar için serif kombinasyonu her iki dünyanın avantajını bir araya getirir. Ancak bunu ters çevirmek de işe yarayabilir — başlıkta güçlü bir sans-serif, gövdede daha okunabilir bir serif.
⠀
Google Fonts ile ücretsiz kaliteli fontlar
⠀
Font seçimi web tasarımı bütçelerinde Google Fonts, yüksek kaliteli fontlara ücretsiz erişim imkânı sunar. 1.000'den fazla font barındıran bu kütüphane aynı zamanda entegrasyon kolaylığı ile öne çıkar.
Google Fonts seçiminde dikkat edilmesi gereken iki husus:
Türkçe karakter desteği: Font sayfasında "Latin Extended" veya doğrudan "Turkish" karakterlerin desteklendiğini kontrol edin. ğ, ş, ı, ç, ö, ü harflerini içermeyen fontlar metin bozukluğuna neden olur.
Ağırlık seçimi: Kullandığınız ağırlıkları (regular 400, semibold 600, bold 700) belirleyin ve yalnızca o ağırlıkları yükleyin; gereksiz ağırlıklar sayfa yükünü artırır.
⠀
⠀
⠀
⠀
Sistem fontları ve performans avantajı
⠀
Font seçimi web tasarımı sürecinde göz ardı edilen seçeneklerden biri sistem font yığını (system font stack) kullanımıdır. Bu yaklaşımda harici bir font dosyası yüklenmez; bunun yerine kullanıcının cihazında zaten yüklü olan fontlar kullanılır:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
⠀
Bu yığın iOS'ta San Francisco, Windows'ta Segoe UI, Android'de Roboto'yu render eder. Harici font yüklemesi olmadığı için FOUT/FOIT sorunları yoktur ve sayfa hızı üzerinde sıfır ek yük bırakır. Marka kimliği baskın değilse hız öncelikliyse sistem fontları ciddi bir seçenektir.
⠀
Font yükleme performansı: FOUT, FOIT ve font-display
⠀
Font seçimi web tasarımı kararlarının performans boyutunda üç kritik kavram var:
FOUT (Flash of Unstyled Text): Font yüklenene kadar sistem fontuyla metin gösterilir, font gelince şekil değiştirir. Kullanıcı deneyimini mevcut seçenekler içinde en az bozan yöntemdir.
FOIT (Flash of Invisible Text): Font yüklenene kadar metin hiç gösterilmez. Yavaş bağlantılarda kullanıcı uzun süre boş alan görür. Kaçınılmalıdır.
`font-display: swap`: CSS @font-face tanımına eklenen bu özellik, font hazır olana kadar yedek fontla metnin gösterilmesini sağlar. Google Fonts, URL parametresiyle bu ayarı destekler: &display=swap. Core Web Vitals (özellikle CLS) açısından da önem taşır.
⠀
⠀
⠀
Türkçe karakterlerin font desteği
⠀
Font seçimi web tasarımı projelerinde Türkiye'ye özel bir risk: tüm fontlar Türkçe karakterleri doğru render etmez. Sorunlu karakterler şunlardır: ğ, Ğ, ş, Ş, ı, İ, ç, Ç, ö, Ö, ü, Ü.
Türkçe destek kontrolü için:
Google Fonts sayfasında "Glyphs" sekmesini açın
Yukarıdaki karakterleri yazı alanına yazın ve font değiştikçe gözlemleyin
Lisanslı fontlarda font dosyasının "Latin Extended" veya "Latin-1 Supplement" unicode aralığını kapsadığını doğrulayın
⠀
Popüler Türkçe uyumlu Google Fonts: Inter, Nunito, Lato, Source Sans Pro, Noto Sans.
⠀
Yazı boyutu hiyerarşisi ve maksimum font sayısı
⠀
Sağlıklı bir font seçimi web tasarımı hiyerarşisi şu ölçekleri baz alır:
H1: 32–48px
H2: 24–32px
H3: 18–22px
Gövde: 16–18px (mobilde 15px minimum)
Küçük metin / etiket: 12–14px
⠀
Bir projede kullanılacak font sayısı 2–3 ile sınırlı tutulmalıdır: biri başlık, biri gövde, varsa biri aksanlı/dekoratif unsurlar için. Daha fazlası görsel tutarsızlığa ve gereksiz yükleme yüküne yol açar.
Blakfy, her web tasarımı projesinde font seçimi kararını marka kimliği brifingiyle birlikte değerlendirir; seçilen fontların Türkçe karakter desteği ve Core Web Vitals uyumluluğu teknik olarak doğrulanır.
⠀
⠀
Sık Sorulan Sorular
⠀
Kaç farklı font boyutu kullanılmalı?
İdeal olarak bir projede 4–6 boyut seviyesi yeterlidir (H1–H3, gövde, küçük metin, etiket). Her bölüm için farklı boyut kullanmak hiyerarşiyi bozar.
Ücretli fontlar Google Fonts'tan daha mı iyi?
Her zaman değil. Adobe Fonts ve Fontspring gibi platformlardaki ücretli fontlar daha özgün bir marka görünümü sağlar. Ancak Inter veya Nunito gibi kaliteli Google Fonts çoğu proje için fazlasıyla yeterlidir.
Wix'te özel font yüklenebilir mi?
Evet. Wix Editor'da "Site Design > Text Themes" bölümünden özel font dosyası (TTF, OTF, WOFF) yüklenebilir. Bu özellik Türkçe karakter desteği olmayan fontların yerine yerel olarak doğrulanmış bir dosya kullanma imkânı sunar.
