Panduan komprehensif: Ketika menggunakan Em vs Rem

Anda mungkin sudah menyesuaikan diri dengan menggunakan unit pengukuran yang fleksibel, namun anda mungkin masih belum mengerti kapan harus menggunakan rem dan kapan menggunakan em. Tutorial ini akan membantu anda untuk mengetahuinya!

Baik em dan rem adalah fleksibel, unit terukur yang diterjemahkan oleh browser menjadi nilai piksel, tergantung pada pengaturan ukuran font pada desain anda. Jika anda menggunakan nilai 1em atau 1rem, itu bisa diterjemahkan di browser sebagai apa pun dari 16px sampai 160px atau nilai lainnya.

Di sisi lain nilai px digunakan oleh browser seperti ini, jadi 1px akan selalu ditampilkan persis seperti 1px.

Cobalah slider pada contoh di CodePen ini untuk melihat bagaimana nilai unit rem dan em dapat diterjemahkan ke dalam nilai piksel yang berbeda, sementara secara eksplisit mengatur unit px tetap dalam sebuah ukuran:

Pertanyaan Besar

Menggunakan unit em dan rem memberi kita fleksibilitas dalam desain kita, dan kemampuan untuk mengukur elemen naik dan turun, bukan terjebak dengan ukuran tetap. Kami dapat menggunakan fleksibilitas ini agar desain kami lebih mudah disesuaikan selama pengembangan, lebih responsif, dan memungkinkan pengguna browser mengontrol keseluruhan skala situs agar mudah dibaca.

Kedua unit em dan rem memberikan fleksibilitas dan bekerja dengan cara yang sama, jadi pertanyaan besarnya adalah, kapan sebaiknya kita menggunakan nilai em dan kapan sebaiknya kita menggunakan nilai rem?

Perbedaan Krusial

Perbedaan antara unit em dan rem adalah bagaimana browser menentukan nilai px yang mereka terjemahkan. Memahami perbedaan ini adalah kunci untuk menentukan kapan harus menggunakan setiap unit.

Kita akan mulai dengan memikirkan bagaimana rem dan em unit bekerja dari bawah ke atas untuk memastikan anda mengetahui setiap detailnya. Lalu, kita akan beralih ke mengapa anda harus menggunakan unit em atau rem.

Akhirnya kita akan melihat aplikasi praktis dari elemen mana pada desain tipikal yang harus anda gunakan untuk setiap jenis unit.

Bagaimana Unit rem Menterjemahkan ke Nilai Piksel

Saat menggunakan unit rem, ukuran piksel yang mereka terjemahkan tergantung pada ukuran font dari elemen utama pada halaman, yaitu element html. Ukuran font utama dikalikan dengan angka apapun yang anda gunakan dengan unit rem anda

Misalnya dengan ukuran elemen font utama sebesar 16px, 10rem akan menyamai 160px, yaitu 10 x 16 = 160.

Bagaimana Unit em Menterjemahkan ke Nilai Piksel

Saat menggunakan unit em, nilai piksel yang anda dapatkan adalah penggandaan ukuran font pada elemen yang dilakukan penataan (styling)

Misalnya, jika sebuah div memiliki ukuran font 18px, 10em akan menyamai 180px, yaitu 10 x 18 = 180.

Penting untuk diketahui:

Ini adalah kesalah pahaman yang agak meluas bahwa unit em relatif terhadap ukuran font elemen induk. Sebenarnya, sesuai spesifikasi W3, mereka relatif terhadap ukuran font "elemen tempat mereka digunakan".

Ukuran elemen induk dapat mempengaruhi nilai em, tapi bila itu terjadi, itu semata-mata karena pewarisan (inheritance). Mari kita lihat mengapa, dan lihat bagaimana ini bekerja melalui tindakan.

Pengaruh Pewarisan pada Unit em

Bekerja dengan unit em bisa mulai menjadi rumit ketika menyangkut pewarisan, karena setiap elemen secara otomatis mewarisi ukuran font induknya. Efek pewarisan hanya bisa diganti dengan menetapkan ukuran huruf secara eksplisit dengan unit yang tidak dikenai pewarisan, seperti px atau vw.

Ukuran font dari elemen yang em unit gunakan menentukan ukuran mereka. Tapi elemen itu mungkin mewarisi ukuran font dari induknya, yang mana mewarisi ukuran font dari induknya, dan seterusnya. Karena itu mungkin bagi setiap nilai em dipengaruhi oleh ukuran font dari induknya.

Mari kita lihat sebuah contoh. Jangan ragu untuk mencobanya di CodePen sendiri saat kita melangkah melewatinya Selagi anda mengikuti, gunakan Chrome Developer Tools atau Firebug pada Firefox untuk memeriksa nilai piksel unit em yang dihitung.

Contoh em Inheritance (Pewarisan)

Jika kita memiliki halaman dengan ukuran font utama16px (biasanya default) dan child-div di dalamnya dengan padding 1.5em, div itu akan mewarisi ukuran font 16px dari elemen utama. Oleh karena itu paddingnya akan diterjemahkan menjadi 24px, yaitu 1,5 x 16 = 24.

Lalu bagaimana jika kami membungkus div lain di sekitar pertama dan mengatur font-size mejadi 1.25em?

Pembungkus div mewarisi ukuran font utama sebesar 16px dan mengalikannya dengan pengaturan font-size sendiri pada 1.25em. Ini menetapkan div untuk memiliki ukuran font sebesar 20px, yaitu 1,25 x 16 = 20.

Sekarang div asli kita tidak lagi mewarisi langsung dari elemen utama, tapi mewarisi ukuran font sebesar 20px dari div induk barunya.  Nilai paddingnya sekarang 1.5em setara dengan 30px, yaitu 1,5 x 20 = 30.

Efek penskalaan ini bisa ditambah lebih jauh lagi jika kita menambahkan ukuran font berbasis em ke div asli kita, katakanlah 1.2em.

Div mewarisi ukuran font 20px dari induknya, lalu mengalikannya dengan pengaturan 1.2em sendiri, memberinya ukuran font baru 24px, yaitu 1,2 x 20 = 24.

1.5em pada div sekarang akan berubah ukuran lagi dengan ukuran font baru, kali ini menjadi 36px, yaitu 1,5 x 24 = 36.

Akhirnya, untuk lebih menggambarkan bahwa unit em relatif terhadap ukuran font elemen yang digunakannya, (bukan elemen induknya), mari kita lihat apa yang terjadi pada padding 1.5em jika kita secara eksplisit menetapkan div untuk menggunakan ukuran font sebesar 14px, nilai tidak dikenai pewarisan.

Sekarang, padding telah turun menjadi 21px, yaitu 1,5 x 14 = 21. Hal ini tidak terpengaruh oleh ukuran font elemen induk.

Dengan semua potensi komplikasi ini, anda dapat melihat mengapa ini penting untuk mengetahui bagaimana menggunakan unit em dengan cara yang mudah dikelola.

Pengaruh Pengaturan Browser pada Ukuran Font Elemen HTML

Secara default browser biasanya memiliki ukuran font 16px, namun hal ini bisa berubah dari 9px menjadi 72px oleh pengguna.

Penting untuk diketahui:

Elemen utama html mewarisi ukuran font dari pengaturan di browser, kecuali diganti dengan nilai tetap yang ditetapkan secara eksplisit.

Jadi, sementara ukuran font pada elemen html adalah yang secara langsung menentukan nilai rem, ukuran font itu mungkin berasal dari pengaturan browser.

Dengan demikian pengaturan ukuran font browser dapat mempengaruhi nilai setiap unit rem yang digunakan dalam desain, serta setiap unit em melalui pewarisan.

Efek Pengaturan Browser Bila Tidak Ada Ukuran Font HTML yang Diatur

Kecuali di override(timpa), elemen html itu akan mewarisi apapun pengaturan ukuran font default pada browser tersebut.  Misalnya, mari ambil situs yang tidak memiliki properti font-size pada elemen html.

Jika pengguna memiliki ukuran font default 16px pada browser mereka, ukuran font utama akan menjadi 16px.  Pada Chrome Developer Tools, anda dapat melihat elemen yang diwarisi dengan mencentang Show inherited properties di bawah tab Computed.

Dalam hal ini 10rem setara dengan 160px, yaitu 10 x 16 = 160.

Jika pengguna membuat ukuran font browser mereka sampai 18px, ukuran font utama akan menjadi 18px.  Sekarang 10rem diterjemahkan menjadi 180px, yaitu 10 x 18 = 180.

Efek Pengaturan Browser dengan Ukuran Font HTML Unit em

Bila ukuran font berbasis em ditetapkan pada elemen html, nilai piksel yang diterjemahkan akan menjadi kelipatan dari ukuran font browser.

Misalnya, jika elemen situs html memiliki properti font-size diatur ke 1.25em, ukuran font utama akan menjadi 1,25 kali pada pengaturan ukuran font browser.

Jika ukuran font browser diatur ke 16px, ukuran font utama akan keluar sebagai 20px, yaitu 1,25 x 16 = 20.

Dalam hal ini 10rem akan sama dengan 200px, yaitu 10 x 20 = 200

Namun, jika ukuran font browser ditetapkan ke 20px, ukuran font utama malah akan diterjemahkan menjadi 25px, yaitu 1,25 x 20 = 25.

Sekarang 10rem akan sama dengan 250px, yaitu 10 x 25 = 250.

Merangkum em vs Perbedaan rem 

Apa semua di atas bermuara pada ini:

• Penerjemahan unit rem ke nilai piksel ditentukan oleh ukuran font dari elemen html.  Ukuran font ini dipengaruhi oleh pewarisan dari pengaturan ukuran font browser kecuali jika secara eksplisit diganti dengan unit yang tidak dikenai warisan.

• Terjemahan unit em ke nilai piksel ditentukan oleh ukuran font elemen yang digunakan. Ukuran font ini dipengaruhi oleh pewarisan dari elemen induk kecuali secara eksplisit diganti dengan unit yang tidak dikenai warisan.

Mengapa Menggunakan Unit rem :

Kekuatan terbesar yang ditawarkan oleh unit rem bukan hanya karena mereka memberikan ukuran yang konsisten terlepas dari unsur pewarisan. Sebaliknya, ini berarti mereka memberi kita cara agar pengaturan ukuran font pengguna mempengaruhi setiap aspek layout situs dengan menggunakan unit rem dimana kami biasa menggunakan unit px.

Untuk alasan ini, tujuan utama penggunaan unit rem harus memastikan ukuran font default apa pun yang ditetapkan browser pengguna, layout akan menyesuaikan untuk mengakomodasi ukuran teks di dalamnya.

Sebuah situs awalnya dapat dirancang berfokus pada ukuran font browser default yang paling umum yaitu 16px.

Tetapi dengan menggunakan unit rem, jika pengguna meningkatkan ukuran font mereka, integritas layout akan dipertahankan, dan teks tidak akan menindih dalam ruang yang kaku yang dimaksudkan untuk teks yang lebih kecil.

Dan jika pengguna menurunkan ukuran font mereka, keseluruhan skala layoutnya turun, dan teks itu tidak akan ditinggalkan dengan segelintir teks kecil di bagian kosong pada white-space.

Pengguna mengubah pengaturan ukuran font untuk semua jenis alasan, mulai dari penglihatan yang tidak wajar hingga memilih pengaturan optimal untuk perangkat yang bisa sangat berbeda ukurannya dan jarak pandang. Mengakomodasi pengaturan ini memungkinkan pengalaman pengguna menjadi jauh lebih baik.

Penting untuk diketahui:

Beberapa perancang desainer menggunakan layout berbasis rem bersamaan dengan pengaturan penetapan font-size unit px pada elemen html. Hal ini biasanya dilakukan agar perubahan ukuran font pada elemen html dapat menskalakan keseluruhan desain ke atas atau ke bawah.

Saya sangat menganjurkan agar hal ini tidak terjadi karena menimpa ukuran huruf yang diwariskan oleh elemen html dari pengaturan browser pengguna. Oleh karena itu ini mencegah pengaturan dari efek apapun, dan menghilangkan kemampuan pengguna untuk mengoptimalkan tampilan terbaik.

Jika anda ingin mengubah ukuran font pada elemen html, lakukan dengan nilai em atau rem karena ukuran font utama akan tetap menjadi kelipatan dari ukuran font browser pengguna.

Ini masih memungkinkan anda untuk menskalakan desain anda ke atas atau ke bawah dengan mengubah ukuran font elemen html anda, namun anda akan mempertahankan efek dari pengaturan browser pengguna.

Mengapa Menggunakan em

Nilai yang ditawarkan oleh unit em adalah mereka membiarkan ukuran ukuran ditentukan oleh ukuran huruf selain elemen html.

Untuk alasan ini, tujuan utama unit em harus memungkinkan skalabilitas dalam konteks elemen desain tertentu.

Misalnya, anda bisa mengatur padding, margin dan line-height sekitar item menu navigasi untuk menggunakan nilai-nilai em.

Dengan cara ini jika anda mengubah ukuran font menu, jarak di sekitar item menu akan dihitung secara proporsional, terlepas dari layout yang lain.

Pada bagian awal tentang pewarisan anda melihat seberapa cepat melacak unit em bisa lepas kendali.  Untuk alasan ini, saya sarankan hanya menggunakan unit em jika anda mengidentifikasi kebutuhan yang jelas untuk mereka.

Aplikasi praktis

Mungkin ada beberapa perdebatan dikalangan perancang web dan saya yakin orang yang berbeda memiliki pendekatan pilihan yang berbeda, namun rekomendasi saya adalah sebagai berikut.

Gunakan em untuk:

Ukuran apa pun yang harus dihitung bergantung pada ukuran huruf dari elemen selain elemen utama(root).

Secara umum, satu-satunya alasan anda harus menggunakan unit em adalah menskalakan elemen yang memiliki ukuran font non-default.

Seperti contoh di atas, komponen desain seperti item menu, tombol, dan judul mungkin memiliki ukuran font yang dinyatakan secara eksplisit. Jika anda mengubah ukuran font ini, anda ingin seluruh komponen untuk skala proporsional.

Sifat umum yang akan diterapkan panduan ini adalah pengaturan margin, padding, width, height dan line-height, bila digunakan pada elemen dengan ukuran font non-default.

Saya menyarankan agar bila anda mempekerjakan unit-unit em, ukuran font dari elemen yang mereka gunakan seharusnya diatur dalam unit rem untuk mempertahankan skalabilitas namun hindari kebingungan pewarisan.

Biasanya Jangan Gunakan Unit em untuk Ukuran Font

Ini sangat umum untuk melihat unit em yang digunakan untuk ukuran font, terutama di judul, namun saya menyarankan agar desain lebih mudah dikelola jika unit rem biasanya digunakan untuk ukuran font.

Alasan judul sering menggunakan unit em adalah pilihan yang lebih baik daripada unit px, yang relatif terhadap ukuran teks biasa. Namun unit rem bisa mencapai tujuan ini dengan baik. Jika penyesuaian ukuran font pada elemen html dibuat, ukuran heading akan tetap berskala juga.

Coba ubah ukuran font em pada elemen html di CodePen ini untuk anda lihat sendiri:

Lebih sering daripada tidak, kita tidak ingin ukuran font kita dihitung berdasarkan elemen selain elemen utama (root), hanya dengan beberapa pengecualian.

Salah satu contoh di mana kita mungkin menginginkan ukuran font berbasis em bisa menjadi menu drop-down, di mana kita memiliki teks item menu tingkat kedua yang berukuran tergantung ukuran font pada tingkat pertama. Contoh lain mungkin adalah ikon font yang digunakan di dalam sebuah tombol, di mana ukuran ikon harus terkait dengan ukuran teks tombol.

Namun sebagian besar elemen dalam desain web cenderung tidak memiliki jenis persyaratan ini, jadi anda biasanya ingin menggunakan unit rem untuk ukuran font, dengan unit em hanya dibutuhkan secara khusus.

Gunakan Unit rem untuk:

Ukuran apa pun yang tidak memerlukan unit em dengan alasan yang dijelaskan di atas, dan skala itu harus disesuaikan dengan ukuran font browser.

Ini mencakup hampir semua hal dalam desain standar termasuk sebagian besar tinggi, lebar, padding, margin, lebar border, ukuran font, bayangan (shadows), pada dasarnya hampir setiap bagian dari layout anda.

Singkatnya, seharusnya segala sesuatu yang bisa dibuat terukur dengan unit rem.

Tips.

Saat membuat layout, seringkali lebih mudah untuk berpikir dalam piksel namun menghasilkan output di unit rem.

Anda dapat memiliki perhitungan pixel menjadi rem dilakukan secara otomatis melalui preprocessor seperti Stylus / Sass / Less , atau postprocessor seperti PostCSS dengan plugin PXtoRem.

Sebagai alternatif, anda dapat menggunakan PXtoEM untuk melakukan konversi secara manual.

Selalu Pakai rem pada Media Queries

Yang penting, saat menggunakan unit rem untuk membuat desain yang seragam dan skalabel, media queries anda juga harus ada di unit rem. Ini akan memastikan bahwa apa pun ukuran font browser pengguna, media queries anda akan meresponsnya dan menyesuaikan layout anda.

Misalnya, jika pengguna menyusun teks dengan sangat tinggi, layout anda mungkin perlu diturunkan dari dua kolom ke kolom tunggal, sama seperti pada perangkat mobile layar yang lebih kecil.

Jika breakpoint anda berada pada lebar piksel tetap, hanya ukuran viewport yang berbeda yang bisa memicunya. Namun dengan breakpoint berbasis rem mereka akan menanggapi ukuran font yang berbeda juga.

Jangan gunakan em atau rem untuk:

Lebar Layout Multi Kolom

Lebar kolom dalam layout biasanya harus berbasis % sehingga mereka dapat dengan lancar menyesuaikan dengan tampilan yang tak terduga.

Namun, kolom tunggal masih harus secara umum menggabungkan nilai rem melalui pengaturan max-width.

Sebagai contoh:

1

.container {

2

    width: 100%;

3

    max-width: 75rem;

4

}

Hal ini membuat kolom tetap fleksibel dan terukur, namun mencegahnya menjadi terlalu lebar agar teks di dalamnya mudah dibaca.

Bila Elemen Harus Strictly Unscalable.

Dalam desain web yang khas tidak akan ada banyak bagian layout anda yang tidak dapat dirancang untuk skalabilitas. Namun sesekali anda akan menemukan elemen yang benar-benar perlu menggunakan nilai tetap eksplisit untuk tujuan mencegah penskalaan.

Prasyarat untuk menggunakan nilai ukuran tetap harus jika elemen yang dimaksud diskalakan, itu akan mematahkan. Ini benar-benar tidak sering muncul, jadi sebelum anda tergoda untuk mencabut unit px, tanyakan pada diri anda apakah menggunakannya adalah kebutuhan yang mutlak.

Merangkum

Mari kita dapatkan ringkasan singkat tentang apa yang telah kita bahas:

• unit rem dan em dihitung ke nilai piksel oleh browser, berdasarkan ukuran font dalam desain anda.
• unit em didasarkan pada ukuran font elemen yang mereka gunakan.
• unit rem didasarkan pada ukuran font dari elemen html.
• Unit em dapat dipengaruhi oleh pewarisan ukuran font dari elemen induk manapun.

• Unit rem dapat dipengaruhi oleh pewarisan ukuran font dari pengaturan font browser.

• Gunakan unit em untuk mengukur ukuran skala yang tergantung pada ukuran font dari elemen selain elemen utama(root).
• Gunakan unit rem untuk ukuran yang tidak memerlukan unit em, dan itu harus disesuaikan dengan ukuran font browser.
• Gunakan unit rem kecuali anda yakin anda memerlukan unit em, termasuk pada ukuran font.
• Gunakan unit rem pada media queries
• Jangan gunakan em atau rem pada lebar kolom multi layout - gunakan % sebagai gantinya.
• Jangan gunakan em atau rem jika penskalaan tidak terhindarkan akan menyebabkan elemen layout rusak.

Saya harap anda sekarang telah membangun gambaran yang kuat dan lengkap tentang bagaimana em dan unit rem bekerja, dan melalui hal itu tahu cara terbaik memanfaatkannya dalam desain anda.

Saya mendorong anda untuk mencoba panduan penggunaan yang terdapat dalam tutorial ini untuk diri anda sendiri, dan nikmati skalabilitas dan responsivitas yang lengkap dari layout yang akan mereka buat.