8 Mei 2014

Mengatur Jarak Antarhuruf dengan CSS

Sudah lama sekali saya tidak membahas mengenai CSS di Iskael. Kali ini saya membahas CSS tentang bagaimana cara mengatur jarak antarhuruf dengan CSS. Perlu diketahui, mengatur jarak antarhuruf dalam dunia tipografi biasanya dikenal dengan istilah kerning.

Normalnya, setiap font mempunyai kerning yang berbeda-beda. Kadang kita membutuhkan jarak antarhuruf yang lebih besar maupun lebih kecil, sesuai dengan kebutuhan. Dengan menggunakan CSS, masalah tersebut bisa teratasi. Penasaran bukan bagaimana caranya? Berikut ini pembahasannya.

Mengatur Jarak Antarhuruf dengan CSS

Mengatur jarak antarhuruf pada CSS menggunakan properti "letter-spacing". Nilai dari properti ini menentukan jarak antarhuruf. Berikut ini adalah demo penggunaan letter-spacing. Kamu bisa melihat kode CSS dengan mengeklik tab "CSS" (di sebelah kiri tab Result).

See the Pen wGaLx by Iskandar Dzulkarnain (@iskael) on CodePen.

Dalam contoh di atas dapat diketahui bahwa nilai dari properti letter-spacing bisa bernilai negatif. Penggunaan nilai negatif ini berfungsi bagi font yang mempunyai kerning terlalu lebar sehingga harus dipersempit.

Saya yakin kamu pun bisa menggunakan fitur CSS ini dengan mudah. Ada yang mau didiskusikan mengenai letter-spacing? Kamu bisa menuliskannya di kotak komentar :)

2 komentar:

  1. kalau yg seperti gambar itu gimana john? cuma 1 huruf yg berjarak

    BalasHapus
    Balasan
    1. bisa, pake pseudo selektor :first-letter

      Hapus

Populer Terbaru Komentar

Entri Terbaru

Komentar Terbaru

Creative Commons License
All contents by Iskael is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Based on a work at Iskael.
Permissions beyond the scope of this license may be available at Iskael.
© 2013 Belajar Ngeblog bersama Iskael. All Right Reserved. Powered by Blogger. Iskael Template by Iskael. Submitted on TopBlogIndonesia