Teks & Font
Mengatur jenis huruf, ukuran, ketebalan, tinggi baris, perataan, hiasan teks, dan jarak antarhuruf agar tulisan nyaman dibaca.
Tipografi: seni membuat teks nyaman dibaca
Sebagian besar isi website adalah teks, jadi tampilan teks sangat menentukan kesan dan keterbacaan halamanmu. CSS punya banyak properti untuk itu.
| Properti | Fungsi | Contoh |
|---|---|---|
font-family | Jenis huruf | "Poppins", Arial, sans-serif |
font-size | Ukuran huruf | 18px, 1.125rem |
font-weight | Ketebalan (100–900) | 400 normal, 700 bold |
font-style | Miring | italic |
line-height | Tinggi baris | 1.6 |
text-align | Perataan | left, center, right, justify |
text-decoration | Garis bawah/coret | none, underline, line-through |
text-transform | Huruf besar/kecil | uppercase, capitalize |
letter-spacing | Jarak antarhuruf | 1px |
font-family dan font cadangan
Tidak semua perangkat punya semua font. Karena itu tulis daftar font, dari favorit sampai cadangan, diakhiri keluarga umum:
body {
font-family: "Poppins", "Segoe UI", Arial, sans-serif;
}Nama font yang mengandung spasi harus diberi tanda kutip. Keluarga umum: serif (berkait, seperti Times), sans-serif (tanpa kait, seperti Arial), monospace (lebar sama, untuk kode).
Memakai Google Fonts
Tambahkan <link> dari Google Fonts di head HTML, lalu panggil nama fontnya di CSS. Pakai maksimal 2 font berbeda agar halaman cepat dan rapi.
line-height: rahasia teks nyaman
Untuk paragraf, tinggi baris sekitar 1.5–1.7 kali ukuran huruf membuat teks tidak terasa sesak. Tulis tanpa satuan (1.6) agar otomatis mengikuti ukuran huruf elemen itu.
Tips
- Ukuran teks isi minimal 16px di layar.
- Jangan memakai
justifyuntuk kolom sempit; sering menimbulkan jarak aneh. - Tautan sebaiknya tetap terlihat sebagai tautan (warna atau garis bawah).
font-weight: banyak font hanya punya 400 dan 700; angka lain bisa tampil sama.
Singkatan: font
p { font: italic 700 18px/1.6 Georgia, serif; }
/* gaya berat ukuran/tinggi-baris keluarga */