Beranda / CSS / Pemrograman / Web

CSS Text Spacing (Tutorial CSS Part 35)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 35 : Logo CSS

CSS Text Spacing: Biar Teks Website Nggak Terlihat Sesak

Pernah lihat teks di website yang terlalu rapet atau justru kepisah jauh banget? Nah, itu bisa diatur dengan yang namanya CSS Text Spacing. Di artikel ini, kita bakal bahas cara mengatur jarak antar huruf, kata, baris, dan juga indentasi teks. Yuk, langsung aja!

1. Apa itu Text Spacing?

Text Spacing dalam CSS adalah sekumpulan properti yang digunakan untuk mengatur jarak dalam teks. Mulai dari jarak antar huruf (letter), antar kata (word), tinggi baris (line-height), hingga indentasi paragraf (text-indent).

Dengan pengaturan yang pas, teks bakal kelihatan lebih rapi, nyaman dibaca, dan profesional.

2. Text Indentation

text-indent digunakan untuk memberikan jarak masuk (indentasi) pada baris pertama paragraf. Cocok buat bikin gaya penulisan ala buku. 

p {
  text-indent: 30px;
}

Contoh kode HTML + CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      text-indent: 30px;
    }
  </style>
</head>
<body>

  <p>
    Ini adalah paragraf pertama. Perhatikan bahwa baris pertamanya menjorok ke dalam sejauh 30 piksel berkat properti <code>text-indent</code>.
  </p>

</body>
</html>

Hasilnya:

Contoh CSS Text Indentation
Gambar 35.1 : Contoh CSS Text Indentation

3. Letter Spacing

letter-spacing digunakan untuk mengatur jarak antar huruf. Bisa dipakai buat bikin teks kelihatan lebih renggang atau padat. 

h1 {
  letter-spacing: 2px;
}

Contoh kode HTML + CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      letter-spacing: 2px;
    }
  </style>
</head>
<body>

  <h1>Contoh Judul dengan Letter Spacing</h1>

</body>
</html>

Hasilnya:

Contoh CSS Letter Spacing
Gambar 35.2 : Contoh CSS Letter Spacing

4. Line Height

line-height mengatur tinggi antar baris dalam teks. Ini penting banget buat bikin teks lebih mudah dibaca. 

p {
  line-height: 1.6;
}

Contoh kode HTML + CSS:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        line-height: 1.6;
      }
    </style>
  </head>
  <body>
    <p>
      Ini adalah contoh paragraf dengan line-height 1.6. Jarak antar barisnya jadi lebih lega dan nyaman dibaca.
    </p>
    <p>
      Coba bandingkan dengan paragraf biasa tanpa pengaturan line-height. Teks ini akan terlihat lebih rapi dan tidak terlalu padat.
    </p>
  </body>
</html>

Hasilnya:

Contoh CSS Line Height
Gambar 35.3 : Contoh CSS Line Height

5. Word Spacing

word-spacing digunakan untuk mengatur jarak antar kata. Berguna kalau kamu pengen bikin teks lebih longgar atau padat antar katanya. 

p {
  word-spacing: 5px;
}

Contoh kode HTML + CSS:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        word-spacing: 5px;
      }
    </style>
  </head>
  <body>
    <p>Teks ini memiliki jarak antar kata yang lebih lebar dari biasanya.</p>
  </body>
</html>

Hasilnya:

Contoh CSS Word Spacing
Gambar 35.4: Contoh CSS Word Spacing

6. White Space

white-space ngatur bagaimana spasi dan baris baru diperlakukan dalam elemen. Nilai umum yang sering dipakai: 

pre {
  white-space: pre;
}

Contoh kode HTML + CSS:

<!DOCTYPE html>
<html>
  <head>
    <style>
      pre {
        white-space: pre;
        background-color: #f5f5f5;
        padding: 10px;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>

    <h2>Contoh penggunaan white-space: pre</h2>

    <pre>
Ini baris pertama.
   Ini baris kedua dengan spasi di depan.
Ini baris ketiga.
    </pre>

  </body>
</html>

Hasilnya:

Contoh CSS White Space
Gambar 35.5 : Contoh CSS White Space

Nilai lainnya yang bisa kamu gunakan:

  • normal
  • nowrap
  • pre
  • pre-wrap
  • pre-line

7. Tabel Properti CSS Text Spacing

Properti Fungsi
text-indent Mengatur indentasi baris pertama dalam paragraf.
letter-spacing Mengatur jarak antar huruf.
line-height Mengatur tinggi antar baris.
word-spacing Mengatur jarak antar kata.
white-space Mengontrol cara whitespace dan baris baru ditampilkan di teks.

Kesimpulan

Penggunaan CSS Text Spacing itu kecil, tapi dampaknya besar banget buat kenyamanan pembaca. Coba atur-atur spacing di website kamu, dan rasakan bedanya. Teks jadi lebih enak dilihat, gak terlalu padat, dan terasa lebih profesional.

Kalau kamu suka artikel ini, jangan ragu buat share dan praktekin langsung di kode kamu, ya!

Posting Komentar untuk "CSS Text Spacing (Tutorial CSS Part 35)"