Generator Skala Tipografi Buat skala tipografi modular dengan ukuran dasar, rasio, dan satuan yang dapat disesuaikan.

🎨

Generator Skala Tipografi

Buat skala tipografi modular dengan ukuran dasar, rasio, dan satuan yang dapat disesuaikan.

Tentukan ukuran dasar dan rasio

Pilih ukuran font dasar dan rasio skala matematika untuk progresinya.

Konfigurasikan output

Pilih satuan (px, rem, em), tinggi garis, dan jumlah langkah skala.

Salin CSS

Pratinjau skala jenis dan salin properti kustom CSS.

Loading tool...

What Is Generator Skala Tipografi?

Generator Skala Tipografi membuat serangkaian ukuran font yang harmonis berdasarkan rasio matematika, juga dikenal sebagai skala modular. Tipografi konsisten sangat penting dalam desain yang baik, dan skala modular menyediakan ukuran font yang secara alami terkait satu sama lain melalui proporsi matematika. Alat ini menawarkan delapan rasio skala klasik: Minor Second (1.067), Major Second (1.125), Minor Third (1.200), Major Third (1.250), Perfect Fourth (1.333), Augmented Fourth (1.414), Perfect Fifth (1.500), dan Rasio Emas (1.618). Dari ukuran dasar, setiap langkah dikalikan dengan rasio yang dipilih. Keluaran termasuk properti kustom CSS bernama (--font-size-xs hingga --font-size-5xl) dalam satuan pilihan Anda, serta pratinjau visual menunjukkan setiap ukuran dengan teks sampel.

Why Use Generator Skala Tipografi?

Delapan rasio skala matematika klasik dari teori musik dan desain
Output dalam satuan px, rem, atau em untuk kebutuhan proyek yang berbeda
Ukuran dasar, tinggi garis, dan jumlah langkah yang dapat disesuaikan
Output properti kustom CSS untuk integrasi yang mudah

Common Use Cases

Tipografi Sistem Desain

Membangun skala jenis yang konsisten sebagai fondasi sistem desain.

Pengaturan Proyek Baru

Generate ukuran font yang harmonis saat memulai proyek web baru.

Styling Blog dan Artikel

Membuat hirarki tipografi yang dapat dibaca untuk konten panjang.

Tipografi Responsif

Generate nilai skala untuk digunakan di berbagai titik responsif.

Technical Guide

Skala jenis modular menggunakan rasio matematika untuk menghasilkan serangkaian nilai proporsional. Dimulai dari ukuran dasar (biasanya 16px untuk web), setiap langkah dihitung dengan mengalikan dengan rasio. Untuk skala Major Third (1,25) dengan ukuran dasar 16px: 12,8px, 16px, 20px, 25px, 31,25px, 39,06px. Rasio menentukan kontras antara ukuran - rasio yang lebih kecil (1.067, 1.125) menciptakan perbedaan halus ideal untuk teks tubuh, sedangkan rasio yang lebih besar (1,5, 1,618) menciptakan perbedaan dramatis yang cocok untuk tipografi tampilan. Rasio populer berasal dari teori musik (Minor Third, Perfect Fourth, Perfect Fifth) dan matematika (Rasio Emas). Untuk implementasi web, definisikan ukuran sebagai properti kustom CSS dan gunakan di seluruh stylesheet. Satuan rem lebih disukai untuk aksesibilitas karena menghormati preferensi ukuran font pengguna. Tinggi garis harus umumnya menurun seiring dengan peningkatan ukuran font - 1,5 untuk teks tubuh dan 1,1-1,2 untuk judul besar.

Tips & Best Practices

1
Gunakan Major Third (1,25) atau Perfect Fourth (1,333) untuk sebagian besar proyek web
2
Gunakan satuan rem untuk tipografi yang dapat diakses dan menghormati preferensi pengguna
3
Kurangi tinggi garis untuk judul yang lebih besar (1,1-1,2) dan tingkatkan untuk badan (1,5-1,7)
4
Tetap pada 5-7 langkah skala untuk hirarki tipografi yang dapat dikelola

Related Tools

Generator Skala Spasi

Buat sistem skala spasi yang konsisten dengan satuan dasar dan pengali yang dapat disesuaikan.

🎨 CSS & Design

Pratinjau Google Fonts

Pratinjau Google Fonts dengan teks yang dapat disesuaikan, ukuran, berat, dan spasi huruf.

🎨 CSS & Design

Pembuat Variabel CSS

Buat properti kustom CSS (variabel) untuk warna, spasi, dan tipografi.

🎨 CSS & Design

Penghasil Penghitung CSS

Buat penghitung CSS untuk daftar bernomor kustom dengan berbagai gaya dan penyusunan.

🎨 CSS & Design

Frequently Asked Questions

Q Apa itu skala modular?

Skala modular adalah serangkaian angka yang berhubungan satu sama lain melalui rasio matematika yang konsisten, menciptakan harmoni visual.

Q Rasio mana yang harus saya pilih?

Major Third (1,25) sangat versatile untuk sebagian besar proyek. Gunakan rasio yang lebih kecil untuk hirarki yang halus dan lebih besar untuk kontras dramatis.

Q Apakah saya harus menggunakan px atau rem?

rem direkomendasikan karena menghormati preferensi ukuran font pengguna, sehingga meningkatkan aksesibilitas.

Q Berapa banyak langkah skala yang saya butuhkan?

5-7 langkah mencakup sebagian besar kebutuhan: xs, sm, dasar, lg, xl, 2xl, 3xl.

Q Bisakah saya menggunakan skala yang berbeda untuk mobile dan desktop?

Ya, gunakan query media untuk beralih antara rasio yang lebih kecil di mobile dan rasio yang lebih besar di desktop.

About This Tool

Generator Skala Tipografi is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.