cssfonttipografiPemula4 mnt baca

Font Family

Tumpukan font (font stack), serif vs sans-serif vs monospace, dan generic family.

Font stack: daftar cadangan

font-family menerima daftar font dipisah koma. Browser memakai yang pertama yang tersedia di perangkat user:

css
body {
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

Nama font yang mengandung spasi wajib pakai tanda kutip. Entri terakhir harus generic family (sans-serif, serif, monospace) sebagai jaring pengaman.

Lima generic family

  • serif: berkait (Times), kesan formal, cocok untuk artikel panjang/cetak.
  • sans-serif: tanpa kait (Arial), bersih, standar untuk UI web.
  • monospace: lebar tetap (Courier), untuk kode.
  • cursive dan fantasy: dekoratif, jarang dipakai untuk body text.

System font stack

Trik populer: pakai font bawaan OS supaya halaman terasa native dan tanpa unduhan:

css
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

Di Mac tampil San Francisco, di Windows tampil Segoe UI. Cepat (nol unduhan) dan familiar bagi user.

Catatan teknis: jangan mengandalkan satu font spesifik seperti "Poppins" tanpa menyediakan fallback atau mengimpornya (lihat modul font-custom). Di perangkat tanpa font itu, browser jatuh ke default yang mungkin jelek.

Analogi: pakaian untuk teks

Font seperti pakaian: kaos untuk santai (sans-serif), jas untuk formal (serif), seragam teknisi untuk kerja presisi (monospace). Website yang memakai "jas" untuk semua teks terlihat kaku; yang memakai "kaos" untuk dokumen hukum terlihat tidak serius. Pilih pakaian sesuai acara.

Kenapa font stack berlapis-lapis?

Tidak semua perangkat punya font yang sama. iPhone punya -apple-system, Android punya Roboto, Windows punya Segoe UI. Font stack adalah daftar prioritas: "pakai yang pertama kalau ada, kalau tidak ada turun ke berikutnya". Generic family di ujung (sans-serif) adalah jaring pengaman terakhir.

css
body {
  font-family:
    "Plus Jakarta Sans",  /* 1. font custom situs */
    -apple-system,        /* 2. font sistem Apple */
    "Segoe UI",           /* 3. font sistem Windows */
    Roboto,               /* 4. font sistem Android */
    sans-serif;           /* 5. apa pun yang sans-serif */
}

Contoh bertahap: dari satu font ke sistem

Level 1, satu font (rapuh di perangkat lain):

css
body {
  font-family: "Plus Jakarta Sans";
}

Kalau font gagal dimuat, browser jatuh ke default serif (Times) yang mengubah total tampilan.

Level 2, stack lengkap (tahan banting):

css
body {
  font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
}

code {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

Kode selalu monospace agar sejajar rapi; teks UI selalu sans-serif agar bersih.

Kesalahan umum pemula

Salah: nama font multi-kata tanpa kutip. font-family: Plus Jakarta Sans DIBACA sebagai tiga font terpisah! Selalu kutip nama ber-spasi: "Plus Jakarta Sans".

Salah: terlalu banyak font. Tiap font = file unduhan. Maksimal 2 keluarga font per situs (satu untuk teks, satu untuk aksen/kode). Lebih dari itu memperlambat load.

Salah: serif vs sans-serif tertukar konteks. Dokumen panjang/cetak: serif nyaman untuk mata. UI aplikasi: sans-serif lebih bersih di layar kecil.

Latihan kilat

  1. Tulis font stack lengkap untuk body: font custom "Plus Jakarta Sans", lalu font sistem Apple, Windows, Android, diakhiri generic sans-serif.
  2. Apa yang salah dari font-family: Plus Jakarta Sans, sans-serif;? Perbaiki.
  3. Kenapa maksimal 2 keluarga font per situs? Sebutkan alasan performa dan desain.

Kunci: (1) font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;. (2) Nama ber-spasi wajib dikutip: "Plus Jakarta Sans"; tanpa kutip dibaca tiga font terpisah. (3) Tiap font = file unduhan (lambat); terlalu banyak font merusak konsistensi visual.

Istilah kunci

  • font-family: daftar font prioritas.
  • Font stack: tumpukan font + cadangan.
  • Generic family: serif / sans-serif / monospace sebagai jaring pengaman.
  • System font: font bawaan OS (-apple-system, Segoe UI, Roboto).
  • Kutipan: nama font ber-spasi WAJIB dikutip.

Rangkuman

Selalu tulis font stack lengkap diakhiri generic family. Untuk kecepatan maksimal, pakai system font stack. Pilih serif untuk kesan formal, sans-serif untuk UI modern.

Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Pasangan Font Artikel

Di playground:

  1. Buat judul artikel (h1 baru di HTML) memakai serif Georgia, dan body memakai system font stack.
  2. Buat class .kode untuk potongan kode inline: monospace dengan background abu-abu muda.
  3. Di komentar, jelaskan kenapa generic family wajib ada di akhir stack.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>
Open on CodeSandboxOpen Sandbox