Cara Mengatur Jarak Spasi Antar Huruf & Kata Pada Text HTML Dengan CSS

Letter Spacing

Untuk mengatur jarak antar huruf pada tulisan (text) dalam halaman html kita bisa memakai property Letter Spacing, dalam CSS properti Letter Spacing ini yang mengatur lebar antar huruf. sedangkan untuk mengatur jarak spasi antar kata dengan kata kita memakai property word-spacing.

Cara Mengatur Jarak / Lebar Spasi Antar Huruf dengan CSS

yang pertama kita bahas jarak antara huruf memakai property letter spacing, seperti fungsinya bahwa property letter spacing digunakan untuk membuat jarah spasi antara huruf atau bisa disebut juga jarak antara satu karakter dengan karakter lainnya.

property letter-spacing memiliki nilai, nilainya bisa ditentukan dengan satuan angka pixel, persen, em dan lainnya. tapi menurut semua reference satuan pixel lah yang paling banyak dipakai.

nilai dalam property line-spacing bisa dibuat antara positif dan juga negatif, dimana kalau nilainya positif akan membuat jarak antar huruf akan smakin lebar. dan sebaliknya jika negatif akan semakin rapat.

Contoh properti line spacing

<!DOCTYPE html>
  <html>
  <head>
  <style>
  h1 {
  letter-spacing: 5px;
  }
h2 {
  letter-spacing: -3px;
  }
  </style>
  </head>
  <body>
<h1>Judul Artikel 1</h1>
  <h2>Subjudul heading 2</h2>
</body>
  </html>

dari contoh diatas judul dengan tag h1 memakai jarak antar huruf sebesar 5px, sedangkan heading 2 memakai negatif 3px.

Cara Mengatur Jarak / Lebar Spasi Antar Kata

sekarang kita bahas tentang lebar atau jarak antara kata dengan kata, dalam css untuk mengatur jarak antar kata kita bisa memakai property word-spacing.

pengaturan nilanya masih sama dengan line spacing diatas, juga bisa memakai negatif dan positif untuk melebarkan dan merapatkan kata.

Contoh Word Spacing

<!DOCTYPE html>
  <html>
  <head>
  <style>
  h1 {
  word-spacing: 10px;
  }
h2 {
  word-spacing: -5px;
  }
  </style>
  </head>
  <body>
<h1>This is heading 1</h1>
  <h2>This is heading 2</h2>
</body>
  </html>

dari contoh diatas word spacing pada h1 sebesar 10px, makanya terlihat jarak antar katanya lumayan jauh.

Contoh Mengatur Lebar Antar Huruf dan Kata

<!DOCTYPE html>
<html>
<head>
<style>
.letter-5{ letter-spacing: -5px; }
.letter-1{ letter-spacing: -1px; }
.letter1 { letter-spacing: 1px; }
.letter5 { letter-spacing: 5px; }

.word-5{ word-spacing: -5px; }
.word-1{ word-spacing: -1px; } 
.word1 { word-spacing: 1px; } 
.word5 { word-spacing: 5px; } 
</style>
</head>
<body>
<h2>Cara Mengatur Jarak Spasi Antar Huruf & Kata Pada Text HTML Dengan CSS</h2>
<p class="letter-5">
Sebuah kalimat dengan nilai letter-spacing negatif : -5px
</p>
<h2>nilai letter-spacing negatif: -1px</h2>
<p class="letter-1">
property letter-spacing memiliki nilai, nilainya bisa 
ditentukan dengan satuan angka pixel, persen, em dan lainnya. tapi menurut semua reference satuan pixel 
lah yang paling banyak dipakai. </p>
<h2>nilai letter-spacing: 1px</h2>
<p class="letter1">
kalimat dengan nilai letter-spacing positif: 1px
</p>
<p class="letter5">
kalimat dengan nilai letter-spacing positif: 5px
</p>

<p class="word-5">
kalimat dengan nilai word-spacing negatif: -5px
</p>
<p class="word-1">
kalimat dengan nilai word-spacing negatif: -1px
</p>
<p class="word1">
kalimat dengan nilai word-spacing positif: 1px
</p>
<p class="word5">
kalimat dengan nilai word-spacing positif: 5px
</p>
</body>
</html>

semoga dengan tutorial singkat ini anda bisa mengerti cara membuat jarak antara huruf dan jarak antara kata dengan menggunakan css.

Get real time updates directly on you device, subscribe now.

loading...

Ingin Berkomentar?

×
Lewat ke baris perkakas