Ukuran dan Ketebalan Font

font-size: pakai rem

html { font-size: 16px; } /* basis */

h1 { font-size: 2.5rem; }  /* 40px */
p  { font-size: 1rem; }    /* 16px */
small { font-size: 0.875rem; } /* 14px */

Kenapa rem? Karena konsisten di seluruh halaman dan menghormati pengaturan font user (lihat modul satuan-css).

font-weight: lebih dari bold

.ringan { font-weight: 300; }
.normal { font-weight: 400; } /* = normal */
.tebal  { font-weight: 700; } /* = bold */
.super  { font-weight: 900; }

Skala 100-900 memberi kontrol halus, tapi hanya berfungsi kalau font yang dipakai menyediakan ketebalan itu. Font sistem biasanya hanya punya 400 dan 700; browser akan "memalsukan" sisanya (faux bold) yang hasilnya kurang bagus.

font-style

.miring { font-style: italic; }

Pilihan: normal, italic, oblique (miring paksa). Untuk penekanan semantik di HTML, pakai tag <em> bukan span miring.

Skala tipografi

Jangan pilih ukuran acak. Pakai skala yang konsisten, misal rasio 1.25:

12 - 14 - 16 - 20 - 24 - 30 - 36 - 48

Hierarki yang jelas (h1 jauh lebih besar dari body) membuat halaman mudah dipindai mata.

Catatan teknis: font-weight: bold pada font yang tidak punya varian bold membuat browser mensintesis ketebalan (faux bold). Hasilnya lebih gemuk tapi kurang tajam. Untuk tipografi presisi, impor varian weight yang dibutuhkan (lihat font-custom).

Analogi: hierarki koran

Ukuran dan ketebalan font seperti hierarki koran: headline BESAR TEBAL, subheadline sedang, isi kecil ringan. Pembaca memindai halaman dalam 3 detik; hierarki yang jelas memberi tahu "baca ini dulu, ini kedua, ini detail".

Kenapa rem untuk font-size?

px mengabaikan pengaturan font browser pengguna (aksesibilitas). rem menghormatinya: pengguna lansia yang memperbesar font sistem akan melihat font situs ikut membesar. 1rem = 16px default, jadi 1.125rem = 18px dengan manfaat aksesibilitas.

Contoh bertahap: skala hierarki

Tanpa hierarki (semua sama, membingungkan):

h1, h2, p { font-size: 16px; }

Dengan skala yang jelas:

h1 { font-size: 2.5rem; font-weight: 800; }   /* 40px, paling tegas */
h2 { font-size: 1.75rem; font-weight: 700; }  /* 28px */
h3 { font-size: 1.25rem; font-weight: 600; }  /* 20px */
p  { font-size: 1rem; font-weight: 400; }     /* 16px, normal */
.kecil { font-size: 0.875rem; }               /* 14px, keterangan */

Rasio skala konsisten (kira-kira 1.25x per tingkat) terlihat harmonis. Skala acak (40px, 30px, 29px, 16px) terlihat berantakan walau bedanya kecil.

Font-weight sebagai penegas:

/* Angka statistik: tebal besar */
.stat-angka {
  font-size: 2rem;
  font-weight: 800;
}

/* Labelnya: kecil ringan */
.stat-label {
  font-size: 0.875rem;
  font-weight: 400;
  color: #64748b;
}

Kesalahan umum pemula

Salah: terlalu banyak level ukuran. 8 ukuran font berbeda di satu halaman = tidak ada hierarki. Batasi 4-5 level dan konsisten.

Salah: font-weight 900 untuk body text. Teks paragraf tebal melelahkan dibaca. Tebal untuk judul dan penegas saja; body 400-500.

Salah: mengandalkan <b> dan <h1>-<h6> bawaan tanpa reset. Browser punya gaya default yang tidak konsisten. Tetapkan skala sendiri di CSS.

Latihan kilat

1. Buat skala: h1 40px tebal 800, h2 28px tebal 700, p 16px normal. Tulis dalam rem.
2. Kenapa 2rem lebih baik dari 32px untuk font-size? Siapa yang diuntungkan?
3. Kartu statistik: angka besar tebal + label kecil abu-abu. Tulis CSS untuk keduanya.

Kunci: (1) h1 { font-size: 2.5rem; font-weight: 800; } h2 { font-size: 1.75rem; font-weight: 700; } p { font-size: 1rem; }. (2) rem menghormati pengaturan font browser; menguntungkan pengguna yang memperbesar font (lansia, low vision). (3) .angka { font-size: 2rem; font-weight: 800; } .label { font-size: 0.875rem; color: #64748b; }.

Rangkuman

Ukuran pakai rem, ketebalan pakai skala 100-900 sesuai ketersediaan font, dan jaga hierarki ukuran yang konsisten di seluruh halaman.