Skala Jenis Modular — Matematika di Balik Ukuran Font Setiap Sistem Desain

Anda telah memandang mockup tersebut. Ukuran fontnya adalah 14px, 16px, 18px, 24px, 32px, 48px. Tidak ada yang keliru secara tepat — namun sesuatu terasa sedikit tidak seimbang. Perpindahan antar ukuran terasa tidak merata. Judul terlalu dekat dengan subjudul. Label kecil terasa terputus dari teks utama. Anda telah memilih angka-angka yang terlihat bulat dan masuk akal, dan Anda bertanya-tanya mengapa hasilnya terasa sedikit sembarangan. Hasilnya sembarangan. Itulah masalahnya.

Ternyata persepsi manusia terhadap perbedaan ukuran adalah sekitar logaritmik. Kita tidak merasakan perbedaan antara 16px dan 32px sebagai "dua kali" — kita merasakannya sebagai satu langkah. Untuk menciptakan tata letak font yang terasa konsisten secara proporsional, jarak antara ukuran-ukuran Anda harus mengikuti rasio, bukan barisan aritmetika. Itulah gagasan di balik skala modular.

Apa Sebenarnya Skala Modular?

Skala modular adalah urutan angka yang dibangun dengan memperkalikan nilai dasar dengan rasio tetap secara berulang. Rumusnya adalah:

size = base × ratio^n

Di mana n n adalah nomor langkah (0 untuk dasar, positif untuk lebih besar, negatif untuk lebih kecil). Dengan dasar 16px dan rasio 1.25 (interval mayor ketiga), Anda mendapatkan:

• 16 × 1.25^-2 = 10.24px
• 16 × 1.25^-1 = 12.8px
• 16 × 1.25^0 = 16px (dasar)
• 16 × 1.25^1 = 20px
• 16 × 1.25^2 = 25px
• 16 × 1.25^3 = 31.25px
• 16 × 1.25^4 = 39.06px

Setiap peningkatan tepat 25% lebih besar dari yang sebelumnya. Perpindahan visual terasa konsisten karena mereka konsisten — secara geometris. Bandingkan dengan , di mana perpindahannya 14, 16, 18, 24, 32, 48. Spasi yang sangat tidak konsisten yang dipakai sebagai angka bulat. +2, +2, +6, +8, +16Rasio yang Diberi Nama (dan Kapan Setiap Rasio Tepat Digunakan)

Nama-nama ini berasal dari interval musik Barat, yang mengikuti hubungan matematis yang sama. Berikut adalah susunan praktisnya:

1.067 — Interval Kedua Kecil:

• Sangat ketat. Langkah-langkah hampir tidak terlihat. Cocok untuk jarak antar teks dalam komponen tunggal, bukan untuk hierarki judul. 1.125 — Interval Kedua Besar:
• Sangat halus. Cocok untuk antarmuka yang padat di mana Anda membutuhkan perbedaan tanpa drama — pikirkan tabel data, dashboard. 1.25 — Interval Mayor Ketiga:
• Titik terbaik untuk kebanyakan antarmuka web. Kontras antar tingkatan cukup untuk membaca hierarki secara jelas tanpa membuat judul terlihat terlalu besar. Paling populer dalam sistem desain. 1.333 — Interval Kuartal Sempurna:
• Sangat bersih dan banyak digunakan. Memberi judul sedikit kekuatan. Cocok ketika Anda ingin hierarki tipografi yang jelas dengan sedikit langkah. 1.414 — Interval Kuartal yang Diperkuat (√2):
• Juga rasio A4 kertas. Lebih dramatis daripada interval kuartal sempurna, cocok untuk konten editorial. 1.5 — Interval Kelima Sempurna:
• Kontras antar tingkatan yang kuat. Judul terasa besar dan tegas. Cocok untuk tata letak editorial, halaman penjualan, atau mana saja yang membutuhkan teks tampilan untuk membuat pernyataan. 1.618 — Rasio Emas:
• Indah secara teori, namun agresif dalam praktik. Dua langkah dari teks utama dan judul Anda sudah sangat besar. Gunakan untuk elemen tampilan saja, bukan hierarki antarmuka penuh. Bagi pengembang frontend yang membuat antarmuka produk, interval mayor ketiga (1.25) atau interval kuartal sempurna (1.333) mencakup hampir semua kasus. Jika Anda ragu, mulai dengan 1.25. Anda bisa meningkatkan rasio jika hierarki terasa terlalu datar.

Skala dalam Praktik: Interval Mayor Ketiga dari 16px

Berikut ini adalah skala lengkap interval mayor ketiga (rasio = 1.25, dasar = 16px) di seluruh tujuh langkah:

Nilai px

Melangkah	Pengali	Nilai rem	xs
10.24px	1.25^-2	0.64rem	sm
12.8px	1.25^-1	0.8rem	base
1rem	1.25^0	16px	lg
1.25rem	1.25^1	20px	xl
25px	1.25^2	1.5625rem	2xl
31.25px	1.25^3	1.953rem	3xl
39.06px	1.25^4	2.441rem	Catatan mengenai nilai desimal:

sangat baik untuk dipertahankan secara tepat dalam rem — browser menangani rendering sub-piksel secara benar. Anda tidak perlu membulatkan ke 12.8px dan 31.25px dan memecah konsistensi matematis. Tetapkan matematika yang bersih; biarkan browser melakukan tugasnya. 13px atau 31px Properti CSS Kustom: Sistem Token Desain Anda

Terjemahkan skala langsung ke properti CSS kustom. Ini memberi Anda sistem token desain yang mudah dikonsumsi di mana saja dalam kode Anda — dan mudah diganti nanti jika Anda mengubah rasio:

Kemudian gunakan seperti token desain apa pun:

:root {
  --font-size-xs:   0.64rem;    /* 16 × 1.25^-2 = 10.24px */
  --font-size-sm:   0.8rem;     /* 16 × 1.25^-1 = 12.8px  */
  --font-size-base: 1rem;       /* base = 16px             */
  --font-size-lg:   1.25rem;    /* 16 × 1.25^1  = 20px     */
  --font-size-xl:   1.5625rem;  /* 16 × 1.25^2  = 25px     */
  --font-size-2xl:  1.953rem;   /* 16 × 1.25^3  = 31.25px  */
  --font-size-3xl:  2.441rem;   /* 16 × 1.25^4  = 39.06px  */
}

Keuntungan dibandingkan nilai yang dihardcode: ketika desainer memutuskan bahwa rasio harus 1.333 alih-alih 1.25, Anda hanya perlu mengubah tujuh angka di satu tempat. Setiap komponen diperbarui secara otomatis. Sistem desain yang melewatkan langkah ini akhirnya memiliki lima puluh nilai ukuran font yang tersebar di berbagai file komponen — dan setiap pengembang di tim menambahkan nilai mereka sendiri. Hubungan antara pengembang dan token desain cukup rumit, tetapi ini adalah versi yang benar-benar bekerja.

body        { font-size: var(--font-size-base); }
small       { font-size: var(--font-size-sm);   }
h3          { font-size: var(--font-size-xl);   }
h2          { font-size: var(--font-size-2xl);  }
h1          { font-size: var(--font-size-3xl);  }
.label      { font-size: var(--font-size-xs);   }

Jika Anda tidak ingin menghitung nilai-nilai secara manual,

memungkinkan Anda memilih ukuran dasar dan rasio, serta menghasilkan skala lengkap secara instan — dengan properti CSS siap untuk dikopi. Generator Skala Moduler Font Kapan Harus Menghentikan Skala Ini?

Skala adalah alat, bukan hukum. Berikut kapan Anda harus sengaja melanggar skala ini:

Judul tampilan membutuhkan penanganan terpisah

Sebagian besar sistem desain menggunakan dua skala: rasio yang lebih ketat (1.25 atau 1.333) untuk teks dan komponen antarmuka, dan rasio yang lebih dramatis (1.5 atau 1.618) untuk judul tampilan. Judul utama di halaman pemasaran tidak perlu mengikuti perkembangan yang sama seperti label di dalam formulir. Tailwind menggunakan skala ini secara tepat — langkah yang lebih ketat pada ukuran kecil, dan peningkatan yang lebih besar pada ukuran tampilan.

Tata letak yang fleksibel memperhalus transisi

Pada tampilan ponsel, rasio 1.5 yang terlihat bagus di desktop akan menghasilkan judul yang terlalu kecil atau terlalu besar. Jawaban modern adalah

Ini mempertahankan nilai modular scale sebagai batas minimum dan maksimum, namun memungkinkan ukuran tampilan berubah secara halus berdasarkan lebar viewport. Skala modular menentukan rentangnya; clamp():

h1 {
  font-size: clamp(1.953rem, 4vw + 1rem, 2.441rem);
}

mengelola transisi. Matematika tetap konsisten, dan hasilnya tetap dapat dibaca di berbagai ukuran perangkat. clamp() Oversight kontekstual adalah hal yang baik

Jika judul Anda di dalam sidebar terasa terlalu besar pada

, mengurangkannya ke h2 dalam konteks tersebut adalah pilihan yang sah. Skala memberi Anda nilai default yang konsisten, bukan aturan yang tidak dapat diubah. Tujuannya adalah harmoni visual, bukan kekhasan matematis. Hentikan skala ketika konteks membutuhkannya — tapi hentikan secara sadar, bukan karena Anda memilih angka bulat. 1.953remPilih ukuran dasar (biasanya 16px), pilih rasio yang sesuai dengan bobot visual yang Anda butuhkan (1.25 untuk antarmuka, 1.333 untuk sesuatu yang lebih berpengaruh, 1.5 untuk konten editorial), hasilkan skala, dan tulis sebagai properti CSS kustom. Selesai. Ukuran font Anda kini memiliki hubungan matematis daripada yang sembarangan, dan setiap desainer yang melihat kode Anda akan langsung memahami sistemnya. 1.5625rem di IO Tools memungkinkan Anda mengatur ukuran dasar, rasio, dan jumlah langkah — serta memberi Anda CSS siap untuk dikopi. Coba sesuaikan rasio dari 1.25 ke 1.333 dan lihat seberapa cepat ukuran judul berubah. Itulah intuisi yang perlu dibangun: memahami bagaimana setiap rasio

Dari satu hex, kamu sekarang bisa menghasilkan palet lengkap, bernama secara semantik, dan siap untuk mode gelap dalam kurang dari 50 baris JavaScript. Langkah kunci:

terasa

Itu Generator Skala Moduler Font sebelum mengkomitennya ke dalam sistem desain. Skala Tipografi Modular — Matematika di Balik Setiap Sistem Desain pada Ukuran Font 2 Skala Tipografi Modular — Matematika di Balik Setiap Sistem Desain pada Ukuran Font 1

Anda mungkin juga menyukai