Coba buka dua website dengan isi yang sama persis, tapi satu pakai font default Times New Roman ukuran kecil dan rapat, satunya pakai font sans-serif yang lega. Yang kedua pasti terasa lebih "niat". Itu kerja tipografi. Sebagian besar isi web adalah teks, jadi cara teks itu tampil menentukan apakah orang betah membaca atau langsung kabur.

font-family menerima daftar font, bukan satu nama saja. Browser mencoba dari kiri ke kanan dan memakai font pertama yang tersedia di perangkat pengguna.

body {
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
}

Kalau Poppins belum termuat atau tidak ada, browser coba Segoe UI (umum di Windows), lalu Arial, dan terakhir sans-serif. Kata terakhir itu disebut generic family: bukan nama font, tapi kategori. Browser pasti punya minimal satu font untuk tiap kategori, jadi teks kamu tidak akan pernah tampil tanpa font. Generic family yang sering dipakai: serif, sans-serif, monospace, dan system-ui.

Aturan kecil: nama font yang mengandung spasi ditulis dalam tanda kutip, misalnya "Segoe UI". Generic family justru tidak boleh dikutip, karena "sans-serif" dengan kutip dianggap nama font biasa yang tidak ada.

Font sistem terbatas. Supaya semua pengunjung melihat font yang sama, kamu bisa menyertakan file font sendiri dengan @font-face:

@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

h1 {
  font-family: "Poppins", sans-serif;
}

@font-face itu seperti mendaftarkan font baru dengan nama pilihanmu. Setelah terdaftar, nama itu bisa dipakai di font-family mana pun. Format woff2 adalah format paling ringkas dan didukung semua browser modern. font-display: swap artinya: tampilkan dulu teks dengan font fallback, lalu tukar ke Poppins begitu filenya selesai diunduh. Tanpa ini, sebagian browser menyembunyikan teks beberapa saat, dan halaman terasa kosong.

Cara yang lebih cepat untuk pemula adalah Google Fonts. Pilih font di fonts.google.com, lalu salin tag <link> ke <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">

File CSS dari Google itu sebenarnya berisi aturan @font-face yang sudah disiapkan. Ambil hanya ketebalan yang kamu pakai (di contoh: 400 dan 700), karena setiap ketebalan adalah file tambahan yang harus diunduh.

Default font-size html di hampir semua browser adalah 16px. Kenapa rem disukai? Karena pengguna yang mengatur ukuran font browser lebih besar (misalnya karena mata minus) akan ikut mendapat teks lebih besar. Dengan px, preferensi itu diabaikan.

em berguna tapi punya jebakan: nilainya berlipat saat bersarang. Kalau ul punya font-size: 1.2em dan di dalamnya ada ul lagi, ukuran list dalam jadi 1.2 × 1.2 dari induk paling luar. Pakai em dengan sengaja, misalnya untuk padding tombol yang ikut membesar mengikuti teksnya.

line-height mengatur tinggi tiap baris. Untuk paragraf, nilai 1.5 sampai 1.7 nyaman dibaca. Tulis tanpa satuan:

p {
  font-size: 1rem;
  line-height: 1.6;
}

Angka tanpa satuan dikalikan dengan font-size elemen itu sendiri, dan anak-anaknya mewarisi faktor 1.6, bukan hasil px-nya. Jadi judul besar di dalamnya tetap proporsional.

font-weight mengatur ketebalan dari 100 sampai 900. normal sama dengan 400 dan bold sama dengan 700. Kalau font yang dimuat tidak punya ketebalan 600, browser akan memakai ketebalan terdekat atau memalsukan tebalnya, dan hasilnya sering kurang rapi.

Satu warna biru bisa ditulis dengan empat cara:

.a { color: #1572b6; }
.b { color: rgb(21, 114, 182); }
.c { color: rgba(21, 114, 182, 0.6); }
.d { color: hsl(205, 79%, 40%); }

• Hex #rrggbb: tiga pasang angka heksadesimal 00 sampai ff untuk merah, hijau, biru. Bentuk pendek #fff sama dengan #ffffff.
• rgb(): tiga angka 0 sampai 255. rgba() menambah alpha 0 sampai 1 untuk transparansi.
• hsl(): hue (sudut 0 sampai 360 di roda warna), saturation, lightness. Enaknya, kamu bisa membuat varian lebih terang cukup dengan menaikkan lightness.

Saat kamu cek di DevTools atau getComputedStyle, browser menampilkan warna sebagai rgb(...) apa pun format yang kamu tulis.

Ini sering tertukar. opacity: 0.5 membuat seluruh elemen setengah transparan: background, border, teks, bahkan semua anaknya. Sedangkan alpha di rgba() hanya memengaruhi satu properti tempat warna itu dipakai.

.kartu-a { background: #1572b6; opacity: 0.5; }
.kartu-b { background: rgba(21, 114, 182, 0.5); }

Hasilnya: .kartu-a terlihat pudar termasuk tulisannya, sedangkan .kartu-b punya background tembus pandang tapi teksnya tetap tajam. Untuk overlay di atas foto, hampir selalu kamu butuh yang kedua.

Gradient di CSS dihitung sebagai gambar, jadi dipasang di background atau background-image, bukan background-color.

.hero {
  background: linear-gradient(135deg, #e34f26, #1572b6);
}
.lampu {
  background: radial-gradient(circle, #ffffff, #1572b6);
}

linear-gradient membuat transisi warna lurus. 135deg artinya arah ke kanan bawah. radial-gradient memancar dari tengah keluar, cocok untuk efek sorotan.

Untuk foto latar, pasangan wajibnya:

.sampul {
  background-image: url("pantai.jpg");
  background-size: cover;
  background-position: center;
}

cover memperbesar gambar sampai menutupi seluruh kotak tanpa gepeng, walau sebagian tepinya terpotong. contain kebalikannya: gambar utuh terlihat, tapi bisa menyisakan ruang kosong.

.kartu {
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.avatar { border-radius: 50%; }
h1 { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }

• border-radius membulatkan sudut. Satu nilai untuk semua sudut, empat nilai untuk kiri atas, kanan atas, kanan bawah, kiri bawah. 50% pada kotak persegi menghasilkan lingkaran.
• box-shadow urutannya: geser x, geser y, blur, spread (opsional), warna. Tambahkan inset untuk bayangan ke dalam, dan pisahkan dengan koma untuk menumpuk beberapa bayangan.
• text-shadow mirip, tapi tanpa spread dan inset. Pakai tipis-tipis saja, bayangan tebal membuat teks susah dibaca.

• Lupa generic family di akhir font-family, sehingga saat web font gagal dimuat, teks jatuh ke font default yang tidak cocok.
• Memakai opacity untuk membuat background transparan, lalu bingung kenapa teksnya ikut pudar.
• Menulis gradient di background-color. Gradient adalah gambar, jadi tidak berlaku di properti itu.
• line-height: 24px di body, lalu judul 40px di dalamnya bertumpuk karena tinggi barisnya tetap 24px.
• Memuat sembilan ketebalan dari Google Fonts padahal hanya dua yang dipakai, sehingga halaman lambat.