Cara Atur Tipografi CSS Agar Website Terlihat Aesthetic dan Profesional

Yo, wassup gaes! Pernah nggak sih lo buka website terus langsung ngerasa, "Wah, ni web rapi banget, enak dibaca"? Nah, itu bukan kebetulan, ngab. Itu rahasianya ada di tipografi yang pas. Font yang keren, ukuran yang proporsional, sama spasi yang lega itu bisa bikin user betah lama-lama di web lo.

Yuk, kita spill cara biar tipografi website lo nggak kelihatan cupu!

1. Font Selection: Jangan Asal Pilih

Font itu ibarat baju, harus sesuai sama vibes brand lo. Pakai Google Fonts biar nggak ribet.

• Sans-serif (kayak Inter, Poppins): Cocok buat web modern dan minimalis.
• Serif (kayak Playfair Display): Buat kesan elegan atau storytelling.

Pro-tip: Batasi maksimal 2 jenis font biar web lo nggak berasa kayak majalah dinding sekolah.

2. Ukuran yang Human-Readable

Jangan pakai ukuran font yang bikin user harus nempel ke layar. Gunakan rem (root em) biar lebih responsif dibanding px.

html {
  font-size: 16px; /* Base size */
}

h1 {
  font-size: 2.5rem; /* 40px */
}

p {
  font-size: 1rem; /* 16px, ukuran standar yang nyaman */
}

3. Spasi Itu Kunci!

Ini bagian paling krusial biar teks lo nggak dempet-dempetan kayak antrean sembako.

• Line-height: Atur jarak antar baris. Angka 1.5 atau 1.6 itu sweet spot banget buat body text.
• Letter-spacing: Tambahin dikit (misal 0.05em) buat heading biar kelihatan makin premium.

p {
  line-height: 1.6;
  color: #333;
}

h1 {
  letter-spacing: -0.02em; /* Biar heading kelihatan lebih bold & rapi */
}

4. Hirarki Visual

Biar user tahu mana info yang penting, kasih perbedaan kontras. Pake font-weight yang pas. Jangan semuanya bold, nanti malah nggak ada yang menonjol.

• H1: Bold (700)
• H2: Semi-bold (600)
• Body: Regular (400)

5. Bonus Tips: Dark Mode Friendly

Pastikan teks lo kebaca di background apapun. Kalau background-nya gelap, jangan pake hitam pekat buat teks. Pake off-white atau abu-abu muda biar mata nggak cepet capek.

Kesimpulan: Tipografi itu tentang kenyamanan mata, gaes. Jangan pelit sama spasi, pilih font yang konsisten, dan selalu tes di mobile. Kalau teksnya enak dibaca, user pasti makin sayang sama website lo. Skuy, langsung praktekin di project kalian!