Konsep Margin Collapsing: Masalah Umum Pemula CSS. (Foto: Konsep Margin Collapsing: Masalah Umum Pemula CSS.)

Menguasai Properti Tipografi Dasar dalam CSS

Teks adalah elemen informasi paling dominan di web. Dengan menguasai empat properti di bawah ini, Anda dapat mengubah tampilan situs yang hambar menjadi terlihat modern dan mudah dibaca.

1. Font-Family (Jenis Huruf)

Properti ini digunakan untuk menentukan jenis font yang akan digunakan. Karena tidak semua perangkat memiliki font yang sama, kita menggunakan sistem "Fall-Back".

• Sintaks: font-family: "Nama Font", Kategori;

• Contoh: font-family: "Inter", Helvetica, Arial, sans-serif;

  • Jika browser tidak menemukan "Inter", ia akan mencoba "Helvetica", dan seterusnya hingga ke kategori umum "sans-serif".

2. Font-Size (Ukuran Huruf)

Menentukan seberapa besar teks ditampilkan. Dalam pengembangan modern, penggunaan unit relatif sangat disarankan.

• px (Pixel): Ukuran statis (kurang responsif).

• rem: Berdasarkan ukuran font pada elemen akar (). 1rem biasanya sama dengan 16px. Ini adalah standar industri saat ini.

• em: Berdasarkan ukuran font elemen induknya.

3. Font-Weight (Ketebalan)

Mengatur ketebalan karakter. Nilainya bisa berupa kata kunci atau angka kelipatan 100.

• Normal: Sama dengan 400.

• Bold: Sama dengan 700.

• Skala: 100 (Thin), 300 (Light), 500 (Medium), 900 (Black).

4. Line-Height (Jarak Antar Baris)

Sering disebut "leading", properti ini mengatur ruang vertikal di antara baris teks. Ini adalah kunci utama agar paragraf panjang tidak melelahkan mata.

• Tips: Gunakan angka tanpa unit (misal: 1.5 atau 1.6) agar proporsional terhadap ukuran font.

• Contoh: line-height: 1.6; (Artinya jarak antar baris adalah 1.6 kali ukuran font).

Tutorial: Implementasi Tipografi yang Bersih

Mari kita b uat sebuah komponen artikel sederhana dengan aturan tipografi yang baik.

Struktur HTML

<article class="post"> <h1>Menjelajahi Keindahan Bromoh1> <p>Gunung Bromo adalah salah satu ikon wisata di Jawa Timur...p> <a href="#">Baca Selengkapnyaa>
article>

Kode CSS (Best Practice)

body { /* Mengatur font utama untuk seluruh halaman */ font-family: 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333;
} h1 { font-size: 2.5rem; /* Ukuran besar untuk judul */ font-weight: 800; /* Sangat tebal */ line-height: 1.2; /* Judul biasanya butuh line-height lebih kecil */ margin-bottom: 1rem;
} p { font-size: 1.1rem; /* Ukuran nyaman untuk membaca */ font-weight: 400; /* Ketebalan normal */ margin-bottom: 1.5rem; color: #555;
} a { font-weight: 600; /* Sedikit lebih tebal dari teks biasa */ text-decoration: none; color: #007bff;
}

Kesimpulan & Tips

1. Gunakan Maksimal 2-3 Jenis Font: Terlalu banyak jenis font akan memperlambat loading website dan membuat desain berantakan.

2. Kontras: Pastikan font-weight antara judul dan isi berita memiliki perbedaan yang cukup (misal: 700 untuk judul, 400 untuk isi).

3. Responsif: Gunakan unit rem agar ketika user mengubah pengaturan ukuran font di browser mereka, website Anda tetap bisa menyesuaikan secara proporsional.