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.
Mengatur jenis huruf teks dengan daftar fallback font-family, generic family sebagai jaring pengaman, dan stack yang lazim dipakai website modern.
Buka → # Font SizeMengatur ukuran huruf dengan px, em, dan rem — menyusun skala heading yang menghormati preferensi pengguna.
Buka → # Font WeightMengatur ketebalan huruf dengan skala 100–900, keyword normal dan bold, nilai relatif, hingga ketebalan menengah dari variable font.
Buka → # Font StyleMengatur kemiringan teks dengan normal, italic, dan oblique — memahami perbedaan varian asli dan kemiringan sintetis.
Buka → # Line HeightMengatur jarak antarbaris dengan rasio tanpa satuan, menghindari jebakan pewarisan persen, dan menetapkan angka yang nyaman dibaca.
Buka → # Text AlignMeratakan teks dengan left, right, center, dan justify — termasuk masalah hyphenation justify di web dan nilai logis start serta end.
Buka → # Text DecorationMenata garis pada teks — underline, overline, dan line-through — beserta bentuk, warna, dan ketebalannya.
Buka → # Text TransformMengubah tampilan huruf dengan uppercase, lowercase, dan capitalize tanpa mengubah teks asli di HTML.
Buka → # Letter-Spacing dan Word-SpacingAtur jarak antarhuruf dan antarkata: rapatkan heading besar, buka label uppercase, dan tahu kapan harus berhenti menyetel.
Buka → # White SpaceKendalikan nasib spasi, tab, dan pindah baris di HTML: dari melipat otomatis sampai mempertahankan format persis seperti diketik.
Buka → # Text OverflowPotong teks yang tidak muat dengan tanda elipsis satu baris, batasi kartu dua baris dengan line-clamp, dan jaga isinya tetap bisa diakses.
Buka → # Web FontsMuat font sendiri dengan @font-face: pahami src, rentang font-weight, perilaku font-display, pilihan self-hosting, dan penyetelan fallback.
Buka → # Styling LinksTata lima state tautan dengan urutan LVHA yang benar, hormati batasan :visited, dan tiru pola tautan-tombol serta penanda tautan eksternal.
Buka → # Styling ListsGanti bentuk penanda daftar, atur posisinya, hapus bullet untuk navigasi, dan gayai marker langsung dengan ::marker.
Buka → # Membuat Tipografi yang Mudah DibacaRangkum seluruh property tipografi menjadi enam aturan kenyamanan membaca dan satu blok CSS artikel yang siap dipakai.
Buka →