Desain / Tipografi

Generator Skala Tipografi (Skala Modular untuk CSS dan Tailwind)

Buat skala tipografi modular dari ukuran font dasar dan rasio seperti 1,25 atau rasio emas, pratinjau setiap langkah dengan teks Anda sendiri, lalu salin ukurannya sebagai custom properties CSS atau konfigurasi fontSize Tailwind dalam rem atau px.

Generator Skala Tipografi (Skala Modular untuk CSS dan Tailwind): Setiap ukuran adalah ukuran dasar yang dikalikan dengan rasio satu kali untuk setiap langkah: dengan 16 px dan sepertiga mayor, 1,25, langkah di atasnya adalah 20, 25, 31,25, 39,06, dan 48,83 px, sedangkan langkah di bawahnya adalah 12,8 dan 10,24 px. Ukuran dicantumkan dalam px dan rem, serta diberi nama seperti ukuran teks Tailwind, dari xs hingga 4xl. Berjalan 100% lokal di browser Anda tanpa upload file ke server.

Kategori
Tools developer
Dijalankan
Di browser Anda
Biaya
Gratis · tanpa daftar
Ketersediaan
Siap digunakan
Generator skala tipografiPemrosesan lokal

Berjalan sepenuhnya di browser Anda

4xl48,83 px · 3.0518 remThe quick brown fox
3xl39,06 px · 2.4414 remThe quick brown fox
2xl31,25 px · 1.9531 remThe quick brown fox
xl25 px · 1.5625 remThe quick brown fox
lg20 px · 1.25 remThe quick brown fox
base16 px · 1 remThe quick brown fox
sm12,8 px · 0.8 remThe quick brown fox
xs10,24 px · 0.64 remThe quick brown fox
:root {
  --step-5: 3.0518rem;
  --step-4: 2.4414rem;
  --step-3: 1.9531rem;
  --step-2: 1.5625rem;
  --step-1: 1.25rem;
  --step-0: 1rem;
  --step--1: 0.8rem;
  --step--2: 0.64rem;
}

Setiap tingkat adalah tingkat di bawahnya dikalikan dengan rasio: dengan ukuran dasar 16 px dan rasio 1.25, ukuran di atasnya adalah 20, 25, dan 31.25 px, sedangkan di bawahnya 12.8 dan 10.24 px. Rasio kecil seperti 1.125 cocok untuk antarmuka yang padat; rasio lebih besar seperti 1.5 memberikan kontras lebih pada judul. Nilai rem mengasumsikan ukuran root default browser sebesar 16 px.

Asal nama rasio

Nama-nama ini berasal dari interval musik: kwint murni memiliki rasio frekuensi 3 : 2, jadi skala tipografi yang dibuat berdasarkan 1,5 bertambah dengan proporsi yang sama seperti nada yang berjarak satu kwint. Skala modular Tim Brown memopulerkan gagasan ini untuk web.

Rasio emas, 1,618, menghasilkan lompatan yang sangat besar; penjelasannya tersedia di kalkulator rasio emas.

Pembulatan

Browser merender ukuran piksel pecahan, jadi 31,25 px tidak masalah. Jika sistem desain memerlukan piksel bulat, bulatkan setiap langkah dan pertahankan nilai rem hingga empat angka desimal, seperti yang dilakukan tool ini; konversikan nilai lain dengan konverter px ke rem.

Cara menggunakannya

  1. Masukkan ukuran dasar dan pilih rasio.
  2. Tentukan jumlah langkah ke atas dan ke bawah, lalu pratinjau dengan teks Anda.
  3. Salin variabel CSS atau konfigurasi Tailwind.

Privasi & batasan

Semua proses berjalan di browser Anda.

Alat terkait

CSS clamp()Konverter Satuan CSSRasio Emas

Pertanyaan umum

Rasio mana yang sebaiknya saya gunakan?

Antarmuka dengan banyak teks dan layar kecil cocok dengan rasio ringan seperti 1,125 atau 1,2; halaman editorial dan landing page dapat menggunakan 1,333 hingga 1,618 untuk judul yang lebih tegas.

Mengapa menggunakan rem?

Ukuran rem mengikuti pengaturan ukuran font browser pembaca, sehingga teks membesar bagi orang yang membutuhkannya. Konversi ini mengasumsikan root default 16 px.

Bisakah ukuran ini dibuat fluid?

Bisa: ambil ukuran terkecil dan terbesar yang Anda inginkan untuk satu langkah, lalu ubah keduanya menjadi ekspresi clamp() dengan generator CSS clamp.

Alat gratis · berjalan di browser anda · tanpa perlu akun