Tasarımın temel taşlarından biri olan tipografi, bir projenin okunabilirliğini, estetiğini ve kullanıcı deneyimini doğrudan etkiler. Peki tipografi nedir ve tasarımda nasıl doğru kullanılır? Bu rehberde tipografinin ne olduğunu, font seçimini, eşleştirme kurallarını ve profesyonel ipuçlarını adım adım anlatıyoruz.
Tipografi Ne Demek?
Tipografi, Yunanca “typos” (biçim) ve “graphia” (yazı) kelimelerinden gelir. Harf, karakter ve metinlerin düzenlenmesi, seçimi ve sunulması sanatıdır. Sadece font seçmekten ibaret değildir — hiyerarşi, boşluk, satır aralığı, harf aralığı ve metin bloklarının tümünün uyumlu bir şekilde düzenlenmesini kapsar.
İyi bir tipografi, okuyucunun metni fark etmemesini sağlar — akar, gider, anlam aktarır. Kötü tipografi ise okuyucuyu rahatsız eder, göz yorar ve mesajı kaybettirir.
Tipografinin Temel Unsurları
- Font Family (Yazı Ailesi): Helvetica, Georgia, Montserrat gibi bir font ailesinin tüm varyasyonları
- Font Weight (Ağırlık): Light (300), Regular (400), Semi-Bold (600), Bold (700), Black (900)
- Font Size (Boyut): Başlık, alt başlık, gövde metni ve açıklamalar için farklı boyutlar
- Line Height (Satır Aralığı): Genellikle font boyutunun 1.4x – 1.6x’i ideal
- Letter Spacing (Harf Aralığı): Büyük harflerde artırılması okunabilirliği artırır
Serif vs Sans-Serif: Fark Nedir?
Font dünyasının en temel ayrımı serif ve sans-serif arasındadır:
Serif Fontlar
Serif fontlar, harflerin uçlarında küçük çizgiler (serif) bulunur. Times New Roman, Georgia, Garamond ve Playfair Display en bilinen serif fontlardır. Geleneksel, resmi ve güvenilir bir his yaratırlar. Gazete, kitap ve akademik yayınlarda tercih edilirler.
Sans-Serif Fontlar
Sans-serif fontlar, uçlarında ek çizgi bulunmayan temiz fontlardır. Arial, Helvetica, Inter, Montserrat ve Open Sans en popüler sans-serif fontlardır. Modern, temiz ve minimalist bir görünüm sunarlar. Web tasarım, UI/UX ve teknoloji markalarının birinci tercihidir.
Font Eşleştirme Kuralları
Bir tasarımda genellikle 2-3 font kullanılır. Doğru eşleştirme, projenin profesyonelliğini belirler:
Kural 1: Kontrast Oluşturun
Aynı türde iki fontu yan yana kullanmayın. Serif bir başlık fontunu, sans-serif bir gövde fontuyla eşleştirin. Bu kontrast hiyerarjiyi güçlendirir.
Kural 2: En Fazla 2-3 Font
Bir projede fazla font kullanmak karmaşa yaratır. Genellikle şu üçlü yeterlidir:
- Başlık fontu: Karakterli, dikkat çekici (Playfair Display, Clash Display)
- Gövde fontu: Okunabilir, nötr (Inter, Open Sans, Lato)
- Vurgu fontu: Butonlar, etiketler için (opsiyonel)
Kural 3: Aynı Aileden Farklı Ağırlıklar
En güvenli yöntem: tek bir font ailesinin farklı ağırlıklarını kullanmak. Montserrat Bold (başlıklar) + Montserrat Regular (gövde) + Montserrat Light (açıklamalar) gibi. Minimal ve tutarlı bir sonuç verir.
Tipografi Hiyerarşisi
Okuyucunun gözünün metni tararken izlediği yolu belirleyen hiyerarşi, doğru font boyutları ve ağırlıklarıyla oluşturulur:
- H1 (Ana Başlık): 36-48px, Bold — Sayfanın en dikkat çekici metni
- H2 (Alt Başlık): 28-32px, Semi-Bold — Bölümleri ayırır
- H3 (Bölüm Başlığı): 22-26px, Semi-Bold veya Bold — Alt bölümler
- Gövde Metni: 15-18px, Regular — Ana içerik
- Açıklama/Caption: 12-14px, Light veya Regular — Görsel altları, notlar
Web Tasarımda Tipografi İpuçları
1. Mobile-First Düşünün
Mobil ekranda minimum 16px font boyutu kullanın. Daha küçük boyutlar okunabilirliği düşürür ve bounce rate’i artırır.
2. Satır Uzunluğu (Line Length)
İdeal satır uzunluğu 50-75 karakterdir. Çok geniş satırlar gözün takip etmesini zorlaştırır. Max-width kullanarak kontrol edin.
3. Kontrast Oranı
WCAG erişilebilirlik standartlarına göre normal metin için minimum 4.5:1, büyük metin için 3:1 kontrast oranı gerekli. Koyu metin + açık arka plan en güvenli kombinasyon.
4. Font Loading Stratejisi
Web fontları sayfa yüklenme hızını etkiler. Font dosyalarını alt kümelere ayırın, WOFF2 formatı kullanın ve font-display: swap ile FOUT (Flash of Unstyled Text) sorununu önleyin.
5. Sistem Fontları da Bir Seçenek
Performans kritikse, sistem font yığınını kullanabilirsiniz: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; Sıfır yükleme süresi, native görünüm.
Ücretsiz Font Kaynakları
- Google Fonts: 1500+ ücretsiz font, kolay entegrasyon
- Font Squirrel: Ticari kullanıma uygun ücretsiz fontlar
- DaFont: Yaratıcı ve dekoratif fontlar
- Fontpair: Google Fonts eşleştirme önerileri
- Typewolf: Tipografi ilhamı ve trend takibi
Sonuç
Tipografi, tasarımın görünmez kahramanıdır. Doğru font seçimi projenin tüm havasını belirler, okunabilirliği artırır ve marka kimliğini güçlendirir. İyi tipografi fark edilmez — ama kötü tipografi hemen hissedilir.
📝 İlgili Yazılar
