Kapan Harus Memakai Px, % Dan Em? - Dewa Blogger

Halaman

    Social Items

Buy Now
/ / / / Kapan Harus Memakai Px, % Dan Em?

Meskipun, kebanyakan dari kita masih bertahan dengan satuan piksel dikala memilih ukuran-ukuran elemen HTML, namun di sini Saya ingin mencoba untuk membuka mata Anda lebih lebar lagi biar Anda dapat mengerti betul mengapa satuan-satuan relatif menyerupai em dan % dalam banyak masalah lebih efisien dan logis dibandingkan dengan satuan piksel (px) yang selama ini paling sering digunakan alasannya ukuran mereka yang sangat akurat.

Ketika % Menjadi Lebih Baik

Persentase merupakan satuan yang tidak dihitung menurut ukuran elemen itu sendiri, melainkan dihitung menurut perbandingan ukuran elemen tersebut terhadap ukuran induknya.

Satuan % Dalam Sistem Grid

Dimulai dari masalah sistem grid, atau katakanlah kolom-kolom web Anda. Di sini kita mempunyai tiga elemen HTML untuk merancang sebuah susunan/layout situs sederhana. Terdiri dari pembungkus utama dan dua buah kolom. Salah satu kolom merupakan area artikel, dan satunya lagi merupakan area sidebar:

<div class="col-group">     <div class="left-col">Artikel...</div>     <div class="right-col">Sidebar...</div> </div>

Seseorang dengan sudut pandang piksel akan membuat layout dua kolom dengan pengukuran menyerupai ini:

.col-group {   width:600px;   overflow:hidden; }  .left-col {   width:400px;   float:left; }  .right-col {   width:200px; /* 600 - 400 */   float:right; }

CSS di atas akan menghasilkan layout dua kolom dengan ukuran pembungkus utama selebar 600 piksel. Kolom kiri selebar 400 piksel dan kolom kanan selebar 200 piksel. Ukuran layout yang sangat sempurna dan mustahil dapat diragukan akurasinya. Tapi sayangnya, layout piksel menyerupai ini hanya akan menyebabkan hambatan dikala Anda mencoba untuk memodifikasi atau memperbaharui lebar layout tersebut di masa depan. Misalnya, suatu dikala Anda ingin mengubah lebar layout menjadi 1000 piksel menyerupai ini:

.col-group {   width:1000px;   overflow:hidden; }

Pada dikala yang sama Anda tentu harus memperbaharui lebar kolom kiri dan kolom kanan:

.left-col {   width:600px; /* 400 + ((1000 - 600) / 2) */   float:left; }  .right-col {   width:400px; /* 1000 - 600 */   float:right; }

Tidak praktis, tidak ekonomis waktu dan membutuhkan perhitungan gres setiap kali ukuran layout diperbaharui. Jika susunan halaman hanya terdiri dari dua buah kolom sederhana menyerupai pola di atas mungkin tidak begitu menjadi masalah, tapi bagaimana kalau jumlah kolomnya banyak?

Bandingkan dengan dikala Anda mengatur lebar kolom memakai satuan persentase:

.col-group {   width:600px; /* lebar pembungkus utama */   overflow:hidden; }  .left-col {   width:66.6%; /* (400/600) x 100 */   float:left; }  .right-col {   width:33.4%; /* 100 - 66.6 */   float:right; }

Meskipun beberapa orang (termasuk Saya) masih merasa sedikit kesulitan ketika mencoba mengubah sudut pandang satuan piksel ke persen, tapi hasil balasannya nanti Saya jamin akan lebih stabil dan lebih gampang diperbaiki/diperbaharui (maintainable) dikala kita memakai satuan persen. Karena yang menjadi standar ukuran di sini hanya ada satu, yaitu pada elemen terluar saja. Sedangkan ukuran lebar bawah umur kolom di dalamnya yang memakai satuan persen akan secara otomatis mengikuti ukuran menurut perbandingan lebar induknya, betapapun kita mengubah lebar pembungkus luar kolom-kolom tersebut.

Demonstrasi di halaman ini mungkin dapat sedikit menjelaskan bagaimana persen dan piksel bekerja pada sistem grid:

Lihat Demo

Satuan % Dalam Elemen Heading/Judul Artikel

Elemen-elemen heading h1, h2, h3, h4, h5 dan h6 akan lebih baik kalau diatur memakai satuan persen. Walaupun beberapa ada juga yang memakai satuan em. Sebenarnya itu tidak masalah, alasannya baik em maupun % keduanya sama-sama merupakan satuan relatif. Yang penting cobalah untuk menghilangkan kebiasaan memakai satuan piksel dalam memilih ukuran elemen heading. Ini berafiliasi dengan pengaplikasian media queries yang lebih efisien dan juga fasilitas di dalam pengaturan ukuran judul menurut ukuran teks utama. Sebuah pola sederhana, di sini Anda mencoba memilih ukuran elemen-elemen heading dengan satuan piksel:

body {   font-size:13px;   font-family:Arial,Sans-Serif; }  h1 {font-size:28px} h2 {font-size:25px} h3 {font-size:22px} h4 {font-size:19px} h5 {font-size:16px} h6 {font-size:13px}

Mengapa satuan piksel jelek dalam hal ini? Itu alasannya satuan piksel hanya akan membuat Anda melaksanakan ekstra perubahan ukuran teks dalam media queries perangkat seluler. Dimulai dari ukuran teks dasar yang dideklarasikan di dalam selektor body hingga ke ukuran teks pada elemen heading level 6:

@media (max-width:360px) {   body {font-size:11px}   h1 {font-size:26px}   h2 {font-size:23px}   h3 {font-size:20px}   h4 {font-size:17px}   h5 {font-size:14px}   h6 {font-size:11px} }

Pola penyusutan teks akan berbeda kalau Anda memakai satuan persentase dikala memilih ukuran judul artikel. Saat memakai satuan persentase, maka ukuran judul-judul artikel akan beradaptasi menurut perbandingan ukuran teks dasar dikala itu, yaitu 13px (Sebagai contoh: 200% dari 13 piksel yaitu 26 piksel):

body {   font-size:13px;   font-family:Arial,Sans-Serif; }  h1 {font-size:200%} h2 {font-size:180%} h3 {font-size:160%} h4 {font-size:140%} h5 {font-size:120%} h6 {font-size:100%}

Karena Anda memakai satuan persentase pada semua judul artikel, maka dikala Anda memperkecil ukuran teks pada perangkat seluler, yang perlu Anda lakukan hanya memperkecil ukuran teks dasarnya saja, yaitu pada elemen <body>. Ukuran teks pada semua judul artikel nantinya akan menyusut beradaptasi menurut persentase terhadap ukuran teks utama yang sudah mengecil:

@media (max-width:360px) {   body {font-size:11px} }

Menggunakan satuan persentase untuk elemen heading juga akan mempermudah Anda di dalam memperbaharui ukuran teks artikel. Anda tidak perlu memperbaharui semua ukuran judul artikel. Cukup perbaharui ukuran teks dasarnya saja. Selebihnya akan secara otomatis mengikuti skala yang diterapkan.

Ketika em Menjadi Lebih Baik

em yaitu satuan yang dihitung menurut ukuran teks di sekitarnya. Pada dasarnya 1em sama dengan 16 piksel. Itu kalau Anda tidak memilih ukuran teks pada elemen manapun. Tapi kalau —misalnya— Anda memilih ukuran teks sebesar 30 piksel pada <body>, maka 1em di area <body> akan setara dengan 30px (1em = Ukuran Teks di Sekitarnya).

Satuan em dalam line-height dan margin Paragraf

Satuan em sangat bermanfaat untuk memilih ukuran dan jarak elemen yang terkait dekat dengan ukuran teks. Misalnya margin paragraf dan jarak antar baris teks.

Contoh Kasus: Dua buah kolom dengan elemen paragraf di dalamnya mendapat ukuran teks sebesar 13 piksel yang diturunkan dari <body>. Paragraf di dalam kolom pertama memakai satuan piksel untuk mengatur margin dan line-height, sedangkan paragraf yang berada di dalam kolom ke dua akan memakai satuan em:

HTML

<div class="one">     <p>Lorem ipsum dolor sit amet...</p>     <p>Lorem ipsum dolor sit amet...</p> </div> <div class="two">     <p>Lorem ipsum dolor sit amet...</p>     <p>Lorem ipsum dolor sit amet...</p> </div>

CSS

body {font-size:13px} /* 1em = 13px */  .one p {   line-height:18px;   margin:13px 0; }  .two p {   line-height:1.384615384615385em; /* 18 / 13 */   margin:1em 0; }

Hasil akhirnya, ukuran dan jarak antar baris paragraf akan tampak sama:

kebanyakan dari kita masih bertahan dengan satuan piksel dikala memilih ukuran Kapan Harus Menggunakan px, % dan em?
Sebelah kiri: Menggunakan piksel. Sebelah kanan: Menggunakan em.

Masalah akan muncul ketika Anda mencoba untuk memperbesar/memperkecil ukuran teks:

kebanyakan dari kita masih bertahan dengan satuan piksel dikala memilih ukuran Kapan Harus Menggunakan px, % dan em?
Sebelah kiri: Menggunakan piksel. Sebelah kanan: Menggunakan em.

Kolom sebelah kiri: Karena kita memakai satuan piksel, maka ketika ukuran teks berubah (dalam masalah ini: bertambah besar) jarak antar baris dan margin paragraf tetap sempit dan tidak berubah, bertahan pada ukuran 18px dan 13px. Membuat goresan pena menjadi semakin sulit untuk dibaca.

Kolom sebelah kanan: Karena kita memakai satuan em, maka skala ukuran tinggi baris dan margin antarparagraf akan beradaptasi menurut ukuran teks.

Dalam Semua Elemen yang Terkait dengan Ukuran Teks

Pada pada dasarnya satuan em cocok untuk diterapkan pada semua hal yang berafiliasi dengan ukuran teks. Semua hal yang membutuhkan ukuran dengan perbandingan yang sempurna terhadap teks. Contoh paling sederhana ada pada desain tombol:

kebanyakan dari kita masih bertahan dengan satuan piksel dikala memilih ukuran Kapan Harus Menggunakan px, % dan em?
Desain tombol dengan satuan em pada padding dan border-radius akan membuat skala tombol yang lebih ideal dibandingkan px.

Ketika px Menjadi Lebih Baik

Satuan piksel dihitung menurut ukuran lebar dan tinggi satu unit piksel pada layar. Oleh alasannya itu satuan piksel akan sesuai kalau diterapkan pada elemen-elemen yang membutuhkan ukuran yang akurat dan tidak terpengaruh dengan ukuran elemen di sekitarnya. Misalnya lebar dan tinggi ikon, tebal border, blur bayangan, posisi latar dan ukuran teks utama. Ukuran teks utama biasanya dideklarasikan pada elemen <body> atau <html>.

Masalah Akurasi Ukuran pada Satuan Non-Piksel

Tidak dapat dipungkiri bahwa ukuran persentase dan relatif teks tidak akan dapat seakurat ukuran piksel. Tapi memangnya siapa yang peduli dengan itu? Kita, para penikmat desain dan tipografi pada dasarnya tidak pernah peduli mengenai seberapa besar tepatnya, ukuran abjad dan judul artikel yang sedang kita baca. Kita tidak peduli berapa piksel ukuran judul dan teks yang sedang kita baca. Karena yang kita pedulikan selama ini yaitu proporsi yang ideal. Tipografi tidak begitu mementingkan akurasi, tipografi lebih mementingkan proporsi. Saya pikir kita tidak perlu khawatir untuk memulai beralih dari piksel dalam kasus-kasus tertentu menuju satuan-satuan relatif yang lebih gampang dipelihara dan responsif terhadap skala di sekitarnya.


Sumber https://www.dte.web.id/

Kapan Harus Memakai Px, % Dan Em?

Meskipun, kebanyakan dari kita masih bertahan dengan satuan piksel dikala memilih ukuran-ukuran elemen HTML, namun di sini Saya ingin mencoba untuk membuka mata Anda lebih lebar lagi biar Anda dapat mengerti betul mengapa satuan-satuan relatif menyerupai em dan % dalam banyak masalah lebih efisien dan logis dibandingkan dengan satuan piksel (px) yang selama ini paling sering digunakan alasannya ukuran mereka yang sangat akurat.

Ketika % Menjadi Lebih Baik

Persentase merupakan satuan yang tidak dihitung menurut ukuran elemen itu sendiri, melainkan dihitung menurut perbandingan ukuran elemen tersebut terhadap ukuran induknya.

Satuan % Dalam Sistem Grid

Dimulai dari masalah sistem grid, atau katakanlah kolom-kolom web Anda. Di sini kita mempunyai tiga elemen HTML untuk merancang sebuah susunan/layout situs sederhana. Terdiri dari pembungkus utama dan dua buah kolom. Salah satu kolom merupakan area artikel, dan satunya lagi merupakan area sidebar:

<div class="col-group">     <div class="left-col">Artikel...</div>     <div class="right-col">Sidebar...</div> </div>

Seseorang dengan sudut pandang piksel akan membuat layout dua kolom dengan pengukuran menyerupai ini:

.col-group {   width:600px;   overflow:hidden; }  .left-col {   width:400px;   float:left; }  .right-col {   width:200px; /* 600 - 400 */   float:right; }

CSS di atas akan menghasilkan layout dua kolom dengan ukuran pembungkus utama selebar 600 piksel. Kolom kiri selebar 400 piksel dan kolom kanan selebar 200 piksel. Ukuran layout yang sangat sempurna dan mustahil dapat diragukan akurasinya. Tapi sayangnya, layout piksel menyerupai ini hanya akan menyebabkan hambatan dikala Anda mencoba untuk memodifikasi atau memperbaharui lebar layout tersebut di masa depan. Misalnya, suatu dikala Anda ingin mengubah lebar layout menjadi 1000 piksel menyerupai ini:

.col-group {   width:1000px;   overflow:hidden; }

Pada dikala yang sama Anda tentu harus memperbaharui lebar kolom kiri dan kolom kanan:

.left-col {   width:600px; /* 400 + ((1000 - 600) / 2) */   float:left; }  .right-col {   width:400px; /* 1000 - 600 */   float:right; }

Tidak praktis, tidak ekonomis waktu dan membutuhkan perhitungan gres setiap kali ukuran layout diperbaharui. Jika susunan halaman hanya terdiri dari dua buah kolom sederhana menyerupai pola di atas mungkin tidak begitu menjadi masalah, tapi bagaimana kalau jumlah kolomnya banyak?

Bandingkan dengan dikala Anda mengatur lebar kolom memakai satuan persentase:

.col-group {   width:600px; /* lebar pembungkus utama */   overflow:hidden; }  .left-col {   width:66.6%; /* (400/600) x 100 */   float:left; }  .right-col {   width:33.4%; /* 100 - 66.6 */   float:right; }

Meskipun beberapa orang (termasuk Saya) masih merasa sedikit kesulitan ketika mencoba mengubah sudut pandang satuan piksel ke persen, tapi hasil balasannya nanti Saya jamin akan lebih stabil dan lebih gampang diperbaiki/diperbaharui (maintainable) dikala kita memakai satuan persen. Karena yang menjadi standar ukuran di sini hanya ada satu, yaitu pada elemen terluar saja. Sedangkan ukuran lebar bawah umur kolom di dalamnya yang memakai satuan persen akan secara otomatis mengikuti ukuran menurut perbandingan lebar induknya, betapapun kita mengubah lebar pembungkus luar kolom-kolom tersebut.

Demonstrasi di halaman ini mungkin dapat sedikit menjelaskan bagaimana persen dan piksel bekerja pada sistem grid:

Lihat Demo

Satuan % Dalam Elemen Heading/Judul Artikel

Elemen-elemen heading h1, h2, h3, h4, h5 dan h6 akan lebih baik kalau diatur memakai satuan persen. Walaupun beberapa ada juga yang memakai satuan em. Sebenarnya itu tidak masalah, alasannya baik em maupun % keduanya sama-sama merupakan satuan relatif. Yang penting cobalah untuk menghilangkan kebiasaan memakai satuan piksel dalam memilih ukuran elemen heading. Ini berafiliasi dengan pengaplikasian media queries yang lebih efisien dan juga fasilitas di dalam pengaturan ukuran judul menurut ukuran teks utama. Sebuah pola sederhana, di sini Anda mencoba memilih ukuran elemen-elemen heading dengan satuan piksel:

body {   font-size:13px;   font-family:Arial,Sans-Serif; }  h1 {font-size:28px} h2 {font-size:25px} h3 {font-size:22px} h4 {font-size:19px} h5 {font-size:16px} h6 {font-size:13px}

Mengapa satuan piksel jelek dalam hal ini? Itu alasannya satuan piksel hanya akan membuat Anda melaksanakan ekstra perubahan ukuran teks dalam media queries perangkat seluler. Dimulai dari ukuran teks dasar yang dideklarasikan di dalam selektor body hingga ke ukuran teks pada elemen heading level 6:

@media (max-width:360px) {   body {font-size:11px}   h1 {font-size:26px}   h2 {font-size:23px}   h3 {font-size:20px}   h4 {font-size:17px}   h5 {font-size:14px}   h6 {font-size:11px} }

Pola penyusutan teks akan berbeda kalau Anda memakai satuan persentase dikala memilih ukuran judul artikel. Saat memakai satuan persentase, maka ukuran judul-judul artikel akan beradaptasi menurut perbandingan ukuran teks dasar dikala itu, yaitu 13px (Sebagai contoh: 200% dari 13 piksel yaitu 26 piksel):

body {   font-size:13px;   font-family:Arial,Sans-Serif; }  h1 {font-size:200%} h2 {font-size:180%} h3 {font-size:160%} h4 {font-size:140%} h5 {font-size:120%} h6 {font-size:100%}

Karena Anda memakai satuan persentase pada semua judul artikel, maka dikala Anda memperkecil ukuran teks pada perangkat seluler, yang perlu Anda lakukan hanya memperkecil ukuran teks dasarnya saja, yaitu pada elemen <body>. Ukuran teks pada semua judul artikel nantinya akan menyusut beradaptasi menurut persentase terhadap ukuran teks utama yang sudah mengecil:

@media (max-width:360px) {   body {font-size:11px} }

Menggunakan satuan persentase untuk elemen heading juga akan mempermudah Anda di dalam memperbaharui ukuran teks artikel. Anda tidak perlu memperbaharui semua ukuran judul artikel. Cukup perbaharui ukuran teks dasarnya saja. Selebihnya akan secara otomatis mengikuti skala yang diterapkan.

Ketika em Menjadi Lebih Baik

em yaitu satuan yang dihitung menurut ukuran teks di sekitarnya. Pada dasarnya 1em sama dengan 16 piksel. Itu kalau Anda tidak memilih ukuran teks pada elemen manapun. Tapi kalau —misalnya— Anda memilih ukuran teks sebesar 30 piksel pada <body>, maka 1em di area <body> akan setara dengan 30px (1em = Ukuran Teks di Sekitarnya).

Satuan em dalam line-height dan margin Paragraf

Satuan em sangat bermanfaat untuk memilih ukuran dan jarak elemen yang terkait dekat dengan ukuran teks. Misalnya margin paragraf dan jarak antar baris teks.

Contoh Kasus: Dua buah kolom dengan elemen paragraf di dalamnya mendapat ukuran teks sebesar 13 piksel yang diturunkan dari <body>. Paragraf di dalam kolom pertama memakai satuan piksel untuk mengatur margin dan line-height, sedangkan paragraf yang berada di dalam kolom ke dua akan memakai satuan em:

HTML

<div class="one">     <p>Lorem ipsum dolor sit amet...</p>     <p>Lorem ipsum dolor sit amet...</p> </div> <div class="two">     <p>Lorem ipsum dolor sit amet...</p>     <p>Lorem ipsum dolor sit amet...</p> </div>

CSS

body {font-size:13px} /* 1em = 13px */  .one p {   line-height:18px;   margin:13px 0; }  .two p {   line-height:1.384615384615385em; /* 18 / 13 */   margin:1em 0; }

Hasil akhirnya, ukuran dan jarak antar baris paragraf akan tampak sama:

kebanyakan dari kita masih bertahan dengan satuan piksel dikala memilih ukuran Kapan Harus Menggunakan px, % dan em?
Sebelah kiri: Menggunakan piksel. Sebelah kanan: Menggunakan em.

Masalah akan muncul ketika Anda mencoba untuk memperbesar/memperkecil ukuran teks:

kebanyakan dari kita masih bertahan dengan satuan piksel dikala memilih ukuran Kapan Harus Menggunakan px, % dan em?
Sebelah kiri: Menggunakan piksel. Sebelah kanan: Menggunakan em.

Kolom sebelah kiri: Karena kita memakai satuan piksel, maka ketika ukuran teks berubah (dalam masalah ini: bertambah besar) jarak antar baris dan margin paragraf tetap sempit dan tidak berubah, bertahan pada ukuran 18px dan 13px. Membuat goresan pena menjadi semakin sulit untuk dibaca.

Kolom sebelah kanan: Karena kita memakai satuan em, maka skala ukuran tinggi baris dan margin antarparagraf akan beradaptasi menurut ukuran teks.

Dalam Semua Elemen yang Terkait dengan Ukuran Teks

Pada pada dasarnya satuan em cocok untuk diterapkan pada semua hal yang berafiliasi dengan ukuran teks. Semua hal yang membutuhkan ukuran dengan perbandingan yang sempurna terhadap teks. Contoh paling sederhana ada pada desain tombol:

kebanyakan dari kita masih bertahan dengan satuan piksel dikala memilih ukuran Kapan Harus Menggunakan px, % dan em?
Desain tombol dengan satuan em pada padding dan border-radius akan membuat skala tombol yang lebih ideal dibandingkan px.

Ketika px Menjadi Lebih Baik

Satuan piksel dihitung menurut ukuran lebar dan tinggi satu unit piksel pada layar. Oleh alasannya itu satuan piksel akan sesuai kalau diterapkan pada elemen-elemen yang membutuhkan ukuran yang akurat dan tidak terpengaruh dengan ukuran elemen di sekitarnya. Misalnya lebar dan tinggi ikon, tebal border, blur bayangan, posisi latar dan ukuran teks utama. Ukuran teks utama biasanya dideklarasikan pada elemen <body> atau <html>.

Masalah Akurasi Ukuran pada Satuan Non-Piksel

Tidak dapat dipungkiri bahwa ukuran persentase dan relatif teks tidak akan dapat seakurat ukuran piksel. Tapi memangnya siapa yang peduli dengan itu? Kita, para penikmat desain dan tipografi pada dasarnya tidak pernah peduli mengenai seberapa besar tepatnya, ukuran abjad dan judul artikel yang sedang kita baca. Kita tidak peduli berapa piksel ukuran judul dan teks yang sedang kita baca. Karena yang kita pedulikan selama ini yaitu proporsi yang ideal. Tipografi tidak begitu mementingkan akurasi, tipografi lebih mementingkan proporsi. Saya pikir kita tidak perlu khawatir untuk memulai beralih dari piksel dalam kasus-kasus tertentu menuju satuan-satuan relatif yang lebih gampang dipelihara dan responsif terhadap skala di sekitarnya.


Sumber https://www.dte.web.id/
CSS Desain Lanjutan
Langganan: Posting Komentar (Atom)