Waktu Saya Benerin Heading Sidebar yang Kayak Bisik-bisik

Kemarin malam saya lagi nge-scroll sidebar blog sendiri, mata nyapak ke kiri kanan lihat label TERBARU, KATEGORI, TAG, TENTANG. Semuanya dibikin 11px, UPPERCASE, tracking-[0.08em], warna text-muted-foreground abu redup. Yang bikin geregetan: judul section itu malah yang paling susah dibaca di seluruh halaman. Efeknya judul kayak bisik-bisik, kaku kayak antarmuka admin. Saya kepikiran, kenapa yang harusnya nandain navigasi malah dibikin prioritas baca terendah.

Saya pribadi ngerasa ini gaya dashboard korporat era 2015, bukan hierarki yang bener. Pas ngecek kolom kanan di BlogArchive.tsx, saya sadar Terbaru sama Tentang keliatan telanjang dibanding Kategori yang ada ikon folder di kiri. Asimetri kecil, tapi mata nangkep.

Uppercase kecil itu trade-off dobel

Waktu googling sebentar soal tipografi, nemu Butterick's Practical Typography (practicaltypography.com/all-caps). Intinya: huruf kecil punya bentuk bervariasi, ada yang tinggi kayak d/h/k/l, pendek kayak a/e/n/s, turun kayak g/y/p/q. Otak gampang kenalin kata karena kontur kata nggak rata. ALL CAPS meratakan semuanya jadi kotak persegi panjang, jadi lebih lambat dibaca. Tapi dia bilang caps sah buat label pendek di bawah satu baris, asal kalau pakai caps tambah letterspacing biar kebaca.

Masalahnya di kode saya, caps dipakai bareng warna muted. Sesuai W3C WCAG 2.2 Understanding Contrast Minimum (w3.org/.../contrast-minimum), teks normal butuh rasio kontras minimal 4.5:1 (Success Criterion 1.4.3). Naiknya heading dari warna redup ke foreground penuh adalah langkah kontras, bukan cuma selera. Saya nyambung dua hambatan: kontur kata hilang dari caps, terus kontrasnya dikecilin dari warna redup. Dobel hambatan buat mata.

MDN letter-spacing (developer.mozilla.org/.../letter-spacing) juga nyebutin: property itu nambah spasi antar karakter, di uppercase dipakai buat keterbacaan. Kalau heading dibikin normal-case, tracking rapet nggak perlu lagi. Saya milih buang uppercase total rather than tambah letterspacing kayak saran Butterick buat caps, karena label section blog saya emang cuma satu dua kata, normal-case 13px bold udah cukup tegas. Saya emang nggak suka heading pake caps di blog pribadi, kayak ngomong pakai teriakan pelan.

Ngubah class Tailwind dan nambah ikon

Di commit 96be5ee repo my-apps, file BlogSidebar.tsx sama BlogArchive.tsx saya rapihin. Di project Next.js pakai Tailwind ini, saya biasa pakai token warna dari tema. Ukuran 11px ke 13px, font-semibold ke font-bold, text-muted-foreground ke text-foreground (putih di dark mode, ink di light mode via token). Uppercase sama tracking-[0.08em] dibuang total.

// Sebelum: 11px, uppercase, tracking, warna redup
<h3 className="mb-2 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase">
  {labels.categories}
</h3>

// Sesudah: 13px bold, warna penuh, plus ikon
<h3 className="mb-2 flex items-center gap-1.5 text-[13px] font-bold text-foreground">
  <FolderOpen className="size-3.5" />
  {labels.categories}
</h3>

Terus soal asimetri tadi: sidebar kiri udah pakai ikon lucide (FolderOpen buat Kategori, Tags buat Tag). Saya tambah Clock buat Terbaru, User buat Tentang, size-3.5. Ikon lama yang tadinya size-3 juga saya naikin ke size-3.5 biar proporsional. Sekarang dua kolom keliatan satu tim, nggak ada yang telanjang.

Keputusan saya: heading section itu tetep heading, harusnya kebaca dulu baru jadi ornamen. Uppercase plus letterspacing buat label 11px itu kayak ngecat rambu jalan pakai cat pudar, mending bikin yang langsung keliatan. Ke depannya saya bakal ngecek kontras tiap heading pas lagi ngopi, bukan nunggu mata pegel baru benerin.