Salah satu tampilan teks yang harus diketahui dalam merancang sebuah halaman website adalaah mengatur jarak antara huruf dan jarak antara kata. Bila jarak teks terlalu rapat untuk kepentingan tertentu maka akan menyulitkan untuk dibaca. Berikut catatan kecil bagaimana cara mengatur jarak antara huruf dan jarak antara kata pada halaman website dengan menggunakan CSS.
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -4px;
}
Value bernilai negatif, maka jarak antara huruf akan semakin rapat. Sementara value untuk default tampilan browser, bisa digunakan normal.
h1 {
word-spacing: 25px;
}
h2 {
word-spacing: -20px;
}
Secara keseleruhan anda bisa menggunakan kode dibawah ini untuk melihat bagaimana kerja dan hasilnya.
<!DOCTYPE html>
<html>
<head>
<title> Cara Mengatur Jarak Spasi pada halaman Website </title>
<style type="text/css">
.letter-6{ letter-spacing: -6px; }
.letter-2{ letter-spacing: -2px; }
.letter2 { letter-spacing: 2px; }
.letter6 { letter-spacing: 6px; }
.word-6{ word-spacing: -6px; }
.word-2{ word-spacing: -2px; }
.word2 { word-spacing: 2px; }
.word6{ word-spacing:6px; }
</style>
</head>
<body>
<h2>Mengatur Jarak Spasi pada halaman Website </h2>
<p> Kalimat ini settingan default </p>
<p class="letter-6">
Sebuah kalimat dengan nilai letter-spacing negatif : -6px
</p>
<p class="letter-2">
Sebuah kalimat dengan nilai letter-spacing negatif: -2px
</p>
<p class="letter2">
Sebuah kalimat dengan nilai letter-spacing positif: 2px
</p>
<p class="letter6">
Sebuah kalimat dengan nilai letter-spacing positif: 6px
</p>
<p class="word-6">
Sebuah kalimat dengan nilai word-spacing negatif: -5px
</p>
<p class="word-2">
Sebuah kalimat dengan nilai word-spacing negatif: -2px
</p>
<p class="word2">
Sebuah kalimat dengan nilai word-spacing positif: 2px
</p>
<p class="word6">
Ini dengan nilai word-spacing positif: 6px
</p>
</body>
</html>
Itulah tutorial cara mengubah spasi pada halaman website. Semoga bisa berguna untuk keperluan tertentu.
1) Mengatur Jarak Antara Huruf pada Website
Untuk mengatur jarak antara huruf pada website digunakan properties letter-spacing. Kemudian diikuti value. Untuk satuan nilai bisa digunakan px, em dan %. Sebagai contoh format penulisan jarak anar huruf bisa di perhatikan di bawah ini.
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -4px;
}
Value bernilai negatif, maka jarak antara huruf akan semakin rapat. Sementara value untuk default tampilan browser, bisa digunakan normal.
2) Mengatur jarak Spasi antar kata pada halaman Website
Berikutnya untuk mengatur jarak antara satu kata dengan kata berikutnya pada CSS bisa digunakan properties word-spacing. Ketentuan umumnya hampir sama dengan letter-spacing diatas. Sebagai contoh format penulisan bisa diperhatikan kode di bawah ini.h1 {
word-spacing: 25px;
}
h2 {
word-spacing: -20px;
}
Secara keseleruhan anda bisa menggunakan kode dibawah ini untuk melihat bagaimana kerja dan hasilnya.
<!DOCTYPE html>
<html>
<head>
<title> Cara Mengatur Jarak Spasi pada halaman Website </title>
<style type="text/css">
.letter-6{ letter-spacing: -6px; }
.letter-2{ letter-spacing: -2px; }
.letter2 { letter-spacing: 2px; }
.letter6 { letter-spacing: 6px; }
.word-6{ word-spacing: -6px; }
.word-2{ word-spacing: -2px; }
.word2 { word-spacing: 2px; }
.word6{ word-spacing:6px; }
</style>
</head>
<body>
<h2>Mengatur Jarak Spasi pada halaman Website </h2>
<p> Kalimat ini settingan default </p>
<p class="letter-6">
Sebuah kalimat dengan nilai letter-spacing negatif : -6px
</p>
<p class="letter-2">
Sebuah kalimat dengan nilai letter-spacing negatif: -2px
</p>
<p class="letter2">
Sebuah kalimat dengan nilai letter-spacing positif: 2px
</p>
<p class="letter6">
Sebuah kalimat dengan nilai letter-spacing positif: 6px
</p>
<p class="word-6">
Sebuah kalimat dengan nilai word-spacing negatif: -5px
</p>
<p class="word-2">
Sebuah kalimat dengan nilai word-spacing negatif: -2px
</p>
<p class="word2">
Sebuah kalimat dengan nilai word-spacing positif: 2px
</p>
<p class="word6">
Ini dengan nilai word-spacing positif: 6px
</p>
</body>
</html>
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment