Letter-Spacing dan Word-Spacing

Dua teks dengan font dan ukuran yang sama bisa terlihat berbeda hanya karena jarak antarhurufnya. Heading besar sering terasa renggang dengan spasi bawaan, sedangkan label berhuruf kapital justru menyesakkan karena huruf kapital itu sendiri sudah lebar. CSS menyediakan dua property khusus untuk penyetelan ini: letter-spacing mengatur jarak antarhuruf dan word-spacing mengatur jarak antarkata. Pada chapter ini kita mempelajari kapan menambah, kapan mengurangi, mengapa satuan em paling cocok, dan di titik mana penyetelan mulai mengganggu keterbacaan.

Letter-Spacing: Jarak Antarhuruf #

Property letter-spacing menambahkan atau mengurangi ruang di belakang setiap karakter. Nilainya berupa panjang — em, rem, px — atau kata kunci normal sebagai nilai default. Nilai negatif diperbolehkan dan justru menjadi salah satu teknik tipografi yang paling sering dipakai:

.judul-hero {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.label-atas {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
}

Mari kita telaah penyetelannya:

1. letter-spacing: -0.02em pada .judul-hero — nilai negatif menggeser setiap huruf mendekati huruf sebelumnya sebesar 2% dari ukuran huruf. Pada heading besar, spasi bawaan font terasa berlebihan karena bentuk hurufnya sudah lebar.
2. text-transform: uppercase mengubah teks menjadi huruf kapital — dipelajari pada chapter sebelumnya dan menjadi pasangan alami letter-spacing positif.
3. letter-spacing: 0.08em pada .label-atas — huruf kapital yang berdempetan sulit dibedakan satu sama lain; ruang 8% membuka jaraknya.
4. color: #6b7280 menandai label sebagai teks pendukung, bukan isi utama.

Mengapa Satuan em Paling Tepat #

Nilai em pada letter-spacing dihitung dari font-size elemen itu sendiri, sehingga satu penyetelan ikut menskala pada semua ukuran:

.judul-sedang {
  font-size: 24px;
  letter-spacing: -0.02em; /* sekitar 0,48px per huruf */
}

.judul-besar {
  font-size: 48px;
  letter-spacing: -0.02em; /* sekitar 0,96px per huruf */
}

Bila ditulis -1px, judul sedang justru terlalu rapat sementara judul besar belum banyak berubah — karena itu pakai em untuk letter-spacing dan simpan px untuk penyetelan mikro pada satu elemen spesifik.

Batas Keterbacaan #

Menyetel spasi bukan kontes menuju nilai paling ekstrem. Kedua arah punya batas:

Angka pragmatis yang aman dipakai sebagai titik awal:

Aturan paling penting ada di baris pertama tabel: paragraf isi dibiarkan normal. Font dirancang dengan jarak antarhuruf yang sudah dihitung untuk ukuran baca; campur tangan di sana menurunkan keterbacaan, bukan meningkatkannya.

Satu detail mekanis yang perlu diwaspadai: ruang letter-spacing ditambahkan di belakang setiap karakter, termasuk karakter terakhir. Akibatnya teks yang diberi text-align: center atau right tampak bergeser sedikit — sebesar satu spasi — dari titik jajarannya. Pergeseran sekecil itu biasanya bisa ditoleransi, tetapi pada label pendek yang dijajarkan presisi ia patut dihitung.

Word-Spacing: Jarak Antarkata #

Property word-spacing bekerja dengan pola pikir yang sama tetapi sasarannya berbeda: menyetel lebar pemisah kata (karakter spasi), bukan jarak antarhuruf. Property ini jauh lebih jarang dibutuhkan; biasanya hanya untuk mengencangkan sedikit satu blok teks display atau judul multi kata:

.kutipan-display {
  font-size: 30px;
  font-weight: 600;
  word-spacing: -0.06em;
}

Nilai negatif terlalu besar membuat kata-kata berhimpitan — batas aman biasanya tidak lebih jauh dari -0.1em.

Demo berikut merangkum ketiga penyetelan itu:

Kesalahan Umum #

Ringkasan #

letter-spacing mengatur jarak antarhuruf — negatif untuk heading besar, positif untuk label uppercase — dan word-spacing mengatur jarak antarkata; satuan em membuat penyetelan ikut menskala bersama ukuran huruf. Keduanya bekerja di atas keputusan spasi yang sudah diambil browser. Chapter berikutnya turun satu lapis lagi: bagaimana browser memperlakukan spasi, tab, dan pindah baris yang ada di kode HTML kita lewat property white-space.