Çalıştırılabilir CSS Dokümanları: Satır yüksekliği

Q: line-height birimli mi yazılmalı?

Genellikle hayır. 1.5 gibi birimsiz bir değer her elementin kendi yazı boyutuyla çarpılır, bu yüzden boyutu farklı olan çocuklarda da orantılı kalır. Birimli bir değer bir kez hesaplanır ve sabit bir uzunluk olarak miras alınır.

line-height ne yapar

line-height her metin satırının yüksekliğini ayarlar. Bu yükseklik ile fontun kendisinin ihtiyaç duyduğu yükseklik arasındaki fark ikiye bölünür ve harflerin üstüne ve altına eklenir; satırlar arasındaki boşluğu böyle kontrol edersin.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; color: #111827; }
    .row { display: flex; gap: 16px; align-items: flex-start; }
    p { margin: 0; width: 200px; padding: 8px; background: #e5e7eb; }
    .tight { line-height: 1; }
    .comfy { line-height: 1.5; }
    .double { line-height: 2; }
  </style>
</head>
<body>
  <div class="row">
    <p class="tight">line-height: 1. Lines touch and long text is hard to follow.</p>
    <p class="comfy">line-height: 1.5. Comfortable spacing for a paragraph.</p>
    <p class="double">line-height: 2. Double spacing, like a draft.</p>
  </div>
</body>
</html>

Üç paragrafın hepsi 16px bir font kullanıyor. Satırlar 16px, 24px ve 32px yüksekliğinde.

Değerler: birimsiz, uzunluk, yüzde, normal

Değer	Örnek	16px metin için satır yüksekliği	Çocuklara nasıl miras geçer
Sayı	`1.5`	24px	Sayının kendisi (1.5), her element için yeniden hesaplanır
Uzunluk	`24px`, `1.5em`, `1.5rem`	24px	Hesaplanmış uzunluk (24px)
Yüzde	`150%`	24px	Hesaplanmış uzunluk (24px)
`normal`	`normal`	Fonttan, çoğunlukla 1,2 civarı	`normal`

İlk ve ikinci satır tek bir elementte aynı görünür. Fark yalnızca bir çocuğun yazı boyutu farklı olduğunda ortaya çıkar; bir sonraki bölüm bunu anlatıyor.

Birimsiz değer neden doğru varsayılandır

1.5em ya da 150% bir satır yüksekliği ebeveynde piksele çevrilir ve çocuklar o pikselleri miras alır. Daha büyük yazılı bir çocuk bu durumda harflerinden kısa satırlar alır. Birimsiz bir 1.5 ise sayının kendisi olarak miras alınır ve her çocuğun kendi yazı boyutuyla çarpılır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unitless vs em</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; color: #111827; }
    .box { width: 220px; padding: 8px; margin-bottom: 12px; background: #e5e7eb; }
    .em { line-height: 1.5em; }       /* 21px, inherited as 21px */
    .unitless { line-height: 1.5; }   /* inherited as 1.5 */
    h2 { font-size: 32px; margin: 0; }
  </style>
</head>
<body>
  <div class="box em">
    <!-- line-height: 1.5em -->
    <h2 id="em-h">A heading that wraps</h2>
  </div>
  <div class="box unitless">
    <h2 id="num-h">A heading that wraps</h2>
  </div>
  <p id="out"></p>
  <script>
    const lh = (id) => getComputedStyle(document.getElementById(id)).lineHeight;
    document.getElementById('out').textContent =
      'em box heading: ' + lh('em-h') + ', unitless box heading: ' + lh('num-h');
  </script>
</body>
</html>

İki başlık da iki satıra kırılıyor. İlki 32px harfler için 21px satırlar miras alıyor, bu yüzden satırları çakışıyor. İkincisi 32 × 1,5 = 48px satırlar alıyor. line-height'ı body üzerinde bir kez sayı olarak ayarla, çoğu sayfanın ona bir daha ihtiyacı olmaz.

Değerleri kendin dene

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { width: 320px; margin-top: 12px; padding: 8px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label>line-height: <input id="val" value="1.5" size="12"></label>
  <p id="sample">Line height changes the space between the lines of this paragraph. Type a number, a length or a percentage and watch the gaps change.</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.lineHeight = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).lineHeight;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

1, 2, 30px, 200% ve normal dene. Chrome normal'ı piksel değeri olarak değil kelimenin kendisi olarak bildirir, çünkü boyutu fonttan gelir.

Okunaklı metin için iyi değerler

Gövde metni: 1,4 ile 1,6. Uzun satırlar, gözün bir sonraki satırın başını bulabilmesi için daha fazla satır yüksekliği ister.
Başlıklar: 1,1 ile 1,3. 1,5 aralıklı büyük metin tek bir başlık değil ayrı satırlar gibi görünür.
Butonlar ve tek satırlık etiketler: 1 ile 1,25, yükseklik için padding ile birlikte.

Erişilebilirlik için WCAG başarı ölçütü 1.4.12, okuyucu satır yüksekliğini yazı boyutunun 1,5 katına çıkardığında sayfanın hâlâ çalışmasını ister, bu yüzden metni kırpacak sabit yükseklikli metin kutularından kaçın.

Tek satırlık metni dikeyde ortalamak

Bir kutu tam olarak tek satır içeriyorsa kutu yüksekliğine eşit bir line-height, metni dikey ortasına yerleştirir, çünkü fazla boşluk üste ve alta eşit bölünür:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Single line centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      height: 40px;
      line-height: 40px;
      padding: 0 16px;
      width: max-content;
      background: #2563eb;
      color: white;
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div class="badge" id="badge">One line, centered</div>
</body>
</html>

Metin iki satıra kırıldığı anda bozulur, çünkü o zaman her satır 40px yüksekliğinde olur. Kırılabilecek her şey için bunun yerine div ortalama sayfasında gösterildiği gibi flexbox ile ortala.

font kısa yazımı

font kısa yazımı, boyutu ve satır yüksekliğini bir eğik çizgiyle birlikte ayarlar:

body {
  font: 16px/1.5 system-ui, sans-serif; /* size 16px, line-height 1.5 */
}

Kısa yazım, bahsetmediği her font özelliğini sıfırlar (eğik çizgili kısmı yazmazsan line-height'ı da normal'a), bu yüzden onu tekil font-* kurallarından önce yaz.

Sık yapılan hatalar

Bir kapsayıcıda em ya da % kullanmak. Çocuklar sabit bir uzunluk miras alır. Birimsiz bir sayı kullan.
Bir metin kutusunda sabit height. Metin kırıldığında ya da okuyucu aralığı büyüttüğünde taşar. Yüksekliği içeriğin belirlemesine izin ver.
Çok sıkışık gövde metni. line-height: 1 paragrafları zor okunur yapar. 1,5'ten başla.
line-height'ın paragraflar arasına boşluk eklemesini beklemek. Bu, paragraflardaki margin'in işidir.
normal'a güvenmek. Fonttan fonta değişir, bu yüzden font değiştiğinde düzen kayar.

Sıkça Sorulan Sorular

CSS'te line-height ne işe yarar?

Her metin satır kutusunun yüksekliğini ayarlar. Fontun kendi yüksekliğinin ötesindeki fazla boşluk harflerin üstüne ve altına eşit olarak bölünür, bu yüzden daha büyük bir line-height satırlar arasında daha fazla boşluk demektir.

line-height birimli mi yazılmalı?

Genellikle hayır. 1.5 gibi birimsiz bir değer her elementin kendi yazı boyutuyla çarpılır, bu yüzden boyutu farklı olan çocuklarda da orantılı kalır. Birimli bir değer bir kez hesaplanır ve sabit bir uzunluk olarak miras alınır.

Gövde metni için iyi bir line-height nedir?

Paragraflar için 1,4 ile 1,6 arası, büyük başlıklar için 1,1 ile 1,3 civarı. WCAG'ın AAA yönergesi paragraflarda en az 1,5 ister.

line-height: normal nedir?

Varsayılan değerdir. Tarayıcı fontun kendi ölçülerinden gelen bir değer kullanır; bu genellikle 1,2 civarındadır ama her fontta farklıdır, bu yüzden fontlar arasında öngörülebilir değildir.

HTML'de satır aralığı nasıl değiştirilir?

HTML'de satır aralığı özniteliği yoktur. CSS özelliğini kullan, örneğin çift satır aralığı için <p style="line-height: 2;">.

İlgili kavramlar