Web sitesi tipografi seçimi, tasarım kararlarının en etkili ve en az dikkat çekenidir. Doğru font seçimi okunabilirliği artırır, marka sesini pekiştirir ve kullanıcının sayfada kalma süresini uzatır; yanlış seçim ise görsel karmaşaya ve sayfa hızı sorunlarına yol açar. Bu rehberde web projeleri için doğru tipografi kararlarını nasıl vereceğinizi adım adım ele alıyoruz.
Web Tipografisinin Temel Kavramları
Font Ailesi Kategorileri
| Kategori | Özellik | Örnek Kullanım |
|---|---|---|
| Serif | Harf sonlarında tırnaklar var; geleneksel, güvenilir | Hukuk, finans, gazete |
| Sans-serif | Temiz, modern, ekran okunabilirliği yüksek | Teknoloji, SaaS, e-ticaret |
| Monospace | Eşit genişlik; kod görüntüleme | Geliştirici araçları, dokümantasyon |
| Display | Yüksek özgünlük; büyük başlıklar için | Ajans, moda, yaratıcı sektör |
Font Ağırlığı (Weight)
Font ağırlığı 100 (thin) ile 900 (black) arasında değişir. Web için genellikle 400 (regular) ve 700 (bold) yeterlidir. Her ağırlık için ayrı font dosyası yüklenmesi gerektiğinden, kullanılmayan ağırlıkları yüklememek sayfa hızını iyileştirir. Beş farklı ağırlık yüklemek yerine 2–3 ile başlayın; ihtiyaç duydukça ekleyin.
Doğru Font Nasıl Seçilir?
1. Marka Kişiliğiyle Eşleştirin
Fontlar duygu taşır. Geometric sans-serif (Montserrat, Futura) modern ve güvenilir hissi verir; Humanist sans-serif (Inter, Nunito) sıcak ve erişilebilir; Serif (Playfair Display, Merriweather) geleneksel ve otoriter. Hukuk bürosu için Playfair Display, teknoloji startup’ı için Inter, yaratıcı ajans için Raleway — marka kişiliği font seçimini yönlendirmeli.
2. Okunabilirliği Test Edin
Estetik açıdan ilgi çekici bir font, uzun metin bloklarında okunması zor olabilir. Body metni için x-height (küçük harflerin yüksekliği) yüksek fontlar tercih edin; harfler arası boşluk (letter-spacing) net olmalı. Google Fonts üzerinde fontun 400 ağırlığında uzun metin önizlemesini farklı boyutlarda test edin.
3. Font Çiftlemesi (Font Pairing)
Çoğu web projesi için iki font yeterlidir: başlıklar için bir font, body metni için başka bir font. Etkili çiftleme ilkeleri: serif başlık + sans-serif body (klasik kontrast), geometric sans-serif başlık + humanist sans-serif body (modern uyum). Aynı fontun farklı ağırlıkları da etkili bir “çift” oluşturur ve ek HTTP isteği gerektirmez.
4. Google Fonts vs Özel Font
Google Fonts, 1.400+ ücretsiz fontu barındırıyor ve entegrasyonu kolay; ancak Google’a harici istek atılıyor (gizlilik ve GDPR riski). Fontu kendi sunucunuzdan (self-hosted) sunmak hem bu riski ortadan kaldırır hem de performansı artırır. @font-face ile Google Fonts dosyalarını sunucunuza yüklemek — google-webfonts-helper.herokuapp.com bu süreci kolaylaştırıyor.
Tipografik Hiyerarşi: Okuyan Gözü Yönlendirmek
Tipografik hiyerarşi, okuyucunun hangi içeriği önce, hangisini sonra okuması gerektiğini boyut, ağırlık ve renk farkıyla görsel olarak ifade eder. Etkili bir hiyerarşi için:
- H1: 36–60px, bold (700+), tek başına sayfanın ana mesajı
- H2: 24–36px, semi-bold (600), bölüm başlıkları
- H3: 18–24px, medium (500), alt başlıklar
- Body: 16–18px, regular (400), uzun metin için optimum
- Caption/Label: 12–14px, UI öğeleri ve açıklamalar
Satır Yüksekliği ve Karakter Genişliği
Okunabilirlik için iki kritik CSS değeri: line-height (satır yüksekliği) body metin için 1.5–1.7 arası optimumdur; çok dar satırlar metni sıkıştırır, çok geniş satırlar okuyucunun satır başını kaybetmesine neden olur. Satır uzunluğu (measure) için 45–75 karakter/satır idealdir; bu da genellikle 600–750px kapsayıcı genişliğine karşılık gelir. max-width: 65ch CSS değeri bu kuralı otomatik uygular.
Performans: Font Yüklemesini Optimize Edin
- font-display: swap kullanın: Font yüklenene kadar sistem fontu görünsün, hazır olunca değişsin — CLS skoru etkilenmez.
- Sadece gerekli ağırlıkları yükleyin: Her font dosyası ortalama 20–100KB’dır; gereksiz ağırlıklar sayfa boyutunu şişirir.
- Preconnect ekleyin: Google Fonts kullanıyorsanız <link rel=”preconnect” href=”https://fonts.googleapis.com”> DNS bağlantısını önceden kurar.
- WOFF2 formatını tercih edin: Modern tarayıcıların tümü destekliyor; TTF ve OTF’e kıyasla %30 daha küçük dosya boyutu.
Sonuç
Web sitesi tipografi seçimi, okunabilirlik, marka kişiliği ve performansı dengeleyen stratejik bir karardır. Marka sesini yansıtan iki font seçin, hiyerarşiyi boyut ve ağırlıkla netleştirin ve font dosyalarını optimize ederek yükleyin. Sitenizin tipografi denetimi ve font optimizasyonu için Wordline Agency ile iletişime geçin.
Sektöre Göre Font Önerileri
Font seçimi marka kişiliğini yansıtır — bu yüzden sektör bağlamı belirleyicidir. Aşağıdaki öneriler Google Fonts üzerinde ücretsiz erişilebilen, web performansı açısından optimize edilmiş seçeneklerdir.
| Sektör | Başlık Fontu | Body Fontu | Hissi |
|---|---|---|---|
| Hukuk / Finans | Playfair Display | Source Serif 4 | Otoriter, güvenilir |
| Sağlık / Klinik | Nunito | Open Sans | Sıcak, erişilebilir |
| Teknoloji / SaaS | Inter | Inter | Modern, nötr |
| Yaratıcı Ajans | Syne | DM Sans | Cesur, özgün |
| E-ticaret | Poppins | Lato | Dinamik, okunabilir |
| Eğitim | Merriweather | Roboto | Akademik, güvenilir |
| Restoran / Konaklama | Cormorant Garamond | Raleway | Sofistike, davetkar |
Tipografi Kontrol Listesi: Yayından Önce
- ☐ Body metin 16px veya üzerinde mi?
- ☐ Satır yüksekliği (line-height) 1,5–1,7 arasında mı?
- ☐ Paragraf genişliği 60–80 karakter (45–75ch) arasında mı?
- ☐ Metin-arka plan kontrast oranı 4,5:1 veya üzerinde mi?
- ☐ Sayfada en fazla 2 farklı font ailesi kullanılıyor mu?
- ☐ Kullanılan font ağırlıkları yüklü (300, 400, 600, 700 — hangisi gerekliyse)?
- ☐
font-display: swapaktif mi? - ☐ Mobilde başlık boyutları orantılı mı küçültüldü?
- ☐ Google Fonts yerine self-hosted tercih edildi veya preconnect eklendi mi?
Sık Sorulan Sorular
Kaç farklı font kullanmak idealdir?
İki font ailesi çoğu proje için yeterlidir: biri başlıklar, biri body metni için. Üç font ailesine nadiren ihtiyaç duyulur — üçüncü font genellikle accent veya özel kullanım içindir. Dörtten fazla font ailesi kullanmak görsel kaos yaratır ve sayfa performansını gereksiz yere zorlar. Tek font ailesiyle çalışmak da mümkündür: aynı ailenin ağırlık (weight) ve style varyasyonları güçlü bir hiyerarşi oluşturabilir.
Google Fonts kullanmak GDPR’ı ihlal eder mi?
2022’de Almanya’da verilen bir mahkeme kararı, Google Fonts’un doğrudan Google sunucularından yüklenmesini GDPR ihlali olarak nitelendirdi — çünkü kullanıcının IP adresi Google’a aktarılıyor. Türkiye’de KVKK açısından da benzer riskler söz konusu olabilir. En güvenli çözüm: fontları kendi sunucunuzdan (self-hosted) sunmak. Google Webfonts Helper (gwfh.mranftl.com) aracıyla font dosyalarını indirip sunucunuza yükleyebilir, @font-face ile harici bağlantıya gerek kalmadan kullanabilirsiniz.
Sistemde yüklü fontları kullanmak performans açısından avantajlı mı?
Evet — sistem fontları (system font stack) sıfır HTTP isteği ve sıfır yükleme süresi demektir. Inter, -apple-system, BlinkMacSystemFont, Segoe UI gibi değerlerden oluşan bir sistem font stack’i her cihazda yerel fontları kullanır. GitHub, Medium ve Stack Overflow bu yaklaşımı benimsemiştir. Güçlü marka kimliği ve özel tipografik kişilik gerektirmeyen projeler için sistem font stack’i en performanslı seçenektir.
Serif mi sans-serif mi seçmeliyim?
Geleneksel kural “ekranlar için sans-serif” doğrultusundaydı; ancak yüksek çözünürlüklü ekranlar bu ayrımı büyük ölçüde geçersiz kıldı. Günümüzde tercih marka kişiliğine göre yapılmalıdır: sans-serif modern, nötr ve teknoloji ağırlıklı sektörler için; serif otorite, gelenek ve güven ön plana çıkan sektörler için uygundur. Body metni için ikisi de okunabilirdir — önemli olan x-height değeri yüksek ve harf aralığı dengeli bir font seçmektir.