Metin okunabilirliği, kullanıcıların metni ne kadar kolay okuyabildiği ve anladığıyla ilgilidir. Bu, tipografi, spacing, kontrast ve layout kararlarının birleşimidir.

1. Temel Okunabilirlik Faktörleri

a) Satır Uzunluğu (Line Length / Measure)

Optimal: 45-75 karakter (İngilizce için), 50-80 karakter (Türkçe için)

/* Kötü - çok geniş satırlar */
.article {
  max-width: 100%;
  /* 120+ karakter - gözler satır sonunu bulamaz */
}

/* İyi - optimal satır uzunluğu */
.article {
  max-width: 65ch; /* ch birimi: karakter genişliği */
}

/* Responsive optimal uzunluk */
.article {
  max-width: clamp(45ch, 90%, 75ch);
}

CSS Özellikleri:

• max-width ile satır uzunluğu kontrolü
• ch birimi (karakter genişliği) - tipografik ölçüm
• clamp() ile esnek sınırlar

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

Optimal: 1.4-1.8 arası (metin boyutuna göre değişir)

/* Kötü - çok sıkışık */
.text-cramped {
  line-height: 1;
  /* Satırlar birbirine yapışır */
}

/* Kötü - çok gevşek */
.text-loose {
  line-height: 2.5;
  /* Satırlar arasında kopukluk */
}

/* İyi - dengeli */
.paragraph {
  line-height: 1.6;
}

/* Boyut bazlı ayarlama */
.heading {
  font-size: 3rem;
  line-height: 1.2; /* Büyük metinler daha az line-height */
}

.body-text {
  font-size: 1rem;
  line-height: 1.6; /* Küçük metinler daha fazla */
}

/* Modern: lh birimi ile */
.paragraph {
  line-height: 1.5;
  margin-block-end: 1lh; /* 1 satır yüksekliği kadar boşluk */
}

CSS Özellikleri:

• line-height - birimsize (1.5) veya birimli (1.5rem)
• lh birimi - satır yüksekliğine göre spacing
• leading-trim (gelecek özellik) - tipografik hassasiyet

c) Font Boyutu (Font Size)

Optimal: 16px-18px body text için

/* Kötü - sabit piksel */
body {
  font-size: 14px; /* Kullanıcı tercihleri göz ardı */
}

/* İyi - göreceli birim */
body {
  font-size: 1rem; /* Tarayıcı ayarlarına saygı */
}

/* Daha iyi - responsive */
body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  /* Küçük ekran: 16px, büyüdükçe 18px'e kadar */
}

/* Hiyerarşi ile */
:root {
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
}

.small-text {
  font-size: var(--font-size-sm);
}

.body-text {
  font-size: var(--font-size-base);
}

CSS Özellikleri:

• font-size - rem, em, clamp()
• font-size-adjust - farklı fontlar arasında tutarlılık

2. Tipografi ve Font Özellikleri

a) Font Seçimi ve Okunabilirlik

/* Sistem fontları - hızlı ve okunabilir */
body {
  font-family: 
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}

/* Okuma için serif */
.article-content {
  font-family: 
    Georgia,
    "Times New Roman",
    serif;
  font-size: 1.125rem;
  line-height: 1.7;
}

/* Kod için monospace */
code {
  font-family: 
    "SF Mono",
    Monaco,
    "Cascadia Code",
    "Courier New",
    monospace;
  font-size: 0.9em; /* Parent'a göre biraz küçük */
}

b) Font Weight (Kalınlık)

/* Okunabilirlik için optimal ağırlıklar */
body {
  font-weight: 400; /* Normal - body text için */
}

.heading {
  font-weight: 700; /* Bold - başlıklar için */
}

.lead-text {
  font-weight: 500; /* Medium - vurgu için */
}

/* Variable fonts ile hassas kontrol */
@supports (font-variation-settings: normal) {
  .text {
    font-variation-settings: "wght" 450;
    /* 400-500 arası hassas ayar */
  }
}

/* İnce fontlar kontrast gerektirir */
.thin-text {
  font-weight: 300;
  font-size: 1.125rem; /* Daha büyük boyut */
  color: #000; /* Daha yüksek kontrast */
}

CSS Özellikleri:

• font-weight - 100-900 arası değerler
• font-variation-settings - variable fonts için

c) Font Optical Sizing

/* Farklı boyutlarda optimal form */
.text {
  font-optical-sizing: auto;
  /* Font boyuta göre otomatik optimize olur */
}

/* Büyük başlıklarda display variant */
.hero-title {
  font-size: 4rem;
  font-optical-sizing: auto;
  /* Büyük boyut için optimize edilmiş formlar */
}

 

3. Karakter ve Kelime Spacing

a) Letter Spacing (Karakter Aralığı)

/* Genellikle varsayılan en iyisidir */
.body-text {
  letter-spacing: normal;
}

/* Büyük başlıklarda sıkıştırma */
.display-heading {
  font-size: 5rem;
  letter-spacing: -0.02em; /* Negatif tracking */
}

/* Küçük büyük harfler için açma */
.small-caps {
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

.uppercase-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
}

Kural:

• Büyük fontlar → negatif letter-spacing
• Küçük fontlar / ALL CAPS → pozitif letter-spacing

b) Word Spacing

/* Nadiren değiştirilmeli */
.text {
  word-spacing: normal;
}

/* Çok dar yazılarda */
.narrow-column {
  max-width: 35ch;
  word-spacing: 0.1em; /* Biraz daha fazla boşluk */
}

4. Renk ve Kontrast

a) Renk Kontrastı (WCAG Standartları)

WCAG AA: Minimum 4.5:1 (normal metin), 3:1 (büyük metin) WCAG AAA: Minimum 7:1 (normal metin), 4.5:1 (büyük metin)

/* Kötü kontrast - okunaksız */
.low-contrast {
  color: #999;
  background: #fff;
  /* Kontrast: 2.8:1 - yetersiz */
}

/* İyi kontrast */
.good-contrast {
  color: #333;
  background: #fff;
  /* Kontrast: 12.6:1 - mükemmel */
}

/* Karanlık mod için */
@media (prefers-color-scheme: dark) {
  body {
    color: #e0e0e0;
    background: #121212;
    /* Kontrast: 13.9:1 */
  }
}

/* Modern: color-contrast() fonksiyonu (gelecek) */
.text {
  color: color-contrast(
    var(--background) 
    vs #000, #333, #666
  );
  /* En iyi kontrast otomatik seçilir */
}

CSS Özellikleri:

• color ve background-color
• color-contrast() (gelecek özellik)
• prefers-contrast media query

b) Alt Metin Renkleri

/* Link renkleri - yeterli kontrast */
a {
  color: #0066cc;
  /* Ana metinden ayırt edilebilir */
}

a:visited {
  color: #551a8b;
  /* Ziyaret edilmiş linkler farklı */
}

/* Disabled metin */
.disabled-text {
  color: #767676;
  /* Minimum 4.5:1 kontrast korunmalı */
}

/* Placeholder metinler */
input::placeholder {
  color: #757575;
  opacity: 1;
  /* Varsayılan opacity kaldırılmalı */
}

5. Hizalama ve Metin Düzeni

a) Text Alignment

/* Batı dilleri için soldan hizalama en okunabilir */
.paragraph {
  text-align: start; /* Dil yönünü otomatik dikkate alır */
}

/* Justify - dikkatli kullanılmalı */
.article {
  text-align: justify;
  hyphens: auto; /* Kelime bölme ile birlikte */
  /* Yoksa kelimeler arası büyük boşluklar */
}

/* Ortalama - sadece kısa metinler için */
.heading {
  text-align: center;
  max-width: 30ch; /* Çok uzun satırlar ortalanmamalı */
}

 

Modern Özellikler:

/* Mantıksal hizalama */
.text {
  text-align: start; /* left yerine */
  text-align: end;   /* right yerine */
  /* RTL dillerde otomatik ters çevrilir */
}

 

b) Hyphens (Kelime Bölme)

/* Dar sütunlarda yararlı */
.narrow-column {
  max-width: 40ch;
  hyphens: auto;
  /* Kelimeler uygun şekilde bölünür */
}

/* Türkçe için */
.turkish-text {
  hyphens: auto;
  lang: tr; /* HTML'de lang="tr" olmalı */
}

/* Uzun kelimelerin kontrolü */
.text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

 

c) Text Wrapping

/* Uzun URL'ler ve kelimeler */
.url-text {
  word-break: break-all; /* Her karakterden bölebilir */
  /* veya */
  overflow-wrap: anywhere; /* Boşluk yoksa böler */
}

/* Başlıklar - widows/orphans önleme */
.heading {
  text-wrap: balance; /* Satırlar dengeli uzunlukta */
}

/* Paragraflar */
.paragraph {
  text-wrap: pretty; /* Orphan'ları önler */
}

 

6. Paragraph Spacing

a) Paragraph Margins

/* Paragraflar arası boşluk */
.paragraph {
  margin-block-end: 1em; /* Font boyutuna göre */
  /* veya */
  margin-block-end: 1lh; /* Satır yüksekliğine göre */
}

/* İlk paragraf girintisi (opsiyonel) */
.paragraph + .paragraph {
  text-indent: 1.5em;
  margin-block-start: 0;
}

/* Responsive spacing */
.article {
  --paragraph-spacing: clamp(1rem, 0.5rem + 1vw, 1.5rem);
}

.paragraph {
  margin-block-end: var(--paragraph-spacing);
}

 

b) Drop Caps (Baş Harf Süsleme)

.paragraph::first-letter {
  initial-letter: 3; /* 3 satır yüksekliğinde */
  font-weight: 700;
  margin-inline-end: 0.5em;
  color: var(--accent-color);
}

 

7. Başlık Hiyerarşisi ve Okunabilirlik

/* Type scale - harmonik oran */
:root {
  --ratio: 1.25; /* Major third */
  
  --font-size-base: 1rem;
  --font-size-h6: var(--font-size-base);
  --font-size-h5: calc(var(--font-size-h6) * var(--ratio));
  --font-size-h4: calc(var(--font-size-h5) * var(--ratio));
  --font-size-h3: calc(var(--font-size-h4) * var(--ratio));
  --font-size-h2: calc(var(--font-size-h3) * var(--ratio));
  --font-size-h1: calc(var(--font-size-h2) * var(--ratio));
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 700;
  margin-block-end: 0.5em;
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
/* ... */

/* Başlıktan sonra paragraf spacing */
h1 + p,
h2 + p,
h3 + p {
  margin-block-start: 0.75em;
}

 

8. Accessibility ve Okunabilirlik

a) Kullanıcı Tercihleri

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Contrast tercihi */
@media (prefers-contrast: high) {
  body {
    color: #000;
    background: #fff;
  }
}

/* Font boyutu artırma desteği */
html {
  font-size: 100%; /* Tarayıcı varsayılanına saygı */
}

body {
  font-size: 1rem; /* Göreceli birim kullan */
}

b) Focus States

/* Klavye navigasyonu için görünür focus */
:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

/* Link focus */
a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  text-decoration: none;
}

 

9. Responsive Typography

a) Fluid Typography

/* Viewport bazlı scaling */
body {
  font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem);
  /* Küçük: 16px, Orta: ~18px, Büyük: 20px */
}

h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 4rem);
  line-height: 1.1;
}

/* Container query ile */
@container (min-width: 600px) {
  .card-title {
    font-size: 1.5rem;
  }
}

 

b) Responsive Line Length

.article {
  /* Ekran genişliğine göre ama maksimum karakter */
  width: min(90%, 70ch);
  margin-inline: auto;
}

/* Container içinde */
.sidebar-article {
  max-width: 55ch; /* Dar alanlarda daha kısa satır */
}

 

10. Advanced CSS Features

a) CSS Subgrid ile Hizalama

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.article-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

/* Tüm başlıklar ve metinler hizalı */

b) Text Decoration

/* Okunabilir link altı çizgileri */
a {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-decoration-color: var(--link-color);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 0.15em;
}

 

11. Okunabilirlik Kontrol Listesi

Optimal Ayarlar:

.readable-text {
  /* Font */
  font-family: system-ui, sans-serif;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  font-weight: 400;
  
  /* Spacing */
  line-height: 1.6;
  letter-spacing: normal;
  max-width: 70ch;
  
  /* Layout */
  margin-block-end: 1lh;
  text-align: start;
  text-wrap: pretty;
  
  /* Renk */
  color: #333;
  background: #fff;
  
  /* Responsive */
  hyphens: auto;
  overflow-wrap: break-word;
}

Özet: Metin Okunabilirliği Prensipleri

1. Satır Uzunluğu: 45-75 karakter (max-width: 65ch)
2. Satır Yüksekliği: 1.5-1.8 arası (line-height)
3. Font Boyutu: Minimum 16px (font-size: 1rem)
4. Kontrast: Minimum 4.5:1 (WCAG AA)
5. Hizalama: Sol hizalama en okunabilir
6. Spacing: Yeterli paragraph ve heading spacing
7. Responsive: Fluid typography ve optimal line length
8. Accessibility: Kullanıcı tercihlerine saygı

Modern CSS, bu okunabilirlik faktörlerini kontrol etmek için güçlü araçlar sunar: clamp(), ch birimi, lh birimi, mantıksal özellikler, text-wrap, container queries ve daha fazlası. Bu özellikleri doğru kullanmak, her ekran boyutunda ve her kullanıcı için optimal okuma deneyimi sağlar.