Unit Pengukuran CSS: Memilih Unit yang Tepat
Apa Itu Unit Pengukuran dalam CSS?
Unit pengukuran dalam CSS digunakan untuk menentukan ukuran, jarak, atau nilai numerik lainnya seperti lebar, tinggi, font-size, margin, padding, dan banyak lagi.
Memahami unit pengukuran sangat penting karena:
- Mempengaruhi tata letak dan responsivitas.
- Menentukan bagaimana elemen berperilaku di berbagai perangkat dan layar.
- Membantu membuat desain web yang konsisten dan mudah dikelola.
CSS memiliki banyak jenis unit, dan masing-masing memiliki kegunaan spesifik. Ada unit absolut, unit relatif, dan unit viewport.
1. Jenis-Jenis Unit dalam CSS
Berikut adalah beberapa unit pengukuran utama dalam CSS:
| Jenis | Unit | Deskripsi |
|---|---|---|
| Absolut | px (pixel) | Tetap, tidak responsif terhadap ukuran font atau layar |
| pt (point) | Digunakan untuk cetak | |
| cm, mm, in, pc, em | Jarang digunakan dalam web modern | |
| Relatif | em | Relatif terhadap ukuran font elemen induk |
| rem | Relatif terhadap ukuran font root (html) | |
| % | Persentase dari ukuran elemen induk | |
| ch, ex, cap, ic | Relatif terhadap karakter tertentu | |
| Viewport | vw, vh | Relatif terhadap lebar/tinggi viewport |
| vmin, vmax | Relatif terhadap dimensi viewport minimum/maksimum |
2. Unit Absolut: px, pt, dll
a. px – Pixel
Pixel adalah unit paling umum dalam pengembangan web. Satuan ini tetap dan tidak berubah meskipun ukuran layar atau font berbeda.
Contoh:
.box {
width: 200px;
}
💡 Cocok digunakan untuk layout yang harus presisi, tapi kurang fleksibel untuk desain responsif.
b. pt – Point
Digunakan terutama untuk styling saat dicetak. 1 pt = 1/72 inci.
Contoh:
@media print {
body {
font-size: 12pt;
}
}
3. Unit Relatif: em, rem, %, dll
a. em – Relatif terhadap Font Size Elemen Induk
Nilai 1em sama dengan ukuran font elemen itu sendiri atau elemen induk jika belum ditentukan.
Contoh:
html {
font-size: 16px;
}
.teks-besar {
font-size: 2em; /* 2 × 16px = 32px */
}
Namun, em bersifat bersarang, artinya nilai akan terus dikalikan pada elemen anak.
Contoh:
.parent {
font-size: 2em; /* 32px */
}
.child {
font-size: 2em; /* 64px */
}
⚠️ Gunakan dengan hati-hati agar tidak menyebabkan scaling berlebihan.
b. rem – Relatif terhadap Root Font Size
rem singkatan dari Root EM, yaitu satuan yang selalu relatif terhadap ukuran font <html>.
Contoh:
html {
font-size: 16px;
}
.title {
font-size: 2rem; /* 2 × 16px = 32px */
}
.subtitle {
font-size: 1.5rem; /* 1.5 × 16px = 24px */
}
💡 Sangat cocok untuk desain responsif dan aksesibilitas karena lebih stabil daripada em.
c. % – Persentase
Persentase selalu relatif terhadap elemen pembungkus (parent).
Contoh:
.container {
width: 400px;
}
.kotak {
width: 50%; /* 50% dari 400px = 200px */
}
Bisa juga digunakan untuk font-size:
.parent {
font-size: 20px;
}
.child {
font-size: 80%; /* 80% dari 20px = 16px */
}
d. ch, ex, ic, cap
Unit-unit ini relatif terhadap karakter tertentu dalam font yang digunakan.
| Unit | Deskripsi |
|---|---|
| ch | Lebar karakter "0" dalam font saat ini |
| ex | Tinggi karakter "x" dalam font saat ini |
| ic | Lebar karakter "æ°´" (Cina/Jepang/Korea) |
| cap | Tinggi huruf kapital rata-rata |
Contoh:
input[type="text"] {
width: 20ch; /* Lebar sekitar 20 karakter "0" */
}
4. Unit Viewport: vw, vh, vmin, vmax
a. vw – Viewport Width
Satu 1vw = 1% dari lebar viewport.
Contoh:
.full-width {
width: 100vw; /* Mengisi seluruh lebar layar */
}
b. vh – Viewport Height
Satu 1vh = 1% dari tinggi viewport.
Contoh:
.hero {
height: 100vh; /* Tinggi layar penuh */
}
c. vmin dan vmax
- vmin: 1% dari dimensi viewport terkecil (lebar atau tinggi)
- vmax: 1% dari dimensi viewport terbesar
Contoh:
.text {
font-size: 5vw;
}
5. Kapan Harus Menggunakan Unit Tertentu?
| Tujuan | Rekomendasi Unit |
|---|---|
| Ukuran font | rem, em |
| Layout grid/flexbox | fr, %, rem |
| Spacing (margin, padding) | rem, %, px |
| Ukuran responsif | vw, vh, em |
| Untuk media cetak | pt, cm |
| Untuk teks proporsional | ch, ex |
6. Contoh Praktis
a. Desain Responsif dengan rem
HTML
<html style="font-size: 16px;">
<body>
<h1 class="judul">Selamat Datang</h1>
<p class="deskripsi">Website kami hadir untuk memberikan informasi terbaik.</p>
</body>
</html>
CSS
.judul {
font-size: 2rem; /* 32px */
}
.deskripsi {
font-size: 1.25rem; /* 20px */
}
b. Fullscreen Hero Section
CSS
.hero {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
}
HTML:
<div class="hero">Halo Dunia</div>
7. Mengatur Font Size Global dengan html
Penting untuk menetapkan font-size global di level <html> agar semua rem bekerja secara konsisten.
Contoh:
html {
font-size: 16px; /* Default browser */
}
@media screen and (max-width: 768px) {
html {
font-size: 14px;
}
}
Dengan begini, semua ukuran rem otomatis menyesuaikan saat ukuran layar berubah.
8. Perbedaan em vs rem
| Karakteristik | em | rem |
|---|---|---|
| Relatif terhadap | Font size elemen induk | Font size root (html) |
| Bersifat bersarang | ✅ | ❌ |
| Cocok untuk | Skala berdasarkan konteks | Ukuran global yang stabil |
| Contoh | font-size: 1.5em | font-size: 1.5rem |
9. Tips dan Trik Efektif
- Gunakan rem untuk ukuran font global dan spacing agar lebih konsisten.
- Gunakan em untuk skala relatif dalam komponen UI tertentu.
- Gunakan vw dan vh untuk elemen full-screen seperti hero section.
- Gunakan % untuk layout fluida dan elemen yang ingin mengikuti ukuran parent.
- Hindari px untuk font-size agar tetap ramah aksesibilitas.
- Uji tampilan di berbagai ukuran layar untuk memastikan unit yang dipilih bekerja baik.
10. Kesimpulan
Memilih unit pengukuran yang tepat adalah kunci dalam menciptakan desain web yang responsif dan mudah dikelola. Dengan memahami perbedaan antara unit absolut (px, pt), unit relatif (em, rem, %), dan unit viewport (vw, vh), Anda bisa membuat desain yang adaptif, skalabel, dan profesional — baik untuk desktop maupun mobile.
Selanjutnya, kita akan membahas Styling Form dengan CSS, yaitu cara membuat form yang menarik dan interaktif.
💡 Tips Praktis
- Gunakan rem untuk font-size dan spacing global.
- Gunakan em untuk elemen yang perlu skala relatif.
- Gunakan vw, vh untuk efek full-screen.
- Gunakan % untuk layout yang fleksibel.
- Simpan ukuran dasar dalam variabel CSS untuk kemudahan pemeliharaan.
