Tentang alat ini

Generator Type Scale menghitung skala tipografi modular dari ukuran font dasar dan sebuah rasio, mulai dari Minor Second (1.067) hingga Golden Ratio (1.618), lalu menghasilkan sembilan ukuran sebagai CSS custom properties.

Cara menggunakan

  1. Masukkan ukuran font dasar dalam piksel (16 px adalah bawaan browser).
  2. Pilih rasio skala, misalnya Major Third (1.25).
  3. Pilih satuan output: rem, px, atau em.
  4. Klik Copy CSS Variables untuk memakai ukuran dari --xs hingga --4xl.

Perlu diketahui

  • Setiap langkah dalam skala modular mengalikan ukuran sebelumnya dengan rasio yang sama.
  • Generator ini menghasilkan sembilan langkah: dua di bawah ukuran dasar, ukuran dasar itu sendiri, dan enam di atasnya.
  • Rasio kecil (1.067–1.2) cocok untuk antarmuka yang padat; rasio besar (1.333–1.618) cocok untuk halaman editorial dengan judul besar.
  • Nilai rem dihitung relatif terhadap ukuran font root 16 px.
  • Dengan rem, teks ikut menyesuaikan pengaturan ukuran font di browser pengguna.

Berjalan sepenuhnya di browser Anda — apa pun yang Anda masukkan tidak diunggah atau disimpan.

Pertanyaan umum

Apa itu type scale modular?

Type scale modular adalah sekumpulan ukuran font di mana setiap ukuran merupakan ukuran sebelumnya dikalikan rasio tetap, sehingga judul dan teks isi tetap terlihat selaras.

Rasio type scale mana yang sebaiknya saya pakai?

Major Third (1.25) dan Perfect Fourth (1.333) adalah pilihan serbaguna yang populer. Gunakan rasio lebih kecil untuk aplikasi dan dashboard, dan rasio lebih besar untuk landing page dan blog.

Sebaiknya ukuran font memakai rem atau px?

rem umumnya lebih disarankan karena menghormati ukuran font pilihan pengguna di browser, sehingga aksesibilitas lebih baik.

Ukuran font dasar berapa yang sebaiknya dipakai?

16 px adalah bawaan standar browser dan dasar yang baik untuk teks isi; banyak situs memakai 16–18 px agar nyaman dibaca.