Tutorial Belajar CSS: Cara Mengubah Ukuran Font HTML dengan CSS (font-size)

Posted on

Pada panduan Belajar CSS kali ini kita akan membahas Cara Mengubah Ukuran Font HTML dengan CSS. Property CSS yang akan kita gunakan ialah font-size.


Mengenal Property font-size

Bagi mengubah besar atau ukuran dari sebuah font atau teks dengan CSS, kita menggunakan properti font-size. Properti font-size lumayan sederhana dan ditulis seperti contoh berikut ini:

Dengan menulis kode CSS diatas, segala teks di pada tag <p> akan mempunyai font dengan ukuran 14 pixel.

Yang membangun menarik (dan pun memusingkan) ialah CSS menyediakan banyak “satuan ukuran” teks yang dapat dipilih, dimulai dari pixel seperti contoh diatas, keyword seperti small, medium, large, ukuran satuan persen, em, dan pun 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 bagi media yang bersifat pasti (dimana kita dapat menentukan sendiri ukuran kertas yang akan digunakan). Namun satuan ukuran tersebut tak cocok di pada media elektronik seperti web. Karena media yang digunakan oleh pengunjung web dapat bermacam-macam mulai dari smartphone dengan lebar layar 2 inchi hingga dengan monitor desktop 20 inchi atau lebih. Satuan ukuran cm, mm, pt dan pica menjadi tak relevan, sehingga jarang digunakan.

Pembahasan mengenai satuan cm, mm, pt, pica dan pun keyword telah kita bahas pada Tutorial Belajar CSS: Mengenal Satuan Nilai (Value) dalam CSS.

Pada panduan kali ini kita akan membahas satuan ukuran yang sering digunakan bagi font, yaitu pixel, persen dan em.


Satuan Ukuran Font: Pixel (px)

Satuan ukuran pixel relatif gampang dimengerti karena ia tak terikat dengan setingan browser. Ketika kita mendefenisikan ukuran font sebesar 20 pixel, karenanya web browser akan menampilkannya sebesar (tentu saja) 20 pixel. Satuan pixel ini banyak digunakan karena ditampilkan secara konsisten di pada beraneka web browser.

Berikut ialah contoh kode CSS bagi pemakaian pixel pada mengubah ukuran text:

Pada menulis nilai satuan pada pixel, tak boleh terdapat spasi diatara angka dan “px”. Selaku contoh, 16px ialah benar, namun 16 px ialah salah (perhatikan karakter spasinya).

Mengenal Retina Display

Retina Display ialah fitur yang dibawa oleh Apple keperangkat iPhone. Fitur ini memadatkan ukuran pixel ke pada layar iPhone agar tampil lebih tajam. Umumnya, layar monitor mempunyai kepadatan sebanyak 72-100 pixel pada setiap inci. Namun retina display mempunyai 224 pixel/inchi. Perbedaan ini akan membangun text dengan ukuran 14 pixel menjadi betul-betul kecil bila ditampilkan di pada iPhone.

Pemadatan ukuran pixel per inchi tak hanya berlaku di iPhone. Bermacam-macam produsen smartphone ketika ini berlomba-lomba bagi membangun layar sedetail mungkin dengan cara menambahkan sebanyak mungkin pixel ke pada bahan buatan mereka.

Karena kita membangun ukuran teks dengan satuan pixel, hal ini mungkin akan menj
adi masalah. Namun web browser yang mendukung retina display akan secara otomatis menggandakan ukuran teks. Sehingga teks dengan ukuran 14 pixel akan ditampilkan menjadi 28 pixel di perangkat-perangkat tersebut.


Satuan Ukuran Font: Persen (%)

Satuan persen ialah satuan yang bersifat relatif. Perhitungan ukuran persen akan memperoleh ukuran font dari setingan parent element. Bila kita mendefenisikan ukuran font tag <p> sebesar 100%, karenanya tag <p> akan mempunyai ukuran yang sama dengan parent element. Namun bila tag <p> dibangun sebesar 120%, karenanya ukurannya akan sebesar 120% dari parent element. Apa sesungguhnya yang dimaksud dengan parent element ini?

Parent element ialah tag induk dimana selector CSS tersebut berada didalamnya. Misalkan kita mempunyai kode HTML berikut ini:

Pada kode HTML diatas, terdapat 4 tag atau faktor, yakni tag <div>, <p>,<span>, dan <i>. Tag <div> berada di element terluar, sehingga ia adalah sebuah parent element dari tag <p>. Di pada tag <p> terdapat tag <span> dan tag <i>, sehingga tag <p> adalah sebuah parent element dari keduanya.

Bila kita membangun ukuran font tag <p> sebesar 80%, karenanya ukuran font tersebut ialah sebesar 80% dari ukuran font tag <div>. Bila tag <div> mempunyai ukuran teks 14 pixel, karenanya tag <p> akan berukuran 80%*14px = 11,2px.

Namun bagaimana bila kita membangun ukuran tag <div> sebesar 80% pun? karenanya kita mesti melihat ukuran teks dari parent faktor tag <div>. Apabila parent element tag <div> ialah tag <body> yang ukuran fontnya tak dinyatakan, karenanya perent element akan ditentukan oleh ukuran default text web browser. Ukuran default web browser ini disebut selaku base text size yang umumnya berukuran 16px.

Agar lebih gampang memahami konsep pemakaian persen selaku ukuran font, berukut ialah contoh kode HTML dan CSSnya:

 Pada contoh diatas, bagi paragraf pertama-tama dengan class=”satu” saya membangun ukuran text sebesar 100%. Karena tag <body> yang berfungsi selaku parent element tak mempunyai ukuran text, karenanya ukuran 100% jatuh kepada base text size web browser yang berukuran 16pixel. Paragraf kedua saya bikin berukuran 16px selaku perbandingan.

Bagi paragraf ketiga, saya membangun ukurannya sebesar 80%. Sehingga ukuran teks menjadi 80%*16px=12.8px.

Di pada paragraf ketiga, terdapat tag <span> yang pun mempunyai ukuran font sebesar 80%. Namun karena parent faktor dari tag <span> ialah tag <p class=”tiga”>, karenanya ukuran ahir fontnya di dapat dari perhitungan 80%*12.8px=10.24px. Saya sengaja mengubah warna font menjadi biru bagi menandakan bagian tag <span> yang bila diperhatikan berukuran lebih kecil diperbandingkan tag <p> ketiga, walaupun ukuran teks sama-sama di set sebesar 80%.

Bila perkalian matematis bagi memperoleh ukuran font ini membangun sahabat berfikir bagi tak menggunakan persen selaku ukuran font, pertimbangkan keuntungan yang didapat. Dengan membangun seluruh ukuran font menjadi relatif, kita dapat dengan gampang mengubah ukuran font bagi keseluruhan web hanya dengan mengubah “base text size” dari tag <body>. Penjelasan mengenai hal ini akan kita bahas di bagian satuan em.


Satuan Ukuran Font: em

Bila sahabat telah memahami cara pemakaian satuan persen, karenanya sahabat tak 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 tak diaplikasikan bagi pengertian em di CSS. 1em di pada 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 pun berlaku bagi satuan em.

Penulisan 0.5em dapat disingkat dengan menghapus angka 0, menjadi: .5em.

Karena penggunaannya sama dengan satuan persen, karenanya kita akan seketika kepada contoh kode CSS dan HTML pemakaian satuan em:

 Contoh kode CSS dan HTML diatas hampir sama dengan contoh yang kita gunakan pada contoh satuan persen. Namun perhatikan bahwa saya mendefenisikan ukuran font bagi tag <body> sebesar 14px, sehingga tag lain yang menggunakan satuan em akan menyesuaikan ukuran dengan patokan base font 14px.

Karena satuan em akan menggunakan parent element selaku rujukan ukuran font, karenanya ukuran tag <body> sebesar 14px akan menjadi ukuran basic bagi segala tag. Dengan menggunakan cara seperti ini saya dapat dengan gampang mengubah ukuran font bagi seluruh halaman dengan tetap mempertahankan ukuran proporsional nya. Lebih jauh lagi, konsep ini pun menjadi diantara basic penyusunan layout memiliki tampilan yang dinamis (Memiliki tampilan yang dinamis Web Design)

Satuan Ukuran Font: rem

CSS3 menyajikan satuan ukuran teks baru, yaitu rem. rem adalah sebuah kependekan dari “Root em”, dimana parent faktor bagi seluruh selector ialah tag <html> yang digunakan selaku root. Karena rem mempunyai hanya satu parent faktor, sehingga kita tak perlu menghitung efek parent faktor seperti satuan persen dan em.

Selaku contoh, kita dapat membangun base font selaku berikut:

Dan bagi membangun seluruh paragraf berukuran 15px, dapat menggunakan format berikut:

Namun menjadi catatan bahwa satuan rem ini tak didukung di Internet Explorer 8 kebawah.

Pada panduan belajar CSS kali ini kita telah membahas mengenai satuan ukuran font dan cara mengubahnya menggunakan property font-size. Pada panduan CSS berikutnya, kita akan melanjutkan pembahasan mengenai properti-properti teks lain yang disediakan oleh CSS.


eBook CSS Uncover Duniailkom< /span>

Bila sahabat ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari basic hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/