CSS Line Height: Nilai Tanpa Satuan, px, em dan Contoh

Apa fungsi line-height

line-height mengatur tinggi setiap baris teks. Selisih antara tinggi itu dan tinggi yang dibutuhkan font itu sendiri dibagi dua lalu ditambahkan di atas dan di bawah huruf. Jadi, dengan property inilah kamu mengatur jarak antar baris.

<!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>

Ketiga paragraf memakai font 16px. Tinggi barisnya 16px, 24px, dan 32px.

Nilai: tanpa satuan, panjang, persentase, normal

Baris pertama dan kedua terlihat sama pada satu elemen. Perbedaannya baru terlihat kalau sebuah child punya ukuran font yang berbeda, seperti di bagian berikutnya.

Kenapa tanpa satuan adalah default yang tepat

Line height 1.5em atau 150% diubah menjadi piksel di elemen induk, lalu child mewarisi piksel itu. Akibatnya, child dengan font yang lebih besar mendapat baris yang lebih pendek dari hurufnya. Angka 1.5 tanpa satuan diwariskan sebagai angka itu sendiri, lalu dikalikan dengan ukuran font masing-masing child.

<!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>

Kedua judul terbungkus menjadi dua baris. Judul pertama mewarisi baris 21px untuk huruf 32px, jadi barisnya saling tumpang tindih. Judul kedua mendapat baris 32 × 1,5 = 48px. Tetapkan line-height satu kali di body sebagai angka, dan sebagian besar halaman tidak perlu mengaturnya lagi.

Coba sendiri nilainya

<!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>

Coba 1, 2, 30px, 200%, dan normal. Chrome melaporkan normal sebagai kata itu sendiri, bukan nilai piksel, karena ukurannya berasal dari font.

Nilai yang bagus untuk teks yang mudah dibaca

• Teks paragraf: 1,4 sampai 1,6. Baris yang lebih panjang butuh line height yang lebih besar agar mata bisa menemukan awal baris berikutnya.
• Judul: 1,1 sampai 1,3. Teks besar dengan jarak 1,5 terlihat seperti baris-baris terpisah, bukan satu judul.
• Tombol dan label satu baris: 1 sampai 1,25, dengan padding untuk mengatur tingginya.

Untuk aksesibilitas, kriteria keberhasilan WCAG 1.4.12 mensyaratkan halaman tetap berfungsi saat pembaca mengatur line height menjadi 1,5 kali ukuran font. Jadi, hindari tinggi tetap pada kotak teks yang bisa memotong teksnya.

Menengahkan satu baris teks secara vertikal

Kalau sebuah kotak hanya berisi tepat satu baris, line-height yang sama dengan tinggi kotak akan menempatkan teks di tengah secara vertikal, karena ruang tambahannya dibagi rata di atas dan di bawah:

<!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>

Cara ini gagal begitu teksnya terbungkus menjadi dua baris, karena setiap baris jadi setinggi 40px. Untuk apa pun yang bisa terbungkus, tengahkan dengan flexbox, seperti yang ditunjukkan di halaman center a div.

Shorthand font

Shorthand font mengatur ukuran dan line height sekaligus dengan garis miring:

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

Shorthand ini me-reset semua property font yang tidak disebutkan (termasuk line-height menjadi normal kalau kamu tidak menulis bagian setelah garis miring). Jadi, tulis shorthand ini sebelum aturan font-* yang terpisah.

Kesalahan yang sering terjadi

• Memakai em atau % di container. Child mewarisi panjang yang tetap. Pakai angka tanpa satuan.
• height tetap pada kotak teks. Saat teks terbungkus atau pembaca memperbesar jarak, teksnya meluap. Biarkan isinya yang menentukan tinggi.
• Teks paragraf terlalu rapat. line-height: 1 membuat paragraf sulit dibaca. Mulailah dari 1,5.
• Mengira line-height menambah jarak antar paragraf. Itu tugas margin pada paragraf.
• Mengandalkan normal. Nilainya berubah dari font ke font, jadi layout bergeser saat font diganti.