CSS memiliki banyak properti yang dapat digunakan untuk memperindah tampilan halaman web, salah satu contohnya adalah properti yang mengatur font. Untuk itu pada kesempatan kali ini akan dibahas cara menentukan ukuran font (font size) di CSS dan contoh penggunaannya.
Bagian Artikel
Ukuran huruf
Properti font-size pada CSS digunakan untuk mengatur ukuran teks
Memiliki kemampuan untuk menyesuaikan ukuran font dalam desain web adalah penting. Jadi sebaiknya jangan menggunakan ukuran font agar paragraf terlihat seperti ukuran font heading, atau sebaliknya
Selalu gunakan tag HTML yang tepat, seperti tag
– untuk heading dan tag
untuk paragraf.
Nilai font-size dapat diatur ke ukuran absolut atau relatif. Berikut adalah ciri-ciri ukuran font-size absolut dan relatif
Fitur ukuran absolut pada ukuran font
- Teks diatur ke ukuran tertentu
- Tidak mengizinkan pengguna untuk mengubah ukuran teks di semua browser (buruk karena alasan aksesibilitas)
- Ukuran font absolut akan berguna ketika ukuran keluaran diketahui
Fitur ukuran relatif pada ukuran font
- Teks disusun dalam ukuran relatif terhadap elemen sekitarnya
- Mengizinkan pengguna 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 Ukuran Font Dengan Piksel
Mengatur ukuran font dengan piksel memberi kita kendali penuh atas ukuran teks. Berikut adalah contoh pengaturan ukuran font dengan piksel di 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>
Kiat. Mengatur ukuran font menggunakan piksel, memungkinkan kita menggunakan alat zoom untuk mengubah ukuran seluruh halaman
Mengatur Ukuran Font dengan Em
Untuk memungkinkan pengguna mengubah ukuran teks (di menu browser), banyak pengembang web menggunakan em sebagai pengganti piksel
Penggunaan ukuran em direkomendasikan dalam mengatur ukuran font pada halaman web
1em sama dengan ukuran font yang digunakan dalam kalimat ini. Ukuran teks default di browser adalah 16px. Jadi, ukuran default 1em adalah 16px
Untuk menghitung ukuran dari piksel ke em, Anda dapat menggunakan rumus ini. piksel / 16 = em
Berikut adalah contoh penggunaan em dalam mengatur ukuran font
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, ukuran font dibuat dengan konversi yang sama seperti contoh sebelumnya saat menggunakan piksel. Namun, dengan ukuran em memungkinkan teks untuk menyesuaikan ukuran teks di semua browser
Namun, menggunakan em masih memiliki masalah saat digunakan pada versi Internet Explorer yang lebih lama. Ukuran teks menjadi lebih besar dari seharusnya jika diatur lebih besar, dan lebih kecil dari seharusnya jika 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 .
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 sekarang berfungsi dengan baik. Hal ini menunjukkan bahwa penggunaan persen dan em menjadikan ukuran teks sama di semua browser, dan memungkinkan semua browser memperbesar atau mengubah ukuran teks
Ukuran Font Responsif
Ukuran teks bisa diatur menggunakan satuan vw yang artinya "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>
Lebar viewport adalah ukuran jendela browser. 1vw = 1% dari lebar viewport. Jika viewport memiliki lebar 50cm, 1vw adalah 0,5cm