Cara Mengubah Ukuran Font HTML dengan CSS (font-size)
Mengenal Property font-size
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:p { font-size: 14px;}Dengan menulis kode CSS diatas, semua teks di dalam tag <p> akan memiliki font dengan ukuran 14 pixel.
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.Berikut adalah contoh kode CSS untuk penggunaan pixel dalam mengubah ukuran text:
<!DOCTYPE html><html><head><title>Belajar font-size</title><style type="text/css"> .satu { font-size: 12px; } .dua { font-size: 20px; } .tiga { font-size: 8px; }</style></head><body> <h2>Belajar CSS: font-size "pixel"</h2> <h3>font-size 12px:</h3> <p class="satu">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p> <h3>font-size 20px:</h3> <p class="dua">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p> <h3>font-size 8px:</h3> <p class="tiga">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p></body></html>
Mengenal Retina Display
Retina Display adalah fitur yang dibawa oleh Apple keperangkat iPhone. Fitur ini memadatkan ukuran pixel ke dalam layar iPhone agar tampil lebih tajam. Umumnya, layar monitor memiliki kepadatan sebanyak 72-100 pixel dalam setiap inci. Namun retina display memiliki 224 pixel/inchi. Perbedaan ini akan membuat text dengan ukuran 14 pixel menjadi sangat kecil jika ditampilkan di dalam iPhone.Pemadatan ukuran pixel per inchi tidak hanya berlaku pada iPhone. Berbagai produsen smartphone saat ini berlomba-lomba untuk membuat layar sedetail mungkin dengan cara menambahkan sebanyak mungkin pixel ke dalam perangkat buatan mereka.
Karena kita membuat ukuran teks dengan satuan pixel, hal ini mungkin akan menjadi 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 pada perangkat-perangkat tersebut.
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. Apa sebenarnya yang dimaksud dengan parent element ini?Parent element adalah tag induk dimana selector CSS tersebut berada didalamnya. Misalkan kita memiliki kode HTML berikut ini:
<div> <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. <i>Curabitur</i> eu mi vitae metus posuere laoreet.</p></div>Dalam kode HTML diatas, terdapat 4 tag atau elemen, yakni tag <div>, <p>,<span>, dan <i>. Tag <div> berada pada element terluar, sehingga ia merupakan parent element dari tag <p>. Di dalam tag <p> terdapat tag <span> dan tag <i>, sehingga tag <p> merupakan parent element dari keduanya.
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.
Agar lebih mudah memahami konsep penggunaan persen sebagai ukuran font, berukut adalah contoh kode HTML dan CSSnya:
<!DOCTYPE html><html><head><title>Belajar font-size</title><style type="text/css"> .satu { font-size: 100%; } .dua { font-size: 16px; } .tiga { font-size: 80%; } span { font-size: 80%; color: blue; }</style></head><body> <h2>Belajar CSS: font-size "persen (%)"</h2> <h3>font-size 100%:</h3> <div> <p class="satu">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet. </div> <h3>font-size 16px:</h3> <p class="dua">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p> <h3>font-size tag p = 80%, tag span = 80%:</h3> <p class="tiga"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. <i>Curabitur</i> eu mi vitae metus posuere laoreet. </p></body></html>
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%.
Jika perkalian matematis untuk mendapatkan ukuran font ini membuat anda berfikir untuk tidak menggunakan persen sebagai ukuran font, pertimbangkan keuntungan yang didapat. Dengan membuat seluruh ukuran font menjadi relatif, kita bisa dengan mudah mengubah ukuran font untuk keseluruhan web hanya dengan mengubah “base text size” dari tag <body>. Penjelasan mengenai hal ini akan kita bahas pada bagian satuan em.
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.
Penulisan 0.5em dapat disingkat dengan menghapus angka 0, menjadi: .5em.
Karena penggunaannya sama dengan satuan persen, maka kita akan langsung kepada contoh kode CSS dan HTML penggunaan satuan em:
<!DOCTYPE html><html><head><title>Belajar font-size</title><style type="text/css"> body { font-size: 14px; } .satu { font-size: 1em; } .dua { font-size: 1.5em; } .tiga { font-size: 1.2em; } span { font-size: 1.2em; color: blue; }</style></head><body> <h2>Belajar CSS: font-size "em"</h2> <h3>font-size 1em:</h3> <div> <p class="satu">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet. </div> <h3>font-size 1.5em:</h3> <p class="dua">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p> <h3>font-size tag p = 1.2em, tag span = 1.2em:</h3> <p class="tiga"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. <i>Curabitur</i> eu mi vitae metus posuere laoreet. </p></body></html>
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)
Satuan Ukuran Font: rem
CSS3 memperkenalkan satuan ukuran teks baru, yaitu rem. rem merupakan kependekan dari “Root em”, dimana parent elemen untuk seluruh selector adalah tag <html> yang digunakan sebagai root. Karena rem memiliki hanya satu parent elemen, sehingga kita tidak perlu menghitung efek parent elemen seperti satuan persen dan em.Sebagai contoh, kita bisa membuat base font sebagai berikut:
html { font-size: 20px;}Dan untuk membuat seluruh paragraf berukuran 15px, bisa menggunakan format berikut:
p { font-size: 0.75rem.}Namun menjadi catatan bahwa satuan rem ini tidak didukung pada Internet Explorer 8 kebawah.
Cara Mengatur Tinggi Baris dalam Paragraf HTML (line-height)
Mengatur Tinggi Baris dalam Paragraf dengan line-height
Yang dimaksud dengan tinggi baris dalam paragraf adalah besar jarak antara satu baris dengan baris di bawahnya. Dalam penggunaan sehari-hari kita menggunakan istilah “spasi paragraf” untuk hal ini. Misalnya agar tulisan skripsi menjadi lebih mudah dibaca, kita mengganti spasi (dalam aplikasi microsoft word) menjadi 1,5. Dibandingkan dengan jarak 1 spasi, pengaturan paragraf sebesar 1,5 spasi akan membuat jarak baris di dalam paragraf menjadi lebih “lega”. Didalam CSS, pengaturan “besar spasi” ini ditangani dengan property line-height.Nilai dari property line-height bisa diisi dengan nilai pixel, persen, em, atau angka (tanpa satuan). Berikut adalah contoh penulisannya:
p { line-height:16px;} Cara Perhitungan Nilai line-height
Jika nilai line-height ditetapkan dengan satuan pixel, perhitungan nilai line-height cukup sederhana. Untuk paragraf yang memiliki ukuran font (font-size) sebesar 14px, dan line-height sebesar 18px, maka jarak antar baris dihitung berdasarkan rumus berikut: 18px-14px. Hasil perhitungannya, yakni 4px adalah jarak antar baris yang dihasilkan. Jarak antar baris ini dikenal juga dengan istilah leading.Bagaimana jika satuannya dicantumkan dalam persen atau em? Jika kita membuat line-height: 150% atau line-height: 1.5em pada teks yang berukuran 14px, maka line-height akan menjadi 150%*14px=21px. Sehingga jarak antar baris (leading) untuk contoh ini adalah 21px-14px=7px.
Selain satuan pixel, persen dan em, line-height juga memiliki satuan khusus yang digunakan untuk line-height, yaitu angka (tanpa satuan). Contoh penulisannya adalah sebagai berikut:
p { line-height:1.5;}Bagaimana perhitungan hasil leading dari penulisan line-height ini? Dalam kebanyakan kasus, line-height:1.5 akan menghasilkan nilai yang sama dengan line-height: 150%. Namun untuk kasus tag di dalam tag (nested tag) hasil yang didapat akan berbeda.
Misalkan kita membuat property line-height: 150% dan font-size: 14px pada tag <body>. Karena sifat line-height ini diturunkan ke dalam tag-tag lain (bersifat inherit) maka seluruh tag di dalam halaman HTML akan mendapatkan nilai line-height yang sama. Akan tetapi, nilai line-height yang diturunkan bukanlah line-height:150%, namun hasil perhitungannya, yakni line-height sebesar 21px (hasil dari 150%*14px).
Apabila di dalam halaman tersebut kita memiliki tag <p> dengan font-size sebesar 36 pixel, maka line height:21px akan membuat paragraf susah dibaca.
Dalam kasus ini, jika kita mengganti property line-height menjadi line-height:1.5 pada tag <body>, maka setiap tag dibawahnya akan mendapatkan nilai line-height:1.5. Sehingga untuk paragraf dengan font-size: 36px, efek turunan line-height:1.5 akan menghasilkan nilai line-height: 54px (hasil dari 150%*36).
Jika kita tidak mendefenisikan nilai line-height, maka web browser akan menggunakan nilai bawaan yang umumnya bernilai line-height:1.2.
Tutorial Mengatur Tinggi Baris Paragraf (line-height)
Sebagai contoh tutorial untuk property line-height yang telah kita bahas, berikut adalah kode HTML dan CSS dengan menggunakan berbagai nilai line-height:<!DOCTYPE html><html><head><title>Belajar Tinggi Baris Paragraf CSS</title><style type="text/css"> .contoh1 { font-size:16px; } .contoh2 { font-size:16px; line-height: 20px;} .contoh3 { font-size:16px; line-height: 1.5em;} .contoh4 { font-size:16px; line-height: 2;}</style></head><body> <h2>Belajar Tinggi Baris CSS: line-height</h2> <h3>Font-size: 16px, tanpa line-height (nilai line-height: 1.2)</h3> <p class="contoh1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet. Eam facilis omittantur at, usu efficiantur neglegentur delicatissimi et, in per vero splendide persequeris.<p> <h3>Font-size: 16px, line-height: 20px</h3> <p class="contoh2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet. Eam facilis omittantur at, usu efficiantur neglegentur delicatissimi et, in per vero splendide persequeris.<p> <h3>Font-size: 16px, line-height: 1.5em</h3> <p class="contoh3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet. Eam facilis omittantur at, usu efficiantur neglegentur delicatissimi et, in per vero splendide persequeris.<p> <h3>Font-size: 16px, line-height: 2</h3> <p class="contoh4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet. Eam facilis omittantur at, usu efficiantur neglegentur delicatissimi et, in per vero splendide persequeris.<p></body></html>
Selain untuk mengatur tinggi baris dalam paragraf, property line-height sering juga digunakan untuk membuat text berada di tengah-tengah sebuah objek (vertical align). Misalkan kita memiliki kotak dengan tinggi 100px, dengan membuat nilai line-height: 100px,
akan membuat text tampil di tengah-tengah kotak tersebut. Lebih jauh
tentang hal ini akan kita bahas dalam pembahasan tutorial CSS tentang box model.
Cara Memiringkan dan Menebalkan Huruf dengan CSS
Cara Memiringkan Huruf HTML dengan CSS
Efek huruf miring sering digunakan untuk menandai kalimat atau kata penting di dalam konten kita. Untuk mendapatkan efek huruf miring (italic) dengan CSS, kita bisa menggunakan property font-style. Property font-style memiliki 3 nilai, yakni: normal, italic, dan oblique.Untuk memiringkan huruf, kode CSS nya adalah: font-style: italic atau font-style: oblique. Kedua perintah ini akan menghasilkan efek huruf miring. Perbedaannya, font-style: italic akan menggunakan format font terpisah yang bertipe italic (jika tersedia), sedangkan font-style: oblique hanya akan memiringkan font yang ada beberapa derajat (tanpa menggunakan font italic khusus).
Perbedaan italic dengan oblique umumnya tidak terdeteksi, namun jika font yang ada menyediakan versi italic, font-style: italic akan menghasilkan huruf miring yang lebih baik.
Jika anda ingin menghapus efek miring dari teks, gunakan perintah: font-style: normal.
Sebagai contoh, untuk memiringkan sebuah tag <span> dengan class miring, berikut adalah kode CSSnya:
span.miring { font-style: italic;}Cara Menebalkan Huruf HTML dengan CSS
Untuk membuat huruf atau font HTML menjadi tebal (bold), kita menggunakan properti font-weight. properti font-weight memiliki 13 nilai yang terdiri dari 4 keyword dan 9 angka.Ke-13 nilai properti font-weight tersebut adalah: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 dan 900. Kesemua nilai ini dimaksudkan untuk membuat berbagai ukuran ketebalan teks. Dimulai dari angka 100 untuk teks yang paling tipis, sampai dengan nilai 900 untuk teks yang paling tebal. Namun agar keseluruh nilai ini memiliki efek yang berbeda, jenis font yang dipilih juga harus menyediakan pilihan-pilihan ini.
Untuk menghapus efek tebal dari teks, gunakan perintah: font-weight: normal.
Jika anda hanya ingin membuat huruf menjadi tebal tanpa mempedulikan tingkat ketebalannya, kode CSS yang dibutuhkan hanyalah font-weight: bold.
Tutorial font-style dan font-weight
Sebagai contoh tutorial untuk memiringkan dan menebalkan huruf, berikut adalah kode HTML dan CSS untuk properti font-style dan font-weight:<!DOCTYPE html><html><head><title>Belajar font-style dan font-weight</title><style type="text/css"> .italic { font-style: italic; } .oblique { font-style: oblique; } .bold { font-weight: bold; } .bolder { font-weight: bolder; } .lighter { font-weight: lighter; } .bold100 { font-weight: 100; } .bold200 { font-weight: 200; } .bold300 { font-weight: 300; } .bold400 { font-weight: 400; } .bold500 { font-weight: 500; } .bold600 { font-weight: 600; } .bold700 { font-weight: 700; } .bold800 { font-weight: 800; } .bold900 { font-weight: 900; }</style></head><body> <h2>Belajar CSS: font-style dan font-weight</h2> <p class="italic">Teks dengan font-style: italic</p> <p class="oblique">Teks dengan font-style: oblique</p> <p class="bold">Teks dengan font-weight: bold</p> <p class="bolder">Teks dengan font-weight: bolder</p> <p class="lighter">Teks dengan font-weight: lighter</p> <p class="bold100">Teks dengan font-weight: 100</p> <p class="bold200">Teks dengan font-weight: 200</p> <p class="bold300">Teks dengan font-weight: 300</p> <p class="bold400">Teks dengan font-weight: 400</p> <p class="bold500">Teks dengan font-weight: 500</p> <p class="bold600">Teks dengan font-weight: 600</p> <p class="bold700">Teks dengan font-weight: 700</p> <p class="bold800">Teks dengan font-weight: 800</p> <p class="bold900">Teks dengan font-weight: 900</p></body></html>
Jika anda menjalankan kode diatas di dalam web browser Google Chrome, nilai font-weight: 600 akan ditampilkan seperti text normal (tanpa ditebalkan), namun jika anda menjalankannya menggunakan web browser Mozilla Firefox, font-weight: 600 akan ditampilkan dengan huruf tebal. Perbedaan ini menjadi catatan apabila anda menggunakan font-weight: 600 untuk membuat text menjadi tebal. Agar terhindar dari permasalahan ini, anda sebaiknya menggunakan font-weight: bold.
ok sampai di sini dulu penjelasan dari saya semoga jelas. kita lanjut lagi ke tutorial berikutnya .
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
silahkan berkomentar bila ada yang ingin di tanyakan . ConversionConversion EmoticonEmoticon