Web Tasarımında Tipografi: Okunabilirlik ve Görsel Hiyerarşi

Giriş

Web'in %95'i tipografi.

Bu cümle abartı gibi görünebilir ama düşünün: Bir web sayfasındaki ana içerik nedir? Metin. Başlıklar, paragraflar, butonlar, menüler, formlar... Hepsi metin.

Tipografi sadece "font seçmek" değil. Bilginin nasıl algılandığını, kullanıcının sayfada nasıl gezindiğini, mesajın nasıl iletildiğini belirler.

Font Seçimi

Sans-Serif mi, Serif mi?

Sans-serif (Manrope, Inter, Helvetica):

• Ekranda okunması kolay
• Modern, temiz his
• Web için genellikle tercih edilir

Serif (Georgia, Merriweather, Playfair):

• Geleneksel, güvenilir his
• Uzun metinlerde göz yorgunluğunu azaltabilir
• Belirli sektörler için uygun (hukuk, finans, edebiyat)

Font Seçim Kriterleri

1. Okunabilirlik

• x-height yeterli mi?
• Harfler birbirinden ayırt edilebiliyor mu? (Il1, O0)
• Türkçe karakter desteği var mı? (ğ, ş, ı, ö, ü, ç)

2. Ağırlık Çeşitliliği

• Minimum: Regular (400) + Bold (700)
• İdeal: Light (300), Regular (400), Medium (500), Bold (700)

3. Performans

• Variable font mu? (Tek dosya, çoklu ağırlık)
• WOFF2 formatı mevcut mu?
• Dosya boyutu makul mü?

Neden Manrope?

Novexing'de Manrope kullanıyoruz. Nedenleri:

• Geniş ağırlık yelpazesi (200-800)
• Yüksek x-height, iyi okunabilirlik
• Geometrik ama insancıl
• Türkçe karakter desteği mükemmel
• Variable font olarak mevcut
• Açık kaynak (SIL Open Font License)

Tipografi Ölçek Sistemi

Neden Ölçek Gerekli?

Rastgele boyutlar (14px, 17px, 23px, 31px...) kaos yaratır. Tutarlı bir sistem, görsel düzen sağlar.

Popüler Ölçek Oranları

Major Third (1.25):

Base: 16px
→ 20px → 25px → 31px → 39px → 49px

Perfect Fourth (1.333):

Base: 16px
→ 21px → 28px → 38px → 50px → 67px

Golden Ratio (1.618):

Base: 16px
→ 26px → 42px → 68px → 110px

Pratik Uygulama

:root {
  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem;  /* 36px */
  --text-5xl: 3rem;     /* 48px */
}

Görsel Hiyerarşi

Hiyerarşi Nedir?

Kullanıcının göze ilk neyi görmesi gerektiğini belirleyen görsel düzen. Tipografi bunun ana aracı.

Hiyerarşi Araçları

1. Boyut En basit yöntem. Büyük = önemli.

2. Ağırlık Bold başlıklar, regular body text.

3. Renk/Kontrast Koyu başlık, açık gri alt metin.

4. Konum Üstte ve solda olan önce okunur (LTR dillerde).

5. Whitespace Etrafında boşluk olan öğe dikkat çeker.

Örnek Hiyerarşi

h1 {
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.subtitle {
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

p {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.6;
}

.caption {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-muted);
}

Okunabilirlik Kuralları

Satır Uzunluğu (Measure)

Çok uzun satırlar göz yorar. Çok kısa satırlar ritmi bozar.

• İdeal: 60-75 karakter
• Minimum: 45 karakter
• Maksimum: 90 karakter

p {
  max-width: 65ch; /* ch = karakter genişliği */
}

Satır Yüksekliği (Line Height)

Sıkışık satırlar okunmaz. Çok açık satırlar bağlantıyı koparır.

• Başlıklar: 1.1 - 1.3
• Body text: 1.5 - 1.7
• Küçük metin: 1.6 - 1.8

h1 { line-height: 1.2; }
p { line-height: 1.6; }
.small { line-height: 1.7; }

Paragraf Aralığı

Paragraflar arası yeterli boşluk olmalı.

p + p {
  margin-top: 1.5em;
}

Kontrast

WCAG standartları:

• Normal metin: Minimum 4.5:1 kontrast oranı
• Büyük metin (18px+ bold veya 24px+): Minimum 3:1

Responsive Tipografi

Fluid Typography

Viewport genişliğine göre font boyutu değişir:

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

• Minimum: 2rem (32px)
• Tercih: 5vw (viewport'un %5'i)
• Maksimum: 4rem (64px)

Breakpoint Yaklaşımı

h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  h1 { font-size: 3rem; }
}

@media (min-width: 1024px) {
  h1 { font-size: 4rem; }
}

Yaygın Hatalar

1. Çok Fazla Font

İki font yeterli. Üçüncü font nadiren gerekli.

2. Tutarsız Ölçekler

Rastgele boyutlar yerine sistem kullanın.

3. Yetersiz Kontrast

Açık gri metin şık görünebilir ama okunmaz.

4. Dar Satır Aralığı

Başlıklarda sıkışık olabilir, body text'te olmaz.

5. Çok Uzun Satırlar

Tam genişlik paragraflar kabus.

Sonuç

Tipografi, tasarımın görünmez kahramanı. Doğru yapıldığında fark edilmez, yanlış yapıldığında her şeyi bozar.

Temel prensipler:

• Tutarlı ölçek sistemi kullanın
• Okunabilirliği asla feda etmeyin
• Hiyerarşi ile yönlendirin
• Az font, çok düzen