CSS memiliki banyak sekali properti yang dapat digunakan untuk memperindah tampilan halaman web, salah satu contohnya adalah properti yang mengatur fonts. Untuk itu pada kesempatan kali ini akan dibahas bagaimana cara menentukan ukuran font (font size) pada CSS dan contoh penggunaannya.
Section Artikel
Font Size
Properti font-size pada CSS digunakan untuk mengatur ukuran teks.
Mempunyai kemampuan dalam mengatur ukuran font dalam desain web adalah hal yang penting. Jadi sebaiknya jangan menggunakan ukuran font untuk membuat paragraf terlihat seperti ukuran font heading, atau sebaliknya.
Selalu gunakan tag HTML yang tepat, seperti tag <h1> – <h6> untuk heading dan tag <p> untuk paragraf.
Nilai font-size dapat diatur menjadi ukuran mutlak atau relatif. Berikut adalah ciri dari ukuran mutlak dan relatif pada font-size.
Ciri ukuran mutlak pada font-size:
- Teks diatur ke ukuran spesifik
- Tidak mengizinkan pengguna untuk mengubah ukuran teks di semua browser ( buruk untuk alasan aksesibilitas)
- Font-size mutlak akan berguna ketika ukuran output diketahui
Ciri ukuran relatif pada font-size:
- Teks di atur dengan ukuran relatif terhadap elemen di sekitarnya
- Memungkinkan pengguna untuk mengubah ukuran teks di browser
Catatan: Jika ukuran font tidak diatur secara spesifik, maka ukuran default untuk teks normal, seperti paragraf, adalah 16px (16px = 1em).
Mengatur Font Size Dengan Pixel
Mengatur font size dengan pixel membuat kita memiliki kontrol penuh atas ukuran teks. Berikut adalah contoh mengatur font size dengan pixel pada CSS.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<p>Ini paragraf.</p>
<p>Ini juga paragraf.</p>
</body>
</html>
Tips: Mengatur font-size menggunakan pixel, membuat kita dapat menggunakan zoom tools untuk mengubah ukuran seluruh halaman.
Mengatur Font Size dengan Em
Agar memungkinkan pengguna mengubah ukuran teks (di menu browser), banyak pengembang web menggunakan em sebagai ganti pixel.
Penggunaan ukuran em direkomendasikan dalam mengatur font-size pada halaman web.
1em sama dengan ukuran font yang di gunaakan pada kalimat ini. Ukuran teks default di browser adalah 16px. Jadi, ukuran default 1em adalah 16px.
Untuk menghitung ukuran dari pixel ke em dapat menggunakan rumus ini: piksel / 16 = em.
Berikut adalah contoh penggunaan em dalam mengatur font-size.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<p>Ini paragraf.</p>
<p>Menentukan ukuran font di em memungkinkan semua browser utama untuk mengubah ukuran teks.
Sayangnya, masih ada masalah dengan IE versi yang lebih lama. Saat mengubah ukuran teks menjadi lebih besar / lebih kecil teks akan berubah menjadi lebih besar/ lebih kecil dari yang seharusnya.</p>
</body>
</html>
Pada contoh di atas, font-size dibuat dalam em dengan konversi sama seperti contoh sebelumnya saat menggunakan pixsel. Namun, dengan ukuran em, memungkinkan teks menyesuaikan ukuran teks di semua browser.
Namun, penggunaan em masih terdapat masalah saat digunakan pada Internet Explorer versi yang lebih lama. Ukuran teks menjadi lebih besar dari yang seharusnya saat diatur lebih besar, dan lebih kecil dari yang seharusnya saat diatur lebih kecil.
Menggunakan Kombinasi Persen dan Em
Jadi solusi agar font-size berfungsi di semua browser adalah dengan mengatur ukuran font secara default dalam bentuk persen pada elemen <body>.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
</style>
</head>
<body>
<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<p>Ini paragraf.</p>
<p>Menentukan ukuran font dalam persen dan em membuat ukuran font sama di semua browser utama, dan memungkinkan semua browser untuk mengubah ukuran teks!</p>
</body>
</html>
Kode tersebut sekarang berfungsi dengan baik! Hal ini menunjukkan penggunaan persen dan em membuat ukuran teks sama di semua browser, dan memungkinkan semua browser untuk memperbesar atau mengubah ukuran teks.
Responsive Font Size
Ukuran teks dapat diatur menggunakan unit vw yang memiliki arti “viewport width”.
Dengan begitu, ukuran teks akan mengikuti ukuran jendela browser:
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body> <h1 style="font-size:10vw;">Responsive Text</h1> <p style="font-size:5vw;">Ubah ukuran jendela browser untuk melihat bagaimana skala ukuran teks.</p> <p style="font-size:5vw;">Gunakan "vw" saat memberi ukuran teks. 10vw akan mengatur ukuran menjadi 10% dari lebar viewport.</p> <p>Viewport width adalah ukuran jendela browser. 1vw = 1% dari lebar viewport. Jika viewport memiliki lebar 50cm, 1vw adalah 0,5cm.</p> </body> </html>
Viewport width adalah ukuran jendela browser. 1vw = 1% dari lebar viewport. Jika viewport memiliki lebar 50cm, 1vw adalah 0,5cm.
Sekian pembahasan dan contoh cara penggunaan properti font-size dalam CSS, semoga bermanfaat.
