Coba liat 2 koran berbeda. Yang satu rapi: jarak baris longgar, paragraf rata kiri-kanan, kata kapital di judul. Yang satu berantakan: line-height nempel, semua aligned-left, tanpa konsistensi. Beda banget enaknya dibaca walau isinya sama. CSS punya properti spesifik buat ngatur detail kelihatan teks di luar font-family/font-size — ini yang nentuin nyaman gak nyamannya mata user pas baca.

💡 Sains baca. Penelitian tipografi nemuin bahwa line-height ideal buat body text = 1.5-1.6 (bukan 1.0 default browser yang terlalu sempit). letter-spacing sedikit positif (0.02em) di teks kapital bantu readability — tanpa itu huruf gede keliatan numpuk. Kompas/Tempo digital pake angka-angka ini.

• text-align — perataan teks (left, center, right, justify)
• text-decoration — dekorasi teks (underline, line-through, none)
• text-transform — transformasi huruf (uppercase, lowercase, capitalize)
• line-height — jarak antar baris
• letter-spacing — jarak antar huruf
• word-spacing — jarak antar kata

Contoh penggunaan:

h1 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
}

p {
  line-height: 1.6;
  text-align: justify;
}

a {
  text-decoration: none;
}

line-height sangat penting untuk keterbacaan teks. Nilai 1.5 sampai 1.8 umumnya nyaman dibaca. Bisa menggunakan angka tanpa satuan (relatif terhadap font-size) atau dengan satuan seperti px.

🎭 Analogi sehari-hari

Pernah baca buku yang barisnya rapet banget sampai mata cepet pegel? Atau yang sebaliknya, jaraknya kelonggaran sampai ngerasa membaca puisi? Itu efek line-height. text-align itu kayak rapihin tulisan tangan biar rata ke kiri (santai) atau rata kanan-kiri (formal kayak surat resmi). text-transform: uppercase = nulis pakai huruf KAPITAL biar berasa lebih nge-grab kayak judul poster konser. Semua kontrol kecil ini bedain antara tulisan yang nyaman dibaca sampai habis vs yang bikin pembaca scroll cepet pengen kabur.

⚠️ Jebakan yang sering ditemui

• line-height UNITLESS lebih baik dari px. line-height: 1.5 adapt ke font-size. line-height: 24px tetap statis.
• text-align: justify sering jelek di web (gap besar antar kata) — pakai text-align: left default.
• text-transform: uppercase = visual saja. Screen reader masih baca lowercase. Untuk SEMANTIC capital, ketik manual.
• text-decoration: none di link harus selalu kasih indikator visual lain (bold, color berbeda, underline on hover).
• letter-spacing di teks kecil = pegal mata. Pakai untuk uppercase headings (letter-spacing: 0.05em).
• word-break: break-all brutal — pecah di mana saja. Pakai overflow-wrap: anywhere untuk break yang lebih natural.

TL;DR: Text properties = detail keterbacaan di luar font-family/size. text-align (left/center/right/justify), text-decoration (underline/none — link butuh visual indicator lain), text-transform (uppercase visual saja, screen reader baca aslinya), line-height UNITLESS (1.5-1.6 ideal body text), letter-spacing (positif tipis di uppercase). Avoid text-align: justify di web (gap aneh). word-break: break-all brutal — pakai overflow-wrap: anywhere.