Coba liat dua menu warung: yang satu pake font Comic Sans warna pelangi, satunya lagi pake font Helvetica rapi hitam-putih. Mana yang berasa lebih trustworthy? Typography itu komunikasi non-verbal yang powerful banget. Pilihan font, ukuran, ketebalan, jarak baris — semua kasih kesan tertentu sebelum pembaca selesai baca satu kalimat pun.

🤔 95% web design itu typography. Quote terkenal dari Oliver Reichenstein. Kebanyakan halaman web dasarnya cuma teks — kalau typography-nya jago, halaman langsung kelihatan profesional walaupun layout-nya minimal. Jago typography = jago 95% web design.

Properti utama tipografi di CSS:

• font-family — jenis font yang digunakan
• font-size — ukuran font
• font-weight — ketebalan font (normal, bold, 100-900)
• font-style — gaya font (normal, italic)

Contoh penggunaan:

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: normal;
}

h1 {
  font-family: Georgia, serif;
  font-size: 32px;
  font-weight: bold;
}

font-family bisa diisi beberapa font sebagai fallback. Jika font pertama tidak tersedia, browser akan mencoba font berikutnya. Selalu akhiri dengan generic family: serif, sans-serif, atau monospace.

Satuan font-size yang umum:

• px — ukuran tetap dalam pixel
• em — relatif terhadap font-size parent
• rem — relatif terhadap font-size root (html)

🎭 Analogi sehari-hari

Pernah merhatiin undangan kawinan? Ada yang fontnya keriting elegan biar kerasa formal sakral, ada yang tegas gede kayak spanduk kondangan biar dari ujung gang udah kebaca. Itu typography di dunia nyata. font-family = milih jenis hurufnya, font-size = mau gede atau kecil, font-weight = tipis kayak puisi atau tebel kayak headline koran. Aturan main yang gampang diinget: heading tebal biar nge-grab perhatian dalam sekejap, paragraf santai dengan jarak baris longgar biar mata gak capek baca panjang-panjang.

⚠️ Jebakan yang sering ditemui

• font-family butuh fallback chain — kalau font utama gagal load, fallback ke generic. Selalu akhiri serif / sans-serif / monospace.
• Web font (Google Fonts) blocking — load synchronously bikin FOIT (Flash of Invisible Text). Pakai font-display: swap.
• font-weight: bold bisa jadi 400 aslinya jika font tidak punya bold variant.
• em accumulate — em di nested element pakai parent font-size = bisa eksponen.
• rem lebih predictable — selalu relatif root (1rem = 16px default).
• px not scalable — user yang zoom browser tidak respect px. Pakai rem/em untuk a11y.
• Font subset untuk performance — Google Fonts bisa load karakter tertentu saja.

🎯 rem vs em vs px — satuan font-size pakai apa?

• Body/global font-size, spacing, layout → rem (relative to root, predictable)
• Padding/margin di komponen yang scale ikut font-size → em (relative to current element)
• Border 1px hairline, ikon kecil → px (presisi pixel, gak butuh scaling)
• Heading h1/h2/h3 → rem dengan ratio (1.5rem, 1.25rem)
• User a11y zoom → HINDARI px di font-size (browser zoom respect rem/em, bukan px)

Aturan praktis: rem untuk size global (1rem = 16px default, set di html). em untuk komponen self-scaling (button padding ikut font-size button). px untuk hairline/icon yang gak boleh scale.

TL;DR: Typography = 95% web design (Oliver Reichenstein). Property: font-family (chain dengan generic fallback serif/sans-serif/monospace), font-size, font-weight, font-style. Web font (Google Fonts) butuh font-display: swap biar gak FOIT. Satuan: rem (relative root, predictable) buat size global, em (relative parent) buat self-scaling component, px buat hairline/icon. Hindari px di font-size (a11y zoom).