Mengatur Font dengan CSS

Mengatur font dengan CSS adalah langkah penting agar tampilan teks di website kalian nyaman dibaca, konsisten, dan terlihat profesional.

Halo teman-teman, semoga ngodingnya lancar hari ini. Pada artikel ini kodelyly.com akan membahas cara memilih, memasang, dan mengoptimasi font di CSS: mulai dari font-family, ukuran responsif, sampai @font-face dan variable fonts agar performa tetap kencang.

Mengatur Font Dengan CSS

Pemilihan font menentukan suasana dan keterbacaan. Untuk proyek web, selalu siapkan fallback agar teks tetap tampil meski font utama gagal dimuat. Contoh deklarasi yang aman dan modern:

:root {
  /* skala dasar */
  font-size: 16px;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: #222;
}

Memilih Font & Fallback

Sertakan keluarga font utama, lalu sistem, lalu generik. Urutan ini membuat browser cepat menemukan alternatif yang mirip. Hindari terlalu banyak varian jika tidak dipakai karena tiap varian menambah permintaan file.

Ukuran & Skala Responsif

Gunakan satuan relatif seperti rem agar mudah diskalakan. Untuk judul yang adaptif, manfaatkan clamp sehingga ukuran nyaman di layar kecil maupun besar:

h1 { font-size: clamp(1.75rem, 2.5vw + 1rem, 3rem); }
h2 { font-size: clamp(1.5rem, 2vw + 0.75rem, 2.25rem); }
p  { font-size: 1rem; }

Berat, Gaya, Dan Jarak

Atur tebal huruf dengan font-weight, kemiringan dengan font-style, serta kenyamanan baca dengan line-height dan letter-spacing. Jaga kontras warna agar aksesibel dan gunakan maksimal dua atau tiga tingkat ketebalan agar halaman tetap ringan.

h1, h2 { font-weight: 700; }
strong   { font-weight: 600; }
em       { font-style: italic; }
small    { letter-spacing: 0.02em; }

Memasang Font Kustom Dengan @font_face

Jika memakai font kustom, pasang format modern dan aktifkan perpindahan cepat supaya teks tidak menghilang saat memuat.

@font-face {
  font-family: "Acme";
  src: url("/fonts/Acme-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* hindari FOIT */
}

body { font-family: "Acme", system-ui, sans-serif; }

Variable Fonts (Ringkas)

Variable fonts menyatukan banyak gaya dalam satu file sehingga lebih hemat permintaan jaringan dan fleksibel.

h2 {
  font-family: "InterVariable", system-ui, sans-serif;
  font-weight: 450;        /* kontinu, bukan hanya 400/700 */
  font-variation-settings: "wdth" 100;
}

Tabel Ringkas Properti Font CSS

Baca Juga:
Warna pada CSS: Panduan Lengkap HEX, RGB, HSL

Praktik Terbaik SEO & Performa

Pilih ukuran dan kontras yang memudahkan baca sehingga dwell time meningkat. Subset font untuk karakter yang dipakai agar file lebih kecil. Gunakan preload untuk font kritis secara hati-hati, aktifkan font-display: swap, batasi variasi yang tidak perlu, dan hindari menaruh teks penting sebagai gambar supaya bisa diindeks mesin pencari.

Contoh Mini Style Guide

:root {
  --font-sans: "InterVariable", system-ui, sans-serif;
}
body { font-family: var(--font-sans); }
h1   { font-size: clamp(2rem, 3vw + 1rem, 3.25rem); font-weight: 700; }
h2   { font-size: clamp(1.5rem, 2vw + 0.75rem, 2.25rem); font-weight: 600; }
p    { max-width: 65ch; }

FAQ Seputar Mengatur Font Dengan CSS

1) Apa Itu font_family Dan Fallback?

font-family menentukan prioritas keluarga font. Tuliskan beberapa kandidat agar jika font utama gagal dimuat, browser memakai alternatif yang mirip.

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

2) Kenapa Penting Menyiapkan Fallback?

Supaya teks tetap terlihat (tidak blank) dan tampilan konsisten di berbagai perangkat/OS. Fallback yang baik juga meningkatkan performa dan aksesibilitas.

3) Ukuran Font Ideal Dan Cara Responsifnya?

Untuk teks utama, basis 16px (1rem) umum dipakai. Gunakan satuan relatif rem dan fungsi clamp() agar adaptif.

html { font-size: 16px; }
h1 { font-size: clamp(1.75rem, 2.5vw + 1rem, 3rem); }

4) rem Vs em Vs px—pakai Yang Mana?

• rem: relatif ke root (html), bagus untuk skala konsisten.
• em: relatif ke elemen induk, cocok untuk komponen.
• px: absolut; gunakan secukupnya (mis. border), bukan untuk skala tipografi global.

5) Berapa line_height Yang Nyaman Dibaca?

Antara 1.4–1.8 untuk paragraf biasanya enak dibaca. Sesuaikan dengan jenis font dan ukuran.

body { line-height: 1.6; }

6) Bagaimana Memasang Font Kustom Dengan @font_face?

Deklarasikan keluarga, sumber file (prefer woff2), bobot, gaya, dan strategi tampilan.

@font-face {
  font-family: "Acme";
  src: url("/fonts/Acme-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* elak FOIT */
}
body { font-family: "Acme", system-ui, sans-serif; }

7) Format File Font Apa Yang Disarankan?

woff2 adalah standar modern: kompresi kecil dan dukungan luas. Sertakan woff hanya jika butuh kompatibilitas ekstra.

8) Apa Bedanya FOIT Dan FOUT? Cara Mencegahnya?

• FOIT: teks menghilang sementara font dimuat. Atasi dengan font-display: swap atau optional.
• FOUT: teks tampil dengan fallback lalu “berpindah” ke font kustom. Kurangi dengan fallback yang serasi dan muatan font yang ringan.

9) Kapan Pakai font_display: Swap Vs optional?

• swap: selalu tampilkan teks dengan fallback, ganti saat siap—aman untuk konten utama.
• optional: boleh tidak mengganti jika lambat—cocok untuk font non-kritis/di bawah fold.

10) Perlu Preload Font?

Preload bisa mempercepat font kritis, tapi gunakan hemat agar tidak mengganggu prioritas sumber daya lain.

<link rel="preload" href="/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin>

11) Apa Keuntungan Variable Fonts?

Satu file menyediakan rentang berat/lebar sehingga lebih fleksibel dan mengurangi jumlah permintaan.

h2 {
  font-family: "InterVariable", system-ui, sans-serif;
  font-weight: 450; /* kontinu */
  font-variation-settings: "wdth" 100;
}

12) Bagaimana Membatasi Ukuran File Font?

Subset sesuai kebutuhan karakter (mis. Latin) dengan unicode-range dan hanya sertakan varian (weight/style) yang dipakai.

@font-face {
  font-family: "Acme";
  src: url("/fonts/Acme-regular.woff2") format("woff2");
  unicode-range: U+000-5FF; /* Latin dasar */
}

13) Apakah Lebih Baik Self_host Atau CDN (mis. Google Fonts)?

Keduanya bisa. Self-host memberi kontrol penuh (caching, privasi, kepatuhan). CDN mudah diintegrasi dan caching lintas situs—pilih sesuai kebutuhan proyek.

14) Bagaimana Panjang Baris (measure) Yang Ideal?

Sekitar 45–75 karakter per baris. Gunakan ch atau atur lebar paragraf.

p { max-width: 65ch; }

15) Tips Aksesibilitas Untuk Font?

Jaga kontras warna, ukuran minimum nyaman (umumnya ≥ 16px), hindari teks terlalu tipis, pastikan fokus/hover terlihat, dan hormati preferensi user (zoom/OS).

16) Apakah Ada Cara “memperhalus” Font Di Semua Browser?

Tidak ada properti CSS yang konsisten untuk memaksa smoothing. Rendering dikontrol OS/browser. Fokus pada pilihan font yang baik, kontras, dan ukuran yang tepat.

17) Contoh Cepat Integrasi Dengan Tailwind CSS?

Tambahkan custom font ke tailwind.config.js, lalu pakai di CSS/kelas utilitas.

// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ["InterVariable", "system-ui", "sans-serif"],
      },
    },
  },
}

@font-face {
  font-family: "InterVariable";
  src: url("/fonts/Inter-roman.var.woff2") format("woff2");
  font-weight: 100 900; /* rentang weight */
  font-display: swap;
}

18) Bagaimana Memilih Pasangan Font (heading Vs Body)?

Pilih kontras yang jelas (serif–sans atau sesama sans dengan karakter berbeda), periksa keterbacaan di ukuran kecil, dan uji di perangkat nyata sebelum produksi.

19) Bagaimana Mengecek Performa Dan Loading Font?

Gunakan DevTools (Network tab) untuk memantau ukuran/TTFB, dan Lighthouse untuk audit performa/aksesibilitas. Kurangi varian font yang tidak dipakai.

Semoga FAQ ini membantu kalian mengatur tipografi web yang rapi, cepat, dan nyaman dibaca!

Kesimpulan

Mengatur font dengan CSS berfokus pada pilihan keluarga huruf yang tepat, fallback yang aman, ukuran responsif dengan satuan relatif, serta pemasangan yang efisien lewat @font-face atau variable fonts. Dengan kombinasi ini, teks situs kalian tampil rapi, cepat, dan ramah SEO. Sekian artikel dari kodelyly.com, semoga bermanfaat dan sampai jumpa di panduan berikutnya!