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:

Perbedaan ukuran font

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.