Dua properti spasi ini bekerja pada level terhalus tipografi: letter-spacing menambah (atau mengurangi) jarak antarhuruf, sedangkan word-spacing mengatur jarak antarkata. Keduanya jarang menjadi bintang utama desain, tetapi muncul di mana-mana — judul yang hurufnya diberi ruang agar terasa lega, label huruf kapital yang diberi jarak agar mudah dibaca, hingga perbaikan kecil pada font yang terlalu rapat. Nilai negatif juga sah, dan inilah cara mengetatkan spasi yang terlalu renggang.

letter-spacing: Jarak Antarhuruf #

Nilai letter-spacing ditambahkan ke spasi bawaan setiap pasangan huruf. Nilai positif melebarkan, nilai negatif mengetatkan, dan normal mengembalikan ke spasi bawaan font. Karena efeknya menumpuk sepanjang teks, perubahan kecil pun terasa: pada teks isi, penyesuaian sebesar 1px dapat mengubah rasa tipografinya.

Satuan yang paling sering dipakai adalah em, karena em dikali font-size elemen itu sendiri — 0.1em pada font 16px menghasilkan 1.6px, dan angka yang sama pada font 32px menjadi 3.2px. Dengan kata lain, satu deklarasi em menjaga proporsi spasi ketika komponen dipakai di berbagai ukuran, mirip logika line-height unitless pada Chapter sebelumnya.

Sebelum masuk ke pola praktis, ada satu perilaku teknis yang layak diketahui: browser menambahkan spasi setelah setiap huruf, termasuk huruf terakhir. Pada teks yang diratakan ke tengah, ruang tambahan ini membuat baris terasa sedikit bergeser ke kanan; pergeseran setengah nilai letter-spacing memang nyaris tak terlihat, tetapi bila presisi penting, penyesuaian margin-inline-end negatif sebesar nilai spacing-nya bisa menetralkan efek tersebut. Properti ini juga diwariskan, sehingga menyetelnya pada elemen induk berlaku untuk seluruh teks turunannya kecuali ditinggalkan ulang.

Pola pemakaian yang umum adalah memberi ruang pada label huruf kapital. Huruf kapital semua tidak memiliki pangkal naik dan turun, sehingga tanpa jarak tambahan huruf-hurufnya sulit dibedakan satu sama lain. Praktiknya seperti ini:

css 
.label-kartu {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
}
.judul-padat {
  letter-spacing: -0.02em;
  font-size: 40px;
}

Mari kita telaah baris demi baris:

  1. Baris 2 (text-transform: uppercase;): teks label ditampilkan kapital tanpa mengubah teks HTML-nya.
  2. Baris 3 (letter-spacing: 0.12em;): setiap huruf diberi ruang tambahan 12% dari font-size 12px, yaitu 1.44px per huruf.
  3. Baris 6 (.judul-padat): judul besar diberi nilai negatif kecil agar terasa kompak — pola yang lazim pada judul display berukuran besar.

word-spacing: Jarak Antarkata #

word-spacing bekerja mirip letter-spacing, tetapi menargetkan karakter spasi antarkata. Nilai default-nya adalah normal, yang mengikuti lebar spasi dari font yang dipakai. Properti ini jarang diubah pada teks biasa, namun berguna ketika text-align: justify menghasilkan celah antarkata yang tidak seimbang, atau ketika desain membutuhkan kata-kata yang benar-benar terpisah jelas pada tampilan tertentu.

Berbeda dari letter-spacing yang menambah jarak setiap pasangan huruf, word-spacing hanya menyentuh titik pemisah kata, sehingga mengubahnya tidak menggeser bentuk kata itu sendiri. Keduanya dapat digabung dengan bebas, dan masing-masing diwariskan ke elemen anak seperti properti teks lain.

Kedua properti ini juga saling melengkapi pada komponen kecil. Label tombol yang berjarak 0.08em dan jarak kata 0.2em, misalnya, tetap terbaca rapi meskipun tombolnya ditampilkan dalam tiga ukuran berbeda — asalkan nilai em dipilih alih-alih px, skala spasi ikut mengikuti perubahan ukuran tombol. Ketika satu angka perlu diuji cepat, ganti sementara ke nilai ekstrem seperti letter-spacing: 8px; posisi tiap huruf akan terlihat jelas, lalu kembalikan ke nilai finalnya.

Hasil di Browser:

text 
Baris demo tampil dengan lima variasi spasi: label kapital berjarak
1.6px antarhuruf, teks berjarak tetap 2px antarhuruf, teks dengan
spasi huruf bawaan font, teks dengan jarak antarkata 4px, dan teks
dengan jarak kata bawaan font. Nilai computed yang dikunci harness
tercatat "1.6px" (dari 0.1em), "2px", "normal", dan "4px".

Perhatikan pada demo bahwa 0.1em dihitung terhadap font-size elemen masing-masing — baris yang fontnya 16px melaporkan 1.6px. Untuk latihan selanjutnya, kita naik satu level besar: membawa font pilihan sendiri ke halaman melalui Web Fonts .