BerandaAlat DesainKalkulator Tinggi Baris

Kalkulator Tinggi Baris

Kalkulator Line Height merekomendasikan line height, letter spacing, dan lebar paragraf maksimum yang ideal untuk ukuran font dan kebutuhan tertentu — teks isi, judul, label UI, atau huruf display — lengkap dengan pratinjau langsung dan output CSS.

Tentang alat ini

Kalkulator Line Height merekomendasikan line height, letter spacing, dan lebar paragraf maksimum yang ideal untuk ukuran font dan kebutuhan tertentu — teks isi, judul, label UI, atau huruf display — lengkap dengan pratinjau langsung dan output CSS.

Cara menggunakan

  1. Masukkan ukuran font dalam piksel.
  2. Pilih gaya: teks isi, judul, label UI, atau display.
  3. Lihat paragraf pratinjau dan empat nilai yang direkomendasikan.
  4. Klik Copy CSS untuk memasukkan nilainya ke stylesheet Anda.

Perlu diketahui

  • Teks isi nyaman dibaca dengan line height sekitar 1.5–1.6 kali ukuran font.
  • Judul besar dan huruf display terlihat lebih baik dengan line height yang lebih rapat, kira-kira 1.05–1.2.
  • Panjang baris yang mudah dibaca kira-kira 45–75 karakter per baris.
  • WCAG 1.4.12 mensyaratkan konten tetap berfungsi saat pengguna mengatur line height ke 1.5 dan letter spacing ke 0.12 em.
  • Nilai line-height tanpa satuan (misalnya 1.6) menyesuaikan dengan ukuran font masing-masing elemen.

Berjalan sepenuhnya di browser Anda — apa pun yang Anda masukkan tidak diunggah atau disimpan.

Pertanyaan umum

Berapa line height yang baik untuk teks isi?

Sekitar 1.5 hingga 1.6 kali ukuran font. Untuk teks 16 px, itu kira-kira 24–26 px.

Apakah judul sebaiknya memakai line height lebih kecil?

Ya. Teks besar membutuhkan jarak relatif yang lebih sedikit, jadi judul biasanya memakai 1.1–1.3 dan teks display bahkan lebih rapat.

Berapa panjang baris ideal untuk membaca?

Kira-kira 45–75 karakter per baris, dengan sekitar 65 yang sering disebut ideal untuk teks isi.

Apakah sebaiknya memakai line-height tanpa satuan di CSS?

Biasanya ya. Nilai tanpa satuan seperti 1.6 diwariskan sebagai rasio, sehingga elemen anak dengan ukuran font berbeda tetap memiliki jarak yang proporsional.