Modern web’de okunabilir yazı için pratik bir rehber

Neden çoğu web sitesini okumak olması gerekenden daha zor

2026’daki ortalama bir web sitesi özel bir font ailesi, özenle seçilmiş marka renkleri ve aralıkları piksele kadar tanımlayan bir tasarım sistemiyle yayına çıkar. Buna rağmen gövde metni—ziyaretçilerin çoğunun aslında okumaya geldiği şey—çoğu zaman düşük kontrastlı bir griyle 14px boyutunda durur; paragraflar için değil, başlıklar için optimize edilmiş bir yazı karakteriyle ayarlanmıştır.

Bu, tasarımcılara yönelik bir eleştiri değil. Okunabilirliğin görsel tasarımdan ayrı bir disiplin olduğunu ve ikisinin her zaman örtüşmediğini hatırlatıyor. Bir hero bölümünde keskin görünen bir yazı karakteri, paragraf uzunluğunda yorucu olabilir. Fotoğrafta iyi görünen bir renk paleti kontrast kontrollerinden geçemeyebilir. 27 inçlik bir monitörde çalışan bir düzen, mobilde dar bir sütuna dönüşebilir.

İyi haber: okunabilir yazı için tipografi diploması gerekmez. Orantısız derecede büyük etki yaratan birkaç değişkene dikkat etmek gerekir.

Font boyutu: düşündüğünüzden daha büyük

Web’de en yaygın okunabilirlik hatası, gövde metninin çok küçük olmasıdır. Tasarımcılar masaüstü ölçekte "temiz göründüğü" için gövde metnini sık sık 14px veya 15px olarak ayarlar, sonra da okurların önemli bir bölümünün telefon kullandığını ve çoğu zaman ideal olmayan ışık koşullarında okuduğunu unutur.

2026’da gövde metni için pratik bir başlangıç noktası:

• Masaüstü: minimum 18px, tercihen 20px
• Mobil: minimum 16px, tercihen 18px

Daha küçük yazıya alışkınsanız bu sayılar büyük gelebilir, ancak insanların ekranlarda gerçekte nasıl okuduğunu yansıtır. Daha büyük metin göz yorgunluğunu azaltır, kavrayışı iyileştirir ve tarayıcı ayarlarını değiştirmemiş hafif görme bozukluğu olan okurlar için içeriğinizi erişilebilir kılar.

Tasarım sisteminiz daha küçük yazıyı zorunlu kılıyorsa, bunu güneş ışığında bir telefonda test edin. Gözlerinizi kısıyorsanız çok küçüktür.

Satır yüksekliği: metne nefes alacak alan verin

Satır yüksekliği (leading), metin satırları arasındaki dikey boşluktur. Çok sıkı olursa satırlar birbirine karışır. Çok gevşek olursa göz satırlar arasındaki akışı kaybeder.

Gövde metni için 1.5 ile 1.7 arasında bir satır yüksekliği çoğu yazı karakterinde iyi çalışır. Başlıklar daha sıkı olabilir (1.1 ile 1.3), ancak gövde metninin nefes alacak alana ihtiyacı vardır.

CSS:

body {
  font-size: 18px;
  line-height: 1.6;
}

Bu, okunabilirlik açısından en kolay kazanımlardan biridir. Gövde metniniz şu anda line-height: 1.2 kullanıyorsa veya sabit bir piksel değeriyle ayarlanmışsa, bugün değiştirin.

Satır uzunluğu: düşündüğünüzden daha kısa

Gövde metni için ideal satır uzunluğu satır başına 45 ila 75 karakter, kabaca 8 ila 12 kelimedir. 90 karakterden uzun satırlar, gözün bir sonraki satırın başına dönmesini zorlaştırır. 40 karakterden kısa satırlar ise kesik kesik, parçalı bir okuma deneyimi yaratır.

Çoğu web sitesi, özellikle masaüstünde metnin viewport’un tüm genişliğine yayılmasına izin vererek bunu yanlış yapar. 1920px genişliğinde bir monitör satır başına 150’den fazla karakter sığdırabilir; bu da okumayı yorucu hale getirir.

Çözüm, metin kapsayıcınıza bir max-width vermektir:

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

ch birimi az kullanılır ama bunun için idealdir: font boyutuyla ölçeklenir ve kabaca karakter genişliğine karşılık gelir.

Kontrast: siyah üzerine beyaz kadar basit değil

WCAG 2.1, gövde metni için minimum 4.5:1 kontrast oranı (AA seviyesi) ve gelişmiş erişilebilirlik için 7:1 (AAA seviyesi) belirtir. Çoğu web sitesi kâğıt üzerinde bunu karşılar, ancak pratikte beyaz arka plan üzerinde açık gri metin kullandığı için başarısız olur.

Yaygın sorunlular:

• #666666 on #FFFFFF (4.54:1, barely passes)
• #777777 on #FFFFFF (4.47:1, fails)
• Any shade lighter than #767676 on white (fails)

Tasarım sisteminiz "text-secondary" değerini açık gri olarak tanımlıyorsa, test edin. WebAIM contrast checker doğrulamanın en hızlı yoludur.

Koyu mod bunu daha da karmaşıklaştırır. Saf siyah üzerinde saf beyaz metin, koyu gri üzerinde hafif kırık beyazdan daha zor okunan bir halasyon (parlama etkisi) yaratır. Daha iyi bir yaklaşım:

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Yazı karakteri seçimi: varsayılan fontlar düşündüğünüzden daha iyi

Özel web fontları her yerde, ancak bazı ödünlerle gelirler. Gecikme ekler, sayfa ağırlığını artırır ve dikkatli yüklenmezlerse render işlemini engelleyebilirler. Gövde metni için sistem fontları çoğu zaman daha iyi bir seçimdir.

2026’da sağlam bir sistem font yığını:

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

Bu size macOS/iOS’ta San Francisco, Windows’ta Segoe UI ve Android’de Roboto sağlar—hepsi anında yüklenen, son derece okunabilir, profesyonelce tasarlanmış yazı karakterleridir.

Gövde metni için özel bir font kullanıyorsanız, görüntüleme için değil uzun metin okumak için tasarlanmış olanı seçin. Şunlardan kaçının:

• Gövde metni için ultra-light veya ultra-bold ağırlıklar
• Daraltılmış veya genişletilmiş varyantlar
• Düşük x-height değerine sahip fontlar (küçük harflerin yüksekliği)

Seçtiğiniz yazı karakterini kullanmaya karar vermeden önce paragraf uzunluğunda test edin.

Duyarlı tipografi: akışkan yazı ölçekleri

Sabit font boyutları cihazlar arasında iyi ölçeklenmez. Masaüstünde rahat olan 20px gövde fontu, mobilde fazla büyük hissedilebilir.

Akışkan tipografi, font boyutunu minimum ve maksimum değerler arasında yumuşakça ölçeklemek için clamp() kullanır:

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

Bu, küçük ekranlarda 16px’ten büyük ekranlarda 20px’e kadar ölçeklenir ve arada yumuşak geçiş yapar. Media query kırılma noktalarından daha gelişmiştir ve her viewport genişliğine uyum sağlar.

Tam bir yazı ölçeği (başlıklar, gövde, küçük metin) için Utopia gibi araçlar, kısıtlarınıza göre akışkan ölçekler üretir.

Paragraf aralığı ve metin hizalama

Önemli olan iki küçük ayrıntı:

1. Paragraf aralığı: Paragraflar arasına boşluk ekleyin (margin-block-end: 1em) veya ilk satır girintisi kullanın (text-indent: 1.5em), ama ikisini birden kullanmayın. Çoğu web içeriği aralık kullanır.

1. Metin hizalama: Sola hizalı metin (veya sağdan sola yazılan diller için sağa hizalı metin) neredeyse her zaman iki yana yaslı metinden daha okunabilirdir; iki yana yaslama, heceleme etkin değilse düzensiz kelime aralıkları yaratır. Ortalanmış gövde metnini okumak zordur ve kısa pasajlarla sınırlı tutulmalıdır.

Okunabilirliği pratikte test etmek

Okunabilirlik tamamen nesnel değildir, ancak test edebilirsiniz:

• Kendi içeriğinizi telefonunuzda okuyun, farklı ışık koşullarında
• Bir Lighthouse erişilebilirlik denetimi çalıştırın, kontrast ve font boyutu sorunlarını yakalamak için (rehberlik için paniklemeden Lighthouse raporu nasıl okunur yazısına bakın)
• 50 yaşın üzerinde birinden bir sayfayı okumasını isteyin, ayarlarını değiştirmeden
• Metin ağırlıklı sayfalardaki hemen çıkma oranını analytics verilerinizde kontrol edin—insanlar hızlı ayrılıyorsa, okunabilirlik bir etken olabilir

İçeriğinizin okunması zorsa, insanlar onu okumaz. Bu kadar basit.

Bu pratikte nasıl görünür

2026’da okunabilir bir gövde metni stili şöyle görünebilir:

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Bu, yaklaşık bir düzine satır CSS ile font boyutunu, satır yüksekliğini, satır uzunluğunu, kontrastı ve duyarlı ölçeklemeyi kapsar. Heyecan verici değildir, ama çalışır.

Kuralları ne zaman esnetmeli

Bu yönergeler gövde metni için geçerlidir—insanların bilgi edinmek için okuduğu paragraflar. Başlıklar, açıklama yazıları, UI etiketleri ve pazarlama metinleri farklı kısıtlamalara sahiptir ve bu kuralları esnetebilir.

Ancak biri sitenize bir makale, dokümantasyon sayfası veya ürün açıklaması okumak için geldiyse, okunabilir yazı isteğe bağlı değildir. Temel beklentidir.