Lompat ke konten utama
←

Dasar Desain Visual

Pelajaran 10 dari 16

Tipografi

Jarak baris, kerning, tracking, dan panjang baris

Setelah pelajaran ini kamu bisa menghitung jarak baris dan spasi huruf dari ukuran huruf, membedakan kerning dan tracking, serta menerapkan batas panjang baris WCAG.

±13 menitDiperiksa 27 Sep 2026

Materi

Jarak baris atau leading ditulis di CSS sebagai line-height. MDN menjelaskan bahwa nilai tanpa satuan dikalikan dengan ukuran huruf elemen itu, dan bentuk inilah yang disarankan karena tidak menimbulkan hasil tak terduga saat diwariskan. Nilai normal bergantung pada peramban, kira-kira 1,2. Jadi teks 16px dengan line-height 1,5 memiliki tinggi baris 24px.

Kerning dan tracking sama-sama mengatur jarak antarhuruf, tetapi cakupannya berbeda. Kerning, menurut MDN, memakai data jarak yang tersimpan di fon untuk merapatkan kombinasi huruf tertentu, misalnya pasangan A dan V. Tracking atau letter-spacing menambah jarak yang sama di antara semua huruf. WCAG 2.2 menulis keduanya sebagai istilah terpisah: SC 1.4.12 menyebut letter spacing (tracking).

Dua kriteria WCAG memberi angka. SC 1.4.8 tingkat AAA meminta blok teks dapat diatur supaya lebarnya tidak lebih dari 80 karakter, tidak rata kiri-kanan, dan jarak barisnya sekurangnya satu setengah kali. SC 1.4.12 tingkat AA meminta isi tidak rusak ketika pengguna mengatur tinggi baris 1,5 kali ukuran huruf, jarak setelah paragraf 2 kali, spasi huruf 0,12 kali, dan spasi kata 0,16 kali ukuran huruf.

Teks 20px menurut angka SC 1.4.12:
tinggi baris    1,5  × 20 = 30px
jarak paragraf  2    × 20 = 40px
spasi huruf     0,12 × 20 = 2,4px
spasi kata      0,16 × 20 = 3,2px

Latihan

0/3 lulus

Jawaban diperiksa di server. Lulus berarti kamu memahami contohnya, bukan penilaian seluruh pekerjaanmu.

Latihan 1 dari 3

Teks isi brosur digital berukuran 18px dengan line-height 1,5. Berapa px tinggi tiap barisnya?

Latihan 2 dari 3

Teks berukuran 25px diuji dengan angka SC 1.4.12. Berapa px spasi hurufnya?

Latihan 3 dari 3

Desainer menambah jarak yang sama di antara semua huruf pada judul “PROMO”. Pengaturan apa itu?

Pilih satu jawaban

Catatanmu

Memuat catatan…

tersimpan otomatis, ikut tercetak · 0/4.000

Luluskan semua latihan dulu untuk menandai pelajaran ini selesai.

Lanjutkan ke