Web Tipografisi: Font Seçimi ve Okunabilirlik

Web'de içeriğin ezici çoğunluğu metindir; dolayısıyla web tipografisi, bir sitenin okunabilirliğini ve profesyonel algısını belirleyen en kritik tasarım katmanlarından biridir. Information Architects'ın kurucusu Oliver Reichenstein'ın ünlü deyişiyle "web tasarımın yüzde 95'i tipografidir." Bu rehberde font seçimi ve eşleştirme, satır yüksekliği ile satır uzunluğu gibi okunabilirlik ölçütleri, tipografik ölçek, değişken fontlar ve Google Fonts performans optimizasyonunu ele alıyoruz.

Web Tipografisi ve Font Seçimi

Fontlar kabaca dört ailede toplanır: tırnaklı (serif), tırnaksız (sans-serif), eş aralıklı (monospace) ve dekoratif (display). Ekranda gövde metni için tırnaksız fontlar yaygın tercihtir; Inter, Open Sans ve Roboto bu amaçla tasarlanmış kanıtlanmış seçeneklerdir. Merriweather ve Lora gibi ekran için optimize edilmiş tırnaklı fontlar ise uzun okuma deneyimine dergi havası katar. Dekoratif fontları yalnızca logo ve büyük başlık gibi kısa metinlerde kullanın; gövde metninde hızla yorucu hale gelirler.

Font Eşleştirme Kuralları

• Bir projede en fazla iki, istisnai durumlarda üç font ailesi kullanın; fazlası görsel gürültü üretir.
• Kontrast üzerinden eşleştirin: tırnaklı bir başlık fontunu tırnaksız bir gövde fontuyla birleştirmek en güvenli formüldür. Playfair Display ile Source Sans 3 veya Lora ile Inter bilinen uyumlu ikililerdir.
• Aynı tasarımcı ailesinden gelen süper aileler (IBM Plex Sans ve IBM Plex Serif gibi) zahmetsiz uyum sağlar.
• Eşleştirdiğiniz fontların x yüksekliklerinin (küçük harf gövde yüksekliği) birbirine yakın olmasına dikkat edin; aksi halde aynı punto değerinde biri diğerinden belirgin büyük görünür.

Okunabilirlik: Satır Yüksekliği, Satır Uzunluğu ve Boyut

Okunabilirliğin üç temel ayarı vardır ve üçü de CSS'te birkaç satırla kontrol edilir. Gövde metni için 16px (1rem) altına inmeyin; satır yüksekliğini gövde metninde 1.5 ile 1.6 arasında tutun (WCAG da paragraf metni için en az 1.5 satır aralığını referans alır); satır uzunluğunu ise satır başına yaklaşık 45 ila 75 karakter aralığında sınırlayın. Tipografi klasiği The Elements of Typographic Style'ın yazarı Robert Bringhurst, tek sütunlu metin için 66 karakteri ideal kabul eder.

body {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

article p {
  max-width: 65ch; /* satır uzunluğunu karakter bazında sınırla */
}

ch birimi, kullanılan fontun sıfır karakterinin genişliğine dayanır; bu sayede satır uzunluğu sınırı font değişse bile anlamını korur. line-height değerini birimsiz yazmak da kalıtım sürprizlerini önler.

Tipografik Ölçek

Başlık boyutlarını rastgele seçmek yerine matematiksel bir ölçek kullanmak, sayfaya kendiliğinden ritim kazandırır. Modüler ölçekte her kademe bir öncekinin sabit bir oranla çarpımıdır; 1.25 (majör üçlü) ve 1.333 (tam dörtlü) web'de en çok kullanılan oranlardır. type-scale.com gibi araçlarla farklı oranları canlı olarak deneyebilirsiniz.

:root {
  /* 1.25 oranlı modüler ölçek */
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
}

h3 { font-size: var(--step-1); }
h2 { font-size: var(--step-2); }
h1 { font-size: clamp(var(--step-2), 2.5vw + 1rem, var(--step-3)); }

Son satırdaki clamp() kullanımı, en büyük başlığın mobilde taşmadan, geniş ekranda ise etkileyici boyutta görünmesini tek kuralla sağlar.

Değişken Fontlar (Variable Fonts)

Değişken fontlar, OpenType sürüm 1.8 ile 2016'da tanıtılan bir teknolojidir: tek bir font dosyası, ağırlık (wght), genişlik (wdth) ve eğim (slnt) gibi eksenler boyunca sınırsız ara değer üretebilir. Eskiden dört ayrı ağırlık için dört dosya indirilirken, değişken fontta tek dosya tüm aralığı kapsar; bu hem istek sayısını hem toplam boyutu azaltır.

@font-face {
  font-family: "Inter Variable";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900; /* desteklenen ağırlık aralığı */
  font-display: swap;
}

h1 {
  font-family: "Inter Variable", system-ui, sans-serif;
  font-weight: 650; /* ara değerler artık geçerli */
}

Eksenler kayıtlı olanlarla da sınırlı değildir; font tasarımcıları kendi özel eksenlerini tanımlayabilir. font-variation-settings özelliği bu eksenlere doğrudan erişim sağlar, ancak mümkün olduğunda font-weight gibi üst düzey özellikleri tercih etmek hem daha okunaklı hem de geleceğe daha uyumludur. Google Fonts kataloğunda değişken sürümü bulunan fontlar ayrıca işaretlenir; fonts.google.com üzerinde değişken eksenleri canlı olarak deneyebilirsiniz.

Google Fonts ve Performans

Web fontları sayfa performansını doğrudan etkiler; font yüklenene kadar metnin görünmemesi (FOIT) ya da sistem fontuyla gösterilip sonradan değişmesi (FOUT) kullanıcı deneyimini belirler. Şu önlemler farkı hissedilir biçimde kapatır:

Tipografi ayarları görünmez olduğunda işini yapıyor demektir: okur fontu değil, metni hatırlar.

Sonuç

Web tipografisi, font dosyası seçmekten ibaret değildir; okunabilirlik ölçülerini doğru kurmak, ölçekle ritim yaratmak ve performans maliyetini yönetmek işin asıl gövdesidir. En fazla iki aile, 16px taban boyut, 1.5-1.6 satır yüksekliği, 45-75 karakterlik satırlar, modüler bir ölçek ve font-display: swap ile yüklenen optimize fontlar: bu kontrol listesini uygulayan bir site, içeriği ne olursa olsun daha profesyonel okunur.