Typography Variables

Tipografi adalah bagian stylesheet yang paling cepat berantakan: font stack yang panjang ditulis ulang di setiap aturan, ukuran judul diambil dari angka yang berbeda-beda, dan tinggi baris ditentukan per elemen tanpa pola. Pada chapter Font Family kita sudah menyinggung ide menyimpan stack di custom properties; kini saatnya merangkainya sungguhan. Chapter ini menyatukan skala ukuran clamp() dari section Responsive Web Design menjadi token, menambahkan font stack dan token line-height, lalu merakit semuanya menjadi satu sistem tipografi utuh.

Skala Ukuran dengan clamp() #

Prinsip dari chapter Responsive Typography tetap berlaku: teks isi dipertahankan stabil, judul diskalakan dengan berani. Perbedaannya, kini rumus itu tidak ditulis di setiap heading, melainkan disimpan sekali sebagai token:

:root {
  --ukuran-sm: 0.875rem;
  --ukuran-md: 1.0625rem;
  --ukuran-lg: clamp(1.35rem, 1.05rem + 1.5vw, 2.25rem);
  --ukuran-xl: clamp(1.6rem, 1.2rem + 2vw, 3rem);
}

Dua token pertama bernilai tetap, sedangkan dua token terakhir tumbuh mengikuti lebar viewport di antara batas minimum dan maksimumnya. Fondasi rem di dalam rumus menjaga skala tetap mengikuti preferensi font pengguna, dan seluruh konstanta hanya tertulis satu kali.

Empat token di atas membentuk tangga yang berjenjang:

Untuk merancang tangga sendiri, mulailah dari --ukuran-md: pilih ukuran teks isi yang nyaman, umumnya 1rem hingga 1.125rem, lalu naikkan setiap tingkat di atasnya sekitar 20–30 persen agar bedanya terasa, bukan dikira. Tangga empat tingkat seperti di atas sudah cukup untuk mayoritas halaman; menambah --ukuran-2xl hanya perlu bila ada judul kampanye yang benar-benar lebih besar. Yang penting menjaga kontraknya: tidak ada aturan heading yang menulis angka sendiri, semuanya merujuk token.

Font Stack dan Line-height sebagai Token #

Dua kelompok token melengkapi sistem. Font stack menyatukan pilihan huruf — dengan generic family wajib di ujung, sebagaimana aturan chapter Font Family — sedangkan token line-height memakai nilai tanpa satuan agar mewarisi sebagai rasio:

:root {
  --font-teks: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-kode: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --tinggi-baris-teks: 1.6;
  --tinggi-baris-judul: 1.2;
}

Mengganti font seluruh situs kini berarti mengubah satu baris, bukan puluhan aturan. Situs dengan identitas lebih kaya cukup menambah token per peran — misalnya --font-judul berisi stack serif untuk heading — dan hanya aturan judul yang merujuknya; pola token-nya tetap sama.

Token stack dan rasio tinggi baris bekerja berdampingan begini:

Token --tinggi-baris-teks bernilai 1.6 — setiap paragraf mendapat tinggi baris 1,6 kali ukuran fontnya sendiri, dan angka tanpa satuan ini mewarisi sebagai rasio sehingga aman untuk elemen dengan ukuran font berbeda. Judul sengaja diberi rasio lebih rapat, 1.2, karena huruf besar tidak butuh jarak antarbaris sebanyak teks isi.

Sistem Tipografi Utuh #

Dengan semua token siap, aturan penggunaannya menjadi sangat pendek dan seragam:

body {
  font-family: var(--font-teks);
  font-size: var(--ukuran-md);
  line-height: var(--tinggi-baris-teks);
}

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

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

.caption {
  font-size: var(--ukuran-sm);
}

pre {
  font-family: var(--font-kode);
}

Hierarki halaman terbentuk dari token, bukan dari angka yang tersebar. Inilah bentuk sistem tipografi yang utuh: satu blok :root sebagai sumber kebenaran, lalu aturan-aturan pendek yang hanya merujuk token. Mengubah identitas tipografi situs — misalnya menaikkan ukuran teks isi atau mengganti keluarga huruf — cukup dilakukan di satu tempat.

Demo berikut memakai persis token di atas untuk satu artikel mini:

Perkecil dan perbesar jendela demo untuk merasakan skala judul yang bergerak sementara teks isi tetap tenang.

Ringkasan #

Token tipografi merangkum tiga keputusan desain menjadi satu blok :root: skala ukuran dengan clamp() untuk judul dan rem tetap untuk teks isi, font stack lengkap dengan generic family, serta line-height tanpa satuan sebagai rasio. Aturan-aturan halaman menjadi pendek karena hanya merujuk token, dan perubahan identitas tipografi cukup dilakukan sekali. Setelah nilai-nilai dasar terkunci, chapter berikutnya membahas cara memakai ulang aturan CSS itu sendiri — lewat utility class dan komponen.