px vs em vs rem
13 November 2019 · Design
Saat mendesain saya memakai px
karena tidak ada satuan lain di Sketch/Figma/dsb.
Saat bermain CSS saya mulai memakai rem
karena tidak perlu pusing, dulunya masih memakai em.
Secara umum alias kalau tidak diganti-ganti, 16px
itu sebanding dengan 1em
atau 1rem
.
pixel
Ukuran px
selalu fix.
em
Ukuran em
dipengaruhi oleh elemen yang membungkusnya. Misal:
<style>
div {font-size: 24px}
div > strong {font-size: .5em}
div > small {font-size: 2em}
div > strong, div > small {display: block}
</style>
<div>
<strong>teks tebal</strong>
<small>teks kecil</small>
</div>
Elemen <strong>
memiliki ukuran .5em
atau 0.5∗24px=12px. Elemen <small>
memiliki ukuran 2em
atau 2∗24px=48px.
Kalau saya mengganti ukuran font di <div>
, misal dijadikan menjadi 10px
, perbandingan keduanya adalah ini:

rem (root em)
Ukuran rem
(root em) dipengaruhi oleh root alias <html>
. Misal saya mengatur ukuran huruf dokumen html ini sebesar 24px
, lalu elemen <div>
memiliki ukuran 2px
, dan elemen <p>
yang ada di dalam <div>
berukuran 2rem
, bagaimana tampilannya?
<style>
html {font-size: 24px}
div {font-size: 2px}
div > p {font-size: 2.5rem}
</style>
<div>
<p>teks</p>
</div>
Karena saya memakai rem
, jadi ukuran font yang ada di <div>
tidak mempengaruhi apa-apa. teks
di dalam <p>
itu sendiri berukuran 2.5rem ∗ (root size) = 2.5 ∗ 24px = 60px.
Saya mulai memilih rem
karena cukup ada 1 ukuran saja yang diatur, yaitu yang ada di <html>
. Oh iya, rem
tidak hanya saya pakai untuk font-size
saja, tapi juga hal lain macam padding
, margin
, dsb.
Penggunaan rem
ini juga memudahkan untuk membuatnya responsif, misal:
@media (max-width: 575px) {html {font-size: 12px;}}
@media (min-width: 576px) and (max-width: 767px) {html {font-size: 14px;}}
@media (min-width: 768px) and (max-width: 991px) {html {font-size: 16px;}}
@media (min-width: 992px) {html {font-size: 18px;}}
.row {margin-left: 1rem; margin-right: 1rem}
.col {padding-left: 1rem; padding-right: 1rem}
img.logo {width: 2rem; height: auto}
… dan ukuran-ukuran rem
tinggal mengikuti ukuran di atas.
Untuk kasus tertentu, saya juga memakai vh
dan vw
yang ukurannya relatif dengan ukuran viewport, misalnya saat berurusan dengan hero.
Catatan: Ini adalah salinan jawaban saya di Quora. Saya akan menulis ulang jawaban yang saya suka di Quora ke dalam blog saya.
Have any questions or comments about this post? Contact me using the form on this page or on Instagram at @RifatNajmi.