Digital Marketing
Typography (Tipografi Web)
TL;DR: Typography adalah pengaturan huruf di halaman web yang mencakup pilihan font, ukuran, spasi, dan kontras. Tipografi yang buruk meningkatkan bounce rate karena pengunjung kesulitan membaca. Tipografi yang baik mempercepa pemahaman konten dan memperkuat identitas merek.
Apa itu Typography dalam Konteks Web?
Typography mencakup semua keputusan yang memengaruhi cara teks ditampilkan: pilihan typeface (keluarga font), font-size, line-height, letter-spacing, dan kontras antara teks dan latar belakang. Di web, tipografi tidak hanya soal estetika, tapi juga soal performa dan aksesibilitas.
Sebagai contoh, font yang di-load dari Google Fonts atau CDN eksternal bisa menambah latensi jika tidak dikonfigurasi dengan benar. Di beberapa proyek client seperti Vetmo dan Nalesha, Vito Atmo menggunakan variable fonts yang di-host langsung di server untuk menghindari render-blocking resource sekaligus menjaga konsistensi visual merek.
Elemen Utama Typography Web
| Elemen | Definisi | Nilai yang Direkomendasikan |
|---|---|---|
| Typeface | Keluarga font (serif, sans-serif, monospace) | 2 font max per halaman |
| Font Size | Ukuran teks dalam px atau rem | Body: 16-18px; Heading: skala modular |
| Line Height | Jarak antar baris | 1.5-1.7 untuk body text |
| Letter Spacing | Jarak antar huruf | 0 untuk body; sedikit positif untuk heading capslock |
| Contrast Ratio | Perbandingan kecerahan teks vs latar | Min 4.5:1 untuk body (standar WCAG AA) |
| Measure | Panjang baris per kolom | 60-80 karakter per baris optimal |
Kenapa Penting untuk Website Bisnis?
Penelitian dari Baymard Institute menunjukkan bahwa teks dengan line-height terlalu rapat atau ukuran font di bawah 14px secara signifikan menurunkan waktu baca dan meningkatkan rasa "lelah visual". Untuk website bisnis jasa, di mana konten persuasif adalah ujung tombak konversi, tipografi yang buruk bisa langsung memengaruhi conversion rate.
Selain itu, Core Web Vitals mencakup Cumulative Layout Shift (CLS), di mana font swap yang tidak dikontrol bisa menyebabkan layout bergeser dan menurunkan skor CLS. Gunakan font-display: swap atau optional sesuai konteks untuk menghindari ini.
Pertanyaan Umum
Berapa banyak font yang boleh dipakai dalam satu website?
Maksimal dua keluarga font: satu untuk heading, satu untuk body. Lebih dari itu biasanya menambah berat halaman dan merusak konsistensi visual.
Apakah Google Fonts aman dipakai untuk performa?
Google Fonts bisa memengaruhi First Contentful Paint jika di-load dengan cara default. Cara lebih baik: download font dan host secara lokal, atau gunakan <link rel="preconnect"> dan font-display: swap.
Apa perbedaan serif dan sans-serif untuk web?
Sans-serif umumnya lebih mudah dibaca di layar resolusi rendah. Serif bekerja baik untuk long-form artikel di layar retina. Banyak website modern menggunakan sans-serif untuk body dan serif untuk quote atau aksen heading.
Istilah Terkait