Generator skala tipografi (sistem ukuran font)
Buat sistem ukuran font untuk judul dan teks dari ukuran dasar dan rasio, lengkap dengan tinggi baris, pratinjau, dan variabel CSS untuk disalin
Memuat alat…
Membuat ukuran font untuk judul, teks isi, dan keterangan dari satu ukuran dasar dan satu rasio, sehingga ukuran di halaman saling berkaitan. Gunakan saat memulai situs web, layar aplikasi, atau templat dokumen.
Cara pakai
- Masukkan "Ukuran dasar" teks isi dalam px dan pilih "Rasio"; "Kustom" menerima nilai apa pun dari 1,05 sampai 2.
- Di "Pembulatan", pertahankan desimal, bulatkan ke px bulat, atau sesuaikan ukuran ke "Grid 4 px".
- Atur "Tinggi baris": "Lebih rapat untuk judul" memperkecil pengali pada ukuran besar; "Sama di semua" memakai satu nilai.
- Ketik "Teks pratinjau" Anda sendiri dan ganti "Font pratinjau" untuk melihat setiap langkah pada ukuran aslinya.
- Tekan "Salin variabel CSS", "Salin CSS elemen", atau "Salin JSON".
Cara kerja
- Ukuran langkah n = dasar × rasio pangkat n. Langkah berjalan dari −2 (xs) sampai +6 (5xl); langkah 0 adalah teks isi (p), langkah 1 sampai 6 memetakan h6 sampai h1.
- rem adalah nilai px dibagi ukuran dasar; pt = px × 0,75 (96 px per inci).
- Dengan "Lebih rapat untuk judul", pengali turun lurus dari "Tinggi baris teks isi" pada ukuran dasar ke "Tinggi baris judul" pada tiga kali ukuran dasar. "Grid 4 px" juga membulatkan kotak baris ke kelipatan 4 px.
- Pengaturan disimpan di browser ini untuk kunjungan berikutnya.
Pertanyaan umum
- Rasio mana yang sebaiknya dipakai untuk situs web?
- 1,2 dan 1,25 memberi judul moderat yang cocok untuk artikel panjang; 1,333 ke atas memberi judul besar seperti poster. Layar kecil biasanya lebih bagus dengan rasio lebih kecil.
- Berapa ukuran font teks isi yang tepat?
- 16 px adalah bawaan browser dan titik awal yang umum; untuk bacaan panjang dipakai 17 sampai 18 px. Skala lainnya mengikuti ukuran dasar yang Anda masukkan.
- Bagaimana mengubah ukuran ke rem?
- Tabel menampilkan rem di samping px. Mengatur html ke ukuran dasar dalam px, seperti pada CSS elemen yang disalin, membuat 1rem sama dengan ukuran dasar.
- Berapa tinggi baris untuk judul?
- Teks isi biasanya sekitar 1,5 dan judul besar sekitar 1,1 sampai 1,25, agar baris judul yang terpotong tidak menyisakan celah besar. Mode otomatis menerapkan perubahan itu.