Cara membuat skala tipografi fluid dengan CSS clamp()

Skala tipografi fluid adalah dua skala tetap, satu untuk ponsel dan satu untuk desktop, yang dihubungkan dengan garis lurus. clamp() adalah cara CSS menggambar garis itu dan menghentikannya di kedua ujung. Hitungannya terdiri atas empat langkah, dan ada baiknya Anda mengerjakannya sekali secara manual agar angka-angka dalam stylesheet hasil generator tidak lagi terasa seperti sulap.

Dua istilah terlebih dahulu

Skala tipografi (type scale) adalah kumpulan ukuran huruf yang berurutan, dibuat dengan mengalikan ukuran body dengan sebuah rasio, sekali untuk setiap langkah. Dengan rasio 1.25, body 19px menghasilkan 23.75px untuk langkah berikutnya ke atas, 29.69px untuk langkah sesudahnya, dan seterusnya.

Ukuran fluid adalah ukuran yang membesar secara linear mengikuti viewport di antara dua lebar, dan diam di luar rentang itu. Di CSS, ukuran ini ditulis clamp(minimum, preferred, maximum), dengan nilai preferred yang memadukan panjang tetap dan satuan viewport.

Membuat skala dengan alat ini

1. Buka Type scale generator dan pilih typeface terlebih dahulu melalui Typeface. Setiap keluarga huruf di daftar menampilkan x-height-nya, dan semua pengukuran di bawahnya bergantung pada keluarga huruf, jadi memilihnya paling akhir berarti Anda harus membaca angka-angkanya dua kali.
2. Atur Body size, narrow (ukuran body di layar sempit, 12 hingga 24px; nilai awalnya 16) dan Body size, wide (ukuran body di layar lebar, 14 hingga 28px; nilai awalnya 19).
3. Pilih Ratio, wide dari tujuh tombol, mulai 1.125 (Major second) hingga 1.618 (Golden ratio). Ujung sempit memakai 1.2, seperti yang dinyatakan panel di bawah tombol-tombol itu.
4. Atur Steps up (langkah ke atas, 1 hingga 8) dan Steps down (langkah ke bawah, 0 hingga 4). Nilai default-nya lima dan dua.
5. Atur Column width (lebar kolom) sebagai persentase viewport, lalu baca Body line length (panjang baris body), yang menghitung karakter per baris pada 360, 768, 1024, 1280, dan 1440px.
6. Baca setiap baris skala: ukurannya di ujung sempit dan ujung lebar, lalu cap-height dan x-height-nya dalam piksel.
7. Pilih format output: CSS custom properties, Tailwind v4 @theme, SCSS map, atau Design tokens (W3C DTCG). Tekan Copy scale di bilah bawah. Tombol Cap at …rem di bilah itu menyalin max-width yang membuat body tepat 66 karakter per baris.

Hitungan clamp(), dikerjakan lengkap

Ambil nilai default alat ini untuk langkah body: 16px pada viewport 360px, 19px pada viewport 1440px, dan ukuran root default browser sebesar 16px.

Langkah 1, kemiringan. Berapa piksel ukuran huruf untuk setiap piksel viewport: (19 − 16) ÷ (1440 − 360) = 3 ÷ 1080 = 0.0027778.

Langkah 2, kemiringan sebagai satuan viewport. 1vw sama dengan 1% lebar viewport, jadi kalikan dengan 100: 0.0027778 × 100 = 0.2778vw.

Langkah 3, titik potong. Ukuran huruf yang akan diberikan garis itu pada viewport selebar nol: 16 − 0.0027778 × 360 = 16 − 1 = 15px, dan 15 ÷ 16 = 0.9375rem.

Langkah 4, kedua ujung. 16 ÷ 16 = 1rem dan 19 ÷ 16 = 1.1875rem.

Jika digabungkan: clamp(1rem, 0.9375rem + 0.2778vw, 1.1875rem).

Cara memeriksanya adalah dengan memasukkan kembali lebar viewport. Nilai preferred adalah 15px ditambah 0.0027778 dikali lebar viewport:

Viewport	Nilai preferred	Hasil clamp()
320px	15 + 0.89 = 15.89px	16px, nilai minimum
360px	15 + 1 = 16px	16px
768px	15 + 2.13 = 17.13px	17.13px
1440px	15 + 4 = 19px	19px
1920px	15 + 5.33 = 20.33px	19px, nilai maksimum

Langkah berikutnya ke atas dihitung dengan cara yang sama, hanya dengan angka yang lebih besar. Sempit: 16 × 1.2 = 19.2px. Lebar: 19 × 1.25 = 23.75px. Kemiringannya 4.55 ÷ 1080 = 0.0042130, atau 0.4213vw. Titik potongnya 19.2 − 0.0042130 × 360 = 19.2 − 1.5167 = 17.6833px, atau 1.1052rem. Kedua ujungnya 19.2 ÷ 16 = 1.2rem dan 23.75 ÷ 16 = 1.4844rem.

Inilah kedua baris itu, sebagaimana ditulis alat ini dalam output CSS-nya pada pengaturan default (alat ini mengeluarkan setiap langkah, dimulai dari yang terbesar, dengan aturan trim di bagian akhir):

:root {
  --step-md: clamp(1.2rem, 1.1052rem + 0.4213vw, 1.4844rem);
  --step-base: clamp(1rem, 0.9375rem + 0.2778vw, 1.1875rem);
}

h1, h2, h3, h4, .trim {
  text-box: trim-both cap alphabetic;
}

Kedua ujung memakai rem agar pembaca yang mengatur ukuran huruf default lebih besar di browser-nya tetap mendapatkan ukuran itu. Hanya suku tengah yang memakai vw. Aturan text-box menghapus ruang bawaan font di atas huruf kapital dan di bawah baseline, sehingga judul duduk pas di kotaknya. Aturan ini mencapai status Baseline di semua mesin browser pada Agustus 2026.

Mengapa kedua ujung memakai rasio yang berbeda

Pada lima langkah ke atas, ujung sempit bernilai 16 × 1.2⁵ = 16 × 2.48832 = 39.81px dan ujung lebar 19 × 1.25⁵ = 19 × 3.0518 = 57.98px. Seandainya ponsel juga memakai 1.25, judul terbesarnya akan menjadi 16 × 3.0518 = 48.83px, 9px lebih tinggi di layar yang lebarnya hanya 360px. Rasio yang lebih landai di ujung sempit menjaga puncak skala tetap layak dipakai di ponsel tanpa membuat skala desktop terlalu malu-malu.

Ukuran yang Anda atur bukan ukuran yang Anda lihat

font-size mengatur em box, yang tidak terlihat. Yang dilihat pembaca adalah huruf-huruf di dalamnya, dan proporsinya ditentukan oleh typeface. Cap height adalah tinggi huruf kapital datar seperti H, dinyatakan sebagai pecahan dari ukuran huruf.

Data font di alat ini memberi Inter cap height 0.728 dan x-height 0.546, sedangkan EB Garamond 0.650 dan 0.400. Terapkan skala yang sama pada masing-masing:

Typeface	Huruf kapital pada 57.98px	x-height pada 19px	Karakter body per baris pada 1440px
Inter	57.98 × 0.728 = 42.21px	19 × 0.546 = 10.37px	98
EB Garamond	57.98 × 0.650 = 37.69px	19 × 0.400 = 7.60px	122

Untuk menyamai huruf kapital Inter setinggi 42.21px, EB Garamond memerlukan 42.21 ÷ 0.650 = 64.94px. Nilai clamp() yang sama menghasilkan dua skala yang tampak berbeda, dan karena itulah alat ini menampilkan cap-height dan x-height di samping setiap langkah. Untuk melihat seberapa jauh x-height bervariasi antarkeluarga huruf, baca x-height di 872 keluarga font.

Kegagalan yang disembunyikan clamp(): panjang baris

Ukuran huruf fluid dan kolom yang diatur sebagai persentase viewport tumbuh dengan laju yang berbeda, sehingga baris makin panjang saat layar makin lebar, dan tidak ada yang terlihat rusak di halaman.

Pada nilai default alat ini (Inter, body 19px di ujung lebar, kolom 62% dari viewport), Body line length menunjukkan 29, 58, 74, 89, dan 98 karakter pada kelima lebar, masing-masing diukur pada ukuran body yang diberikan clamp() di lebar tersebut. Angka terakhir berasal dari 1440 × 0.62 = 892.8px lebar kolom, dibagi lebar karakter rata-rata Inter sebesar 0.478 × 19 = 9.082px, yaitu 98; angka pertama berasal dari 360 × 0.62 = 223.2px dengan body 16px di ujung sempit, 223.2 ÷ (0.478 × 16) = 29. WCAG 1.4.8, kriteria tingkat AAA, menetapkan batas atasnya di 80. Dua dari lima lebar itu melampauinya. (Sampai Oktober 2026, pengukuran ini menghitung setiap lebar pada ukuran ujung lebar dan menunjukkan 25 di ujung sempit; kesalahan itu ketahuan saat panduan ini ditulis.)

Typeface yang lebih sempit memperburuk keadaan. Karakter rata-rata EB Garamond selebar 0.385 em, sehingga kolom yang sama memuat 892.8 ÷ (0.385 × 19) = 122 karakter.

Solusinya adalah membatasi lebar kolom, bukan mengecilkan teks. Saran alat ini pada nilai default adalah 0.478 × 19 × 66 = 599.4px, yaitu 599.4 ÷ 16 = 37.46rem, dan tombol Cap at 37.46rem menyalinnya sebagai baris max-width.

Cara lain untuk melakukannya

Tidak ada metode bawaan sistem operasi untuk membuat skala tipografi. Hitungan di atas adalah alternatifnya, dan semuanya muat dalam spreadsheet: satu baris per langkah, dan masing-masing satu kolom untuk ukuran sempit, ukuran lebar, kemiringan, titik potong, serta clamp() jadinya. Yang tidak bisa diberikan spreadsheet adalah cap-height dan panjang baris, karena keduanya membutuhkan metrik font itu sendiri.

Memeriksa apa yang keluar dari halaman

Skala dihitung di dalam tab. Satu-satunya permintaan yang dibuat adalah untuk typeface yang Anda pilih: untuk keluarga huruf selain segelintir font sistem umum seperti Arial dan Georgia, alat ini memuat stylesheet font dari Google Fonts, yang berarti nama keluarga hurufnya ikut terkirim. Ukuran dan rasio Anda tidak. Keduanya tersimpan di bilah alamat setelah tanda #, bagian URL yang tidak dikirim oleh browser, dan Anda bisa memastikannya di panel Network pada developer tools sambil menggeser slider.

Selanjutnya

Buka Type scale generator dengan typeface dan ukuran body Anda sendiri. Untuk menemukan ukuran body terkecil yang masih bisa ditanggung oleh warna dan font Anda, gunakan Type legibility checker terlebih dahulu.