Dalam tutorial ini kita masih belajar fitur CSS yang berhubungan dengan font, kali ini kita akan membahas mengenai bagaimana cara merubah ukuran font dengan CSS, untuk property yang akan kita gunakan adalah font-size
Kita akan membahas beberapa satuan untuk font-size ini, anda dapat menggunakan salah satu dari satuan yang bisa digunakan, untuk satuan dari value css bisa anda baca dulu di tutorial kami sebelumnya satuan nilai di css, dalam tutorial tersebut banyak sekali dijelaskan satuan – satuan yang bisa anda gunakan di value css, kami akan menjelaskan beberapa satuan yang biasanya digunakan untuk satuan property font-size.
Baik langsung saja beberapa satuan yang bisa anda gunakan antara lain adalah :
Satuan Font-size (Pixel)
Satuan ini banyak digunakan untuk mengatur ukuran font-size karena perhitungannya mudah, jika anda menuliskan font-size:35px; maka font akan ditampilkan dengan besar 35 pixel.
Cara untuk penulisan dari satuan ini adalah tidak dipisah
- font-size:35px; (ini benar)
- font-size:35 px; (ini salah)
agar anda lebih memahami dari satuan font ini silahkan perhatikan contoh dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Font Size</title>
<style type="text/css">
.satu{
font-size:20px;
}
.dua{
font-size:50px;
}
</style>
</head>
<body>
<p class="satu">ini adalah paragraf ukuran 20px</p>
<p class="dua">ini adalah paragraf 50px</p>
</body>
</html>semisal kita simpan dengan nama font-size-pixel.html, lalu kita buka di browser :
Maka hasilnya untuk paragraf pertama memiliki ukuran 20 pixel, dan paragraf kedua memiliki ukuran 50 pixel.
Satuan Font-size (Persen)
Setelah kita mempelajar mengenai satuan pixel, selanjutnya kita pelajari satuan persen, satuan ini merupakan jenis satuan yang bersifat relatif, jadi ukuran yang digunakan tergantung dari tag parentnya, baik agar anda lebih memahami satuan persen ini, silahkan perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Font Size</title>
<style type="text/css">
.satu{
font-size:40px;
}
.dua{
font-size:100%;
}
.tiga{
font-size:75%;
}
.empat{
font-size:50%;
}
</style>
</head>
<body>
<div class="satu">
<p>paragraf pertama</p>
<p class="dua">paragraf kedua</p>
<p class="tiga">paragraf ketiga</p>
<p class="empat">paragraf empat</p>
</div>
</body>
</html>semisal kita simpan dengan nama font-size-persen.html, lalu silahkan dibuka di browser :
penjelasannya sebagai berikut :
- Paragraf pertama tag <p> tidak menggunakan class karena itu mengikuti ukuran parentnya yaitu div sehingga memiliki ukuran font adalah 40px;
- Paragraf kedua tag <p> menggunakan class .dua pada css menggunakan nilai 100%, sehingga meniru ukuran dari parentnya tag <div> yang memiliki ukuran 40 pixel, sehingga ukuran dari paragraf pertama dan paragraf kedua adalah sama
- paragraf ketiga tag <p> menggunakan class .tiga pada css menggunakan nilai 75%, sehingga menggunakan 75% dari ukuran parentnya 40 x 75% = 30 pixel;
- paragraf keempat tag <p> menggunakan class .empat pada css menggunakan nilai 50%, sehingga menggunakan 50% dari ukuran parentnya 40 x 50% = 20 pixel
Bagaimana menghitungnya mudah bukan, lalu timbul pertanyaan jika dalam kondisi diatas tag <div> menggunakan nilai persen bagaimana ?
nah jika memang tag <div> menggunakan nilai persen, lalu parent dari tag <div> adalah tag <body> maka perhitungannya adalah nilai persen tersebut akan dikalikan ukuran default font yang diberikan oleh browser, secara umum browser memberikan nilai 16 pixel untuk font, jadi semisal tag <div> menggunakan nilai 50% maka 50% x 16 pixel = 8 pixel, jadi ukuran font yang digunakan oleh tag <div> adalah 8 pixel.
Satuan ukuran font: em
Satuan ukuran ini memiliki konsep yang hampir sama dengan persen, perbandingan nilai antara persen dan juga em kurang lebih seperti berikut :
- 1 em = 100%
- 1.5 em = 150%
- 0.3 em = 30%
Bagaimana mudah bukan untuk perbandingan nilai antara satuan persen dan em, baik agar anda lebih paham mengenai penggunaan satuan font: em silahkan perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Font Size</title>
<style type="text/css">
.satu{
font-size:40px;
}
.dua{
font-size:1em;
}
.tiga{
font-size:0.75em;
}
.empat{
font-size:0.5em;
}
</style>
</head>
<body>
<div class="satu">
<p>paragraf pertama</p>
<p class="dua">paragraf kedua</p>
<p class="tiga">paragraf ketiga</p>
<p class="empat">paragraf empat</p>
</div>
</body>
</html>semisal kita simpan dengan menggunakan nama font-size-em.html lalu kita buka di browser, maka hasilnya adalah sebagai berikut :
untuk tampilannya hampir sama dengan menggunakan contoh persen diatas, kita hanya merubah nilai dengan satuan persen menjadi nilai dengan satuan em, 100% menjadi 1 em, 75% menjadi 0.75em, dan 50% menjadi 0.5 em
Penjelasannya sebagai berikut :
- Paragraf pertama tag <p> tidak menggunakan class karena itu mengikuti ukuran parentnya yaitu div sehingga memiliki ukuran font adalah 40px;
- Paragraf kedua tag <p> menggunakan class “dua”, pada css menggunakan nilai 1em, sehingga meniru ukuran dari parentnya tag <div> yang memiliki ukuran 40 pixel, sehingga ukuran dari paragraf pertama dan paragraf kedua adalah sama yaitu 40 pixel.
- Paragraf ketiga tag <p> menggunakan class “tiga” , pada css menggunakan nilai 0.75em, sehingga menggunakan 75% dari ukuran parentnya 40 x 75% = 30 pixel;
- Paragraf keempat tag <p> menggunakan class .empat pada css menggunakan nilai 0.5em, sehingga menggunakan 50% dari ukuran parentnya 40 x 50% = 20 pixel
Bagaimana mudah bukan, secara konsep memiliki perhitungan yang sama dengan menggunakan cara persen, yang berbeda hanya penulisan nilainya saja.
Satuan ukuran font:rem
rem adalah singkatan dari root em, dimana memiliki konsep yang sama dengan em, hanya saja parentnya adalah tag <html>, jadi berbeda dengan 2 satuan sebelumnya persen dan em, yang akan mengikuti ukuran dari parentnya, rem hanya akan mengikuti nilai yang dituliskan di tag <html>, sebagai contoh silahkan perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Font Size</title>
<style type="text/css">
html{
font-size:40px;
}
.satu{
font-size:0.5rem;
}
.dua{
font-size:1rem;
}
.tiga{
font-size:2rem;
}
</style>
</head>
<body>
<p>paragraf tanpa class</p>
<p class="satu">paragraf pertama</p>
<p class="dua">paragraf kedua</p>
<p class="tiga">paragraf ketiga</p>
</body>
</html>semisal kita simpan dengan nama font-size-rem.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :
maka tampilannya seperti pada gambar diatas, penjelasannya adalah sebagai berikut :
- Paragraf tanpa class menggunakan nilai yang diberikan ke dalam tag <html> sehingga mendapatkan ukuran font 40 pixel
- Paragraf pertama menggunakan class “satu” mendapatkan value 0.5 rem yang artinya akan menggunakan 50% nilai dari tag <html> sehingga perhitungannya adalah 50% x 40 pixel = 20 pixel sehingga paragraf pertama menggunakan ukuran 20 pixel
- Paragraf kedua menggunakan class “dua” mendapatkan value 1 rem yang artinya akan menggunakan 100% nilai dari tag <html> sehingga perhitungannya adalah 100% x 40 pixel = 40 pixel sehingga paragraf kedua memiliki ukuran yang sama dengan paragraf tanpa class yaitu 40 pixel
- Paragraf ketiga menggunakan class “tiga” mendapatkan value 2 rem yang artinya akan menggunakan 200% nilai dari tag <html> sehingga perhitungannya adalah 200% x 40 pixel = 80 pixel sehingga paragraf ketiga memiliki ukuran 80 pixel
Baik itu dulu yang bisa bahas dalam tutorial mengenai cara merubah ukuran font dengan css, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial css selanjutnya.