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

Posted on

Cara lain bagi menformat dan mengatur tampilan teks ialah dengan mengatur jarak spasi antar huruf dan antar kata. Pada panduan 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 bagi mengatur spasi atau jarak antar huruf. Nilai yang digunakan dapat berupa pixel, persen, em atau satuan ukuran text lainnya (pernah kita bahas pada Mengenal Satuan Nilai (Value) dalam CSS).

Jikalau kita memberikan nilai positif bagi letter-spacing, spasi antar karakter akan semakin menjauh. Bagi merancang spasi antar karakter semakin berdekatan, gunakan nilai negatif.

Berikut ialah contoh penulisan properti letter-spacing:

Nilai letter-spacing: normal dapat digunakan bagi merancang spasi antar karakter kembali ke nilai awal (nilai default).


Cara Mengatur Lebar (spasi) Antar Kata

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

Berikut ialah contoh penulisan properti word-spacing:

Nilai word-spacing: normal dapat digunakan bagi merancang spasi antar kata kembali ke nilai awal (nilai default).


Panduan Cara Mengatur Lebar Antar Huruf dan Kata

Selaku panduan, berikut ialah contoh kode HTML dan CSS bagi pemakaian letter-spacing dan word-spacing:

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


eBook CSS Uncover Duniailkom

Jikalau sahabat ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari mendasar hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/