1. Modüler Tipografi Ölçeği Tanımlama

Modern web projelerinde tipografik tutarlılık matematiksel oranlarla başlar. Dijital ajans projelerinde rastgele piksel değerleri yerine modüler ölçek (modular scale) kullanılır.

Uygulama Adımları

Kök Değer (Root Size): Tarayıcı varsayılanı olan 16px (1rem) taban alınır.
Ölçek Oranı (Ratio): İçerik yoğun sitelerde Major Second (1.125) veya Minor Third (1.200), pazarlama sitelerinde Perfect Fourth (1.333) veya Golden Ratio (1.618) seçilir.
Akıcı Tipografi (Fluid Typography): Ekran boyutuna göre değişen fontlar için CSS clamp() fonksiyonu kullanılır.

Örnek: font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);

2. Kontrast ve Ağırlık ile Hiyerarşi Kurma

Okuma akışını yönlendirmek için font boyutu tek başına yetersizdir. Ağırlık (font-weight) ve renk kontrastı ile katman oluşturulmalıdır.

Uygulama Adımları

Başlıklar (H1-H6): 700 (Bold) veya 600 (Semi-bold) ağırlık verilir. Koyu tonlar (ör. #111827) kullanılır.
Gövde Metni (Body): 400 (Regular) ağırlık seçilir. Aşırı kontrasttan kaçınarak yumuşak siyahlar (ör. #374151) tercih edilir.
İkincil Metinler (Captions/Meta): 500 (Medium) veya 400 ağırlık, daha açık gri tonlar (ör. #6B7280) ile ayrıştırılır.

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

Gözün satır başını kaybetmeden okuması için dikey ve yatay boşluk oranları standartlaştırılmalıdır.

Standart Değerler

Karakter Limiti: İdeal okuma için satır başına 45-75 karakter (en uygun: 66 karakter / max-width: 65ch) hedeflenir.
Gövde Satır Yüksekliği (line-height): Okunabilirlik için font boyutunun 1.5 ile 1.75 katı (150%-175%) olmalıdır.
Başlık Satır Yüksekliği: Büyük puntolarda boşluğu daraltmak için 1.1 ile 1.3 arasına çekilir.

4. Tipografi Trendleri ve Performans Optimizasyonu

Modern web tipografisinde performans, estetik kadar kritiktir. Yavaş yüklenen fontlar layout shift (CLS) hatasına yol açar.

Teknik İpuçları

Değişken Fontlar (Variable Fonts): Birden fazla ağırlık ve stili tek dosyada birleştirerek HTTP istek sayısını düşürün.
Font Display: FOIT (Flash of Invisible Text) engellemek için font-display: swap; tanımlayın.
Modern Sistem Fontları: Sıfır yükleme maliyeti için native font yığınlarını (system-ui, -apple-system, sans-serif) değerlendirin.