devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Audit Situs

Generator Type Scale — Ukuran Font Modular dan Fluid

Pilih ukuran font dasar dan rasio — Minor Third, Major Third, Perfect Fourth, Golden Ratio — lalu dapatkan rangkaian ukuran font yang harmonis untuk heading dan teks isi. Aktifkan fluid type agar setiap langkah membesar halus di antara skala mobile dan desktop dengan clamp(), pratinjau di lebar layar apa pun, dan salin variabel CSS, konfigurasi Tailwind, atau SCSS.

Diperbarui

Pratinjau


  


    
 Data kamu tidak pernah meninggalkan komputer kamu. Semua proses berjalan 100% secara lokal di browser kamu.
Apakah alat ini membantu?0.0 0 penilaian

    
    
    Hitung nilai clamp() CSS fluid untuk font dan spasi dari ukuran min/max dan lebar viewportKalkulator clamp() →
    
    

      
Cara menggunakan Generator Type Scale
  1. Atur ukuran dasar (biasanya 16 px, untuk teks isi) dan rasio. Rasio yang lebih besar memberi kontras lebih tegas antar heading.
  2. Pilih jumlah langkah ke bawah (teks kecil, caption) dan ke atas (h4 sampai h1, display).
  3. Aktifkan Fluid untuk memakai ukuran dasar dan rasio yang lebih kecil di ponsel, lalu membesar ke skala desktop. Geser slider lebar layar untuk melihat pratinjaunya.
  4. Salin variabel CSS, konfigurasi fontSize untuk Tailwind, atau map SCSS.


Apa itu modular scale


Type scale mengalikan ukuran dasar dengan rasio yang sama untuk setiap langkah: dengan 16 px dan 1,25, langkahnya adalah 16, 20, 25, 31,25, 39 px… Ukuran yang memakai satu rasio yang sama terlihat saling berkaitan. Itulah sebabnya para tipografer meminjam rasio dari musik, seperti Major Third (1,25), Perfect Fourth (1,333) dan Perfect Fifth (1,5), serta Golden Ratio (1,618).


  • Rasio kecil (1,125–1,2) cocok untuk antarmuka yang padat, dashboard, dan bacaan panjang.
  • Rasio besar (1,333–1,618) cocok untuk halaman marketing dengan judul besar dan tegas.


Fluid type dengan clamp()


Heading yang pas di desktop sering terlalu besar di ponsel. Langkah fluid melakukan interpolasi antara skala mobile dan skala desktop: font-size: clamp(1.5rem, 1.28rem + 0.98vw, 2.44rem) tetap di nilai minimum pada layar kecil, membesar secara linear mengikuti viewport, lalu berhenti di nilai maksimum. Nilainya memakai rem, jadi tetap menghormati pengaturan ukuran font browser pengunjung. Untuk nilai tunggal, lihat Kalkulator Clamp; untuk konversi satuan, gunakan PX ke REM.
Juga dicari sebagai: skala tipografi, generator skala font, ukuran font responsif, fluid typography generator, kalkulator font size, tailwind font size scale, type scale calculator.
Tool yang cocok dipakai bersama Generator Type Scale
  • CSS Grid Generator — Atur kolom, baris, dan gap, lalu seret di atas sel untuk membuat area seperti header, sidebar, dan main.
  • Generator Flexbox CSS — Lihat langsung apa yang dilakukan setiap properti flexbox: atur arah, wrapping, justify-content, align-items, dan gap, tambah atau hapus item, lalu klik item mana pun untuk mengatur flex-grow, shrink, basis, order, dan align-self.
  • Generator Warna Tailwind — Tempel satu warna brand dan dapatkan skala shade 11 langkah (50 sampai 950) yang seimbang, dibangun dengan OKLCH — lengkap dengan petunjuk kontras dan ekspor untuk Tailwind v3, v4, CSS, dan SCSS.
  • Cek Kontras Warna — Masukkan warna teks dan latar belakang untuk mendapatkan rasio kontras WCAG yang akurat, hasil lulus/gagal untuk setiap level, skor APCA, dan perbaikan sekali klik yang tetap mempertahankan hue kamu.
Pertanyaan yang sering diajukan
Rasio type scale mana yang sebaiknya saya pakai?
Mulailah dengan 1,25 (Major Third) untuk sebagian besar website. Gunakan 1,2 atau lebih kecil untuk aplikasi dan halaman yang banyak teks, dan 1,333 atau lebih besar untuk landing page dengan judul besar.
Apa itu fluid typography?
Ukuran font yang membesar secara halus mengikuti lebar layar, alih-alih melompat di breakpoint. Setiap langkah memakai clamp() dengan nilai minimum untuk ponsel dan nilai maksimum untuk layar besar.
Bagaimana cara memakai skala ini di Tailwind?
Pilih output Tailwind, lalu tempel objek fontSize ke theme.extend di tailwind.config.js. Setelah itu, gunakan class seperti text-lg atau text-3xl seperti biasa.
Kenapa memakai rem, bukan px?
rem mengikuti pengaturan ukuran font browser pengunjung, sehingga teks ikut membesar bagi orang yang membutuhkan huruf lebih besar. Secara default, 1rem sama dengan 16 px.
Bisakah saya memasang Generator Type Scale sebagai aplikasi web dan memakainya offline?
Bisa. Generator Type Scale adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.

      
    

    
    
Tool terkait
localKalkulator clamp()Masukkan ukuran minimum dan maksimum serta rentang viewport, lalu dapatkan nilai clamp() yang ramah zoom…localKonverter PX ke REMKonversi antara pixel, rem, dan em dengan ukuran font root kamu sendiri, atau tempel seluruh stylesheet…localCSS Grid GeneratorAtur kolom, baris, dan gap, lalu seret di atas sel untuk membuat area seperti header, sidebar, dan main.…localGenerator Flexbox CSSLihat langsung apa yang dilakukan setiap properti flexbox: atur arah, wrapping, justify-content,…localGenerator Warna TailwindTempel satu warna brand dan dapatkan skala shade 11 langkah (50 sampai 950) yang seimbang, dibangun dengan…localCek Kontras WarnaMasukkan warna teks dan latar belakang untuk mendapatkan rasio kontras WCAG yang akurat, hasil lulus/gagal…