Type Scale — Sistem Ukuran Font
Salah satu rahasia desain yang rapi: jangan gunakan ukuran font sembarangan. Gunakan type scale — serangkaian ukuran font yang sudah ditentukan dan konsisten.
Mengapa Type Scale Penting?
Tanpa type scale, kamu mungkin menggunakan 13px di sini, 17px di sana, 22px di tempat lain — hasilnya terasa tidak koheren. Dengan type scale, setiap ukuran font memiliki "alasan" dan hubungan matematis.
Type Scale yang Umum Digunakan
Scale yang populer menggunakan rasio tertentu:
| Rasio | Nama | Contoh Ukuran |
|---|---|---|
| 1.125 | Major Second | 14, 16, 18, 20, 23 |
| 1.200 | Minor Third | 14, 16, 19, 23, 28 |
| 1.250 | Major Third | 14, 16, 20, 25, 31 |
| 1.333 | Perfect Fourth | 14, 16, 21, 28, 37 |
Gunakan rem, Bukan px
Dalam CSS, gunakan rem untuk font-size:
:root { font-size: 16px; } /* 1rem = 16px */
h1 { font-size: 2.25rem; } /* 36px */
h2 { font-size: 1.875rem; } /* 30px */
h3 { font-size: 1.5rem; } /* 24px */
body { font-size: 1rem; } /* 16px */
small { font-size: 0.875rem; } /* 14px */
Mengapa rem? Karena rem relatif terhadap root font-size — jika user mengubah setting browser mereka (accessibility), semua ukuran font ikut menyesuaikan proporsional.
Base Size: 16px
16px (1rem) adalah ukuran default browser dan base size yang ideal untuk body text. Jangan lebih kecil dari ini untuk teks utama — readability harus jadi prioritas.
Tips Praktis
- Batasi jumlah ukuran — 5-7 ukuran berbeda sudah cukup untuk kebanyakan website
- Buat variabel CSS untuk setiap ukuran sehingga konsisten di seluruh project
- Ukuran body text minimum 16px di desktop, 14px di mobile (tapi 16px lebih baik)
