Kamu punya desain Figma yang rapi. Kode CSS kamu? Berantakan karena satuan yang tidak konsisten — px di sini, rem di sana, vw untuk font size, vh untuk container. Browser render beda, aksesibilitas rusak, user zoom = layout hancur.
Artikel ini: panduan singkat kapan pakai satuan apa. Ringkas, langsung praktik.
Klasifikasi Cepat
| Satuan | Jenis | Relatif terhadap | Kasus pakai utama |
|---|---|---|---|
px | Absolut | — | Border, shadow, media query breakpoint, elemen fixed-size (icon, logo) |
rem | Relatif | Root (html font-size) | Typography, spacing, layout — default choice |
em | Relatif | Parent / current element font-size | Komponen yang perlu scale bersama parent (button, badge, icon di dalam text) |
% | Relatif | Parent width/height | Layout fluid, width container, aspect ratio |
vw/vh | Viewport | Viewport width/height | Full-screen section, hero, clamp() fluid typography |
ch | Relatif | Width char “0” current font | Max-width reading line (optimal 65–75ch) |
px — Kapan Pakai
- Border & outline:
border: 1px solid— tidak mau scale - Box-shadow & transform:
box-shadow: 0 2px 8px,translateX(4px) - Media query breakpoint:
@media (max-width: 768px)— viewport absolut - Elemen fixed: logo 32×32px, favicon, icon UI yang tidak boleh resize
- Print stylesheet:
@media print { .box { width: 210mm } }
Jangan pakai px untuk: font-size, margin, padding, width/height container, line-height. Alasan: tidak menghormati preferensi user (browser zoom, default font size 16px → 20px).
rem — Default Choice (90% kasus)
1 rem = font-size root element (html). Default browser: 16px. Set root pakai persen:
.css
/* Best practice: respect user preference */
html {
font-size: 100%; /* 16px default, tapi user bisa ubah di browser settings */
}
/* Maka 1rem = 16px (atau whatever user set) */
body { font-size: 1rem; } /* 16px */
h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; } /* 32px */
p { font-size: 1rem; }
small { font-size: 0.875rem; } /* 14px */
/* Spacing pakai rem juga */
.card { padding: 1.5rem; margin: 1rem 0; }
.container { max-width: 75rem; } /* 1200px */Gunakan rem untuk:
- Semua font-size (heading, body, caption)
- Spacing: margin, padding, gap, grid-gap
- Layout: max-width container, border-radius
- Media query (optional):
@media (min-width: 48rem)— konsisten dengan spacing
Keuntungan: user ubah default font size di browser → seluruh layout scale proporsional. Aksesibilitas ✓.
em — Komponen yang Scale dengan Parent
1 em = font-size elemen saat ini (biasanya diwarisi dari parent). Cocok untuk komponen self-contained yang harus ikut scale kalau parent di-resize.
.css
/* Contoh: Button yang ikut scale kalau di dalam card yang font-size-nya besar */
.btn {
padding: 0.5em 1em; /* padding proporsional dengan font-size button */
border-radius: 0.25em; /* radius ikut font-size */
font-size: 1em; /* inherit dari parent */
}
/* Badge di dalam text */
.badge {
font-size: 0.75em; /* 75% dari text sekitarnya */
padding: 0.15em 0.4em;
}
/* Icon inline dengan text */
.icon-inline {
width: 1em;
height: 1em;
vertical-align: -0.125em;
}Rule of thumb: pakai em di dalam komponen yang font-size-nya mungkin berubah (button, badge, dropdown, tooltip). Pakai rem untuk spacing layout global.
vw / vh — Full-Screen & Fluid Typography
- Hero section full-screen:
min-height: 100vh(atau100dvhuntuk mobile address bar) - Sidebar fixed height:
height: 100vh - Fluid typography dengan clamp(): responsive tanpa media query
.css
/* Fluid typography: scale antara min-max berdasarkan viewport */
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
/* min 32px, ideal 5% viewport, max 56px */
}
h2 {
font-size: clamp(1.5rem, 3vw, 2.5rem);
}
/* Full-screen section (pakai dvh/svh untuk mobile modern) */
.hero {
min-height: 100dvh; /* dynamic viewport height - handle address bar */
}Hindari vh/vw untuk: font-size tanpa clamp (terlalu kecil di mobile, terlalu besar di desktop), container width (pakai % atau rem), spacing biasa.
% — Layout Fluid
- Width container:
width: 100%; max-width: 75rem - Grid/Flex children:
width: 50%,flex: 1 1 33.333% - Aspect ratio:
aspect-ratio: 16/9atau padding-top hack - Position absolute:
top: 50%; left: 50%; transform: translate(-50%, -50%)
ch — Optimal Line Length
.css
/* Baca nyaman: 65-75 karakter per baris */
.prose {
max-width: 70ch;
margin-inline: auto;
}
/* Input width berdasarkan karakter */
.input-short { width: 20ch; } /* ~20 karakter */
.input-long { width: 50ch; } /* ~50 karakter */Quick Decision Flowchart
Font-size? → rem (global) atau clamp(rem, vw, rem) (fluid)
Spacing (margin/padding/gap)? → rem
Border/shadow/fixed icon? → px
Komponen butuh scale dengan parent? → em
Container width? → % + max-width: XXrem
Full-screen section? → 100dvh
Reading line length? → max-width: 70ch
Modern Viewport Units (2024+)
| Unit | Artinya | Kapan Pakai |
|---|---|---|
dvh/dvw | Dynamic viewport — exclude browser UI (address bar, keyboard) | Mobile full-screen section (replace vh/vw) |
svh/svw | Small viewport — when browser UI fully visible | Minimum height guarantee |
lvh/lvw | Large viewport — when browser UI hidden | Maximum height (hero immersif) |
Best practice 2024+: pakai dvh untuk min-height: 100dvh hero section. Hindari 100vh di mobile (potongan address bar).
Common Mistakes
- ❌
font-size: 16px→ ✅font-size: 1rem - ❌
padding: 20px→ ✅padding: 1.25rem - ❌
width: 100vw(causing horizontal scroll) → ✅width: 100% - ❌
height: 100vhmobile → ✅height: 100dvh - ❌
embersarang (compounding) → ✅ pakairemuntuk spacing,emhanya di komponen isolasi - ❌ Mixed unit tanpa sistem → ✅ definisikan design token:
--space-1: 0.25rem,--space-4: 1rem, dst.
Starter Template (Copy-Paste)
.css
/* ===== ROOT ===== */
:root {
/* Spacing scale (rem-based) */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-8: 3rem; /* 48px */
--space-10: 4rem; /* 64px */
/* Container */
--container-max: 75rem; /* 1200px */
--content-width: 70ch; /* optimal reading */
}
/* ===== BASE ===== */
html { font-size: 100%; } /* respect user setting */
body { font-size: 1rem; line-height: 1.6; }
/* ===== TYPOGRAPHY (fluid) ===== */
h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.2; }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.3; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.4; }
p, li { font-size: 1rem; max-width: var(--content-width); }
/* ===== LAYOUT ===== */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); }
.section { padding-block: var(--space-10); }
/* ===== COMPONENTS (em untuk internal scaling) ===== */
.btn { padding: 0.5em 1em; border-radius: 0.25em; font-size: 1em; }
.badge { font-size: 0.75em; padding: 0.15em 0.4em; }
.icon { width: 1em; height: 1em; }
/* ===== MEDIA QUERIES (rem-based) ===== */
@media (min-width: 48rem) { /* 768px */ }
@media (min-width: 62rem) { /* 992px */ }
@media (min-width: 75rem) { /* 1200px */ }Sumber & Referensi:
Komentar Terbaru