Font Size

Huruf yang terlalu kecil menyulitkan membaca, sementara huruf yang terlalu besar memakan ruang dan memaksa pembaca menggulir terus. Property font-size mengatur ukuran huruf, dan pilihan satuannya menentukan bagaimana ukuran itu merespons preferensi pengguna serta ukuran layar. Pada chapter ini kita membandingkan px, em, dan rem, melihat ukuran bawaan heading, lalu menyusun skala tipografi dengan rem sebagai pilihan default.

Satuan yang Diterima font-size #

Semua satuan valid, tetapi dampaknya terhadap aksesibilitas dan pemeliharaan kode berbeda jauh. Yang paling sering kita pakai adalah rem dan px, dengan peran yang tidak boleh ditukar.

rem sebagai Pilihan Default #

rem dihitung dari font-size elemen root. Bila pengguna menaikkan ukuran teks default browser dari 16px menjadi 20px, satu rem ikut menjadi 20px, sehingga seluruh halaman membesar secara konsisten. Karena semua rem bercabang dari satu titik, mengubah font-size html langsung menggeser seluruh skala halaman lewat cascade.

html { font-size: 100%; }              /* 1rem = 16px pada pengaturan bawaan */

.judul-artikel    { font-size: 2rem; }   /* 32px */
.paragraf-artikel { font-size: 1rem; }   /* 16px */
.caption-foto     { font-size: 0.875rem; } /* 14px */

Demo berikut menyusun skala itu pada sebuah artikel:

em untuk Skala Relatif Komponen #

Pada font-size, satu em dihitung dari font-size yang diwarisi dari induk. Sifat ini cocok untuk komponen yang ingin diskalakan dari satu titik:

.kartu-produk        { font-size: 1rem; }
.kartu-produk .nama  { font-size: 1.25em; }    /* 20px */
.kartu-produk .ket   { font-size: 0.875em; }   /* 14px */

.kartu-produk.ukuran-besar { font-size: 1.25rem; } /* seluruh isi ikut naik */

Karena em menghitung ulang dirinya dari ukuran induk, cukup ubah satu angka untuk menskalakan komponen utuh:

Ukuran Bawaan Heading #

Browser sudah memberi ukuran bawaan pada heading — biasanya ditulis dalam em:

Inilah alasan h1 tampil dua kali lebih besar dari paragraf tanpa satu baris CSS pun. Dengan menimpanya memakai rem, skala heading menjadi lebih terkendali dan tetap menghormati preferensi pengguna.

clamp() untuk Ukuran yang Mengalir #

Satu langkah lanjutan: clamp() membuat font-size tumbuh seiring lebar layar tanpa media query. Bentuknya clamp(minimum, nilai-ideal, maksimum):

h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem); /* 28px – 40px */
}

Fungsi ini dibahas tuntas pada chapter min, max, dan clamp.

Ringkasan #

rem adalah pilihan default untuk font-size karena menghormati pengaturan teks pengguna dan bercabang dari satu titik root, sementara px disisakan untuk detail presisi dan em untuk skala komponen. Ukuran bawaan heading dalam em menjelaskan hierarki bawaan browser, dan clamp() membawa skala itu menjadi responsif. Berikutnya kita atur tebal-tipisnya huruf melalui font-weight.