Tutorial Belajar CSS: Cara Mengatur Lebar (spasi) Antar Huruf dan Kata Teks HTML

Cara lain untuk menformat dan mengatur tampilan teks adalah dengan mengatur jarak spasi antar huruf dan antar kata. Dalam tutorial CSS kali ini kita akan membahas Cara Mengatur Lebar (spasi) Antar Huruf dan Kata. Properti CSS yang akan kita gunakan yaitu letter-spacing dan word-spacing.

---

Cara Mengatur Lebar Spasi Antar Huruf dengan CSS

Sesuai dengan namanya, properti CSS letter-spacing digunakan untuk mengatur spasi atau jarak antar huruf. Nilai yang digunakan bisa berupa pixel, persen, em atau satuan ukuran text lainnya (pernah kita bahas dalam Mengenal Satuan Nilai (Value) dalam CSS).

Jika kita memberikan nilai positif untuk letter-spacing, spasi antar karakter akan semakin menjauh. Untuk membuat spasi antar karakter semakin berdekatan, gunakan nilai negatif.

Berikut adalah contoh penulisan properti letter-spacing:

h1 {
   letter-spacing: 2px;
}
h2 {
   letter-spacing: -3px;
}

Nilai letter-spacing: normal bisa digunakan untuk membuat spasi antar karakter kembali ke nilai awal (nilai default).

---

Cara Mengatur Lebar (spasi) Antar Kata

Selain pengaturan spasi antar karakter, CSS juga menyediakan cara untuk mengatur jarak atau spasi antar kata dengan properti word-spacing. Sama seperti letter-spacing, kita bisa menggunakan nilai positif atau negatif untuk memperlebar atau memperkecil spasi antara sebuah kata dengan kata lainnya.

Berikut adalah contoh penulisan properti word-spacing:

h1 {
   word-spacing: 20px;
}
h2 {
   word-spacing: -30px;
}

Nilai word-spacing: normal bisa digunakan untuk membuat spasi antar kata kembali ke nilai awal (nilai default).

---

Tutorial Cara Mengatur Lebar Antar Huruf dan Kata

Sebagai tutorial, berikut adalah contoh kode HTML dan CSS untuk penggunaan letter-spacing dan word-spacing:

   
Belajar CSS: letter-spacing dan word-spacing
   

   Sebuah kalimat dengan nilai letter-spacing negatif : -5px
   
   

   Sebuah kalimat dengan nilai letter-spacing negatif: -1px
   
   

   Sebuah kalimat dengan nilai letter-spacing positif: 1px
   
   

   Sebuah kalimat dengan nilai letter-spacing positif: 5px
   
  
   

   Sebuah kalimat dengan nilai word-spacing negatif: -5px
   
   

   Sebuah kalimat dengan nilai word-spacing negatif: -1px
   
   

   Sebuah kalimat dengan nilai word-spacing positif: 1px
   
   

   Sebuah kalimat dengan nilai word-spacing positif: 5px
   

Pehatikan contoh kita diatas, efek letter-spacing dan word-spacing yang terlalu berdekatan atau terlalu jauh akan membuat tulisan susah dibaca. Namun dengan mengkombinasikan efek ini dengan berbagai efek teks CSS lain, kita bisa membuat tampilan text yang lebih beragam.

---

eBook CSS Uncover Duniailkom

Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

Sumber wk.com