Small caps

A magazine-style kicker and byline: small caps read as refined metadata, not shouting uppercase.

Field notes

Fog over the ridgeline

Photography · M. Okonkwo · April 2026

Widely Supported

typographyOpenTypeno-js

Quick implementation

.kicker {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--muted);
}
.byline {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}

Prompt this to your LLM

Editorial and long-form layouts.

You are styling an article header with a kicker line above the title.

Goal: Use real small caps (not fake shrunken caps) for the kicker and byline.

Constraints:
- Prefer font-variant-caps: all-small-caps; note that the font must supply smcp/c2sc glyphs.
- Add letter-spacing so small caps breathe; keep body font for the main title.

Return CSS class rules.

Why this matters in 2026

Small caps signal hierarchy without competing with the display heading; they look wrong when simulated with transform: scale.

The logic

font-variant-caps swaps glyphs at the typeface level; pairing with tracking avoids the “cramped label” look.

Accessibility & performance

Screen readers still read normal words; test contrast on muted meta text.