Kalkulator Tinggi Baris

• Perhitungan Tinggi Baris yang Presisi: dapatkan nilai tepat dalam format px, tanpa satuan, persen, dan em dari ukuran font apa pun. Kalkulator kami memakai rumus tipografi standar sehingga ritme vertikal Anda akurat secara matematis dan konsisten secara visual di seluruh desain.
• Pratinjau Langsung Real-Time: lihat efek setiap penyesuaian seketika lewat pratinjau teks langsung yang dirender dalam keluarga dan ukuran font pilihan Anda. Ketik teks contoh sendiri untuk melihat persis bagaimana konten Anda tampil dengan tinggi baris hasil perhitungan.
• Rekomendasi Cerdas per Ukuran Font: alat kami memberi rekomendasi tinggi baris yang disesuaikan dengan ukuran font - rasio lebih rapat untuk judul dan teks besar, spasi lebih lega untuk teks isi. Ikuti rentang yang disarankan untuk keterbacaan optimal dan tipografi profesional.
• 100% Privat & Gratis: semua perhitungan terjadi lokal di browser Anda. Teks Anda tidak pernah meninggalkan perangkat. Tanpa pendaftaran, unggahan, atau batas tersembunyi - hanya perhitungan tinggi baris yang cepat dan akurat untuk proyek apa pun.

• Desain & Pengembangan Web: tetapkan nilai line-height presisi di CSS untuk menciptakan ritme vertikal konsisten di seluruh situs. Gunakan nilai tanpa satuan untuk responsivitas dan kemudahan pemeliharaan maksimal di stylesheet Anda.
• Konten & Tata Letak Blog: optimalkan keterbacaan konten panjang dengan menghitung tinggi baris ideal untuk teks isi. Tinggi baris yang dipilih baik antara 1,4 dan 1,8 sangat meningkatkan pemahaman bacaan dan mengurangi kelelahan mata.
• Tipografi Responsif: saat memakai tipografi fluida dengan clamp() atau satuan viewport, gunakan kalkulator kami untuk menentukan tinggi baris yang tepat di setiap breakpoint. Pastikan teks tetap terbaca di semua ukuran layar dan perangkat.
• Token Design System: hasilkan token tinggi baris yang konsisten untuk design system Anda. Tetapkan skala (rapat, normal, santai, lega) dan pakai keluaran CSS langsung di pustaka komponen atau konfigurasi Tailwind Anda.
• Kepatuhan Aksesibilitas: WCAG 2.1 merekomendasikan tinggi baris minimal 1,5 untuk teks isi. Gunakan kalkulator kami untuk memastikan tipografi Anda memenuhi standar aksesibilitas sekaligus menjaga keharmonisan visual dan niat desain.
• Prototipe UI/UX: bereksperimen cepat dengan berbagai tinggi baris selama fase desain. Pratinjau bagaimana tipografi akan dirender sebelum menulis kode, memastikan keselarasan piksel sempurna dengan mockup desain Anda.

Tinggi baris, dalam tipografi cetak tradisional disebut leading (dari potongan tipis timah yang ditempatkan di antara baris huruf logam), adalah jarak vertikal antara garis dasar baris teks yang berurutan. Di CSS, line-height mengatur ruang di atas dan di bawah setiap baris teks, menjadikannya salah satu properti terpenting untuk keterbacaan dan ritme vertikal. Tinggi baris yang dipilih baik mengubah teks yang padat dan tidak nyaman menjadi pengalaman membaca yang mulus dan mengundang.

Berbeda dari ukuran font, yang diukur dari ascender tertinggi hingga descender terendah, tinggi baris menentukan seluruh tinggi kotak baris, termasuk glif font dan spasi di atas dan di bawahnya. Selisih antara tinggi baris dan ukuran font dibagi rata di atas bagian atas teks dan di bawah bagian bawahnya, menciptakan jarak antarbaris yang konsisten.

Kalkulator kami memakai rumus sederhana: tinggi baris (px) = ukuran font (px) × rasio . Saat Anda menyesuaikan ukuran font atau penggeser rasio, alat ini langsung menghitung ulang keempat format keluaran - tanpa satuan, piksel, persen, dan em - sekaligus memperlihatkan hubungan di antara semuanya.

1. Masukkan ukuran font - pilih dari preset umum (8 px hingga 72 px) atau gunakan penggeser untuk kontrol presisi. Ukuran font menentukan ukuran dasar semua perhitungan tinggi baris.
2. Pilih keluarga font - pilih dari font web populer. Font berbeda memiliki tinggi x dan rasio ascender/descender berbeda, yang memengaruhi tampilan visual tinggi baris bahkan pada nilai numerik yang sama.
3. Sesuaikan rasio tinggi baris - gunakan penggeser atau klik preset (Rapat, Normal, Santai, dll.). Alat menampilkan keempat format keluaran sekaligus dan memperbarui pratinjau langsung secara real-time.

• Tanpa Satuan (disarankan): rasio tinggi baris terhadap ukuran font (misalnya 1,5). Ini praktik terbaik di CSS karena diwarisi dengan bersih dari elemen induk dan menyesuaikan secara proporsional saat ukuran font berubah. Selalu utamakan line-height tanpa satuan di stylesheet Anda.
• Piksel (px): tinggi baris absolut dalam piksel (misalnya 24px untuk teks 16px pada rasio 1,5). Berguna saat butuh penyelarasan vertikal presisi dengan elemen berukuran tetap, tetapi hindari untuk teks isi karena tidak menyesuaikan preferensi font pengguna.
• Persen (%): tinggi baris dinyatakan sebagai persentase ukuran font (misalnya 150%). Berperilaku mirip nilai tanpa satuan tetapi bisa menghasilkan pewarisan tak terduga pada elemen bersarang.
• Em: relatif terhadap ukuran font elemen (misalnya 1.5em). Mirip persen tetapi dinyatakan sebagai pengali. Nilai em menumpuk melalui pewarisan, yang dapat menyebabkan masalah spasi pada komponen bersarang dalam.

Privasi Anda adalah prioritas kami. Kalkulator Tinggi Baris memproses semuanya lokal di browser Anda memakai JavaScript sisi klien. Tidak ada data yang dikirim ke server mana pun - teks, pilihan font, dan pengaturan Anda tidak pernah meninggalkan perangkat. Alat ini sepenuhnya gratis tanpa pendaftaran, tanpa batas ukuran berkas, dan tanpa batasan tersembunyi. Gunakan dengan tenang untuk proyek pribadi, situs komersial, atau pekerjaan klien.