1. Modüler Tipografik Ölçek (Modular Scale) Kurulumu

Modern web sitelerinde görsel hiyerarşi rastgele piksel değerleriyle kurulamaz. Profesyonel bir dijital ajans iş akışında tipografi, matematiksel bir orana (ör. Major Third 1.250 veya Perfect Fourth 1.333) dayanır.

Adım 1.1: Kök Değer ve Rem Kullanımı

Kök font boyutunu tarayıcı varsayılanı olan 16px (1rem) seviyesinde tutun. Bütün başlık ve gövde metinlerini rem cinsinden tanımlayın:

Gövde (Body): 1rem (16px)
H3: 1.25rem (20px)
H2: 1.563rem (25px)
H1: 1.953rem (31.25px)

2. Satır Uzunluğu (Measure) ve Okuma Alanı Optimizasyonu

Okunabilirlik araştırmaları, ideal satır uzunluğunun 45 ile 75 karakter (ortalama 65 karakter) arasında olduğunu gösterir. Çok uzun satırlar gözün bir sonraki satırı bulmasını zorlaştırır; çok kısa satırlar ise okuma ritmini bozar.

Adım 2.1: CSS ile Karakter Sınırı Belirleme

Gövde metin kapsayıcılarında ch birimi kullanarak maksimum satır genişliğini sabitleyin:

max-width: 65ch;

3. Dikey Ritim ve Satır Yüksekliği (Line-Height) Ayarı

Metin yoğunluğuna göre dikey boşlukları optimize etmek göz yorgunluğunu önler. Güncel trendler, orantılı satır aralığı kullanımını şart koşar.

Gövde Metni: line-height: 1.5 - 1.65 (Geniş aralık rahat okuma sağlar)
Büyük Başlıklar: line-height: 1.1 - 1.25 (Büyük fontlarda satırların kopuk durmasını engeller)
Paragraf Boşlukları: Paragraf altı boşluğu gövde font boyutunun en az %75'i kadar olmalıdır (margin-bottom: 1.25rem).

4. Yazı Tipi Eşleştirmesi ve Ağırlık Hiyerarşisi

Modern web arayüzlerinde ikiden fazla font ailesi kullanmaktan kaçının. Hiyerarşiyi font ailesi yerine font ağırlıkları (weights) ve boyut farklarıyla kurun.

Adım 4.1: Kontrast Kuralı

Gövde metninde nötr, yüksek x-yüksekliğine sahip okunabilir Sans-Serif fontlar (Inter, Roboto) tercih edin. Başlıklarda kontrast yaratmak için geometrik Sans-Serif veya karakteristik Serif fontlar kullanın.

Doğru tipografi tasarımı görünmez kılar; kullanıcı tasarımı değil, içeriği tüketir.

5. Akışkan (Fluid) Tipografi ile Duyarlı Tasarım

Sabit breakpoint değerleri yerine CSS clamp() fonksiyonu kullanarak ekran boyutuna göre otomatik ölçeklenen tipografi kurgulayın.

Örnek akışkan H1 tanımı: font-size: clamp(2rem, 5vw + 1rem, 3.5rem);

6. Renk Kontrastı ve WCAG Erişilebilirlik Standartları

Okunabilirlik hiyerarşisinin son adımı renk kontrastıdır. WCAG AA standartlarına göre normal metinlerde minimum 4.5:1, büyük başlıklarda 3:1 kontrast oranı zorunludur. Saf siyah (#000000) yerine koyu gri (#121212 veya #1e293b) tonları tercih ederek ekran parlamasını azaltın.