Beranda / CSS / Pemrograman / Web

Mengenal CSS Font Style (Tutorial CSS Part 40)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 40: Logo CSS

Mengenal CSS Font Style: Gaya, Tebal, dan Variasi Huruf

Dalam dunia desain web, tampilan teks sangat memengaruhi kenyamanan membaca dan estetika website. Nah, di sinilah CSS Font Style berperan penting. Dengan CSS, kita bisa mengatur gaya tulisan, ketebalan huruf, bahkan variasi kecil seperti huruf kapital kecil (small-caps). Yuk kita bahas satu per satu!

1. Font Style (Gaya Huruf Miring)

Properti font-style digunakan untuk menentukan apakah teks ditampilkan dalam huruf normal, miring, atau miring gaya oblique.

Nilai yang bisa digunakan:

  • normal → Teks biasa (default)
  • italic → Teks miring (sering digunakan untuk penekanan)
  • oblique → Miring juga, tapi biasanya hanya memiringkan bentuk normalnya

Contoh penggunaan:

<!DOCTYPE html>
<html>
<head>
  <style>
    .normal {
      font-style: normal;
    }
    .italic {
      font-style: italic;
    }
    .oblique {
      font-style: oblique;
    }
  </style>
</head>
<body>

  <p class="normal">Ini teks dengan gaya normal.</p>
  <p class="italic">Ini teks dengan gaya italic.</p>
  <p class="oblique">Ini teks dengan gaya oblique.</p>

</body>
</html>

Hasilnya:

Contoh CSS Font Style
Gambar 40.1: Contoh CSS Font Style

2. Font Weight (Ketebalan Huruf)

Properti font-weight mengatur seberapa tebal huruf yang ditampilkan. Cocok banget untuk memberi penekanan atau memperjelas struktur informasi.

Nilai yang sering dipakai:

  • normal → Berat standar (biasanya 400)
  • bold → Tebal (biasanya 700)
  • lighter → Lebih ringan dari elemen induknya
  • Nilai numerik: dari 100 (paling tipis) sampai 900 (paling tebal)

Contoh penggunaan:

<!DOCTYPE html>
<html>
<head>
  <style>
    .normal-weight {
      font-weight: normal;
    }
    .bold-weight {
      font-weight: bold;
    }
    .heavy-weight {
      font-weight: 900;
    }
  </style>
</head>
<body>

  <p class="normal-weight">Teks ini normal.</p>
  <p class="bold-weight">Teks ini bold.</p>
  <p class="heavy-weight">Teks ini super tebal!</p>

</body>
</html>

Hasilnya:

Contoh CSS Font Weight
Gambar 40.2: Contoh CSS Font Weight

3. Font Variant (Huruf Kapital Kecil)

Properti font-variant biasanya dipakai untuk mengubah huruf menjadi small-caps, yaitu huruf kapital kecil — tampilannya unik dan kadang terlihat elegan.

Nilai yang bisa digunakan:

  • normal → Tanpa perubahan
  • small-caps → Semua huruf menjadi kapital, tapi huruf kecil ditampilkan dalam ukuran kecil

Contoh penggunaan:

<!DOCTYPE html>
<html>
<head>
  <style>
    .normal-variant {
      font-variant: normal;
    }
    .small-caps-variant {
      font-variant: small-caps;
    }
  </style>
</head>
<body>

  <p class="normal-variant">Ini teks normal.</p>
  <p class="small-caps-variant">Ini teks dengan small-caps.</p>

</body>
</html>

Hasilnya:

Contoh CSS Font Variant
Gambar 40.3: Contoh CSS Font Variant

Penutup

CSS Font Style bukan cuma soal estetika, tapi juga membantu menyampaikan pesan secara visual. Dengan mengatur gaya (italic), ketebalan (bold), dan varian huruf (small-caps), kamu bisa bikin tampilan teks yang lebih menarik dan nyaman dibaca. Cobain langsung di project kamu, ya!

Kalau kamu punya pertanyaan soal CSS lain, tulis aja di kolom komentar!

Posting Komentar untuk "Mengenal CSS Font Style (Tutorial CSS Part 40)"