Baricode LMS - Font & Tipografi

Font & Tipografi 🔤

Tipografi adalah seni dan teknik mengatur teks agar mudah dibaca dan enak dilihat. Di CSS, kita memiliki banyak property untuk mengontrol tampilan font secara mendetail.

font-family — Jenis Font

Menentukan jenis huruf yang digunakan. Selalu sertakan font fallback (cadangan) jika font utama tidak tersedia:

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1 {
  font-family: 'Georgia', 'Times New Roman', serif;
}

code {
  font-family: 'Fira Code', 'Courier New', monospace;
}

CSS memiliki 5 keluarga font generik:

Generik	Karakteristik	Contoh
`serif`	Punya kait di ujung huruf	Times New Roman, Georgia
`sans-serif`	Tanpa kait, bersih	Arial, Helvetica, Roboto
`monospace`	Lebar tiap karakter sama	Courier, Fira Code
`cursive`	Menyerupai tulisan tangan	Comic Sans, Pacifico
`fantasy`	Dekoratif	Impact

Google Fonts — Font Eksternal

Cara termudah menggunakan font kustom gratis. Import di <head> HTML atau di awal file CSS:

<!-- Di HTML -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Playfair+Display&display=swap" rel="stylesheet">

/* Atau di CSS */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
  font-family: 'Roboto', sans-serif;
}

font-size — Ukuran Font

Menentukan ukuran huruf. Tersedia berbagai satuan:

/* Piksel - absolut, tidak berubah */
p { font-size: 16px; }

/* em - relatif terhadap font-size parent */
.kotak { font-size: 1.5em; }  /* 1.5x ukuran parent */

/* rem - relatif terhadap font-size root (<html>) */
p { font-size: 1rem; }    /* = 16px jika root = 16px */
h1 { font-size: 2.5rem; } /* = 40px */

/* Persen - relatif terhadap parent */
small { font-size: 80%; }

Rekomendasi: Gunakan rem untuk ukuran font — konsisten dan mudah disesuaikan:

html { font-size: 16px; } /* basis */

body { font-size: 1rem; }     /* 16px */
h1   { font-size: 2.5rem; }   /* 40px */
h2   { font-size: 2rem; }     /* 32px */
h3   { font-size: 1.5rem; }   /* 24px */
small{ font-size: 0.875rem; } /* 14px */

font-weight — Ketebalan Font

p { font-weight: normal; }   /* = 400 */
b { font-weight: bold; }     /* = 700 */

/* Nilai numerik 100-900 (kelipatan 100) */
.tipis   { font-weight: 300; } /* light */
.normal  { font-weight: 400; } /* regular */
.sedang  { font-weight: 500; } /* medium */
.tebal   { font-weight: 700; } /* bold */
.gelap   { font-weight: 900; } /* black */

Nilai yang tersedia tergantung font yang digunakan. Google Fonts biasanya menyediakan 300, 400, 500, 600, 700, 800.

font-style — Gaya Font

em     { font-style: italic; }  /* miring */
p      { font-style: normal; }  /* tegak (default) */
.judul { font-style: oblique; } /* miring artifisial */

Shorthand font

Gabungkan beberapa property font dalam satu baris:

/* font: style weight size/line-height family */
body {
  font: normal 400 16px/1.6 'Roboto', sans-serif;
}

h1 {
  font: bold 2.5rem/1.2 'Playfair Display', serif;
}

@font-face — Font Lokal Kustom

Jika ingin menggunakan file font sendiri (tidak dari Google Fonts):

@font-face {
  font-family: 'FontKustom';
  src: url('fonts/font-kustom.woff2') format('woff2'),
       url('fonts/font-kustom.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'FontKustom', sans-serif;
}

Tipografi yang Baik — Panduan Singkat

body {
  font-family: 'Roboto', sans-serif; /* sans-serif untuk body teks */
  font-size: 16px;                   /* ukuran dasar yang nyaman dibaca */
  line-height: 1.6;                  /* jarak baris 1.5–1.8x optimal */
  color: #1f2937;                    /* hitam agak abu — lebih lembut dari #000 */
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif; /* serif untuk heading */
  font-weight: 700;
  line-height: 1.2; /* heading lebih rapat */
  color: #111827;
}

💡 Tips: Kombinasikan satu font serif untuk heading dan satu font sans-serif untuk body text — kontras ini menciptakan hierarki visual yang elegan. Jangan menggunakan lebih dari 2 jenis font dalam satu halaman agar tampilan tetap konsisten dan profesional. ✨

Font & Tipografi