Pertama - tama ada dua teknik utama yang biasanya digunakan dalam menentukan ukuran teks dalam sebuah website. yaitu :

1. Menggunakan px
2. Menggunakan em

Mari kita tinjau dua pendekatan.

Sizing with px

Pada pertama kali pembuatan blog, saya menggunakan piksel (px) untuk ukuran teks. Hal ini dapat diandalkan karena konsisten. Sayangnya, pengguna Internet Explorer bahkan dalam IE9 tidak memiliki kemampuan untuk mengubah ukuran teks menggunakan fungsi browser memperbesar atau memperkecil ukuran font.

Bagi orang-orang yang sangat peduli dengan situs web atau blog mereka, ini mungkin akan menjadi masalah besar. Versi terbaru dari IE sudah meliputi fungsi zooming, yang dapat meningkatkan ukuran dari segala sesuatu di halaman yang juga sudah tersedia di hampir semua browser lainnya. Hal ini telah membantu mengurangi masalah ini.

Sizing with em

Seluruh ketidakmampuan untuk mengubah ukuran teks itu dalam IE telah menjadi beban yang berkelanjutan. Untuk menyiasati itu, kita dapat menggunakan em unit.

Teknik ini memodifikasi dasar font-size pada body dengan menggunakan persentase (%). Hal Ini dapat menyesuaikan ukuran, sehingga 1em sama dengan 10px, bukan 16px (default) atau berapapun itu. Untuk mengatur ukuran font-setara dengan 14px, set ke 1.4em.

Mari kita lihat contoh dibawah ini :

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

Masalah dengan ukuran font yang em-based adalah bahwa senyawa ukuran font. Sebuah list dalam list ukurannya tidak menjadi 14px, tetapi menjadi 20px. Untuk list dalam list lain yang lebih banyak maka ukurannya menjadi lebih besar, yaitu 27px. Jadi bagaimana untuk menyelesaikan masalah ini..?

Problem Solved

Untuk menyelesaikan masalah ukuran font yang digunakan dalam elemen list dalam list menjadi lebih besar kita perlu untuk mendefinisikan ukuran elemen-elemen anak dari elemen list.

Mari kita lihat potongan kode berikut :

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
li li, li p /* etc */ { font-size: 1em; }

Tetapi hal ini dapat membuat kita menjadi repot dalam hal mendefinisikan ukuran font. Lantas apa yang harus kita lakukan?

Sizing with rem

CSS3 memperkenalkan beberapa unit baru seperti artikel saya sebelumnya yang berjudul CSS3 Introduction - What's New?, termasuk unit rem, yang merupakan singkatan dari "root em". Mari kita lihat bagaimana rem bekerja.

Unit em relatif terhadap ukuran font yang menjadi parent, namun dapat menyebabkan masalah penggabungan tadi. Unit rem relatif memacu ke root atau elemen-html. Itu berarti bahwa kita dapat mendefinisikan ukuran font tunggal pada elemen html dan mendefinisikan semua unit rem menjadi persentase.

Mari kita lihat contoh ini :

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

Tetapi apakah browser dapat mendukung penggunaan rem ini? Anda mungkin akan terkejut bahwa semua browser mendukung adanya rem ini seperti halnya : Safari 5, Chrome, Firefox 3.6 +,Opera 11.60 +, dan bahkan Internet Explorer 9. Bahkan dalam IE9 mendukung text-resize ketika didefinisikan menggunakan rem. Apa yang dapat kita lakukan untuk browser yang tidak mendukung unit rem? Kita dapat menentukan ukuran kembali menggunakan px, Versi lama dari Internet Explorer masih tidak mampu untuk mengubah ukuran teks. Untuk melakukannya, pertama tentukan ukuran font menggunakan unit px dan kemudian menggunakan rem.

Example

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

Dan sekarang, kita memiliki teks yang konsisten dan dapat diprediksi ukurannya di semua browser utama.

Sizing with %

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

Elemen-elemen heading (h1,h2,h3 ...) sangat disarankan untuk menggunakan persentase (%) sebagai acuan untuk pengukuran font tersebut. 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 px dalam menentukan ukuran elemen heading.

Example

Dengan menggunakan satuan px

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}

Pola penyusutan teks akan berbeda jika Anda menggunakan satuan % saat menentukan ukuran judul artikel. Saat menggunakan satuan %, maka ukuran judul-judul artikel akan menyesuaikan diri berdasarkan perbandingan ukuran teks dasar saat itu, yaitu 13px (Contoh: 200% dari 13px adalah 26px):

Example

Dengan menggunakan satuan %

body {
  font-size:13px;
  font-family:Arial,Sans-Serif;
}
h1 {font-size:200%} /* =26px */
h2 {font-size:180%} /* =22.4px */
h3 {font-size:160%} /* =20.8px */
h4 {font-size:140%} /* =18.2px */
h5 {font-size:120%} /* =15.6px */
h6 {font-size:100%} /* =13px */