Giriş: Tipografi Neden Kritik?

Modern web tasarımında içerik kalitesi kadar içeriğin nasıl sunulduğu da önemlidir. Başarılı bir dijital ajans yaklaşımı, tipografiyi yalnızca görsel bir öge olarak değil, doğrudan kullanıcı etkileşimini ve dönüşüm oranlarını etkileyen temel bir yapı taşı olarak ele alır. Bu rehber, web sitenizde kusursuz bir tipografik hiyerarşi kurmanız için gereken adımları içerir.

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

Hiyerarşinin temeli, matematiksel bir orana dayanan yazı boyutu hiyerarşisidir. Rastgele font boyutları yerine sabit bir çarpan (örneğin Major Third: 1.250 veya Golden Ratio: 1.618) kullanın.

Base (Gövde Metni): 16px - 18px (1rem)
H3 (Alt Başlık): 1.25rem (20px - 22.5px)
H2 (Bölüm Başlığı): 1.563rem (25px - 28px)
H1 (Ana Başlık): 1.953rem - 2.441rem (31px - 39px)

Tipografi trendleri doğrultusunda modern CSS `clamp()` fonksiyonunu kullanarak akıcı (fluid) tipografi uygulayın: font-size: clamp(1rem, 2.5vw, 1.5rem);.

Adım 2: Font Eşleme ve Sayı Sınırı

Bir web sitesinde ikiden fazla yazı tipi ailesi (font-family) kullanmaktan kaçının. Yükleme hızını korumak ve görsel karmaşayı önlemek için standart yaklaşım şudur:

Başlıklar: Karakteristik ve dikkat çekici bir Sans-Serif veya Serif font.
Gövde Metni: Ekran okuması yüksek, nötr ve net bir Sans-Serif font (Inter, Roboto, system-ui).

Adım 3: Satır Yüksekliği (Line-Height) ve Satır Uzunluğu (Measure) Ayarı

Okunabilirliği belirleyen en önemli iki faktör satır aralığı ve genişliğidir:

Satır Uzunluğu: Satır başına 45-75 karakter (ideal: 65 karakter / max-width: 65ch).
Satır Yüksekliği (Line-height): Gövde metinleri için 1.5 - 1.6, başlıklar için daha sıkı olan 1.1 - 1.25 değeri.
Harf Boşluğu (Letter-spacing): Büyük başlıklarda hafif negatif (ör. -0.02em), küçük/büyük harfli butonlarda pozitif (ör. 0.05em).

Adım 4: Renk Kontrastı ve WCAG Uyumluluğu

Metin ile arka plan arasındaki kontrast oranı WCAG 2.1 AA standartlarına göre en az 4.5:1 (büyük metinler için 3:1) olmalıdır. Tam siyah (#000000) yerine yumuşatılmış koyu gri tonları (#111827, #1f2937) tercih ederek göz yorgunluğunu azaltın.

Adım 5: Performans ve Font Optimizasyonu

Tipografik kalite performanstan ödün vermemelidir:

Fontları yerel barındırın (Self-hosting) ve modern format olan WOFF2 kullanın.
CSS içinde font-display: swap; tanımlayarak metinlerin hemen görünmesini sağlayın (FOIT engelleme).
Kullanılmayan glifleri ve font ağırlıklarını temizleyin (Subsetting).