Modern Web Sitelerinde Tipografi ve Okunabilirlik Hiyerarşisi Rehberi

1. Tipografik Ölçek (Modular Scale) Belirleme

Hiyerarşi rastgele font boyutlarıyla kurulmaz. Matematiksel oran gerekir. Altın oran (1.618) veya Major Third (1.25) seç.

Adım 1: Kök Boyut (Root Size) Tanımla

Temel gövde metni (body) için 16px standart. rem birimi kullan. Kullanıcı tarayıcı ayarlarına uyum sağla.

Adım 2: Hiyerarşik Çarpanları Uygula

Başlık seviyelerini taban ölçü üzerinden türet:

• Body (p): 1rem (16px)
• H3: 1.25rem (20px)
• H2: 1.563rem (25px)
• H1: 1.953rem (31.25px)

2. Font Eşleştirme ve Kontrast Kuralları

Çok font görsel gürültü yaratır. Maksimum iki font ailesi seç: Biri başlıklar (display/serif/sans), diğeri gövde metni (sans-serif) için.

• Kontrast: Ağırlık (font-weight) farkı net olmalı. Başlık 700 (Bold), gövde 400 (Regular).
• Trendler: Modern web projelerinde neo-grotesk sans fontlar ile editoryal serif eşleşmeleri öne çıkıyor.
• Dijital ajans standardı: Değişken fontlar (variable fonts) kullanarak HTTP istek sayısını düşür, performans kazan.

3. Satır Uzunluğu (Measure) ve Satır Yüksekliği (Leading)

Okuma konforu satır sınırlarına bağlıdır. Çok uzun satır gözü yorar, çok kısa satır ritmi bozar.

İdeal satır uzunluğu: 45 - 75 karakter (CPL). İdeal line-height: Gövde metni için 1.5 - 1.6, başlıklar için 1.1 - 1.25.

CSS çözümü:

• Gövde metin kapsayıcısına max-width: 65ch; ekle.
• Satır yüksekliğini birimsiz tanımla: line-height: 1.5;.

4. Akışkan Tipografi (Fluid Typography) Kurulumu

Farklı ekran genişliklerinde her breakpoint için media query yazma. CSS clamp() fonksiyonu kullan.

Uygulama Kodu:

font-size: clamp(1.5rem, 2.5vw + 1rem, 3rem);

Metin boyutu ekran boyutuna göre pürüzsüz ölçeklenir. Kırılma noktası karmaşası biter.

5. Erişilebilirlik ve Okunabilirlik Doğrulaması

Hiyerarşiyi bitirmeden önce test et:

• Kontrast Oranı: WCAG AA standardı için metin ve arka plan arasında en az 4.5:1 kontrast sağla.
• Görsel Sıralama: Font boyutu azalsa bile ağırlık ve boşluk (margin/padding) ile seviyeyi hissettir.
• Boşluk (Whitespace): Başlık üst boşluğu, alt boşluğundan her zaman büyük olmalı (Gestalt yakınlık ilkesi).