Modern Web Tipografisi ve Okunabilirlik Hiyerarşisi Rehberi

1. Temel Tipografik Ölçeği (Type Scale) Belirleme

Görsel hiyerarşi rastgele font boyutlarıyla kurulamaz. Matematiksel modüler ölçek (örneğin 1.250 Major Third veya 1.333 Perfect Fourth) kullanın.

Adım Adım Ölçek Tanımlama

• Taban Boyut (Root/Base): Standart gövde metni için 16px (1rem) taban alın.
• Hiyerarşi Adımları: H1 (2.441rem), H2 (1.953rem), H3 (1.563rem), Body (1rem), Small (0.8rem).
• CSS Entegrasyonu: Sabit piksel yerine rem kullanın; erişilebilirlik ayarlarını koruyun.

2. Font Eşleştirmeleri ve Dijital Strateji Entegrasyonu

Font seçimi doğrudan marka kimliği ve dijital strateji hedeflerine hizmet eder. UI trendler minimalizm ve yüksek okunabilirliği işaret eder.

Font Seçim Kuralları

• Kural: En fazla iki farklı font ailesi seçin (başlıklar için Display/Serif, gövde için Sans-Serif).
• Ağırlık (Weight) Kontrolü: 400 (Normal), 600 (Semi-Bold), 700 (Bold) sınırında kalın; HTTP isteklerini azaltın.
• Değişken Fontlar (Variable Fonts): Tek dosya ile çoklu ağırlık sağlayın, performansı artırın.

Tipografi sadece tasarım öğesi değildir; kullanıcının sitede kalma süresini ve dönüşüm oranını doğrudan etkileyen bir UX mimarisidir.

3. Okunabilirlik Metriklerini Optimize Etme

Göz yorgunluğunu önlemek ve metin akışını sağlamak için mikro tipografi kurallarını uygulayın.

Kritik Değerler

• Satır Uzunluğu (Measure): İdeal gövde metni genişliği 45-75 karakter (CPL) aralığıdır. CSS: max-width: 65ch;
• Satır Yüksekliği (Leading / Line-Height): Gövde metinleri için line-height: 1.5 - 1.6; büyük başlıklarda 1.1 - 1.2 değerine düşürün.
• Harf Boşluğu (Tracking / Letter-Spacing): Büyük başlıklarda hafif negatif (-0.02em), küçük/tüm büyük harflerde hafif pozitif (0.05em) boşluk verin.

4. Akıcı Tipografi (Fluid Typography) Uygulaması

Responsive tasarımda breakpoint kalabalığını önleyin. CSS clamp() fonksiyonu ile ekran boyutuna göre otomatik ölçeklenen metin yapısı kurun.

Örnek Kod Yapısı

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

5. Kontrast ve Erişilebilirlik (A11y) Kontrolü

WCAG 2.1 standartlarına uygun renk kontrastı sağlayın. Açık tema/koyu tema hiyerarşisini koruyun.

• Metin Kontrastı: Normal metinlerde minimum 4.5:1, büyük başlıklarda minimum 3:1 kontrast oranı zorunludur.
• Görsel Ağırlık Dağılımı: Sadece renkle değil; boyut, kalınlık ve boşluk (white space) ile hiyerarşi oluşturun.