Jika Anda membuka lembar gaya situs web apa pun, Anda akan menemukan rem, em, atau piksel, atau kombinasi apa pun dari itu. Dalam penataan CSS, ini adalah unit pengukuran utama yang digunakan. Apakah Anda mendesain situs dari awal, atau jika Anda telah "mewarisi" situs yang dirancang sebelumnya yang perlu Anda pertahankan, ini penting untuk tipografi, spasi, dan ukuran lainnya dalam desain visual.

Apa yang membuat satu unit pengukuran lebih baik dari yang lain? Tidak ada jawaban yang pasti, dan tergantung pada situasinya, yang satu mungkin lebih disukai daripada yang lain. Mengetahui kasus penggunaan dan apa yang paling berhasil akan membantu menentukan pengukuran terbaik untuk gaya Anda.

Piksel

Sejak hari-hari awal web, piksel telah menjadi opsi yang ditemukan di lembar gaya di mana-mana. Mereka dapat diandalkan, tepat, dan konsistensi mereka tidak dapat ditandingi. Piksel didukung di semua browser, yang membuatnya mudah digunakan.

Meskipun pikselnya bagus, mereka memiliki beberapa keterbatasan. Karena mereka adalah pengukuran yang ditetapkan, pengguna tidak dapat mengubah ukuran teks browser default di pengaturan browser. Hal-hal tidak meningkat seperti yang mereka lakukan dengan ems dan rems, membuat perubahan ukuran menjadi sulit dari sudut pandang aksesibilitas bagi pengguna. Orang dapat berargumen bahwa pengguna hanya dapat memperbesar, daripada masuk ke pengaturan browser. Tidak ada jawaban yang benar atau salah, itu hanya sesuatu yang perlu diingat.

Apakah mereka?

Piksel adalah unit pengukuran yang didasarkan pada ukuran yang ditetapkan. Mereka adalah unit untuk mengukur dimensi pada layar dan digunakan ketika desain yang tepat diperlukan. Kami mengatakan hal-hal seperti "resolusi piksel", jadi kami terbiasa dengan pengukuran ini.

Contoh akan terlihat seperti ini:

.main-header p {
font-size: 14px;
}

Piksel digunakan dalam desain web, tetapi di era desain web agnostik perangkat, pengukuran layar bukanlah fokus utama. Ini semua tentang bagaimana membuat konten kami paling cocok di perangkat yang tak terhitung jumlahnya, jadi ada ems dan rem yang dapat membantu dengan itu.

ems

Unit pengukuran ini memiliki sejarah panjang. Itu kembali ke tahun 1996 dan telah ada sejak hari-hari awal CSS. Piksel dianggap sebagai praktik terbaik, jadi ems tidak begitu populer di masa-masa awal. Sejak itu mereka mendapatkan popularitas karena tujuannya adalah untuk berfungsi sebagai unit yang relatif terhadap ukuran font dalam konten tertentu dan mereka membantu dengan konsistensi.

Apakah mereka?

Jika Anda menyukai tipografi klasik, Anda mungkin mengenali "em", karena itu adalah unit pengukuran yang berasal dari dunia tipe cetak. Menggunakan ini sebagai unit dalam tipografi, pengukuran ini sama dengan ukuran titik yang ditentukan saat ini. Misalnya, satu em dalam jenis huruf 16 poin adalah 16 poin. Unit ini sama untuk semua tipografi pada ukuran titik tertentu.

Kami tidak berbicara tentang cetak di sini, jadi bagaimana ems masuk ke dalam desain web? Ukuran relatif adalah nilai jual yang besar bagi ems karena membantu mengontrol ukuran elemen yang terkait dengan elemen lain. Ems dapat berfungsi sebagai blok bangunan yang bagus untuk elemen situs web karena fakta bahwa em menghargai gabungan. Namun, penting untuk benar-benar memahami cara kerja peracikan ini.

Memahami ems

Dalam kebanyakan kasus, kecuali browser default diatur ke sesuatu yang lain, em adalah 16 px. Ketika Anda melihat 1,5 em, itu akan membuatnya menjadi 24 piksel. Ini tidak selalu sesederhana itu. Apa yang terjadi ketika bersarang terlibat? Ini bisa nyaman dan membingungkan. Mengetahui cara kerja sesuatu saat bekerja dengan ems pasti akan membantu memecahkan misteri apa pun. Berapa ukuran paragraf "Saya bersarang" di bawah ini?

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

.one, .two {

font-size: 0.5em;

}

.three {

font-size: 2em;

}

Ada tiga div di sini, dan paragrafnya cukup bersarang. Dengan cascading DOM, Anda mungkin harus melakukan beberapa pekerjaan detektif. Katakanlah kita bekerja dengan em 16px, karena itu yang paling umum.

Kelas .one mengalikan 1em dengan 0,5, yaitu 0,5 em atau 8 px. Dengan kelas .two , ini sekali lagi dikalikan dengan 0,5, yaitu .25 em atau 4px. Segalanya menjadi sangat kecil, jadi kelas .three akan membantu. Kita akan mengambil .25 em dan mengalikannya dengan 2. Hasilnya adalah 0.5 em atau 8px.

Satu hal yang dapat membantu adalah mengatur ukuran pada elemen HTML. Sesuatu seperti ini akan menentukan ukuran em yang disetel, alih-alih mengandalkan em yang disetel oleh browser. Mari kita atur 1 em ke 20px. Jika ini digunakan dengan contoh di atas, prinsip yang sama dengan bersarang akan berlaku. Perlu diingat, kami telah menentukan ukuran piksel, sehingga akan memengaruhi kemampuan untuk menskalakan teks dengan menggunakan opsi pengaturan browser.

html {

font-size: 20px;

}

Selain piksel, ukuran font juga bisa diatur dengan persentase. Intinya adalah bahwa ems dapat bekerja bersama unit pengukuran lainnya. Anda pasti akan menemukan ini, karena cukup umum untuk mengatur font tubuh ke persentase untuk membantu menetapkan garis dasar. Katakanlah ukuran font dimulai sebagai 62,5% dari ukuran em. Dengan ukuran em 16px, ukuran font akan menjadi 10px.

body {

font-size:62.5%;

}

Setelah Anda memiliki pemahaman, ems dapat menjadi aset yang baik untuk proyek Anda. Mengukur teks sub-elemen ke elemen induknya tentu bisa berguna. Selain itu, ems memudahkan untuk menentukan padding yang lebih besar pada wadah teks daripada yang mungkin ditemukan dalam spasi kata, membuatnya mengikuti aturan kedekatan visual. Item terkait akan dikelompokkan secara visual, dengan lebih sedikit kekacauan, dan menyediakan tata letak yang terorganisir.

Fitur hebat lainnya dari ems adalah keunggulan aksesibilitas. Karena relatif terhadap akar DOM, ems membuatnya sempurna untuk mengubah ukuran seluruh desain berdasarkan preferensi pengguna. Di preferensi browser, Anda dapat dengan mudah mengubah ukuran font default, yang kemudian mengubah perhitungan, dalam ems, ke seluruh situs web.

Rems

Apakah mereka?

Rems adalah tambahan yang cukup baru untuk timeline CSS. Unit pengukuran ini diperkenalkan dengan CSS3 dan memecahkan beberapa masalah dengan piksel dan ems. Dengan nama yang mirip dengan "ems", Anda mungkin bertanya-tanya apa singkatan dari "r". Itu berasal dari istilah "Root EM."

Akarnya adalah elemen HTML. Ukuran yang ditentukan pada elemen HTML adalah dasar untuk pengukuran ini. Anda akan melihat bahwa kami telah menggunakan ukuran em pada elemen HTML; tidak apa-apa untuk menggabungkan dua jenis pengukuran.

html {
font-size: 1em;
}

.one {
font-size: 1.2rem; /* 1.2 x the value set in html */
}

Peramban modern mendukung rems, tetapi pastikan untuk memeriksa dengan BrowserStack peramban lama apa yang perlu Anda dukung sebelum melakukan rems. Namun, jangan biarkan browser lama menahan Anda; Anda selalu dapat menentukan mundur piksel untuk apa pun di bawah IE9. Peramban modern mengabaikan piksel karena mereka lebih suka rem. Itu bisa terlihat seperti ini:

.my-text {

font-size: 24px;

font-size: 1.5rem;

}

Memahami rem

Ingat matematika yang harus kita lakukan untuk elemen bersarang dari ems? Itu tidak perlu dengan rems. Itu semua didasarkan pada elemen root itu. Kami tidak perlu khawatir tentang elemen induk, itu selalu didasarkan pada root.

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

html {

font-size: 1em;

}

.one, .two {

font-size: 0.52em;

}

.three {

font-size: 2rem;

}

Ada tiga div di sini, dan paragrafnya cukup bersarang seperti yang kita lihat di contoh em. Sekali lagi, katakanlah kita bekerja dengan ukuran em 16px.

Kelas .one dan .two memiliki ukuran yang ditetapkan, tetapi mereka tidak terlalu penting di sini karena bersarang tidak terpengaruh dengan rem seperti halnya dengan ems. Yang terpenting adalah gaya .three, yaitu 2 em. Paragraf akan didasarkan pada elemen HTML 1em. Pengukuran ini akan menjadi dua kali lipat, memberi kita 2 rem atau 32 piksel.

Ingin meningkatkan semuanya secara merata? Cukup sesuaikan ukuran elemen root. Ini juga berguna saat menyesuaikan ukuran default browser. Anda bisa melihat bagaimana ems diizinkan untuk itu, rems juga.

Ada jauh lebih sedikit yang perlu dikhawatirkan tentang perilaku bersarang yang tidak terduga dengan rems. Sangat mudah untuk memahami di mana elemen root berperan dan bagaimana hal itu memengaruhi gaya Anda saat menggunakan rem.

Saat membandingkan pengukuran yang berbeda, Anda dapat melihat bahwa mereka memiliki pro dan kontra. Sangat memahami cara kerja unit pengukuran, dan cara kerjanya dengan pengaturan browser, akan membantu Anda memilih mana yang paling sesuai untuk situasi atau proyek.