Kapan Harus Menggunakan px, % dan em?

Tabel Konten
  1. Ketika % Menjadi Lebih Baik 
    1. Satuan % Dalam Sistem Grid 
    2. Satuan % Dalam Elemen Heading/Judul Artikel 
  2. Ketika em Menjadi Lebih Baik 
    1. Satuan em dalam line-height dan margin Paragraf 
      1. HTML 
      2. CSS 
    2. Dalam Semua Elemen yang Terkait dengan Ukuran Teks 
  3. Ketika px Menjadi Lebih Baik 
  4. Masalah Akurasi Ukuran pada Satuan Non-Piksel 

Meskipun, kebanyakan dari kita masih bertahan dengan satuan piksel saat menentukan ukuran-ukuran elemen HTML, namun di sini Saya ingin mencoba untuk membuka mata Anda lebih lebar lagi agar Anda bisa mengerti betul mengapa satuan-satuan relatif seperti em dan % dalam banyak kasus lebih efisien dan logis dibandingkan dengan satuan piksel (px) yang selama ini paling sering dipakai karena ukuran mereka yang sangat akurat.

Ketika % Menjadi Lebih Baik 

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

Satuan % Dalam Sistem Grid 

Dimulai dari kasus sistem grid, atau katakanlah kolom-kolom web Anda. Di sini kita memiliki 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 seperti 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 tepat dan tidak mungkin bisa diragukan akurasinya. Tapi sayangnya, layout piksel seperti ini hanya akan menimbulkan kendala saat Anda mencoba untuk memodifikasi atau memperbaharui lebar layout tersebut di masa depan. Misalnya, suatu saat Anda ingin mengubah lebar layout menjadi 1000 piksel seperti ini:

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

Pada saat 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 hemat waktu dan membutuhkan perhitungan baru setiap kali ukuran layout diperbaharui. Jika susunan halaman hanya terdiri dari dua buah kolom sederhana seperti contoh di atas mungkin tidak begitu menjadi masalah, tapi bagaimana jika jumlah kolomnya banyak?

Bandingkan dengan saat Anda mengatur lebar kolom menggunakan 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 akhirnya nanti Saya jamin akan lebih stabil dan lebih mudah diperbaiki/diperbaharui (maintainable) saat kita menggunakan satuan persen. Karena yang menjadi standar ukuran di sini hanya ada satu, yaitu pada elemen terluar saja. Sedangkan ukuran lebar anak-anak kolom di dalamnya yang menggunakan satuan persen akan secara otomatis mengikuti ukuran berdasarkan perbandingan lebar induknya, betapapun kita mengubah lebar pembungkus luar kolom-kolom tersebut.

Demonstrasi di halaman ini mungkin bisa 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 jika diatur menggunakan satuan persen. Walaupun beberapa ada juga yang menggunakan satuan em. Sebenarnya itu tidak masalah, karena baik em maupun % keduanya sama-sama merupakan satuan relatif. Yang penting cobalah untuk menghilangkan kebiasaan menggunakan satuan piksel dalam menentukan ukuran elemen heading. Ini berhubungan dengan pengaplikasian media queries yang lebih efisien dan juga kemudahan di dalam pengaturan ukuran judul berdasarkan ukuran teks utama. Sebuah contoh sederhana, di sini Anda mencoba menentukan 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 buruk dalam hal ini? Itu karena satuan piksel hanya akan membuat Anda melakukan ekstra perubahan ukuran teks dalam media queries perangkat seluler. Dimulai dari ukuran teks dasar yang dideklarasikan di dalam selektor body sampai 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 jika Anda menggunakan satuan persentase saat menentukan ukuran judul artikel. Saat menggunakan satuan persentase, maka ukuran judul-judul artikel akan menyesuaikan diri berdasarkan perbandingan ukuran teks dasar saat itu, yaitu 13px (Sebagai contoh: 200% dari 13 piksel adalah 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 menggunakan satuan persentase pada semua judul artikel, maka saat 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 menyesuaikan diri berdasarkan 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 adalah satuan yang dihitung berdasarkan ukuran teks di sekitarnya. Pada dasarnya 1em sama dengan 16 piksel. Itu jika Anda tidak menentukan ukuran teks pada elemen manapun. Tapi jika —misalnya— Anda menentukan 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 menentukan ukuran dan jarak elemen yang terkait erat dengan ukuran teks. Misalnya margin paragraf dan jarak antar baris teks.

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

PX & EM
Sebelah kiri: Menggunakan piksel. Sebelah kanan: Menggunakan em.

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

PX & EM
Sebelah kiri: Menggunakan piksel. Sebelah kanan: Menggunakan em.

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

Kolom sebelah kanan: Karena kita menggunakan satuan em, maka skala ukuran tinggi baris dan margin antarparagraf akan menyesuaikan diri berdasarkan ukuran teks.

Dalam Semua Elemen yang Terkait dengan Ukuran Teks 

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

CSS3 Buttons
Desain tombol dengan satuan em pada padding dan border-radius akan menciptakan skala tombol yang lebih ideal dibandingkan px.

Ketika px Menjadi Lebih Baik 

Satuan piksel dihitung berdasarkan ukuran lebar dan tinggi satu unit piksel pada layar. Oleh karena itu satuan piksel akan sesuai jika 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 bisa dipungkiri bahwa ukuran persentase dan relatif teks tidak akan bisa 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 huruf 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 adalah 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 mudah dipelihara dan responsif terhadap skala di sekitarnya.

24 Komentar

  • Beben Koben

    WOW...ternyata begono perinciannya yah...xixixi \o/

  • Mas Sugeng

    Kalo pake em sama % harus ngitung-itung perbandingannya, itulah kenapa saya lebih memilih pake pixel, 12px ya hasilnya 12px hehe..

    • Unknown

      Wkwkwkwkw Mas Sugeng Benerrr :D
      Saya Pun Lebih Suka Memakai Yang px :D

  • Jerry Kong

    Mas, saya pakai template personified buatan Paul Santosh. Saya mencoba membuat footer 3 kolom, tapi kenapa text yang terdapat pada kolom tersebut tidak bisa menyesuaikan dengan pembatas kolom nya ya? Masalah ini juga terjadi pada bagian artikel coba lihat gambar pada artikel saya terlalu mepet dan hampir menempel dengan sidebar nya. Begitu juga kalau saya menulis dan lupa menekan enter, maka text artikel akan memanjang ke kanan dan bertabrakan dengan sidebarnya. Kira-kira kode apa yang harus ditambahkan agar gambar dan text yang kita tulis dan unggah menyesuaikan dengan ukuran bagian border pembatasnya ya? Terima kasih atas tanggapannya.
    Oh ya ini url blog saya http://umpansitus.blogspot.com/

    • Taufik Nurrohman

      .post-body,
      .widget-content {
      overflow:hidden;
      word-wrap:break-word;
      }
  • hanggarps

    huuuumt ini membuka sekali kenapa ada satu em, %, px itu perlu

  • Fajrin

    wah ane bener2 baru paham mas dan terlalu banyak menggunakan px

  • Unknown

    Super sekali artikelnya. Pengetahuan yang saya dapat di artikel ini biasanya saya dapatkan dari setidaknya 50 artikel lain tentang template. Saya sempat melompati beberapa kalimat tapi akhirnya kembali lagi sampai semua kata habis terbaca. Saya punya 1 pertanyaan mas, tolong di jawab B) saya selalu menggunakan tempate yang saya modifikasi dari template lain sampai 99%. Saya juga ingin membuat template sendiri dimulai dari huruf pertama, masalahnya saya tidak tahu harus memulai dari mana ? software apa yang dipakai ? de el el. Untuk jawabannya, sebelum dan sesudahnya sy ucapkan terima kasih.

  • Anonim

    yah makasih ya mas....akhirnya pencerhan masalah px dan em serta permasalahan % ketemunya di sini juga. aku pelajari dulu mas. salam sahabat blogger.

  • Anonim

    Om Admin, saya mau nanya, kalau pt itu satuan buat apa ya ? kok saya pake buat ngatur button berisi text ga bisa ya ?
    Sekalian om minta review blog saya ya.. alanmsm.blogspot.com

    • Taufik Nurrohman

      pt itu berarti point. Satuan ini biasa dipakai untuk standar pencetakan di atas kertas. Umum dinyatakan di dalam kueri cetak, kalau untuk halaman web jarang digunakan karena tidak akurat:

      @media print {
      body {font-size:12pt}
      }
  • Mas Iwan

    Mas, saya mau tanya nih berkaitan dengan artikel ini.
    Bagaimana cara mudahnya dalam menentukan satuan em ?

    Jujur saya sering pakai px, karena gak ribet.. Tapi melihat postingan anda ini, jadi saya ingin menerapkannya di blog.. terima kasih.. :)

    • Taufik Nurrohman

      Sama seperti persentase, bedanya cuma ada di pembanding yang diambil dari ukuran huruf pada elemen induk. Misal elemen induk memiliki ukuran huruf 20 piksel, maka untuk membuat lebar anak elemen dari elemen induk tersebut menjadi 10 piksel bisa dengan cara mengeset width menjadi .5em

      • Anonim

        untuk memaksimalkan pemakaian em atau %, butuh yang namanya "wraper"

        • Taufik Nurrohman

          Biasanya piksel dulu, tapi pas masuk ke ukuran layar yang lebarnya lebih sempit/sama dengan lebar wrapper, setelah itu bisa memakai satuan persentase (diubah melalui media query).

  • agus juhana

    Pusing Saya Gan Klw Mengenai Persen ke Pixel Malah kepala jadi Berat Kayaknya Hehehe

  • Dirk

    jujur baru tahu gan.......ternyata ini ya bedanya.
    kebanyakan make px jadi gak pede kalo pake yg lain.

  • FORTUNA MEDIA

    Salam mas Taufik,saya ada pertanyaan nih..mohon bantuannya ya..terimakasih sebelumnya;
    1-Kenapa ya ,kapan sy copy langsung artikel dr website lain..misalnya dari wikipedia.kapan diposting px tulisanya jd size;'small' malah kadang2 jd xxsmall'
    Maka sy terpaksa robah px nya di HTML..Apa caranya mas setiap postingan blog saya tak perlu dirubah pxnya..otomatik terus 12px atau 14 px gitu..

    2- Mas,blog saya kapan dilihat via ponsel koq judul artikel di homepage berdempet2 atau bertindih2 dgn kalimat yg saya isi di "Search Description"
    Hingga judulnya gak bisa dibaca.gimana ya cara merobahnya mas?
    Ini blog sy mas;
    fortunalifestyle.blogspot.my/http://fazryan87.blogspot.my/

    Terimakasih banyak atas perhatian mas Taufik..;)

    • Taufik Nurrohman

      1. Itu sudah bawaan dari editor WYSIWYG. Kalau mau mengembalikan ukuran fon ke tampilan normal (tanpa gaya) bisa dengan cara menyeleksi semua teks yang ada kemudian klik tombol Hapus Format.
      2. Kamu memakai templat asli bawaan dari Blogger pada tampilan seluler, Saya tidak bisa melakukan apa-apa untuk masalah tampilan.

  • @Oci_tz

    Mw comment tp gk tau bakal di balas apa enggak...untung2 an aja..

    ASK : :Ozz
    (TENTANG LAYOUT)
    Misalnya saya membuat satuan pixel pada bagian body. Lalu membuat satuan persen di semua bagian wrappper. disini saya mengerti wrapper akan mengambil dari elemen body...Nah kalau isi elemen wrapper saya bagi lg dengan satuan persen apakah mengambil dari elemen induk wrapper atau tetap dari element body ?????

  • andrie

    Wahhh menarik juga sih ini, terutama saat layar dikecilkan atau dibesarkan secara manual. Tapi kenapa ya mas, pas zoom layar menggunakan "CTRL + plus" dan "CTRL + scroll" itu hasilnya berbeda.

    Saya pernah kejadian waktu presentasi, yang work/jalan itu saat menggunakan ctrl + scroll sedangkan ctrl + plus itu tidak jalan (maksudnya fontnya gak menyesuaikan layarnya), dan kebetulan pas presentasi gurunya pake yang ctrl + plus. Aku kaget banget sih itu. Kira kira pengaruh gak sih mas dengan penggunaan cara zoom yang berbeda seperti itu dengan px % atau em ?

    • Taufik Nurrohman

      Biasanya itu pengaruh dari aplikasi tertentu di komputer yang menimpa fungsi kombinasi tombol [Ctrl] + [+] bawaan. Dulu Saya juga pernah mengalami, tapi untuk kasus Saya adalah karena aplikasi Notepad++ yang merusak fingsi kombinasi tombol [Ctrl] + [Y] → https://superuser.com/a/839143

Komentar telah ditutup.