Typography Scale

Halaman yang dipakai sehari-hari memuat banyak tingkat teks — judul halaman, judul bagian, pengantar, isi, dan keterangan kecil — dan setiap tingkat itu membutuhkan keputusan ukuran. Tanpa skala, keputusan tersebut diambil satu per satu di tempat kejadian: 17px di satu komponen, 18px di komponen lain, 19px di perbaikan berikutnya. Typography scale menyelesaikannya dengan satu aturan aritmetika: sebuah ukuran dasar dan satu rasio tetap, sehingga seluruh tingkatan dihasilkan dari pengalian yang bisa diprediksi. Kita akan menyusun skala rasio 1,25 dari basis 16px, menyimpannya sebagai custom properties, dan membuktikan pada demo bahwa hierarki yang konsisten itu dapat diverifikasi lewat nilai computed font-size .

Skala Rasio 1.25 dari Basis 16px #

Prinsipnya satu rumus: ukuran berikutnya = ukuran sebelumnya × rasio. Dengan basis 16px dan rasio 1,25 (dikenal sebagai major third), kita memperoleh 16 → 20 → 25 → 31,25. Skala disimpan sebagai token di :root sehingga seluruh halaman membaca sumber yang sama:

:root {
  /* Skala rasio 1.25 dari basis 16px */
  --teks-dasar: 16px;
  --teks-md: 20px;    /* 16 × 1.25 */
  --teks-lg: 25px;    /* 20 × 1.25 */
  --teks-xl: 31.25px; /* 25 × 1.25 */
  /* Langkah berikutnya: 39.0625px — lazim dibulatkan menjadi 39px */

  --baris-isi: 1.5;   /* teks isi butuh jarak baris longgar */
  --baris-judul: 1.2; /* judul butuh jarak baris rapat */
}

p { font-size: var(--teks-dasar); line-height: var(--baris-isi); }

.lede { font-size: var(--teks-md); line-height: var(--baris-isi); }

h2 { font-size: var(--teks-lg); line-height: var(--baris-judul); }

h1 { font-size: var(--teks-xl); line-height: var(--baris-judul); }

Mari kita telaah keputusannya:

1. Setiap langkah adalah hasil pengalian: komentar di samping nilai menuliskan asalnya — --teks-lg adalah 20 × 1.25, bukan angka yang dipilih perasaan. Keterlacakan asal itulah yang membedakan skala dari daftar angka.
2. Desimal dibiarkan apa adanya pada langkah awal: 31,25px tampak janggal, tetapi membulatkannya sejak langkah ketiga memutus hubungan rasio; pembulatan lazim dilakukan pada langkah berikutnya (39,0625px → 39px) karena selisihnya tidak terlihat.
3. line-height ikut menjadi token: teks isi memakai 1,5 agar baris panjang tetap terbaca, sedangkan judul memakai 1,2 — semakin besar huruf, semakin rapat jarak barisnya.

Memilih Rasio dan Basis yang Tepat #

Rasio 1,25 adalah titik tengah yang aman untuk UI aplikasi: cukup renggang untuk memisahkan hierarki, cukup rapat agar lima tingkatan masih masuk akal di satu layar. Rasio yang lebih besar seperti 1,5 membuat langkah kedua sudah terlalu besar untuk keterangan kecil, sedangkan rasio 1,125 (dikenal sebagai major second) menghasilkan tingkatan yang nyaris tak terbedakan pada ukuran kecil. Basisnya juga keputusan yang sengaja: 16px mengikuti ukuran default browser, sehingga teks isi tetap menghormati preferensi pengguna — hal yang kita bahas lebih dalam pada Chapter Responsive Typography . Untuk skala yang menyesuaikan lebar layar, nilai token dapat diganti dengan clamp() tanpa mengubah strukturnya.

Demo: Lima Tingkatan dalam Satu Halaman #

Demo chapter ini menerapkan skala di atas pada judul halaman, judul bagian, pengantar, dan isi. Hasil di Browser:

Judul halaman (h1) tampil 31.25px, judul bagian (h2) tampil 25px,
pengantar (.lede) tampil 20px dengan line-height 30px, dan
teks isi (p) tampil 16px dengan line-height 24px.

Keempat nilai font-size beserta dua line-height tersebut diverifikasi otomatis melalui penanda data-expected pada demo. Perhatikan bahwa hubungannya persis seperti rumus: 20 adalah 16 × 1,25, 25 adalah 20 × 1,25, dan 31,25 adalah 25 × 1,25. Ketika desainer meminta hierarki yang lebih tegas, kita cukup mengganti rasio menjadi 1,333 dan menulis ulang empat token di :root — seluruh halaman ikut bergeser tanpa menyentuh satu pun aturan komponen.

:root {
  /* Skala rasio 1.25 dari basis 16px */
  --teks-dasar: 16px;
  --teks-md: 20px;    /* 16 × 1.25 */
  --teks-lg: 25px;    /* 20 × 1.25 */
  --teks-xl: 31.25px; /* 25 × 1.25 */
  /* Langkah berikutnya: 39.0625px — lazim dibulatkan menjadi 39px */

  --baris-isi: 1.5;   /* teks isi butuh jarak baris longgar */
  --baris-judul: 1.2; /* judul butuh jarak baris rapat */
}

p { font-size: var(--teks-dasar); line-height: var(--baris-isi); }

.lede { font-size: var(--teks-md); line-height: var(--baris-isi); }

h2 { font-size: var(--teks-lg); line-height: var(--baris-judul); }

h1 { font-size: var(--teks-xl); line-height: var(--baris-judul); }