When I Fixed My Blog Sidebar Headings That Read Like a Whisper

I was scrolling my own blog sidebar last night on the local dev server for my-apps, a Next.js + Tailwind frontend. Commit 96be5ee was about to happen. The right column showed LATEST and ABOUT in 11px uppercase dim gray. Left column had CATEGORIES and TAGS same style but with lucide icons. The section titles were the hardest things to read on the page. Not the post list, not the tags, but the labels meant to guide me.

I first assumed the problem was just font weight. font-semibold at 11px feels thin. But when I leaned closer I saw the uppercase and the tracking-[0.08em] and the muted color. That's when it clicked: the headings read like a whisper, stiff like a corporate dashboard from 2015.

Why tiny uppercase labels fail twice

Butterick's Practical Typography (practicaltypography.com/all-caps) explains lowercase letters have varied shapes (tall d/h/k/l, short a/e/n/s, descending g/y/p/q) that make word contours varied and easy for the brain to recognize. ALL CAPS flattens everything into a rectangular contour so it reads slower. He says caps are fine for short labels under one line, and if you use caps add letterspacing. I had caps plus tracking, so by the book, but size and color broke it.

The muted color was the second hit. W3C WCAG 2.2 Understanding Contrast Minimum (w3.org/.../contrast-minimum) sets normal text minimum contrast ratio of 4.5:1 (Success Criterion 1.4.3). My text-muted-foreground in dark mode was a dim gray, far from that. Moving to text-foreground (white in dark, ink in light via theme token) is a contrast step, not just taste. MDN letter-spacing (developer.mozilla.org/.../letter-spacing) notes letter-spacing adds space between characters; in uppercase it aids legibility, but if the heading is normal-case the tight tracking is unnecessary. I dropped uppercase and tracking entirely.

The Tailwind diff and icon symmetry

The change touched BlogSidebar.tsx and BlogArchive.tsx. Before, every heading used the same class. After, size up, bold, full color, and flex with icon.

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

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

I bumped old icons from size-3 to size-3.5 for proportion. Added Clock for Latest, User for About, both size-3.5. Now left and right columns match.

I have a firm opinion: 11px uppercase with letterspacing is 2015 dashboard style, not hierarchy. It pretends to be a label but fails as a signpost. Bolder normal-case 13px reads instantly and still looks clean.

A section heading is still a heading. It should be read first, then become decoration. After commit 96be5ee my sidebar finally lets me find Latest without squinting. I'll keep icons but never shrink labels to a whisper again.