Mengatur CSS Font Size: Syntax, Cara, dan Contoh

Meski terkesan sederhana, memilih font size CSS untuk website memerlukan perhatian khusus. Ukuran font yang tidak tepat bisa saja mengacaukan layout, mengaburkan pesan yang ingin disampaikan, bahkan menyebabkan ketidaknyamanan bagi pembaca.

Sebaliknya, pemilihan font size yang sesuai, selain meningkatkan estetika visual juga memandu pengunjung web melalui alur navigasi situs, memperjelas hierarki informasi, dan mengundang audiens untuk terus membaca.

Artikel di bawah akan membahas banyak hal tentang font size CSS. Dengan pengetahuan ini, kamu bisa memanipulasi nuansa visual halaman web, mengoptimalkan konten untuk berbagai perangkat, dan pada akhirnya meningkatkan pengalaman pengguna. Selamat membaca!

Syntax CSS Font Size

Syntax untuk mengatur font size dalam CSS cukup sederhana, yaitu menggunakan properti font-size yang diikuti oleh value ukuran yang kamu inginkan.

Berikut format umumnya:

Selector adalah elemen HTML yang ingin diubah ukuran font-nya.

Sementara value adalah font size yang kamu tentukan. Value bisa dalam satuan seperti piksel (px), em, rem, persentase (%), maupun kata kunci spesifik CSS seperti small, medium, atau large.

Berbagai Macam Font Size di CSS

CSS menyediakan berbagai pilihan dalam menentukan ukuran font dan masing-masing punya karakteristiknya tersendiri. Berikut tabel penjelasan berbagai unit yang dapat digunakan dalam properti font-size di CSS:

Cara dan Contoh Mengatur Font Size di CSS

Berikut cara mengatur font size di CSS dengan berbagai unit ukuran lengkap dengan contohnya:

Pixel (px)

Pixel adalah unit ukuran yang paling sering digunakan karena memberikan kejelasan dan konsistensi di semua jenis layar. Ukuran font dalam pixel tetap sama dan tidak berubah relatif terhadap elemen lain.

Contohnya, kamu akan menetapkan ukuran font paragraf menjadi 20 pixel:

Em

Nilai em adalah skala yang berbasis pada ukuran font parent element (elemen induk). Apabila parent element memiliki font size 16px, 1 em akan setara dengan 16px untuk elemen anak. Jenis unit ini sangat berguna untuk responsivitas.

Sebagai contoh, ukuran font adalah dua kali ukuran font parent element:

Rem

Jika em berbasis pada font size elemen induk, rem berbasis pada ukuran font root element (biasanya < html >). Rem membantu memberikan konsistensi karena menghindari efek bertingkat yang mungkin terjadi dengan em.

Contohnya, kamu ingin menetapkan ukuran font adalah tiga kali ukuran font dasar halaman:

Persentase (%)

Mengatur font size dengan persentase memungkinkan ukuran font relatif terhadap ukuran font induk, mirip dengan em namun menggunakan persentase.

Sebagai contoh, kamu menetapkan ukuran font 150% dari ukuran font induk

Viewport Width (vw)

Unit vw dipakai agar font size menyesuaikan diri berdasarkan lebar viewport. Hal ini sangat berguna untuk desain responsif karena ukuran font akan berubah saat ukuran layar berubah.

Sebagai contoh, kamu menetapkan font size  5% dari lebar viewport:

Point (pt)

Point biasanya digunakan untuk keperluan cetak, tetapi juga bisa diaplikasikan dalam desain web. Satu poin setara dengan 1/72 inci.

Contoh:

FAQ (Frequently Asked Question)

Bagaimana cara memilih ukuran font yang cocok untuk berbagai jenis konten?

Berikut beberapa tips memilih font size yang cocok:

Pertimbangkan hierarki konten

Hierarki visual sangat penting dalam desain web, tidak hanya dari perspektif estetika tetapi juga untuk SEO. Judul atau heading harus berukuran lebih besar daripada isi teks untuk menarik perhatian dan membantu audiens mengidentifikasi bagian penting dari konten.

Lebih lanjut, sangat disarankan untuk menggunakan tag heading secara berurutan agar struktur konten terorganisasi. Misalnya, setelah menggunakan H1 untuk judul utama, gunakan H2 untuk subjudul, diikuti oleh H3 untuk heading tingkat berikutnya, dan seterusnya. Pendekatan ini memungkinkan mesin pencari untuk meng-crawl dan mengindeks konten dengan lebih efektif.

Prioritaskan keterbacaan

Pastikan teks kamu mudah dibaca. Ukuran font yang terlalu kecil membuat konten sulit dibaca, terutama pada perangkat dengan layar kecil. Sebagai aturan umum, hindari menggunakan ukuran font di bawah 16px untuk bagian isi.

Pertimbangkan jarak antar baris

Selain font size, jarak antar baris (line height) juga memengaruhi keterbacaan. Teks akan sulit dibaca jika jarak antar baris terlalu kecil. Umumnya, jarak antar baris yang ideal adalah 1.5 sampai 2 kali ukuran font.

Sesuaikan dengan desain keseluruhan

Ukuran font harus selaras dengan elemen desain lainnya di halaman web. Jika website kamu memiliki desain minimalis, gunakan ukuran font yang lebih besar untuk mempertahankan kesan “clean” di website.

Gunakan ukuran relatif untuk responsivitas

Untuk desain yang responsif, gunakan unit relatif seperti 'em' karena bisa menyesuaikan ukuran font berdasarkan ukuran font parent element. Penggunaan em membantu memastikan teks tetap konsisten dan mudah dibaca di semua perangkat.

Uji di berbagai perangkat

Apa yang terlihat di layar desktop mungkin tidak sama di ponsel atau tablet. Selalu uji tampilan font di berbagai perangkat untuk memastikan font size berfungsi dengan baik di perangkat mana pun.

Berapa ukuran font size untuk H1 dalam CSS?

Dalam CSS, ukuran font default untuk H1 biasanya adalah 2em (atau sekitar 32px jika ukuran font dasar adalah 16px). Namun, penting untuk diingat bahwa nilai ini bisa berbeda tergantung pada browser atau stylesheet default yang digunakan.

Penutup

Penting untuk menggarisbawahi bahwa pemilihan font size dalam desain web akan menentukan keterbacaan, aksesibilitas, dan juga estetika dari sebuah website. Melalui penggunaan properti font-size dalam CSS, kamu diberi kebebasan dan fleksibilitas untuk menyesuaikan tampilan teks, memastikan informasi disajikan dengan tampilan yang nyaman untuk pembaca.

Lebih jauh, dengan mempertimbangkan aspek-aspek seperti jarak antar baris dan ukuran relatif, kamu dapat memastikan konten tidak hanya menarik secara visual, tetapi juga mudah diakses dan dinavigasi.