Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial Belajar CSS Bagian 39 : Cara Menggunakan Property Font di CSS. Pada tutorial kali ini kita akan lanjutkan belajar tentang cara menggunakan property font-size di CSS untuk mengatur desain huruf.
Properti font-size di CSS digunakan untuk menentukan tinggi dan ukuran font. Ini memengaruhi ukuran teks suatu elemen.
Nilai defaultnya adalah medium dan dapat diterapkan ke setiap elemen. Nilai properti ini termasuk xx-small, small, x- small, dll.
Sintaksis :
Ukuran font bisa relative atau absolut.
- Absolute-size : Ini digunakan untuk mengatur teks ke ukuran tertentu. Menggunakan ukuran absolut, tidak mungkin mengubah ukuran teks di semua browser. Ini menguntungkan ketika kita mengetahui ukuran fisik dari output.
- Relative-size : Ini digunakan untuk mengatur ukuran teks relatif terhadap elemen tetangganya. Dengan ukuran relatif, dimungkinkan untuk mengubah ukuran teks di browser.
Ukuran font dengan pixel
Saat kita mengatur ukuran teks dengan piksel, maka itu memberi kita kendali penuh atas ukuran teks.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
#first {
font-size: 40px;
}
#second {
font-size: 20px;
}
</style>
</head>
<body>
<p id="first"> Ini adalah paragraf yang memiliki ukuran 40px.</p>
<p id="second"> Ini adalah paragraf lain yang memiliki ukuran 20px.</p>
</body>
</html>
Hasil dari kode di atas adalah :
Ukuran font dengan em
Digunakan untuk mengubah ukuran teks. Sebagian besar pengembang lebih memilih em daripada pixel. Direkomendasikan oleh World Wide Web Consortium (W3C). Seperti yang dinyatakan di atas, ukuran teks default di browser adalah 16px. Jadi, kita dapat mengatakan bahwa ukuran default 1em adalah 16px.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
#pertama {
font-size: 2.5em; /* 40px/16=2.5em */
}
#kedua {
font-size: 1.875em; /* 30px/116=1.875em */
}
#ketiga {
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<p id='pertama'> Paragraf pertama.</p>
<p id='kedua'> Paragraf kedua </p>
<p id='ketiga'> Paragraf kedua.</p>
</body>
</html>
Hasil dari kode di atas adalah :
Responsive font size
Kita dapat mengatur ukuran teks dengan menggunakan satuan vw, yang merupakan singkatan dari ‘viewport width’. View port adalah ukuran jendela browser.
Jika lebar viewport adalah 50cm, maka 1vw sama dengan 0,5 cm.
Contoh :
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<p style="font-size:5vw;"> Paragraf pertama memiliki lebar 5vw.</p>
<p style="font-size:10vw;"> Paragraf kedua memiliki lebar 10vw.</p>
</body>
</html>Hasil dari kode di atas adalah :
Font-size dengan length property
Ini digunakan untuk mengatur ukuran panjang font. Panjangnya bisa dalam cm, px, pt, dll. Nilai negatif dari properti panjang tidak diperbolehkan dalam ukuran font.
Sintaksis :
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.length {
color:red;
font-size: 5cm;
}
</style>
</head>
<body>
<h1>property font-size</h1>
<p class = "length"> Paragraf yang memiliki panjang 5cm.</p>
</body>
</html>
Hasil dari kode di atas adalah :
Semoga tutorial ini bisa membantu Anda untuk belajar cara menggunakan property font-size di CSS untuk mengatur huruf dan mendesain huruf agar terlihat lebih bagus.
