Cara Memilih Font Website yang Tepat untuk Jualan

Memilih font untuk website jualan sering diputuskan dari selera, padahal ada aturan sederhana yang membuat keputusan ini lebih pasti. Artikel ini membahas aturan pemilihan font, ukuran ideal untuk mobile dan desktop, font yang paling banyak dipakai di dunia, serta cara menyusun heading yang benar.

Prinsip utamanya satu, font yang baik adalah font yang tidak disadari pembacanya. Begitu pengunjung memperhatikan bentuk hurufnya, biasanya itu tanda font tersebut terlalu ramai untuk tugasnya.

Semua contoh font di artikel ini tersedia di page builder Temonjo, jadi kamu bisa langsung mencobanya tanpa instal apa pun.

Aturan dasar yang selalu berlaku

Ada empat aturan yang berlaku untuk hampir semua halaman jualan.

Pertama, keterbacaan di atas segalanya. Font isi harus tetap nyaman dibaca di kalimat panjang, di layar kecil, dan di kondisi cahaya terang. Kedua, maksimal dua font per halaman, satu untuk heading dan satu untuk isi. Ketiga, konsisten, font yang sama untuk fungsi yang sama di seluruh halaman. Keempat, sesuaikan karakter font dengan produk, yang dibahas detail di artikel font sesuai karakter produk.

Untuk isi teks, sans-serif adalah pilihan paling aman di layar. Inter, Open Sans, Lato, Roboto, dan Poppins dirancang untuk keterbacaan digital. Serif seperti Georgia atau Playfair Display masih nyaman untuk isi bila ukurannya cukup besar dan jarak barisnya lega, tapi umumnya lebih pas untuk heading.

Hindari font script, dekoratif, atau display untuk paragraf. Font seperti Lobster, Pacifico, atau Dancing Script indah untuk satu baris headline atau tanda tangan, tapi melelahkan dibaca panjang.

Satu aturan pendukung yang sering terlewat, pastikan font pilihanmu punya bentuk yang tidak ambigu antara huruf i kecil, l kecil, dan angka 1. Di font yang buruk ketiganya hampir identik, dan itu mengganggu saat pembaca menemui kode, harga, atau istilah teknis.

Ukuran font ideal untuk mobile dan desktop

Mayoritas pengunjung salespage di Indonesia datang dari HP, jadi patokan ukuran dimulai dari mobile, bukan desktop.

Elemen	Mobile	Desktop	Catatan
Teks isi	16 sampai 18 px	16 sampai 18 px	Jangan di bawah 16 px, memicu zoom otomatis di HP
H1 headline utama	28 sampai 34 px	36 sampai 48 px	Cukup besar untuk jadi fokus, tidak memenuhi layar
H2 judul section	22 sampai 26 px	28 sampai 34 px	Harus jelas lebih kecil dari H1
H3 sub bagian	18 sampai 20 px	20 sampai 24 px	Bisa dibantu bold atau warna
Teks kecil, caption, label	12 sampai 14 px	13 sampai 14 px	Hanya untuk info pendukung, bukan isi penting
Teks tombol	16 sampai 18 px	16 sampai 18 px	Tebal dan kontras tinggi

Selain ukuran, dua hal lain yang sama pentingnya adalah line height dan panjang baris. Line height nyaman untuk teks isi adalah sekitar 1,5 sampai 1,7 kali ukuran font. Panjang baris ideal 45 sampai 75 karakter per baris, lebih dari itu mata pembaca lelah berpindah baris.

Tes sederhananya, buka halamanmu di HP di luar ruangan siang hari. Kalau kamu masih bisa membaca tanpa mendekatkan layar, ukuran fontmu sudah benar.

Peran ketebalan, hierarki tanpa menambah font

Banyak orang menambah font kedua padahal yang dibutuhkan hanyalah ketebalan berbeda. Sebagian besar font modern punya rentang weight dari Thin (100) sampai Ultra-Bold (900), dan di builder Temonjo kamu bisa mengaturnya per elemen.

Patokan yang aman. Isi teks memakai Regular (400), penegasan kata penting memakai Semi-Bold (600), heading memakai Bold (700) atau Extra-Bold (800) untuk headline pendek. Hindari Thin dan Light untuk teks di bawah 20 piksel karena tipis di layar HP.

Kombinasi satu font dengan tiga weight sudah cukup membangun hierarki lengkap, dan hasilnya selalu terlihat rapi karena bentuk hurufnya konsisten.

Font sistem versus web font

Font sistem seperti Arial, Segoe UI, atau Times New Roman sudah terpasang di perangkat, sehingga tampil instan tanpa download. Kekurangannya, tampilannya berbeda antar perangkat dan pilihannya terbatas.

Web font seperti koleksi Google Fonts dimuat dari internet, tampilannya konsisten di semua perangkat, dan pilihannya ribuan. Kekurangannya ada waktu muat tambahan, walau kecil kalau jumlah font yang dipakai dibatasi. Inilah alasan lain untuk menahan diri di dua font, setiap font tambahan berarti file tambahan yang diunduh pengunjung.

Praktik terbaiknya memakai web font untuk karakter, dengan fallback font sistem yang masuk akal bila font utama lambat termuat. Builder Temonjo sudah mengatur fallback ini otomatis di setiap font yang kamu pilih.

Font yang paling banyak dipakai di dunia

Melihat statistik pemakaian font berguna untuk satu hal, font populer menjadi populer karena terbukti terbaca baik di banyak kondisi. Untuk halaman jualan, mengikuti font yang sudah teruji bukan hal memalukan, justru keputusan yang aman.

Di keluarga Google Fonts, Roboto konsisten menjadi font yang paling banyak dipakai di seluruh web, diikuti Open Sans, Lato, Montserrat, Poppins, dan Inter. Inter sendiri naik sangat cepat dalam beberapa tahun terakhir dan menjadi standar de facto untuk produk digital dan dashboard karena dirancang khusus untuk layar.

Di sisi font bawaan sistem, Arial dan Helvetica masih mendominasi karena terpasang di hampir semua perangkat. Untuk serif, Georgia menjadi yang paling umum dipakai untuk teks panjang di web karena keterbacaannya di layar kecil.

Pelajarannya bukan kamu harus memakai font yang sama dengan semua orang, melainkan font pemenang punya ciri yang sama, bentuk huruf terbuka, spasi antarhuruf lega, dan bentuk yang tidak ambigu.

Fungsi heading dan kapan pakai H1 sampai H6

Heading punya dua tugas, memandu pembaca yang skimming dan memberi struktur yang dibaca mesin pencari. Karena itu level heading dipilih berdasarkan struktur konten, bukan ukuran tampilannya.

• H1, judul utama halaman. Satu halaman hanya boleh satu H1, dan di salespage ia berisi headline penawaran.
• H2, judul tiap section besar. Di salespage, setiap blok seperti Manfaat, Testimoni, Harga, dan FAQ memakai H2.
• H3, sub bagian di dalam section. Misalnya tiap poin manfaat atau tiap pertanyaan di FAQ.
• H4 sampai H6, jarang dipakai di salespage. Biasanya baru muncul di artikel panjang atau dokumentasi.

Jangan lompat level, misalnya dari H2 langsung ke H4, dan jangan memakai heading hanya supaya teks terlihat besar. Kalau butuh teks penekanan yang besar tapi bukan judul section, pakai pengaturan ukuran font atau bold biasa.

Di builder Temonjo, kamu bisa mengatur tag heading tiap elemen teks secara terpisah dari ukurannya, jadi struktur SEO tetap benar walau ukurannya kamu sesuaikan dengan desain.

Kapan memakai blockquote

Blockquote adalah elemen untuk kutipan atau penegasan yang dibuat menonjol dari paragraf biasa. Di halaman jualan ia punya tiga fungsi.

Pertama, menampilkan testimoni atau kutipan pelanggan sehingga jelas itu suara orang lain, bukan klaim penjual. Kedua, menyorot satu kalimat kunci di tengah konten panjang supaya pembaca yang skimming tetap menangkap poin penting. Ketiga, memberi jeda visual di antara paragraf yang padat.

Gunakan hemat, satu atau dua kali per halaman. Kalau semua kalimat dibuat menonjol, tidak ada lagi yang benar-benar menonjol.

Cara mengetes font sebelum memutuskan

Jangan menilai font dari namanya atau dari satu kata contoh. Tes dengan teks aslimu sendiri, tulis satu paragraf penawaran asli, satu harga lengkap dengan angka, dan satu kalimat dengan tanda baca, lalu terapkan font kandidat ke ketiganya.

Perhatikan tiga hal. Apakah angka harganya jelas, karena harga adalah teks yang harus terbaca sekilas. Apakah hurufnya tetap nyaman di kalimat panjang. Dan apakah kesan yang muncul cocok dengan produkmu. Kalau tiga-tiganya lolos, font itu layak dipakai.

Kesalahan font yang paling sering terjadi

Beberapa kesalahan ini muncul berulang di halaman jualan pemula.

• Memakai lebih dari dua font sekaligus, sehingga tiap section terasa beda pembuatnya.
• Font isi di bawah 16 piksel, terlihat rapi di desktop tapi menyiksa pembaca HP.
• Memakai font script untuk harga atau tombol, dua tempat yang justru butuh kejelasan maksimal.
• Menulis paragraf seluruhnya dengan huruf kapital atau bold, yang justru menurunkan kecepatan baca.
• Terlalu banyak ketebalan dan warna teks dalam satu section, sehingga tidak jelas mana yang penting.

Kalau halamanmu menghindari lima hal ini, kamu sudah melewati sebagian besar masalah tipografi di halaman jualan. Untuk memastikan pilihan fontnya juga sesuai produk, lanjutkan ke panduan font sesuai karakter produk.

Pertanyaan yang sering ditanyakan

Font apa yang paling aman untuk website jualan?

Sans-serif yang dirancang untuk layar, misalnya Inter, Open Sans, Lato, Poppins, atau Roboto. Font-font ini terbukti terbaca di layar kecil dan netral untuk hampir semua jenis produk.

Apakah boleh memakai font serif untuk isi artikel?

Boleh, selama ukurannya cukup dan line height lega. Georgia adalah serif yang paling teruji untuk teks panjang di layar. Untuk salespage, sans-serif tetap pilihan yang lebih aman.

Berapa jumlah H1 yang ideal dalam satu halaman?

Tepat satu. H1 adalah judul utama halaman, dan lebih dari satu membingungkan struktur halaman untuk pembaca maupun mesin pencari. Judul section berikutnya memakai H2.