/typography-audit

Use Letterspaced Caps for Subheadings

Letterspaced uppercase or small caps work well for subheadings and labels. Size caps down slightly to avoid shouting (uppercase at body size feels too loud). Small caps with slight tracking make an elegant secondary heading level.

Incorrect (full-size uppercase, no spacing):

.subhead {
  text-transform: uppercase;
  font-size: 18px;  /* same as body, feels aggressive */
}

Correct (sized down, tracked uppercase):

.subhead {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Or small caps variant */
.subhead-sc {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.05em;
  font-size: 1rem;
}