Pratinjau Tipografi
Sesuaikan font-size, line-height & letter-spacing secara langsung.
Salin CSS dengan satu klik.
↑ Klik teks di atas untuk mengeditnya langsung
Tentang
Alat Pratinjau Tipografi memungkinkan Anda menyesuaikan font-size, line-height, letter-spacing, dan font-weight dengan slider dan melihat hasilnya langsung di area pratinjau.
Mendukung Google Fonts termasuk font Jepang. Setelah puas dengan pengaturan, salin output CSS dengan satu klik. Hanya pemuatan Google Fonts yang melibatkan permintaan jaringan eksternal — konten teks dan pengaturan Anda tidak pernah ditransmisikan.
Cara Pakai
Sesuaikan Slider
Seret slider font-size, line-height, letter-spacing, dan font-weight. Atau mulai dari preset untuk kasus penggunaan umum.
Periksa Pratinjau
Lihat perubahan langsung di area pratinjau. Klik teks untuk mengeditnya dengan konten Anda sendiri.
Salin CSS
Klik "Salin CSS" untuk menyalin kode yang dihasilkan ke clipboard dan tempel ke stylesheet Anda.
Glosarium
- font-size
- Mengatur ukuran font. Dapat ditentukan dalam px, em, rem, %, dll. Default browser adalah 16px.
- line-height
- Mengatur tinggi baris. Nilai tanpa satuan (mis. 1.75) direkomendasikan. Untuk teks isi, 1.5–1.8 umum.
- letter-spacing
- Mengatur spasi antar karakter. Satuan em direkomendasikan untuk desain yang skalabel.
- font-weight
- Mengatur ketebalan font. Nilai berkisar dari 100 (tipis) hingga 900 (tebal).
- font-family
- Menentukan jenis huruf. Beberapa fallback dapat terdaftar dipisahkan dengan koma.
- Tipografi
- Seni mengatur huruf agar bahasa tertulis mudah dibaca, jelas, dan menarik.
- Google Fonts
- Layanan web font gratis dari Google. Font dimuat melalui link tag CSS atau JavaScript.
- Web Font
- Font yang dimuat dari server menggunakan @font-face. Web font memastikan rendering yang konsisten di semua perangkat.
FAQ
- Q.Apakah teks saya dikirim ke server?
- Tidak. Teks pratinjau dan semua pengaturan diproses secara lokal di browser Anda.
- Q.Mengapa pemuatan Google Fonts melibatkan permintaan eksternal?
- Hanya file font itu sendiri yang diambil dari server Google. Teks dan pengaturan Anda tidak pernah ditransmisikan.
- Q.Bisakah menggunakan font yang tidak ada di daftar?
- Anda dapat memuat Google Font apa pun dengan menambahkan namanya ke field font-family di stylesheet. Daftar bawaan alat ini mencakup pilihan yang paling populer.
- Q.Apakah berfungsi di ponsel?
- Ya. Slider mendukung input sentuh.
- Q.Bisakah memasukkan nilai tepat alih-alih menggunakan slider?
- Tidak secara langsung. Gunakan preset untuk nilai umum, lalu sesuaikan dengan slider.
Kasus Penggunaan
Tipografi Desain Web
Temukan kombinasi font-size dan line-height yang tepat untuk judul, isi, dan keterangan secara visual.
Optimasi Keterbacaan Blog
Sesuaikan line-height dan letter-spacing yang sempurna untuk konten artikel panjang.
Pengecekan Font Presentasi
Verifikasi bahwa ukuran dan berat font terlihat tepat sebelum menyelesaikan tipografi slide.
Belajar CSS
Pahami cara kerja setiap properti tipografi CSS dengan bereksperimen secara visual.
Kirim Umpan Balik
Beri tahu kami pendapat Anda untuk membantu kami menyempurnakan alat ini.
Umpan balik sementara ditangguhkan
Server sedang sibuk atau perlindungan spam aktif. Silakan coba lagi nanti.