Section ini membahas typography sebagai bagian dari Course CSS. Ikuti chapter di dalamnya secara berurutan karena setiap chapter dibangun di atas pemahaman chapter sebelumnya. Gunakan demo interaktif pada setiap halaman untuk melihat langsung efek kode yang sedang dibahas.

# Font Family

Mengatur jenis huruf teks dengan daftar fallback font-family, generic family sebagai jaring pengaman, dan stack yang lazim dipakai website modern.

Buka →
# Font Size

Mengatur ukuran huruf dengan px, em, dan rem — menyusun skala heading yang menghormati preferensi pengguna.

Buka →
# Font Weight

Mengatur ketebalan huruf dengan skala 100–900, keyword normal dan bold, nilai relatif, hingga ketebalan menengah dari variable font.

Buka →
# Font Style

Mengatur kemiringan teks dengan normal, italic, dan oblique — memahami perbedaan varian asli dan kemiringan sintetis.

Buka →
# Line Height

Mengatur jarak antarbaris dengan rasio tanpa satuan, menghindari jebakan pewarisan persen, dan menetapkan angka yang nyaman dibaca.

Buka →
# Text Align

Meratakan teks dengan left, right, center, dan justify — termasuk masalah hyphenation justify di web dan nilai logis start serta end.

Buka →
# Text Decoration

Menata garis pada teks — underline, overline, dan line-through — beserta bentuk, warna, dan ketebalannya.

Buka →
# Text Transform

Mengubah tampilan huruf dengan uppercase, lowercase, dan capitalize tanpa mengubah teks asli di HTML.

Buka →
# Letter-Spacing dan Word-Spacing

Atur jarak antarhuruf dan antarkata: rapatkan heading besar, buka label uppercase, dan tahu kapan harus berhenti menyetel.

Buka →
# White Space

Kendalikan nasib spasi, tab, dan pindah baris di HTML: dari melipat otomatis sampai mempertahankan format persis seperti diketik.

Buka →
# Text Overflow

Potong teks yang tidak muat dengan tanda elipsis satu baris, batasi kartu dua baris dengan line-clamp, dan jaga isinya tetap bisa diakses.

Buka →
# Web Fonts

Muat font sendiri dengan @font-face: pahami src, rentang font-weight, perilaku font-display, pilihan self-hosting, dan penyetelan fallback.

Buka →
# Styling Links

Tata lima state tautan dengan urutan LVHA yang benar, hormati batasan :visited, dan tiru pola tautan-tombol serta penanda tautan eksternal.

Buka →
# Styling Lists

Ganti bentuk penanda daftar, atur posisinya, hapus bullet untuk navigasi, dan gayai marker langsung dengan ::marker.

Buka →
# Membuat Tipografi yang Mudah Dibaca

Rangkum seluruh property tipografi menjadi enam aturan kenyamanan membaca dan satu blok CSS artikel yang siap dipakai.

Buka →