Aturan Pertama: Terbaca Dulu, Baru Bergaya
Font dan warna yang bagus adalah yang membuat teks mudah dibaca di ponsel murah, di bawah sinar matahari, oleh orang yang matanya tidak sempurna.
Sebagian besar keputusan font dan warna diambil di layar besar dengan pencahayaan bagus. Itu bukan kondisi pengunjung Anda.
Memilih Font
Berapa banyak yang dipakai
Dua sudah cukup — satu untuk judul, satu untuk isi. Tiga masih bisa dikelola. Lebih dari itu membuat halaman terasa tidak konsisten tanpa orang bisa menunjuk sebabnya.
Alternatif yang lebih aman: pakai satu keluarga font dengan beberapa ketebalan. Hasilnya konsisten dengan sendirinya.
Ukuran
- Teks isi minimal 16 piksel untuk layar ponsel. Di bawah itu, sebagian pembaca akan memperbesar halaman — dan itu tanda ukurannya kurang.
- Jarak antarbaris sekitar 1,5 kali ukuran huruf untuk teks isi.
- Lebar baris jangan terlalu panjang. Baris yang melebar penuh di layar besar membuat mata sulit menemukan awal baris berikutnya.
Jenis yang aman
- Tanpa kait untuk teks isi. Lebih terbaca di layar, terutama layar dengan kerapatan rendah.
- Hindari font tipis untuk teks isi. Terlihat elegan, gagal di layar terang.
- Hindari font dekoratif di luar judul utama.
- Periksa kelengkapan karakternya kalau isinya memuat huruf berkarakter khusus.
Soal kecepatan
Tiap ketebalan font yang dimuat menambah waktu muat. Memuat enam variasi untuk situs lima halaman adalah pemborosan yang terasa. Muat yang benar-benar dipakai saja.
Memilih Warna
Susunannya
- Satu warna utama — untuk tombol dan elemen yang perlu menonjol.
- Satu warna pendukung — untuk aksen dan pembeda.
- Warna netral — putih, abu, hitam untuk latar dan teks.
Tombol tindakan utama sebaiknya memakai warna yang tidak dipakai di tempat lain. Kalau warna tombol sama dengan warna hiasan, tombolnya berhenti terbaca sebagai tombol.
Batas kontras yang tidak boleh dilanggar
Standar aksesibilitas web menetapkan rasio kontras minimal:
- 4,5:1 untuk teks berukuran biasa.
- 3:1 untuk teks besar dan elemen antarmuka.
Ini bukan saran, ini ambang yang bisa diukur. Ada banyak alat pemeriksa kontras gratis — masukkan warna teks dan warna latarnya, dan alatnya menyebutkan angkanya.
Teks abu muda di latar putih adalah pelanggaran yang paling umum, dan hampir selalu lolos karena terlihat baik-baik saja di layar desainer.
Yang perlu dihindari
- Teks di atas foto tanpa lapisan gelap. Kontrasnya berubah-ubah mengikuti gambarnya.
- Warna sebagai satu-satunya penanda. Pesan galat yang hanya ditandai warna merah tidak terbaca oleh sebagian orang. Tambahkan ikon atau teks.
- Terlalu banyak warna sampai tidak ada yang menonjol.
- Warna yang berbeda-beda antarhalaman.
Cara Memeriksanya
- Buka di ponsel di luar ruangan. Uji paling jujur dan paling jarang dilakukan.
- Periksa kontras teks utama dengan alat pemeriksa.
- Perkecil layar dan lihat apakah masih ada yang menonjol.
- Cetak hitam putih. Kalau masih terbaca, hierarkinya tidak bergantung pada warna saja.
- Minta orang di atas lima puluh tahun membacanya tanpa memperbesar.
FAQ
Apakah font berbayar lebih baik?
Tidak otomatis. Banyak font gratis yang sangat terbaca dan lengkap karakternya. Yang menentukan adalah kecocokan dan keterbacaannya, bukan harganya.
Bagaimana memilih warna kalau belum punya identitas merek?
Mulai dari netral dengan satu warna aksen. Ini pilihan yang paling sulit salah, dan mudah disesuaikan nanti saat identitasnya sudah jelas.
Apakah mode gelap perlu disediakan?
Tidak wajib untuk situs bisnis biasa. Kalau disediakan, seluruh kombinasi warnanya harus diperiksa ulang kontrasnya — bukan sekadar membalik hitam-putih.
Keterbacaan visual adalah bagian dari desain website dan desain UI/UX, bukan keputusan dekorasi yang berdiri sendiri.