Typography & Colors dalam CSS

Bayangkan Anda makan di restoran. Makanannya enak, porsi pas, tapi tempatnya gelap gulita tanpa pencahayaan yang layak. Pasti gak nyaman kan? Sama kayak website — konten sebagus apapun, kalau tulisannya kecil, warnanya aneh, atau font-nya buruk, pengunjung langsung cabut.

Di artikel ini, kita akan bedah dua aspek paling berpengaruh di tampilan website: typography (cara teks ditampilkan) dan colors (warna). Keduanya adalah fondasi visual yang bikin website Anda terlihat profesional.

1. Font Properties

Kalau CSS itu bahasa buat styling, maka font properties itu alat buat ngatur tampilan teks. Bayangkan font itu seperti wajah tulisan — setiap wajah punya karakter beda.

font-family

font-family nentuin jenis font yang dipake. Tapi di sini ada satu trik penting: browser cuma punya segelintir font default. Jadi Anda harus kasih fallback — kalau font utama gak ada, pake yang kedua, kalau yang kedua juga gak ada, pake yang ketiga.

/* ✅ Bener — ada fallback */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ❌ Salah — cuma satu font, kalau gak ada yang ini, jadi default browser */
body {
    font-family: 'FancyFont';
}

Daftar font yang umum dipake:

Kategori	Font	Keterangan
Sans-serif	Arial, Helvetica	Bersih, modern, cocok buat body text
Serif	Times New Roman, Georgia	Ada garis kecil di ujung huruf, kesan formal
Monospace	Courier New, Consolas	Lebar konsisten, cocok buat kode
Cursive	Comic Sans MS	Tulisan tangan (hindari di website serius!)

font-size

font-size ngatur ukuran teks. Ada beberapa unit yang bisa dipake:

/* Pixel — tetap, gak berubah meski zoom */
h1 {
    font-size: 32px;
}

/* Em — relatif terhadap parent */
p {
    font-size: 1em;
}

/* Rem — relatif terhadap root (html), lebih prediktif */
h2 {
    font-size: 1.5rem;
}

/* Persentase */
small {
    font-size: 80%;
}

Tip: Kalau bisa, hindari px untuk text. Pake rem supaya tetap accessible — pengguna yang butuh zoom gak akan terganggu.

font-weight

/* Angka: 100 sampai 900 */
p {
    font-weight: 400; /* normal */
}

h1 {
    font-weight: 700; /* bold */
}

/* Atau pakai keyword */
span {
    font-weight: bold;  /* sama kayak 700 */
    font-weight: lighter; /* lebih tipis */
}

font-style

/* Teks miring */
.italic {
    font-style: italic;
}

/* Teks normal */
.normal {
    font-style: normal;
}

2. Google Fonts

Font system cuma segelintir. Kalau mau font yang lebih keren dan konsisten di semua browser, pake Google Fonts — gratis, ribuan pilihan, tinggal link.

Cara Pake

Langkah 1: Buka fonts.google.com, cari font yang disuka.

Langkah 2: Klik “Select this style” untuk variasi yang diinginkan.

Langkah 3: Copy link tag HTML, taruh di <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;500;700&display=swap" rel="stylesheet">

Langkah 4: Pakai di CSS:

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

h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

Tips Google Fonts:

Jangan pake lebih dari 2-3 font family — bikin website berat
Selalu kasih fallback (misal: sans-serif di akhir)
Pake display=swap di URL supaya teks tetap keliatan saat font load

3. Text Properties

Selain font, ada banyak properti CSS buat ngatur tampilan teks lebih detail.

text-align

/* Rata kiri (default) */
p {
    text-align: left;
}

/* Rata kanan */
.text-right {
    text-align: right;
}

/* Rata tengah */
.text-center {
    text-align: center;
}

/* Rata kiri-kanan (justify) */
.justify {
    text-align: justify;
}

text-decoration

/* Garis bawah (default link) */
a {
    text-decoration: underline;
}

/* Hilangkan garis bawah */
a.clean {
    text-decoration: none;
}

/* Garis tengah */
.strike {
    text-decoration: line-through;
}

/* Gabungan */
.combo {
    text-decoration: underline line-through;
}

text-transform

.uppercase {
    text-transform: uppercase;  /* SEMUA BESAR */
}

.lowercase {
    text-transform: lowercase;  /* semua kecil */
}

.capitalize {
    text-transform: capitalize; /* Huruf Pertama Besar */
}

line-height & letter-spacing

p {
    line-height: 1.6;       /* Jarak antar baris */
    letter-spacing: 0.5px;  /* Jarak antar huruf */
}

line-height sangat penting buat kenyamanan membaca. Nilai 1.5 sampai 1.8 buat body text adalah sweet spot.

/* ❌ Terlalu rapat */
p {
    line-height: 1.0;
}

/* ✅ Nyaman dibaca */
p {
    line-height: 1.6;
}

/* ❌ Terlalu renggang */
p {
    line-height: 2.5;
}

text-shadow

Buat kasih bayangan di teks — bisa bikin efek depth atau dekorasi:

h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.glow {
    text-shadow: 0 0 10px #00ff00;
}

4. Warna dalam CSS

Warna itu jiwa dari desain. Tapi ada banyak cara nulis warna di CSS, dan masing-masing punya kelebihan.

Hexadecimal (Hex)

Format paling umum. Terdiri dari kode heksadesimal: #RRGGBB.

body {
    color: #333333; /* abu-abu gelap */
}

h1 {
    color: #264de4; /* biru */
}

a {
    color: #e74c3c; /* merah */
}

Shortcut hex: Kalau pasangan angkanya sama (misal: #FF0000), bisa disingkat jadi #F00.

/* Dua-duanya sama */
color: #FF0000;
color: #F00;

RGB (Red, Green, Blue)

p {
    color: rgb(51, 51, 51);       /* abu-abu gelap */
}

h2 {
    color: rgb(231, 76, 60);      /* merah */
}

/* Dengan opacity (transparansi) — RGBA */
.faded {
    color: rgba(0, 0, 0, 0.5);   /* hitam setengah transparan */
}

Nilai RGB dari 0 sampai 255 per channel. Campur warna merah, hijau, dan biru buat hasilkan jutaan warna.

HSL (Hue, Saturation, Lightness)

HSL lebih intuitif karena mirip cara manusia mikir soal warna:

body {
    color: hsl(0, 0%, 40%);       /* abu-abu (lightness 40%) */
}

h1 {
    color: hsl(225, 73%, 53%);    /* biru */
}

.danger {
    color: hsl(4, 78%, 57%);      /* merah */
}

/* Dengan opacity — HSLA */
.overlay {
    color: hsla(120, 50%, 50%, 0.7); /* hijau transparan */
}

Komponen	Fungsi	Nilai
Hue	Jenis warna (merah, biru, hijau)	0-360 derajat
Saturation	Kekuatan warna	0% (abu-abu) — 100% (penuh)
Lightness	Terang/gelap	0% (hitam) — 100% (putih)

Kenapa HSL bagus? Karena lebih mudah bikin variasi warna. Misal: mau versi lebih terang? Tinggal naikkan lightness. Mau versi lebih pucat? Turunkan saturation.

5. Gradients

Gradients adalah transisi warna halus dari satu titik ke titik lain. Dua jenis utama: linear dan radial.

Linear Gradient

/* Atas ke bawah (default) */
.gradient-top {
    background: linear-gradient(red, blue);
}

/* Kiri ke kanan */
.gradient-right {
    background: linear-gradient(to right, red, blue);
}

/* Diagonal */
.gradient-diagonal {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

/* Multi warna */
.gradient-multi {
    background: linear-gradient(to right, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
}

Radial Gradient

/* Lingkaran dari tengah */
.radial {
    background: radial-gradient(circle, red, yellow, green);
}

/* Dari kiri atas */
.radial-corner {
    background: radial-gradient(at top left, red, blue);
}

Contoh Penggunaan Real

/* Tombol gradient */
.btn-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
}

/* Hero section */
.hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: white;
    padding: 100px 20px;
    text-align: center;
}

6. Opacity

opacity ngatur transparansi elemen. Nilai dari 0 (total transparan) sampai 1 (total opaque/opak).

/* Semi-transparan */
.faded {
    opacity: 0.7;
}

/* Total transparan (gak keliatan) */
.invisible {
    opacity: 0;
}

Bedanya opacity dan rgba():

Properti	Efeknya
`opacity: 0.5`	Seluruh elemen (teks + background + children) jadi transparan
`rgba()`	Cuma warna tertentu (misal: background) yang transparan, teks tetap solid

/* ❌ Semuanya transparan — teks juga ikut pucat */
.card {
    background: #ffffff;
    opacity: 0.5;
}

/* ✅ Background transparan, teks tetap solid */
.card {
    background: rgba(255, 255, 255, 0.5);
}

Recap

Konsep	Fungsi	Nilai/Contoh
`font-family`	Jenis font	`'Poppins', sans-serif`
`font-size`	Ukuran teks	`16px`, `1rem`, `100%`
`font-weight`	Ketebalan teks	`400` (normal), `700` (bold)
`font-style`	Gaya font	`italic`, `normal`
`text-align`	Perataan teks	`left`, `center`, `right`, `justify`
`text-decoration`	Dekorasi teks	`underline`, `none`, `line-through`
`text-transform`	Transformasi huruf	`uppercase`, `lowercase`, `capitalize`
`line-height`	Jarak antar baris	`1.5` s/d `1.8` (ideal)
Hex	Warna heksadesimal	`#FF0000`, `#333`
RGB	Warna campuran	`rgb(255, 0, 0)`, `rgba(0,0,0,0.5)`
HSL	Hue, Saturation, Lightness	`hsl(0, 100%, 50%)`
Gradient	Transisi warna	`linear-gradient()`, `radial-gradient()`
Opacity	Transparansi elemen	`0` (tersembunyi) — `1` (solid)

Penutup

Typography dan warna adalah dua elemen yang paling sering dilihat oleh pengunjung website. Dengan font yang tepat dan palet warna yang konsisten, website Anda akan terlihat jauh lebih profesional.

Setelah paham dasar ini, Anda sudah siap belajar hal yang lebih seru: Layout dengan Flexbox. Di situ, kita akan lihat cara ngatur posisi elemen secara fleksibel — mirip seperti menyusun puzzle.