Font Size & Scale — UI/UX

Type Scale — Sistem Ukuran Font Salah satu rahasia desain yang rapi: jangan gunakan ukuran font sembarangan. Gunakan type scale — serangkaian ukuran font yang…

Type scale adalah sekumpulan ukuran font yang sudah ditentukan dari satu ukuran dasar dan satu rasio, jadi kamu gak memilih ukuran sembarangan tiap kali menulis CSS. Bayangin ukuran baju: S, M, L, XL. Tiap toko punya beberapa ukuran tetap yang naiknya teratur, dan gak ada yang bikin ukuran "M setengah" khusus untuk satu pembeli. Type scale juga begitu: halamanmu cukup punya 5 sampai 7 ukuran, dan semuanya saling berhubungan.

🧪 Tebakan cepat: Seorang tamu menaikkan ukuran font default di setting browser-nya dari 16px jadi 20px. Judul halaman Homestay Kabut ditulis font-size: 2.25rem. Sekarang besarnya berapa px? Jawabannya ada di bagian "rem, bukan px".

Base size: 16px

Semua dimulai dari ukuran teks isi. 16px adalah ukuran font default browser, dan itu juga ukuran yang ideal untuk body text. Jangan pakai yang lebih kecil untuk teks utama: teks 14px di HP sudah bikin orang menyipitkan mata. Di iPhone, kolom input dengan font di bawah 16px bahkan bikin Safari otomatis zoom waktu kolomnya disentuh.

Menghitung type scale

Rumusnya: ukuran = ukuran dasar × rasio pangkat langkah. Naik satu langkah berarti dikali rasio sekali lagi. Dari 16px:

Rasio	Nama	Langkah 1	Langkah 2	Langkah 3
1,125	Major Second	18	20,25	22,78
1,2	Minor Third	19,2	23,04	27,65
1,25	Major Third	20	25	31,25
1,333	Perfect Fourth	21,33	28,43	37,9
1,5	Perfect Fifth	24	36	54

Contoh rasio 1,25: 16 × 1,25 = 20, lalu 20 × 1,25 = 25, lalu 25 × 1,25 = 31,25. Rasio kecil (1,125) cocok untuk halaman padat seperti dashboard. Rasio besar (1,5) bikin judul sangat menonjol, cocok untuk halaman dengan sedikit teks seperti halaman pesan Bu Sri.

rem, bukan px

Ini type scale rasio 1,5 dari 16px, ditulis dalam rem, untuk bagian atas halaman Homestay Kabut:

<h1>Homestay Kabut</h1>
<h2>Kamar Teras</h2>
<p>Kamar di lantai dua dengan teras kayu yang menghadap kebun kentang.</p>

<style>
  h1 { font-size: 2.25rem; font-weight: 700; } /* 16 × 1,5 × 1,5 = 36px */
  h2 { font-size: 1.5rem; font-weight: 600; }  /* 16 × 1,5 = 24px */
  p { font-size: 1rem; line-height: 1.6; }     /* 16px, satu baris 25,6px */
</style>

rem (root em) artinya kelipatan ukuran font elemen <html>, yang bawaannya 16px. Jadi px dibagi 16: 36px = 2.25rem, 24px = 1.5rem, 16px = 1rem.
font-weight mengatur tebal huruf. h1 dan h2 sudah tebal 700 dari browser, jadi 600 di h2 harus kamu tulis sendiri.
line-height: 1.6 tanpa satuan artinya tinggi baris 1,6 kali ukuran font-nya sendiri: 16 × 1,6 = 25,6px.

Kenapa rem? Karena dia ikut setting pengguna. Kalau tamu menaikkan ukuran font default browser jadi 20px, 1rem jadi 20px, dan semuanya membesar sebanding: p jadi 20px, h2 jadi 30px, h1 jadi 2,25 × 20 = 45px. Itu jawaban tebakannya. Ukuran yang ditulis dalam px gak ikut berubah, jadi pengguna yang butuh teks lebih besar gak terbantu. (Zoom browser lain cerita: zoom membesarkan px dan rem sama-sama.)

Line-height dan panjang baris

Ukuran font baru setengah cerita. Dua hal lain menentukan teks enak dibaca:

Line-height: untuk body text, 1,5 sampai 1,7 nyaman. Judul besar butuh lebih rapat, sekitar 1,1 sampai 1,3, supaya dua barisnya gak terlihat seperti dua judul terpisah. Tulis tanpa satuan.
Panjang baris (measure): Robert Bringhurst di The Elements of Typographic Style menyebut 45 sampai 75 karakter per baris sebagai panjang yang nyaman, dengan 66 sebagai yang ideal. Baris yang terlalu panjang bikin mata kehilangan awal baris berikutnya. Di CSS: max-width: 65ch, dengan ch selebar satu karakter "0".

Batasi jumlah ukuran: 5 sampai 7

Kebanyakan website cukup dengan 5 sampai 7 ukuran berbeda. Halaman Bu Sri pakai empat: 14px (catatan check-in), 16px (isi), 24px (nama kamar), 36px (nama homestay). Simpan ukurannya sebagai CSS variable supaya seluruh project memakai angka yang sama:

:root {
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem;   /* 16px */
  --text-lg: 1.5rem;   /* 24px */
  --text-xl: 2.25rem;  /* 36px */
}

⚠️ Jebakan yang sering ketemu

Ukuran acak. 13px di sini, 17px di sana, 22px di tempat lain. Tiap ukuran baru harus datang dari scale-mu.
Body text di bawah 16px. Termasuk kolom input: di bawah 16px, Safari di iPhone zoom sendiri.
Line-height pakai px. line-height: 24px cocok untuk teks 16px, tapi bikin baris judul 36px saling tumpuk. Angka tanpa satuan ikut menyesuaikan.
Lupa gaya bawaan heading. h1 dan h2 sudah tebal 700 dan punya ukuran sendiri dari browser (h1 2em atau 32px). Tulis nilai yang kamu mau, jangan berharap bawaannya cocok.

TL;DR: Pakai type scale: ukuran = dasar × rasio pangkat langkah, misalnya rasio 1,25 dari 16 jadi 20, 25, 31,25, dan rasio 1,5 jadi 24 dan 36. Base size body text 16px (ukuran default browser, 1rem). Tulis ukuran font dalam rem, yang relatif ke root font-size, supaya ikut setting pengguna: dengan default 20px, 2.25rem jadi 45px. Body text pakai line-height 1,5 sampai 1,7 tanpa satuan dan panjang baris 45 sampai 75 karakter (max-width: 65ch). Cukup 5 sampai 7 ukuran per website.