Pengaturan Font

Keluarga Font

Poin penting: Mengatur font yang digunakan. Berpengaruh langsung pada kesan tombol dan konsistensi brand.

Pengaruh pengaturan ini: Meski teks sama, jenis huruf yang berbeda dapat mengubah kesan kepercayaan dan keakraban.

Tips pengaturan: Jika terlalu berbeda dari font body text, akan terasa janggal, jadi paling aman memulai dengan font yang sejenis dengan keseluruhan situs.

Item pengaturan

• Daftar font (Default / System / Font tema): Memilih font yang digunakan untuk menyesuaikan tone brand dan keterbacaan.
• Ketebalan (100-900): Mengatur ketebalan font untuk menyesuaikan prioritas informasi. Mendukung pengaturan responsif, memungkinkan weight berbeda per perangkat.
• Edit Font: Membuka layar pengaturan font untuk penyesuaian detail jenis huruf.

Keluarga Font dan Ketebalan untuk keadaan hover juga dapat diatur secara terpisah. Jika perlu perubahan per perangkat, aktifkan Responsif.

Batasan layout shift saat hover: Mengubah Font Ketebalan saat hover dapat menyebabkan perubahan lebar karakter yang mengubah ukuran tombol atau pemotongan teks (layout shift). Untuk mencegah hal ini, tetapkan Lebar / Tinggi tombol atau buat perubahan weight minimal (contoh: 400→500).

Ukuran Font

Poin penting: Mengatur ukuran teks. Pengaturan penting yang berpengaruh langsung pada keterbacaan dan rasio klik.

Pengaruh pengaturan ini: Terutama di SP (mobile), jika terlalu kecil, pesan yang dimaksud tidak akan tersampaikan.

Tips pengaturan: Setelah mengatur di PC (desktop), naikkan satu tingkat di SP (mobile) atau sesuaikan jumlah baris secara bersamaan agar tampilan tidak berantakan.

Item pengaturan

• Pilihan preset (Default / Tema / Kustom): Memilih preset ukuran untuk menerapkan nilai awal dengan cepat.
• Ukuran Kustom: Menentukan ukuran teks secara langsung dengan angka untuk penyesuaian detail.
• Satuan (px / em / rem / vw): Memilih satuan ukuran untuk menentukan perilaku tetap/variabel.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah tampilan berantakan.
• Edit Ukuran Font: Mengedit pengaturan ukuran untuk mengoptimalkan tampilan per perangkat.

Menggunakan em / rem akan menjadi pengaturan relatif terhadap ukuran teks dasar browser atau tema. Menggunakan vw akan membuat ukuran teks berubah sesuai lebar viewport, efektif untuk desain responsif, namun karena bisa menjadi sangat besar/kecil, disarankan untuk memeriksa nilai minimum dan maksimum. Ukuran Font untuk keadaan hover juga dapat diatur secara terpisah.

Tinggi Baris

Poin penting: Mengatur jarak antar baris saat tampilan multi-baris. Menyesuaikan keseimbangan keterbacaan dan kepadatan.

Pengaruh pengaturan ini: Jika jarak baris terlalu rapat, kecepatan pengenalan menurun; jika terlalu lebar, kesan kesatuan melemah.

Tips pengaturan: Gunakan 1.2-1.6 sebagai patokan, dan sedikit perlebar seiring bertambahnya jumlah teks agar stabil.

Item pengaturan

• Pilihan preset (Default / Tight / Normal / Loose dll.): Memilih preset jarak baris untuk menyesuaikan keterbacaan dengan cepat.
• Tinggi Baris Kustom: Menentukan jarak baris secara numerik untuk mengoptimalkan keterbacaan dua baris atau lebih.
• Satuan (tanpa satuan / px / em / rem / %): Menentukan satuan jarak baris, memilih antara rasio atau nilai tetap.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah tampilan berantakan.

Menentukan tanpa satuan (contoh: 1.5) akan dihitung sebagai kelipatan dari Ukuran Font. Karena rasio tetap terjaga meski Ukuran Font berubah, pengaturan tanpa satuan direkomendasikan untuk desain responsif. Nilai default-nya adalah 1.2. Tinggi Baris untuk keadaan hover juga dapat diatur secara terpisah.

Kontrol melalui CSS variable: Tinggi Baris dan Jarak Huruf dikontrol secara internal hanya melalui CSS variable (–line-height-pc / –letter-spacing-pc dll.). Karena diwarisi ke elemen anak melalui CSS variable, bukan inline style, pengaturan ini tidak berbenturan dengan pengaturan font elemen internal seperti micro-text atau sub-text.

Jarak Huruf

Poin penting: Mengatur jarak antar karakter. Digunakan untuk penyesuaian nuansa kesan heading, kesan premium, dan keterbacaan.

Pengaruh pengaturan ini: Perubahan kesan visual cukup besar, namun pengaturan berlebihan dapat menyebabkan kesulitan membaca.

Tips pengaturan: Untuk bahasa Indonesia, jangan terlalu melebarkan; mulai dari sekitar 0-0.5px dan sesuaikan sedikit demi sedikit agar mudah dikontrol.

Item pengaturan

• Pilihan preset (Tight / Normal / Wide dll.): Memilih preset jarak karakter untuk menyesuaikan kesan kepadatan huruf.
• Nilai Kustom: Menentukan jarak karakter secara kustom untuk penyesuaian halus antara keterbacaan dan estetika desain.
• Satuan (px / em / rem / %): Memilih satuan jarak karakter untuk menentukan metode penyesuaian tetap/relatif. Satuan default-nya adalah em.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah tampilan berantakan.

Dalam satuan em, jarak karakter ditentukan berdasarkan rasio terhadap Ukuran Font. Contoh: 0.05em adalah jarak sebesar 5% dari Ukuran Font. Nilai negatif dapat digunakan untuk merapatkan karakter, namun perhatikan penurunan keterbacaan. Jarak Huruf untuk keadaan hover juga dapat diatur secara terpisah.