Tipografi
Tipografi
Tipografi membantu menciptakan hierarki visual dan menjaga keterbacaan antarmuka. Berikut adalah panduan gaya tipografi yang digunakan di sistem desain INA Digital untuk tampilan desktop dan mobile, mencakup gaya Tampilan Besar, Judul, Isi Teks, dan Keterangan dengan variasi ukuran dan ketebalan font yang konsisten di seluruh platform.
Penggunaan
Section titled “Penggunaan”Tipografi kami dirancang berdasarkan prinsip keterbacaan dan aksesibilitas.
Font utama yang digunakan adalah Inter, dipilih karena tampilannya yang bersih, sederhana, dan mudah dibaca di berbagai perangkat.
Inter digunakan pada hampir seluruh tampilan produk, mulai dari teks utama hingga body text
Detail lengkap mengenai lisensi dan sumber font dapat dilihat di sini.
Font Style
Section titled “Font Style”Berikut adalah panduan gaya dan hirarki teks yang digunakan di seluruh ekosistem desain.
Display Large
Font size: 52pxLine height: 56pxLetter spacing: -2%Case: none
Display Large
Display Small
Font size: 44pxLine height: 48pxLetter spacing: -2%Case: none
Display Small
Heading H1
Font size: 40pxLine height: 48pxLetter spacing: 0%
Heading H1
Heading H2
Font size: 36pxLine height: 44pxLetter spacing: 0%
Heading H2
Heading H3
Font size: 32pxLine height: 40pxLetter spacing: 0%
Heading H3
Heading H4
Font size: 28pxLine height: 36pxLetter spacing: 0%
Heading H4
Heading H5
Font size: 24pxLine height: 32pxLetter spacing: 0%
Heading H5
Body Large
Font size: 20pxLine height: 28pxLetter spacing: 0%
Body Large
Body
Font size: 18pxLine height: 26pxLetter spacing: 0%
Body
Body Small
Font size: 16pxLine height: 24pxLetter spacing: 0%
Body Small
Caption
Font size: 14pxLine height: 20pxLetter spacing: 0%
Caption
Caption Small
Font size: 12pxLine height: 16pxLetter spacing: 0%
Caption Small
Caption Extra Small
Font size: 10pxLine height: 12pxLetter spacing: 0%
Caption Extra Small
Kapitalisasi
Section titled “Kapitalisasi”Kapitalisasi digunakan untuk menjaga konsistensi dan keterbacaan teks di seluruh antarmuka. Penggunaan huruf besar dan kecil yang tepat membantu pengguna memahami hierarki informasi dengan lebih mudah.
Kapital Awal Kata (Title Case)
Gunakan untuk judul halaman, nama fitur, atau judul kampanye yang perlu menonjol secara visual.
Kapital Awal Kalimat (Sentence Case)
Gunakan untuk label tombol, pesan sistem, form field, dan konten teks utama agar terasa natural dan mudah dibaca.
Semua Huruf Kapital (All Caps)
Gunakan hanya untuk singkatan resmi atau kode identifikasi. Hindari penggunaan pada teks panjang karena menurunkan keterbacaan.
Desain Huruf Inter
Section titled “Desain Huruf Inter”Inter merupakan jenis huruf yang modern, sederhana, dan humanis, dirancang untuk mendukung komunikasi yang jelas dan inklusif.
Proporsi hurufnya yang seimbang membantu teks tetap terbaca pada ukuran kecil maupun tampilan digital beresolusi tinggi.
Cara Penggunaan yang Disarankan
Section titled “Cara Penggunaan yang Disarankan”Penataan (Alignment)
Penataan (Alignment): Untuk sebagian besar bahasa, gunakan penjajaran kiri atau tengah. Untuk bahasa yang ditulis dari kanan ke kiri, gunakan penjajaran kanan. Pastikan panjang baris tetap antara 50-60 karakter untuk keterbacaan optimal.
✅ Disarankan
Gunakan penjajaran kiri sesuai konteks.
✅ Disarankan
Gunakan penjajaran tengah sesuai konteks.
✅ Disarankan
Gunakan penjajaran kanan sesuai konteks.
❌ Dihindari
Hindari teks rata kanan-kiri (justified) karena dapat menimbulkan jarak antar kata yang tidak konsisten dan mengurangi keterbacaan.