CSS 04: Tipografi dan Web Font yang Mudah Dibaca

Tipografi adalah cara teks disusun agar nyaman dibaca. Font yang menarik tidak akan membantu jika ukuran terlalu kecil, baris terlalu rapat, atau paragraf terlalu lebar.

1. Contoh Tipografi Artikel

Browser mencoba font pada font-family dari kiri ke kanan. Jika Inter gagal dimuat, Arial digunakan, lalu font sans-serif bawaan sistem.

2. Ukuran, Ketebalan, dan Line Height

line-height tanpa unit mudah menyesuaikan ukuran font turunannya. Paragraf biasanya membutuhkan jarak baris lebih longgar daripada heading. Tidak semua font menyediakan semua font-weight, jadi muat hanya weight yang benar-benar digunakan.

3. Panjang Baris

Unit ch mendekati lebar karakter. max-width: 68ch menjaga paragraf agar tidak membentang selebar monitor. Teks panjang rata kiri umumnya juga lebih mudah diikuti daripada rata tengah.

4. Web Font

Elemen <link> pada contoh memuat Inter dari Google Fonts. Web font membutuhkan koneksi internet, sehingga fallback tetap wajib. Terlalu banyak family dan weight dapat memperlambat halaman; font sistem sering cukup untuk desain sederhana.

Kesalahan Umum

• Tidak menyediakan fallback.
• Memakai font tipis untuk paragraf panjang.
• Membuat paragraf terlalu lebar.
• Memuat banyak family dan weight yang tidak digunakan.
• Menggunakan ukuran teks yang terlalu kecil.

Latihan

Ubah line-height menjadi 1 lalu bandingkan keterbacaannya. Kembalikan ke 1.7, ubah batas artikel menjadi 40ch, dan coba font fallback dengan menghapus elemen Google Fonts.

Rangkuman

Tipografi yang baik mengutamakan keterbacaan. Gunakan font stack, hirarki ukuran, line-height yang cukup, panjang baris terkendali, dan web font secukupnya.