Ukuran Font CSS
Ukuran huruf
Properti font-sizemengatur ukuran teks.
Mampu mengelola ukuran teks penting dalam desain web. Namun, Anda tidak boleh menggunakan penyesuaian ukuran font untuk membuat paragraf terlihat seperti heading, atau heading terlihat seperti paragraf.
Selalu gunakan tag HTML yang tepat, seperti <h1> - <h6> untuk heading dan <p> untuk paragraf.
Nilai ukuran font dapat berupa ukuran absolut, atau relatif.
Ukuran mutlak:
- Mengatur teks ke ukuran tertentu
- Tidak mengizinkan pengguna untuk mengubah ukuran teks di semua browser (buruk karena alasan aksesibilitas)
- Ukuran absolut berguna ketika ukuran fisik output diketahui
Ukuran relatif:
- Mengatur ukuran relatif terhadap elemen sekitarnya
- Memungkinkan pengguna untuk mengubah ukuran teks di browser
Catatan: Jika Anda tidak menentukan ukuran font, ukuran default untuk teks normal, seperti paragraf, adalah 16px (16px=1em).
Atur Ukuran Font Dengan Piksel
Menyetel ukuran teks dengan piksel memberi Anda kontrol penuh atas ukuran teks:
Contoh
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Tip: Jika Anda menggunakan piksel, Anda masih dapat menggunakan alat zoom untuk mengubah ukuran seluruh halaman.
Atur Ukuran Font Dengan Em
Untuk memungkinkan pengguna mengubah ukuran teks (di menu browser), banyak pengembang menggunakan em sebagai ganti piksel.
1em sama dengan ukuran font saat ini. Ukuran teks default di browser adalah 16px. Jadi, ukuran default 1em adalah 16px.
Ukuran dapat dihitung dari piksel ke em menggunakan rumus ini: piksel /16= em
Contoh
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 */
}
Pada contoh di atas, ukuran teks dalam em sama dengan contoh sebelumnya dalam piksel. Namun, dengan ukuran em, dimungkinkan untuk menyesuaikan ukuran teks di semua browser.
Sayangnya, masih ada masalah dengan versi Internet Explorer yang lebih lama. Teks menjadi lebih besar dari yang seharusnya ketika dibuat lebih besar, dan lebih kecil dari yang seharusnya ketika dibuat lebih kecil.
Gunakan Kombinasi Persen dan Em
Solusi yang berfungsi di semua browser, adalah menyetel ukuran font default dalam persen untuk elemen <body>:
Contoh
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Kode kami sekarang berfungsi dengan baik! Ini menunjukkan ukuran teks yang sama di semua browser, dan memungkinkan semua browser untuk memperbesar atau mengubah ukuran teks!
Ukuran Font Responsif
Ukuran teks dapat diatur dengan vwsatuan, yang berarti "lebar viewport".
Dengan begitu ukuran teks akan mengikuti ukuran jendela browser:
Halo Dunia
Ubah ukuran jendela browser untuk melihat bagaimana skala ukuran font.
Contoh
<h1 style="font-size:10vw">Hello World</h1>
Viewport adalah ukuran jendela browser. 1vw = 1% dari lebar viewport. Jika viewport lebarnya 50cm, 1vw adalah 0,5cm.