CSS'teki line-height (satır yüksekliği) özelliğinin değeri, modern web tasarımında metin okunabilirliğini ve dikey ritmi sağlamak için kritik öneme sahiptir. CSS'in en kritik tipografi özelliklerinden biridir. Duyarlı (responsive) tasarımlarda okunabilirliği artırmak temel hedeftir.

line-height temel olarak, bir metin satırının yukarısındaki ve aşağısındaki görünmez boşluğu (leading) belirler. Bu boşluk, satırın kendisinin yüksekliğini oluşturur ve metin boyutuyla (font-size) ilişkilidir.

Modern CSS değer birimi, Unitless (birimsiz)'dir. Adaptif ve Ölçeklenebilir bir çözüm sunar. Bu, dikey ritmin ve okuma konforunun tüm cihaz ve boyutlarda korunmasını sağlar.

 

Değer türü	Örnek	Kabul edilir mi?	Açıklama
Unitless (birimsiz)	1.5	✔	Oransal, en önerilen yöntem
Pixel	20px	✔	Sabit uzunluk
Em	1.2em	✔	Yazı boyutuna bağlı
Rem	1.4rem	✔	Root font-size’a bağlı
Yüzde	120%	✔	Oran olarak
Normal	normal	✔	Tarayıcı varsayılanı
Viewport	3vh	✘	Geçersiz
fr	1fr	✘	Grid’e özeldir

 

Temel Konsept

line-height, bir satırın toplam yüksekliğini belirler (font yüksekliği + üst/alt boşluk):

┌─────────────────────┐ ← Line box top
│     ↑ Leading       │
│   ┌─────────┐       │
│   │  Text   │       │ ← Font size
│   └─────────┘       │
│     ↓ Leading       │
└─────────────────────┘ ← Line box bottom

Leading = (line-height - font-size) / 2

 

Değer Tipleri ve Davranışları

1. Unitless (Oran) - ✅ EN İYİ UYGULAMA

p {
  font-size: 16px;
  line-height: 1.5; /* Oransal - font-size'ın 1.5 katı */
  /* = 16px * 1.5 = 24px */
}

Miras davranışı:

.parent {
  font-size: 16px;
  line-height: 1.5; /* ORAN miras alınır */
}

.child {
  font-size: 32px;
  /* line-height: 1.5 ORANI miras alır */
  /* = 32px * 1.5 = 48px ✅ DOĞRU */
}

 

2. Piksel (px) - ❌ KÖTÜ UYGULAMA

p {
  font-size: 16px;
  line-height: 24px; /* Sabit değer */
}

Miras davranışı:

.parent {
  font-size: 16px;
  line-height: 24px; /* HESAPLANMIŞ DEĞER miras alınır */
}

.child {
  font-size: 32px;
  /* line-height: 24px sabit değer miras alır */
  /* Metin üst üste biner! ❌ SORUNLU */
}

 

3. Yüzde (%) - ❌ YANILTICI

p {
  font-size: 16px;
  line-height: 150%; /* = 24px olarak HESAPLANIR */
}

Miras davranışı:

.parent {
  font-size: 16px;
  line-height: 150%; /* Parent'ta 24px olarak hesaplanır */
}

.child {
  font-size: 32px;
  /* line-height: 24px (hesaplanmış değer) miras alır */
  /* Yine sorunlu! ❌ */
}

 

4. Em Birimi - ❌ KARMAŞIK

p {
  font-size: 16px;
  line-height: 1.5em; /* = 16px * 1.5 = 24px olarak HESAPLANIR */
}

Miras davranışı:

.parent {
  font-size: 16px;
  line-height: 1.5em; /* = 24px hesaplanır */
}

.child {
  font-size: 32px;
  /* line-height: 24px miras alır ❌ */
}

 

5. Rem Birimi - ⚠️ ÖZELLİKLE KULLAN

:root {
  font-size: 16px;
}

p {
  font-size: 1rem; /* 16px */
  line-height: 1.5rem; /* = 24px sabit */
}

h1 {
  font-size: 2rem; /* 32px */
  /* Eğer line-height belirtilmezse, parent'tan miras alır */
  /* 24px alırsa sorunlu olur */
}

 

Detaylı Karşılaştırma

/* Test senaryosu */
.container {
  font-size: 16px;
}

/* Senaryo 1: Unitless ✅ */
.container-unitless {
  line-height: 1.5; /* Oran */
}

.container-unitless .small {
  font-size: 12px;
  /* line-height = 12px * 1.5 = 18px ✅ */
}

.container-unitless .large {
  font-size: 32px;
  /* line-height = 32px * 1.5 = 48px ✅ */
}

/* Senaryo 2: Piksel ❌ */
.container-px {
  line-height: 24px; /* Sabit */
}

.container-px .small {
  font-size: 12px;
  /* line-height = 24px (geniş boşluk) ⚠️ */
}

.container-px .large {
  font-size: 32px;
  /* line-height = 24px (metin üst üste biner!) ❌ */
}

/* Senaryo 3: Yüzde ❌ */
.container-percent {
  line-height: 150%; /* 16px * 150% = 24px hesaplanır */
}

.container-percent .large {
  font-size: 32px;
  /* line-height = 24px miras alır ❌ */
}

/* Senaryo 4: Em ❌ */
.container-em {
  line-height: 1.5em; /* 16px * 1.5 = 24px hesaplanır */
}

.container-em .large {
  font-size: 32px;
  /* line-height = 24px miras alır ❌ */
}

 

Line-height Değeri Nasıl Hesaplanır?

İdeal Değerler:

• Kısa Satırlar (Başlıklar, Navigasyon): Daha küçük değerler (örneğin, 1.2 - 1.4) kullanılabilir. Çünkü satır uzunluğu kısaldıkça gözün bir sonraki satıra geçme zorluğu azalır.

• Uzun Satırlar (Gövde Metni/Paragraf): Okunabilirliği artırmak için daha büyük değerler (örneğin, 1.5 - 1.6) kullanılır. Satır uzadıkça, okuyucunun kaybolmadan bir sonraki satırın başına kolayca dönmesi için daha fazla boşluğa ihtiyacı vardır.

• Font Tasarımı: Her yazı tipi, büyük ve küçük harflerinin boyutunu ve tasarımını (x-yüksekliği) farklı şekilde yönetir. Kullanılan fonta göre line-height değeri değişebilir. X-yüksekliği büyük olan fontlar daha kolay okunur. X-yüksekliği azaldıkça line-height değeri artar.

Leading (Satır Aralığı)

.text {
  font-size: 16px;
  line-height: 1.5; /* = 24px */
}

/* Leading hesaplama:
   Leading = line-height - font-size
   Leading = 24px - 16px = 8px
   
   Üst boşluk = 8px / 2 = 4px
   Alt boşluk = 8px / 2 = 4px
*/

Normal Değeri

p {
  line-height: normal; /* Tarayıcı varsayılanı */
  /* Çoğu tarayıcıda ~1.2 */
  /* Font'a göre değişebilir */
}

Dikkat: normal değeri font'a bağlı olarak değişir, tahmin edilemez. Daima açık değer belirt.

 

Tipografi için İdeal Değerler

Genel Kurallar

/* Body metni - Paragraflar */
body {
  line-height: 1.6; /* Optimal okunabilirlik */
  /* 1.5 - 1.8 arası genelde iyi */
}

/* Başlıklar */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2; /* Sıkı - başlıklar tek/iki satırlık */
  /* 1.1 - 1.3 arası */
}

/* Küçük metinler */
.small-text {
  font-size: 0.875rem; /* 14px */
  line-height: 1.4;
}

/* Büyük display metinler */
.display {
  font-size: 4rem;
  line-height: 1; /* Çok sıkı veya 1.1 */
}

/* Kod blokları */
code, pre {
  line-height: 1.6; /* Kod okunabilirliği için */
}

/* Butonlar - Tek satır */
.button {
  line-height: 1; /* Dikey ortalama için */
  padding: 0.75em 1.5em; /* Em ile oransal padding */
}

/* Liste elemanları */
li {
  line-height: 1.8; /* Listeler için daha geniş */
}

/* İnce/uzun yazı kolonları */
.narrow-column {
  max-width: 40ch;
  line-height: 1.8; /* Dar kolonlarda daha geniş */
}

/* Geniş yazı kolonları */
.wide-column {
  max-width: 80ch;
  line-height: 1.5; /* Geniş kolonlarda daha sıkı */
}

Bilimsel Temeller

Okunabilirlik araştırmaları:

• Optimal: 45-75 karakter genişliğinde satırlar için line-height: 1.5-1.6
• Dar kolonlar (<45 karakter): line-height: 1.7-1.8
• Geniş kolonlar (>75 karakter): line-height: 1.4-1.5
• Başlıklar: line-height: 1.1-1.3

 

lh Birimi (Yeni)

/* Line-height'a göre oransal birim */
.text-box {
  line-height: 1.5; /* = 24px (16px font için) */
  
  /* Padding line-height'ın yarısı */
  padding-block: 0.5lh; /* = 12px */
  
  /* Margin line-height kadar */
  margin-bottom: 1lh; /* = 24px */
}

/* Dikey ritim için mükemmel */
.rhythm-element {
  line-height: 1.6;
  margin-bottom: 1lh; /* Her zaman line-height kadar */
}