Belajar Koding HTML & CSS Bagian 27: Membuat Text Spacing

Apa itu Text Spacing?

Text spacing di CSS umumnya mengacu pada properti yang mengatur jarak di sekitar teks, yaitu:

letter-spacing — jarak antar huruf / karakter
word-spacing — jarak antar kata
line-height — tinggi baris / jarak antar baris teks (vertikal)
text-indent — indentasi (jarak awal) baris pertama dalam suatu blok paragraf
Selain itu, properti seperti white-space juga ikut mengatur bagaimana spasi ditangani dalam teks (misalnya apakah spasi ekstra diabaikan, baris dibungkus, dll)

Jadi “text spacing” tidak satu properti tunggal, melainkan kumpulan properti untuk mengatur jarak teks di berbagai aspek.

2) Penjelasan tiap properti

Properti	Fungsi Utama	Nilai Umum / Catatan
letter-spacing	Menambah atau mengurangi jarak antar karakter/huruf. Nilai positif → karakter makin renggang; negatif → makin rapat.	Contoh: letter-spacing: 2px; atau letter-spacing: 0.1em;
word-spacing	Menambah atau mengurangi jarak antar kata dalam sebuah teks.	Contoh: word-spacing: 8px; atau word-spacing: 0.5em;
line-height	Mengatur jarak vertikal antar baris. Semakin besar, jarak antar baris makin lebar.	Bisa berupa angka (unitless), persentase, atau satuan seperti em/px. Contoh: line-height: 1.5;
text-indent	Membuat indentasi (jarak masuk) di baris pertama dari sebuah blok teks.	Contoh: text-indent: 30px; atau text-indent: 2em;
white-space	Menentukan bagaimana browser menganggap spasi putih (white space) dalam teks, termasuk wrapping, spasi ganda, dan pemotongan baris.	Nilai: normal, nowrap, pre, pre-wrap, pre-line, dll.

Contoh Kode HTML + CSS serta Hasilnya

Silakan salin kode berikut ke file .html dan buka di browser, atau bisa juga dicoba di CodePen / JSFiddle.

<!DOCTYPE html>

<head>

<title>Contoh Text Spacing CSS</title>

<style>

body {

font-family: Arial, sans-serif;

padding: 24px;

background: #fafafa;

color: #333;

line-height: 1.4; /* default line-height */

}

.card {

background: #fff;

border: 1px solid #ddd;

border-radius: 6px;

padding: 16px;

margin-bottom: 20px;

}

/* Contoh text spacing */

.normal {

/* default, tanpa modifikasi spacing */

}

.letter-wide {

letter-spacing: 2px;

}

.letter-tight {

letter-spacing: -1px;

}

.word-wide {

word-spacing: 8px;

}

.line-spaced {

line-height: 2; /* jarak antar baris lebih besar */

}

.indented {

text-indent: 40px;

}

.white-pre {

white-space: pre;

border: 1px dashed #888;

padding: 8px;

}

</style>

</head>

<body>

<h1>Contoh Text Spacing (CSS)</h1>

<h2>Teks asli (normal)</h2>

Ini adalah contoh kalimat untuk menguji berbagai properti spacing: fungsi letter-spacing, word-spacing, line-height, dan text-indent. Silakan perhatikan perbedaan saat kita ubah spacing-nya.

</p>

</div>

<h2>letter-spacing: 2px (melebar antar huruf)</h2>

Ini adalah contoh kalimat untuk menguji berbagai properti spacing...

</p>

</div>

<h2>letter-spacing: -1px (mendekat antar huruf)</h2>

Ini adalah contoh kalimat untuk menguji berbagai properti spacing...

</p>

</div>

<h2>word-spacing: 8px (jarak antar kata lebih lebar)</h2>

Ini adalah contoh kalimat untuk menguji berbagai properti spacing...

</p>

</div>

<h2>line-height: 2 (jarak antar baris besar)</h2>

Ini adalah contoh kalimat untuk menguji berbagai properti spacing: fungsi letter-spacing, word-spacing, line-height, dan text-indent. Silakan perhatikan perbedaan saat kita ubah spacing-nya.

</p>

</div>

<h2>text-indent: 40px (indentasi baris pertama)</h2>

Ini adalah contoh paragraf yang menggunakan indentasi di baris pertama. Hanya baris pertama yang masuk ke kanan sebanyak 40px.

</p>

</div>

<h2>white-space: pre (spasi & baris dipertahankan)</h2>

Baris pertama ini

  termasuk spasi

dan baris baru

akan dipertahankan

persis seperti ini.

</p>

</div>

</body>

</html>

Contoh Output Text Spacing

Penjelasan hasil:

.letter-wide: huruf-huruf jadi terpisah lebih renggang.
.letter-tight: huruf-huruf jadi sedikit lebih rapat (ada kemungkinan saling bertumpuk kalau terlalu negatif).
.word-wide: antar kata ada spasi yang lebih besar dari biasanya.
.line-spaced: baris teks menjadi sangat renggang — ideal kalau ingin teks mudah dibaca.
.indented: baris pertama masuk ke kanan 40px, sedangkan baris selanjutnya tetap rata kiri.
.white-pre: properti white-space: pre menjaga semua spasi dan baris baru persis seperti di HTML (jadi spasi ekstra dan baris baru tidak diabaikan).

4) Tips & Catatan Penting

Nilai negatif untuk letter-spacing atau word-spacing memungkinkan karakter atau kata saling mendekat. Tapi hati-hati: kalau terlalu ekstrem bisa membuat teks sulit dibaca. (Misalnya letter-spacing: -2px)
Untuk line-height, sering direkomendasikan menggunakan nilai unitless (misalnya 1.5) agar lebih fleksibel dalam pewarisan (inheritance) dan lebih konsisten ketika teks di-resize.
Jangan menetapkan tinggi (height) elemen teks menggunakan satuan tetap (px) ketika menggunakan text spacing besar, karena bisa memotong teks apabila jarak antar baris membesar.
Dalam konteks aksesibilitas, WCAG 2.2 menetapkan bahwa pengguna harus bisa memperbesar spasi teks: line height minimum 1.5× font size, letter spacing 0.12× font size, word spacing 0.16× font size, dan spasi antar paragraf 2× font size. (W3C)
Kombinasi properti ini bisa digunakan bersama untuk efek visual khusus, tapi selalu cek keterbacaan di ukuran layar berbeda dan pada teks panjang.

Referensi

MDN: letter-spacing https://developer.mozilla.org/en-US/docs/Web/CSS/letter spacing
MDN https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
W3Schools: https://www.w3schools.com/css/css_text_spacing.asp
W3.org / WCAG: https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html
Codeguage: https://www.codeguage.com/v1/courses/css/text-spacing

Belajar Koding HTML & CSS Bagian 27: Membuat Text Spacing

0 Response to "Belajar Koding HTML & CSS Bagian 27: Membuat Text Spacing"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel