Teks dan Tipografi

Tipografi menentukan keterbacaan

Website yang teksnya tidak enak dibaca akan langsung ditinggal pengunjung, sebagus apa pun desainnya. Untungnya, CSS memberi kontrol penuh atas tampilan teks.

Font family dan fallback

body {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

Daftar font ditulis berurutan sebagai cadangan: browser pakai yang pertama kalau tersedia, kalau tidak ada turun ke berikutnya. Selalu akhiri dengan keluarga generik (sans-serif, serif, monospace) supaya tidak pernah gagal total. Nama font yang mengandung spasi wajib dikutip.

Ukuran dan ketebalan

h1 {
  font-size: 2.5rem;
  font-weight: 700;
}

font-weight menerima angka 100 sampai 900 (400 = normal, 700 = bold) atau kata kunci normal/bold. Angka memberi kontrol lebih halus kalau font-nya mendukung banyak ketebalan.

Line height: spasi antar baris

p {
  line-height: 1.6;
}

Nilai tanpa satuan berarti kelipatan dari ukuran font. 1.5 sampai 1.7 adalah zona nyaman buat paragraf. Terlalu rapat bikin sesak, terlalu renggang bikin mata kehilangan baris.

Perataan dan dekorasi

.judul {
  text-align: center;
}

.link-penting {
  text-decoration: underline;
  text-underline-offset: 4px; /* jarak garis dari teks */
}

.kecil-semua {
  text-transform: uppercase;
  letter-spacing: 2px; /* spasi antar huruf */
}

text-align: justify sebaiknya dihindari untuk teks web berbahasa Indonesia karena menciptakan celah putih yang mengganggu.

Membatasi panjang baris

.artikel {
  max-width: 65ch;
}

Satuan ch = lebar karakter "0" pada font tersebut. 60-75ch adalah panjang baris ideal buat kenyamanan baca. Ini detail kecil yang bikin artikel terlihat profesional.

Teks yang kepanjangan: ellipsis

.judul-kartu {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Tiga baris di atas adalah resep standar "potong teks dengan ...". Ketiganya harus ada bersamaan, tidak bisa salah satu saja.

Catatan teknis: line-height tanpa satuan lebih aman daripada pakai px karena diwariskan sebagai angka murni, bukan hasil hitungan. Kalau pakai line-height: 24px di body lalu ada heading 48px, heading itu tetap dapat 24px dan teksnya bertumpuk. Pakai 1.5 dan masalah ini hilang.

Rangkuman

Atur font-family dengan fallback yang benar, ukuran pakai rem, line-height 1.5-1.7 tanpa satuan, batasi panjang baris dengan max-width 65ch, dan pakai trio nowrap + overflow + ellipsis buat teks terpotong. Tipografi rapi = website terasa mahal.