Apa itu Penguji Tipografi?

Typography Tester memungkinkan Anda menyesuaikan properti font dan melihat hasilnya secara real time. Pilih keluarga font, atur ukuran, ketebalan, tinggi baris, dan spasi, lalu salin CSS langsung ke proyek Anda.

Tester ini memberi Anda kendali atas keluarga huruf, ukuran, ketebalan (100 sampai 900), tinggi baris, jarak antarhuruf, jarak antarkata, perataan, transformasi teks, dan warna. Teks contoh bisa diubah, jadi Anda mengintip judul atau paragraf nyata, dan panel keluaran CSS tinggal disalin untuk ditempelkan ke stylesheet atau styled component.

Cara menggunakan

1. Masukkan atau tempel teks contoh Anda di area pratinjau.
2. Sesuaikan kontrol tipografi: keluarga font, ukuran, ketebalan, tinggi baris, spasi huruf, dan spasi kata.
3. Salin output CSS untuk menggunakan pengaturan tipografi langsung di proyek Anda.

Kapan menggunakan

• Menyesuaikan tubuh teks blog hingga Inter 18 px dengan tinggi baris 1,6 enak dibaca di ponsel.
• Mengetes artikel panjang di 16, 17, dan 18 px untuk melihat ukuran mana yang membuat pembaca bertahan.
• Memeriksa apakah menaikkan jarak antarhuruf mengatasi tampilan sumpek label tombol kapital.

Hasil

Seorang desainer web menguji "Inter" pada 18px dengan tinggi baris 1.6 dan spasi huruf 0.02em, lalu menyalin CSS untuk stylesheet blog mereka.

FAQ

Berapa tinggi baris yang pas untuk teks isi?

Untuk paragraf panjang di ukuran 16-18 px, tinggi baris 1,5 hingga 1,7 nyaman dibaca di layar. Judul terlihat lebih rapi dengan nilai lebih rapat, biasanya 1,1 hingga 1,3. Tulis judul dan paragraf di kotak contoh agar bisa dibandingkan langsung.

Kenapa jarak antarhuruf pakai em, bukan px?

Em mengikuti skala ukuran font, jadi 0,02em terlihat proporsional sama di 14 px maupun 48 px. Nilai dalam piksel mungkin pas di satu ukuran tetapi rusak di ukuran lain.

Ketebalan font apa saja yang aman dipakai di web?

Google Fonts modern dan font variabel mendukung 100 sampai 900, tetapi banyak font self-hosted yang cuma menyertakan 400 dan 700. Kalau preview tidak berubah saat Anda ganti ketebalan, font tersebut memang tidak punya bobot itu dan peramban menyusun gaya tiruan.

Bisakah saya menguji font yang belum dimuat halaman?

Pilih dari menu font bawaan — ada kotak pencarian plus filter Sans / Serif / Monospace / Sistem, dan Google Font apa pun yang kamu pilih dimuat otomatis. Beralih ke tampilan Galeri untuk melihat teks contohmu di semua font sekaligus, atau nyalakan Bandingkan untuk menaruh dua jenis huruf berdampingan. Mengunggah berkas font kustom tidak didukung di sini; untuk itu kamu perlu @font-face di situsmu.

Bagaimana memindahkan CSS ke proyek React atau Tailwind?

Klik Copy CSS untuk mendapat tiap properti sebagai deklarasi standar. Di React, tempel ke dalam template literal styled-components atau ubah tiap baris menjadi kunci camelCase. Di Tailwind, petakan ukuran dan ketebalan ke kelas utilitas, simpan spacing dan tinggi baris kustom dalam sintaks nilai bebas.

Alat terkait