Dalam tutorial Belajar CSS kali ini kita akan membahas Cara Mengubah Ukuran Font HTML dengan CSS. Property CSS yang akan kita gunakan adalah 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.
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%.
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)
eBook CSS Uncover Duniailkom
Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.
Ketika kita membuka sebuah halaman website, tak jarang kita menemukan ukuran dan bentuk huruf atau tulisan dari masing-masing website tersebut.
Lalu, bagaimana hal ini bisa terjadi?
Font adalah jenis huruf yang ada pada sebuah dokumen
Berbagai jenis font dan bisa dipergunakan sesuai dengan desain yang diinginkan tapi memang font yang akan ditampilkan pada web browser sepertinya adalah berasal dari komputer user atau pengunjung web.
Apabila font yang dipilih tersebut tidak standar, maka desain yang telah dirancang serapih mungkin kemungkinan akan kacau dikarenakan font tersebut yang dipilih tadi tidak tersedia.
Pada artikel kali ini saya ingin membahas bagaimana cara mengubah font pada html:
Table Of Contents
#1 Cara Mengubah Jenis Font
Agar Anda dapat menentukan jenis font dari sebuah teks html maka Anda dapat mempergunakan salah satu dari pada property CSS yaitu font-family. Adapun penulisannya bisa dilihat dari contoh berikut:
<style type="text/css">; body { font-family: Arial; } p { font-family: Courier, monospace; } div { font-family: Duru Sans, Verdana, sans-serif; } </style>Seperti yang bisa anda lihat, disana terdapat nilai yang didukung oleh properti family berupa nama-nama font yang diinginkan oleh developer.
Contoh Penggunaan Font-Family
Berikut adalah contoh penggunaan properti font-family dalam CSS:
<!DOCTYPE html> <html> <head> <title>Mengubah Jenis Font</title> <style type="text/css"> body { font-family: Calibri, Helvetica, Arial, sans-serif; } h3 { font-family: Cambria,"Times New Roman",serif; } #paragraf2 { font-family: Georgia, serif; } </style> </head> <body> <h3>Belajar</h3> <p> <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama. </p> <p id="paragraf2"> Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda </p> </body> </html>Dari kode diatas maka akan menghasilkan halaman program seperti gambar di bawah ini
Penjelasan:
- Pada tag body ini terdapat font-family dengan type font Calibri, Helvetica, Arial, sans-serif
- Pada tag h3 mempunyai jenis font Cambria,"Times New Roman",serif;
- <!DOCTYPE html> <html> <head> <title>Mengubah Jenis Font</title> <style type="text/css"> body { font-family: Calibri, Helvetica, Arial, sans-serif; } h3 { font-family: Cambria,"Times New Roman",serif; } #paragraf2 { font-family: Georgia, serif; } </style> </head> <body> <h3>Belajar</h3> <p> <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama. </p> <p id="paragraf2"> Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda </p> </body> </html>0 – mengartikan jika id dengan nama <!DOCTYPE html> <html> <head> <title>Mengubah Jenis Font</title> <style type="text/css"> body { font-family: Calibri, Helvetica, Arial, sans-serif; } h3 { font-family: Cambria,"Times New Roman",serif; } #paragraf2 { font-family: Georgia, serif; } </style> </head> <body> <h3>Belajar</h3> <p> <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama. </p> <p id="paragraf2"> Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda </p> </body> </html>1 mempunyai pengaturan font-family dengan format Georgia, serif;
#2 Cara Mengubah Warna Font
Untuk mengubah warna kita membutuhkan atribut <!DOCTYPE html> <html> <head> <title>Mengubah Jenis Font</title> <style type="text/css"> body { font-family: Calibri, Helvetica, Arial, sans-serif; } h3 { font-family: Cambria,"Times New Roman",serif; } #paragraf2 { font-family: Georgia, serif; } </style> </head> <body> <h3>Belajar</h3> <p> <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama. </p> <p id="paragraf2"> Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda </p> </body> </html>2. Berikut contoh penulisannya:
<style type="text/css">; h3 { color: red } p { color: blue } </style>Pada contoh diatas saya ingin meberikan beberapa warna untuk masing-masing element. Semua text yang berapa didalam tag h3 nantinya akan berwarna merah. Sedangkan semua tulisan yang berada didalam tag <!DOCTYPE html> <html> <head> <title>Mengubah Jenis Font</title> <style type="text/css"> body { font-family: Calibri, Helvetica, Arial, sans-serif; } h3 { font-family: Cambria,"Times New Roman",serif; } #paragraf2 { font-family: Georgia, serif; } </style> </head> <body> <h3>Belajar</h3> <p> <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama. </p> <p id="paragraf2"> Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda </p> </body> </html>4 akan berwarna biru.
Silahkan coba kode berikut ini:
<!DOCTYPE html> <html> <head> <title>Mengubah Warna Font</title> <style type="text/css">; h3 { color: red } p { color: blue } </style> </head> <body> <h3>Contoh Tulisan Warna Merah</h3> <p> <strong>Contoh Tulisan</strong> Berwarna Biru </p> </body> </html>#3 Cara Mengubah Ukuran Font
Sedangkan untuk mengubah ukuran font kita membutuhkan atribut <!DOCTYPE html> <html> <head> <title>Mengubah Jenis Font</title> <style type="text/css"> body { font-family: Calibri, Helvetica, Arial, sans-serif; } h3 { font-family: Cambria,"Times New Roman",serif; } #paragraf2 { font-family: Georgia, serif; } </style> </head> <body> <h3>Belajar</h3> <p> <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama. </p> <p id="paragraf2"> Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda </p> </body> </html>5. Berikut contoh penulisannya:
<style type="text/css">; h3 { font-size: red } p { font-size: blue } </style>Pada contoh diatas saya ingin meberikan beberapa warna untuk masing-masing element. Semua text yang berapa didalam tag h3 nantinya akan berwarna merah. Sedangkan semua tulisan yang berada didalam tag <!DOCTYPE html> <html> <head> <title>Mengubah Jenis Font</title> <style type="text/css"> body { font-family: Calibri, Helvetica, Arial, sans-serif; } h3 { font-family: Cambria,"Times New Roman",serif; } #paragraf2 { font-family: Georgia, serif; } </style> </head> <body> <h3>Belajar</h3> <p> <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama. </p> <p id="paragraf2"> Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda </p> </body> </html>4 akan berwarna biru.
Silahkan coba kode berikut ini:
<!DOCTYPE html> <html> <head> <title>Mengubah Warna Font</title> <style type="text/css">; h3 { font-size: 12px } p { font-size: 16px } </style> </head> <body> <h3>Contoh tulisan berukuran 12px</h3> <p> <strong>Contoh Tulisan</strong> berukuran 16px </p> </body> </html>Menarik Kesimpulan
Jadi untuk mengubah warna font kita memerlukan atribut <!DOCTYPE html> <html> <head> <title>Mengubah Jenis Font</title> <style type="text/css"> body { font-family: Calibri, Helvetica, Arial, sans-serif; } h3 { font-family: Cambria,"Times New Roman",serif; } #paragraf2 { font-family: Georgia, serif; } </style> </head> <body> <h3>Belajar</h3> <p> <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama. </p> <p id="paragraf2"> Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda </p> </body> </html>2, untuk mengubah jenis font kita memerlukan atribut font-family, sedangkan untuk mengubah ukuran font kita mebutuhkan <!DOCTYPE html> <html> <head> <title>Mengubah Jenis Font</title> <style type="text/css"> body { font-family: Calibri, Helvetica, Arial, sans-serif; } h3 { font-family: Cambria,"Times New Roman",serif; } #paragraf2 { font-family: Georgia, serif; } </style> </head> <body> <h3>Belajar</h3> <p> <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama. </p> <p id="paragraf2"> Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda </p> </body> </html>5.
Mari kita rangkum kode diatas menjadi contoh sebagai berikut:
<!DOCTYPE html> <html> <head> <title>Mengubah Warna Font</title> <style type="text/css">; h3 { font-size: 12px; color: red; font-family: Calibri, Helvetica, Arial, sans-serif; } p { font-size: 16px; color: blue; font-family: Cambria,"Times New Roman",serif; } </style> </head> <body> <h3>Contoh tulisan berukuran 12px berwarna merah menggunakan font calibri</h3> <p> <strong>Contoh Tulisan</strong> berukuran 16px berwarna biru menggunakan font cambria </p> </body> </html>Catatan: dalam artikel ini saya menggunakan internal css untuk mengubah font, sebenarnya anda juga bisa menggunakan external css, maupun inline-css.
(Silahkan Baca: Perbedaan Internal-css, External-css, dan Inline-css)
Demikian adalah ulasan tentang cara mengubah font di html semoga informasi di atas dapat bermanfaat. Jangan lewatkan seri panduan belajar HTML kami.