csstekstipografiPemula4 mnt baca

Styling Teks Dasar

color, text-align, text-decoration, text-transform: fondasi tipografi web.

Warna dan perataan teks

css

.artikel {
  color: #1e293b;
  text-align: justify; /* left | right | center | justify */
}

text-align: justify membuat tepi kiri-kanan rata seperti koran, tapi bisa menimbulkan "sungai" spasi putih di layar sempit. Untuk body text, left biasanya paling nyaman dibaca.

Dekorasi teks

css

a {
  text-decoration: none; /* hilangkan garis bawah link */
}

.penting {
  text-decoration: underline wavy red; /* gaya modern */
}

text-decoration modern menerima gaya + warna sekaligus: underline dotted blue, line-through.

Transformasi huruf

css

.judul {
  text-transform: uppercase; /* JADI KAPITAL SEMUA */
}

Pilihan: uppercase, lowercase, capitalize (huruf pertama tiap kata). Trik favorit: tulis HTML dengan huruf normal, tampilkan kapital via CSS. Kalau nanti mau diubah, cukup satu baris CSS.

Catatan teknis: text-transform: uppercase bermasalah di beberapa bahasa (misal Jerman ß, Turki i). Untuk konten multibahasa serius, transformasi huruf sebaiknya dilakukan di data, bukan CSS.

Analogi: suara saat berbicara

Properti teks seperti kualitas suara: warna = nada suara, ukuran = volume, ketebalan = penekanan, perataan = arah bicara. Kombinasi yang tepat membuat "suara" website enak didengar (dibaca).

Kenapa tipografi adalah 90% desain web?

Sebagian besar halaman web adalah teks. Dua situs dengan layout sama tapi tipografi beda terasa seperti situs yang berbeda kualitasnya. Kuasai color, font-size, font-weight, text-align, line-height dan kamu menguasai sebagian besar "desain" web.

Contoh bertahap: artikel

Level 1, teks mentah browser:

css

/* Tanpa CSS: Times 16px, rapat, hitam pekat */

Level 2, artikel yang nyaman dibaca:

css

.artikel {
  color: #334155;          /* abu-abu tua, lebih lembut dari hitam */
  font-size: 1.125rem;    /* 18px */
  line-height: 1.7;        /* napas antar baris */
  max-width: 65ch;         /* batasi panjang baris */
}

.artikel h2 {
  color: #0f172a;
  font-size: 1.75rem;
  font-weight: 700;
  margin-top: 2em;
}

Empat keputusan itu (warna lembut, 18px, line-height lega, baris dibatasi) mengubah teks mentah menjadi artikel profesional.

Level 3, hierarki lengkap:

css

.judul-utama {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.02em; /* judul besar: rapatkan sedikit */
  line-height: 1.1;
}

.subjudul {
  font-size: 1.25rem;
  font-weight: 400;
  color: #64748b;
}

letter-spacing negatif kecil pada judul besar adalah trik tipografi profesional.

Kesalahan umum pemula

Salah: text-align: justify untuk semua teks. Justify di web sering menghasilkan "sungai" (celah putih vertikal) karena spasi kata direnggangkan paksa. Untuk body text, left lebih aman dan mudah dibaca.

Salah: font-weight tanpa font yang mendukung. font-weight: 800 pada font yang hanya punya 400 membuat browser "memalsukan" tebal (faux bold) yang jelek. Pastikan font custom menyertakan varian weight yang dipakai.

Salah: warna teks terlalu terang. Abu-abu #aaa di atas putih gagal kontras. Minimal #595959 untuk teks kecil di atas putih.

Latihan kilat

Buat gaya artikel nyaman dibaca: warna abu tua, 18px, line-height 1.7, baris maksimal 65 karakter.
Judul besar 40px terlihat "longgar". Properti apa yang merapatkannya sedikit? Tulis nilainya.
Kenapa text-align: justify berisiko di web? Apa alternatif amannya untuk paragraf panjang?

Kunci: (1) .artikel { color: #334155; font-size: 1.125rem; line-height: 1.7; max-width: 65ch; }. (2) letter-spacing: -0.02em;. (3) Spasi kata direnggangkan paksa menimbulkan "sungai" putih; alternatif: text-align: left;.

Istilah kunci

color: warna teks.
font-size: ukuran huruf (gunakan rem).
font-weight: ketebalan (400 normal, 700 tebal).
line-height: tinggi baris (angka tanpa satuan disarankan).
Hierarki: perbedaan ukuran/tebal yang memandu mata pembaca.

Aturan 3 detik

Pengunjung memutuskan dalam 3 detik apakah akan membaca. Tiga hal yang mereka nilai: apakah judulnya jelas (hierarki), apakah teksnya nyaman (line-height), apakah terlihat rapi (spacing konsisten). Kuasai tiga itu dan 80% "desain" situsmu sudah beres sebelum menyentuh layout.

Rangkuman

Kuasai empat properti ini: color, text-align, text-decoration, text-transform. Mereka menangani 80% kebutuhan styling teks sehari-hari.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Artikel Mini

Di playground:

Buat judul rata kiri (bukan tengah) dan tambahkan letter-spacing: 2px (modul berikutnya, coba tebak fungsinya).
Buat link tanpa garis bawah, tapi saat hover muncul garis bawah solid.
Di komentar, jelaskan kapan justify cocok dan kapan tidak.

<!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 Sandbox