Tips Memilih Tipografi Website yang Mudah Dibaca untuk UX Terbaik

Halo gaes! Pernah nggak sih lo buka website, eh tulisannya malah bikin mata sakit atau pusing pas dibaca? Nah, itu tandanya si developer atau designer-nya gagal milih font yang oke. Tipografi itu bukan cuma soal "bagus" dilihat, tapi soal kenyamanan mata user pas lagi scrolling di web lo.

Yuk, kita bahas cara milih font yang vibes-nya enak buat dibaca tanpa bikin user pengen close tab!

1. Serif vs. Sans Serif: Pilih yang Mana?

• Sans Serif (Contoh: Inter, Roboto, Montserrat): Ini primadona buat layar digital. Bentuknya simpel, nggak banyak hiasan, jadi lebih clean dan gampang dibaca di resolusi layar apa pun. Highly recommended buat UI web!
• Serif (Contoh: Playfair Display, Merriweather): Punya aksen "kaki" di ujung huruf. Cocok buat artikel panjang biar ada kesan klasik atau elegan. Tapi ati-ati, jangan dipake buat button atau menu yang kecil, nanti malah bleber pas dibuka di HP.

2. Hierarki Itu Wajib, Ngab!

User nggak bakal baca semua teks di web lo. Mereka cuma scanning. Biar mata mereka nyaman, lo harus mainin Type Scale.

• H1 (Headline): Kasih ukuran paling gede.
• Body Text: Kasih ukuran yang pas (biasanya 16px itu standar emas).
• Contrast: Pake font weight yang beda. Misalnya, H1 pake Bold atau Black, terus isi teks pake Regular.

3. Jarak Itu Kunci (Line Height & Letter Spacing)

Jangan biarkan teks lo "sesak napas".

• Line Height (Leading): Minimal set di 1.5 atau 1.6 biar antar baris nggak dempetan.
• Letter Spacing (Kerning): Jangan terlalu rapat, nanti malah kebaca jadi satu kata. Kalau pake all caps, kasih letter spacing dikit (sekitar 0.05em) biar lebih estetik.

Tutorial Implementasi CSS

Biar makin pro, langsung spill kodingannya di CSS lo:

body {
  font-family: 'Inter', sans-serif; /* Font modern yang friendly */
  font-size: 16px;
  line-height: 1.6; /* Rahasia biar teks nggak bikin pusing */
  color: #333; /* Jangan pake hitam pekat (#000), pake abu tua biar nggak kontras banget di mata */
}

h1 {
  font-weight: 800;
  letter-spacing: -0.02em; /* Biar keliatan makin rapi */
}

Tips Pro buat Lo:

1. Batasi jumlah font: Jangan pake lebih dari 2 font dalam satu website. Kebanyakan font malah bikin web lo keliatan amatir dan lambat (masalah loading).
2. Cek Contrast: Pastikan warna teks sama background kontrasnya aman buat aksesibilitas. Pake tools kayak WebAIM Contrast Checker biar aman.
3. Mobile First: Selalu cek font lo di layar HP. Kalau di HP kebaca, biasanya di desktop juga aman.

Kesimpulan: Tipografi yang bagus itu yang nggak disadari kehadirannya oleh user, tapi bikin pesan lo tersampaikan dengan lancar. Jadi, jangan asal pilih font karena lucu doang ya, pastiin readability-nya juara! Skuy lah, langsung praktek sekarang!