Jarak (spasi) antar huruf adalah ruang kosong yang menghubungkan huruf satu dan huruf lain di sebelahnya agar tersusun rata sesuai dengan nilai jarak yang sudah ditetapkan. Sedangkan jarak (spasi) pada kata merupakan ruang kosong yang menghubungkan antara kata satu dengan lainnya pada suatu paragraf. Jarak atau spasi pada huruf dan kata mempunyai peranan penting di dalam menyusun suatu halaman web. Pengaturan jarak spasi pada huruf dan kata akan memberikan kemudahan bagi pengunjung untuk membaca dan memahami konten yang disajikan.
Mungkin suatu waktu, anda menemukan suatu jenis font yang unik dan cocok untuk digunakan sebagai font (huruf) utama pada halaman web. Namun terdapat kendala bahwa jenis font tersebut memiliki spasi huruf yang terlalu dekat dan rapat. Anda tidak perlu khawatir, dengan menggunakan properti letter-spacing agar jarak antar huruf dapat diatur sesuai dengan keinginan.
Pengaturan jarak antar huruf pada suatu paragraf dapat menggunakan properti letter-spacing. Properti ini akan menerapkan nilai kerapatan huruf dengan berbagai nilai satuan. Satuan absolute yang dapat digunakan seperti px, pt, mm, cm, in dan lainnya. Namun untuk satuan relative yang dapat digunakan hanya satuan em, sedangkan satuan persentase (%) tidak akan mengubah nilai dari letter spacing.
Pemberian nilai negatif akan membuat huruf terlihat berhimpitan satu sama lain, sedangkan pemberian nilai positif akan membuat jarak huruf terlihat semakin renggang.
letter-spacing: normal | value | inherit;
Nilai normal merupakan nilai yang diberikan agar jarak antar huruf dalam keadaan default. Nilai inherit akan menjadikan nilai letter spacing sesuai dengan elemen induknya.
Sebagai contoh misalnya :
letter-spacing: 2px;
letter-spacing: 1mm;
letter-spacing: 2pt;
letter-spacing: 0.1in;
Berikut contoh letter spacing dengan variasi nilai dalam beberapa satuan :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<title>Letter Spacing</title>
<style>
p{
font-size:16px;
color:navy;
border:solid 1px orange;
padding:5px;
}
b{
color:red;
}
</style>
</head>
<body>
<h3>Letter spacing dengan satuan normal</h3>
<p style="letter-spacing:normal;">Paragraf ini menggunakan spasi huruf dengan <b>nilai normal..</b></p>
<h3>Letter spacing dengan satuan px</h3>
<p style="letter-spacing:-3px;">1.Paragraf ini menggunakan spasi huruf dengan <b>nilai -3px.</b></p>
<p style="letter-spacing:1px;">2.Paragraf ini menggunakan spasi huruf dengan <b>nilai 1px.</b></p>
<p style="letter-spacing:3px;">3.Paragraf ini menggunakan spasi huruf dengan <b>nilai 3px.</b></p>
<p style="letter-spacing:6px;">4.Paragraf ini menggunakan spasi huruf dengan <b>nilai 6px.</b></p>
<p style="letter-spacing:9px;">5.Paragraf ini menggunakan spasi huruf dengan <b>nilai 9px.</b></p>
<h3>Letter spacing dengan satuan em</h3>
<p style="letter-spacing:-0.3em;">1.Paragraf ini menggunakan spasi huruf dengan <b>nilai -0.3em.</b></p>
<p style="letter-spacing:0.1em;">2.Paragraf ini menggunakan spasi huruf dengan <b>nilai 0.1em.</b></p>
<p style="letter-spacing:0.2em;">3.Paragraf ini menggunakan spasi huruf dengan <b>nilai 0.2em.</b></p>
<p style="letter-spacing:0.3em;">4.Paragraf ini menggunakan spasi huruf dengan <b>nilai 0.3em.</b></p>
<p style="letter-spacing:0.4em;">5.Paragraf ini menggunakan spasi huruf dengan <b>nilai 0.4em.</b></p>
<p style="letter-spacing:0.5em;">6.Paragraf ini menggunakan spasi huruf dengan <b>nilai 0.5em.</b></p>
<p style="letter-spacing:0.6em;">7.Paragraf ini menggunakan spasi huruf dengan <b>nilai 0.6em.</b></p>
<h3>Letter spacing dengan satuan mm</h3>
<p style="letter-spacing:-1mm;">1.Paragraf ini menggunakan spasi huruf dengan <b>nilai -1mm.</b></p>
<p style="letter-spacing:1mm;">2.Paragraf ini menggunakan spasi huruf dengan <b>nilai 1mm.</b></p>
<p style="letter-spacing:2mm;">3.Paragraf ini menggunakan spasi huruf dengan <b>nilai 2mm.</b></p>
<p style="letter-spacing:3mm;">4.Paragraf ini menggunakan spasi huruf dengan <b>nilai 3mm.</b></p>
<p style="letter-spacing:4mm;">5.Paragraf ini menggunakan spasi huruf dengan <b>nilai 4mm.</b></p>
<p style="letter-spacing:5mm;">6.Paragraf ini menggunakan spasi huruf dengan <b>nilai 5mm.</b></p>
<p style="letter-spacing:6mm;">7.Paragraf ini menggunakan spasi huruf dengan <b>nilai 6mm.</b></p>
</body>
</html>
Word spacing pada CSS merupakan properti yang digunakan untuk memberikan ruang (spasi) antara satu kata dengan lainnya pada suatu paragraf. Word spacing akan efektif pada setiap spasi putih yang berada pada suatu paragraf. Di mana lebar jarak spasi putih tersebut ditentukan oleh nilai dari properti dari word-spacing.
Nilai satuan word-spacing dapat menggunakan satuan px, pt, mm, em dan lainnya. Nilai yang dimasukkan dapat menggunakan nilai positif dan juga nilai negatif. Nilai negatif akan menghasilkan kata satu dengan lainnya menjadi saling berhimpitan.
word-spacing: normal | value | inherit;
Sebagai contoh misalnya :
word-spacing: 10px;
word-spacing: 10mm;
word-spacing: 1em;
Berikut contoh word spacing dengan variasi nilai dalam beberapa nilai satuan :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<title>Word Spacing</title>
<style>
p{
font-size:16px;
color:navy;
border:solid 1px orange;
padding:5px;
}
b{
color:red;
}
</style>
</head>
<body>
<h3>Word spacing dengan satuan normal</h3>
<p style="word-spacing:normal;">Paragraf ini menggunakan spasi kata dengan <b>nilai normal..</b></p>
<h3>Word spacing dengan satuan px</h3>
<p style="word-spacing:-5px;">1.Paragraf ini menggunakan spasi kata dengan <b>nilai -5px.</b></p>
<p style="word-spacing:1px;">2.Paragraf ini menggunakan spasi kata dengan <b>nilai 1px.</b></p>
<p style="word-spacing:3px;">3.Paragraf ini menggunakan spasi kata dengan <b>nilai 3px.</b></p>
<p style="word-spacing:6px;">4.Paragraf ini menggunakan spasi kata dengan <b>nilai 6px.</b></p>
<p style="word-spacing:9px;">5.Paragraf ini menggunakan spasi kata dengan <b>nilai 9px.</b></p>
<h3>Word spacing dengan satuan em</h3>
<p style="word-spacing:-0.5em;">1.Paragraf ini menggunakan spasi kata dengan <b>nilai -0.5em.</b></p>
<p style="word-spacing:0.1em;">2.Paragraf ini menggunakan spasi kata dengan <b>nilai 0.1em.</b></p>
<p style="word-spacing:0.3em;">3.Paragraf ini menggunakan spasi kata dengan <b>nilai 0.3em.</b></p>
<p style="word-spacing:0.6em;">4.Paragraf ini menggunakan spasi kata dengan <b>nilai 0.6em.</b></p>
<p style="word-spacing:0.9em;">5.Paragraf ini menggunakan spasi kata dengan <b>nilai 0.9em.</b></p>
<p style="word-spacing:2em;">6.Paragraf ini menggunakan spasi kata dengan <b>nilai 2em.</b></p>
<h3>Word spacing dengan satuan mm</h3>
<p style="word-spacing:-5mm;">1.Paragraf ini menggunakan spasi kata dengan <b>nilai -5mm.</b></p>
<p style="word-spacing:1mm;">2.Paragraf ini menggunakan spasi kata dengan <b>nilai 1mm.</b></p>
<p style="word-spacing:2mm;">3.Paragraf ini menggunakan spasi kata dengan <b>nilai 2mm.</b></p>
<p style="word-spacing:3mm;">4.Paragraf ini menggunakan spasi kata dengan <b>nilai 3mm.</b></p>
<p style="word-spacing:4mm;">5.Paragraf ini menggunakan spasi kata dengan <b>nilai 4mm.</b></p>
<p style="word-spacing:5mm;">6.Paragraf ini menggunakan spasi kata dengan <b>nilai 5mm.</b></p>
</body>
</html>
Penggunaan word spacing pada CSS dalam penataan jarak spasi antar kata akan menghadapi suatu kegagalan saat berhadapan dengan pengaturan kerataan huruf (text alignment) dalam suatu paragraf. Jarak spasi antar huruf (word-spacing) akan berjalan baik dan seirama saat berdampingan dengan penataan huruf dengan nilai rata kiri (align left) dan kanan (align-right). Namun tidak demikian dengan rata kanan dan rata kiri (align-justify).
Pada kerataan teks rata kanan dan kiri (align-justify), spasi putih antar kata akan dipaksa agar memiliki nilai lebar tertentu supaya huruf paling kanan dan paling kiri dapat sejajar secara tegak lurus (vertikal). Nilai lebar pada spasi putih tersebut akan mengabaikan nilai dari word spacing.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>Word Spacing</title>
<style>
p{
font-size:16px;
color:navy;
border:solid 1px orange;
padding:5px;
}
b{
color:red;
}
</style>
</head>
<body>
<p style="word-spacing:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor.</p>
<p style="text-align:justify;word-spacing:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor.</p>
</body>
</html>
Halaman Terkait
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
