Beranda / CSS / Pemrograman / Web

Mengenal CSS Font Size (Tutorial CSS Part 41)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 41: Logo CSS

Mengenal CSS Font Size: Biar Tulisan di Web Nggak Kebablasan!

Ukuran font itu penting, lho! Bukan cuma soal estetika, tapi juga kenyamanan pembaca. Kalau ukuran huruf terlalu kecil, mata bisa tegang. Kalau terlalu besar, bisa bikin layout berantakan. Nah, di artikel ini kita bahas cara atur font size di CSS dengan berbagai cara yang bisa kamu coba.

1. Apa Itu Font Size?

Font size di CSS adalah properti yang digunakan untuk menentukan seberapa besar ukuran teks yang tampil di website. Sederhana, tapi penting banget karena memengaruhi readability alias keterbacaan konten kamu.

Contoh dasarnya:

p {
  font-size: 16px;
}

2. Mengatur Font Size dengan Pixel (px)

Satuan paling umum dan gampang dipahami. Pakai pixel kalau kamu mau hasil yang konsisten di semua layar (meskipun agak kurang fleksibel untuk desain responsif).

Contoh:

h1 {
  font-size: 32px;
}
p {
  font-size: 16px;
}

3. Mengatur Font Size dengan Em

Satuan em menyesuaikan ukuran font relatif terhadap elemen induknya. Jadi, kalau elemen induknya punya font 16px dan kamu set font-size: 1.5em, maka hasilnya 24px.

Contoh:

body {
  font-size: 16px;
}
p {
  font-size: 1.5em; /* hasilnya 24px */
}

4. Kombinasi Persen dan Em

Trik ini sering dipakai buat bikin layout yang lebih fleksibel. Misalnya, kita atur ukuran font dasar pakai persen, lalu elemen-elemen di dalamnya pakai em.

Contoh:

html {
  font-size: 100%; /* biasanya dianggap 16px */
}
body {
  font-size: 1em; /* tetap 16px */
}
h2 {
  font-size: 1.25em; /* jadi 20px */
}

Dengan begini, ukuran huruf bisa lebih mudah disesuaikan berdasarkan preferensi user (misalnya saat zooming atau pakai pengaturan aksesibilitas).

5. Responsive Font Size

Sekarang banyak website yang mengutamakan responsiveness, alias tampilan yang menyesuaikan layar. Untuk font size, kamu bisa pakai vw (viewport width) atau gabungan beberapa satuan lewat clamp().

Contoh dengan vw:

h1 {
  font-size: 5vw; /* ukuran berubah tergantung lebar layar */
}

Contoh dengan clamp():

p {
  font-size: clamp(14px, 2vw, 18px);
}

Artinya: ukuran font akan minimum 14px, maksimum 18px, dan akan berubah secara responsif berdasarkan 2vw.

Contoh Lengkap: Internal CSS Sederhana

Berikut ini adalah contoh kode HTML + CSS sederhana yang menggabungkan beberapa teknik diatas:

<!DOCTYPE html>
<html>
<head>
  <style>
    html {
      font-size: 100%;
    }

    body {
      font-family: Arial, sans-serif;
      font-size: 1em;
      margin: 20px;
    }

    h1 {
      font-size: clamp(24px, 4vw, 40px);
    }

    h2 {
      font-size: 1.5em;
    }

    p {
      font-size: 1em;
    }

    .note {
      font-size: 0.875em; /* lebih kecil dari p */
    }
  </style>
</head>
<body>
  <h1>Judul Besar Responsif</h1>
  <h2>Subjudul dengan Em</h2>
  <p>Ini paragraf utama dengan font size 1em.</p>
  <p class="note">Ini catatan kecil pakai ukuran 0.875em.</p>
</body>
</html>

Hasilnya:

Contoh CSS Font Size
Gambar 41.1: Contoh CSS Font Size

Kesimpulan:

Mengatur font-size di CSS itu nggak melulu soal angka, tapi soal pengalaman pengguna juga. Kamu bisa pilih px untuk kejelasan, em dan % untuk fleksibilitas, dan vw/clamp untuk responsivitas. Sesuaikan aja dengan kebutuhan desain kamu.

Selamat ngulik CSS! 👨‍💻👩‍💻

Posting Komentar untuk "Mengenal CSS Font Size (Tutorial CSS Part 41)"