Assalamu'alaikum wr.wb
Kali ini saya akan berbagi Cara Mengubah Ukuran Font HTML dengan CSS (font-size).
Mengenal Property CSS
Untuk mengubah besar atau ukuran dari sebuah font atau teks dengan CSS, kita menggunakan properti font-size. Properti font-size cukup sederhana dan ditulis seperti contoh berikut ini:
Yang membuat menarik (dan juga memusingkan) adalah CSS menyediakan banyak “satuan ukuran” teks yang bisa dipilih, dimulai dari pixel seperti contoh diatas, keyword seperti small, medium, large, ukuran satuan persen, em, dan juga ukuran lain seperti cm, mm, pt, dan pica.
Ukuran satuan cm, mm, pt dan pica berasal dari media cetak seperti koran dan majalah. Satuan ini cocok untuk media yang bersifat pasti (dimana kita bisa menentukan sendiri ukuran kertas yang akan digunakan). Namun satuan ukuran tersebut tidak cocok di dalam media elektronik seperti web. Karena media yang digunakan oleh pengunjung web bisa bermacam-macam mulai dari smartphone dengan lebar layar 2 inchi sampai dengan monitor desktop 20 inchi atau lebih. Satuan ukuran cm, mm, pt dan pica menjadi tidak relevan, sehingga jarang digunakan.
Satuan Ukuran Font: Pixel (px)
Satuan ukuran pixel relatif mudah dipahami karena ia tidak terikat dengan setingan browser. Ketika kita mendefenisikan ukuran font sebesar 20 pixel, maka web browser akan menampilkannya sebesar (tentu saja) 20 pixel. Satuan pixel ini banyak digunakan karena ditampilkan secara konsisten di dalam berbagai web browser.Contoh penggunaan pixel:
Satuan Ukuran Font: Persen (%)
Satuan persen adalah satuan yang bersifat relatif. Perhitungan ukuran persen akan mendapatkan ukuran font dari setingan parent element. Jika kita mendefenisikan ukuran font tag <p> sebesar 100%, maka tag <p> akan memiliki ukuran yang sama dengan parent element. Namun jika tag <p> dibuat sebesar 120%, maka ukurannya akan sebesar 120% dari parent element. Parent element adalah tag induk dimana selector CSS tersebut berada didalamnya.Contoh kode HTML:
Jika kita membuat ukuran font tag <p> sebesar 80%, maka ukuran font tersebut adalah sebesar 80% dari ukuran font tag <div>. Jika tag <div> memiliki ukuran teks 14 pixel, maka tag <p> akan berukuran 80%*14px = 11,2px.
Namun bagaimana jika kita membuat ukuran tag <div> sebesar 80% juga? maka kita harus melihat ukuran teks dari parent elemen tag <div>. Apabila parent element tag <div> adalah tag <body> yang ukuran fontnya tidak dinyatakan, maka perent element akan ditentukan oleh ukuran default text web browser. Ukuran default web browser ini disebut sebagai base text size yang umumnya berukuran 16px.
Contoh:
Untuk paragraf ketiga, saya membuat ukurannya sebesar 80%. Sehingga ukuran teks menjadi 80%*16px=12.8px.
Di dalam paragraf ketiga, terdapat tag <span> yang juga memiliki ukuran font sebesar 80%. Namun karena parent elemen dari tag <span> adalah tag <p class=”tiga”>, maka ukuran akhir fontnya di dapat dari perhitungan 80%*12.8px=10.24px. Saya sengaja mengubah warna font menjadi biru untuk menandakan bagian tag <span> yang jika diperhatikan berukuran lebih kecil dibandingkan tag <p> ketiga, walaupun ukuran teks sama-sama di set sebesar 80%.
Satuan Ukuran Font: em
Jika anda telah memahami cara penggunaan satuan persen, maka anda tidak akan kesulitan memahami satuan em, karena keduanya nyaris sama. Web desainer lebih banyak menggunakan em karena em berasal dari konsep typography.
Kata “em” berasal dari typography media cetak dimana ia merujuk kepada ukuran huruf ‘m’ dari sebuah font. Namun konsep itu tidak dipakai untuk pengertian em pada CSS. 1em di dalam CSS sama dengan 100%, 0.5em sama dengan 50%, 1.2em sama dengan 120% dan seterusnya. Konsep parent element dari pembahasan kita mengenai satuan persen juga berlaku untuk satuan em.
Contoh:
Karena satuan em akan menggunakan parent element sebagai rujukan ukuran font, maka ukuran tag <body> sebesar 14px akan menjadi ukuran dasar untuk semua tag. Dengan menggunakan cara seperti ini saya dapat dengan mudah mengubah ukuran font untuk seluruh halaman dengan tetap mempertahankan ukuran proporsional nya. Lebih jauh lagi, konsep ini juga menjadi salah satu dasar pembuatan layout responsive (Responsive Web Design).
Sekian Pembahasan tentang Cara Mengubah Ukuran Font HTML dengan CSS (font-size).
Semoga Bermanfaat...!!!
Wassalamu'alaikum wr.wb
EmoticonEmoticon