Giriş: Tipografik Hiyerarşi Neden Önemli?

Tipografi, web tasarımının yüzde doksanını oluşturur. Net görsel hiyerarşi, kullanıcı dikkatini yönlendirir, tarama kolaylığı sağlar ve dönüşüm oranlarını artırır. Başarılı bir dijital strateji, tipografiyi yalnızca estetik değil, temel UX bileşeni olarak ele alır.

Adım 1: Modüler Tipografi Ölçeği (Modular Scale) Seçimi

Rastgele piksel değerleri yerine matematiksel oranlar kullanın. Yaygın ölçekler: Major Second (1.125), Minor Third (1.200), Perfect Fourth (1.333) veya Golden Ratio (1.618).

Base (Body text): 16px - 18px (1rem)
H3 (Alt Başlık): 1.25rem - 1.4rem
H2 (Bölüm Başlığı): 1.75rem - 2rem
H1 (Ana Başlık): 2.5rem - 3.5rem

Tüm font boyutlarını CSS custom properties ile tanımlayın:

:root {
  --ratio: 1.25;
  --s-base: 1rem;
  --s-h3: calc(var(--s-base) * var(--ratio));
  --s-h2: calc(var(--s-h3) * var(--ratio));
  --s-h1: calc(var(--s-h2) * var(--ratio));
}

Adım 2: Satır Uzunluğu (Measure) ve Satır Yüksekliğini Sınırlama

Okuma hızını ve konforunu optimize etmek için iki kuralı uygulayın:

Satır Uzunluğu (Line Length): İdeal satır 45-75 karakter (ch) arasıdır. 75 karakter üzeri gözü yorar, 45 altı okuma ritmini bozar. CSS max-width: 65ch; kullanın.
Satır Yüksekliği (Line-Height / Leading): Gövde metni için 1.5 - 1.6, büyük başlıklar için 1.1 - 1.2 oranını koruyun. Başlık boyutu büyüdükçe satır aralığı daralmalıdır.

Adım 3: Akıcı Tipografi (Fluid Typography) Uygulama

Medya sorgularına (media queries) bağımlılığı azaltmak için clamp() fonksiyonu kullanın. Bu yöntem, ekran genişliğine göre dinamik ölçeklenen tipografi sağlar.

h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}
p {
  font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
}

Adım 4: Kontrast ve Erişilebilirlik (WCAG 2.1) Standartları

Metin ve arka plan kontrastı, erişilebilirliğin temel şartıdır:

Normal Metin: En az 4.5:1 kontrast oranı (WCAG AA).
Büyük Metin (18pt / 24px veya 14pt bold): En az 3:1 kontrast oranı.
Saf siyah (#000) yerine koyu gri (#121212 veya #1e293b) kullanarak kontrast kaynaklı göz yorgunluğunu önleyin.

Adım 5: Değişken Fontlar (Variable Fonts) ve Modern Trendler

Güncel web trendler listesinde öne çıkan Variable Font teknolojisi, tek font dosyası üzerinden sınırsız ağırlık (weight) ve genişlik (width) varyasyonu sunar.

Performans: 4-6 farklı font dosyası yerine tek WOFF2 dosyası yükleyin. HTTP isteklerini azaltın.
font-display: swap: FOIT (Flash of Invisible Text) engellemek için font yükleme stratejisini tanımlayın.
Sistem Font Yığını: Yükleme süresini sıfıra indirmek için native sistem fontlarını fallback olarak ekleyin.

Pratik İpucu: Font eşleştirmelerinde maksimum 2 yazı tipi ailesi (font family) kullanın. Gövde için Sans-Serif veya nötr Serif, başlıklar için karakterli bir alternatif tercih edin.

Tipografi Kontrol Listesi

[ ] Temel gövde boyutu minimum 16px ayarlandı mı?
[ ] Gövde metin kapsayıcısına max-width: 65ch verildi mi?
[ ] Kontrast oranı WCAG AA (4.5:1) testinden geçti mi?
[ ] Başlıklar ve paragraflar için clamp() ile fluid ölçek kuruldu mu?
[ ] Font dosyaları WOFF2 formatında optimize edildi mi?