Weight Animation on Hover

Quick implementation

.nav-link {
  font-variation-settings: 'wght' 400;
  transition: font-variation-settings 0.3s ease;
}

.nav-link:hover {
  font-variation-settings: 'wght' 700;
}

@media (prefers-reduced-motion: reduce) {
  .nav-link { transition: none; }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a CSS typography expert. Create a hover animation that smoothly transitions font-weight using variable font axes.

Requirements:
1. Use font-variation-settings: 'wght' 400 at rest, transitioning to 'wght' 700 on hover.
2. Use transition: font-variation-settings 0.3s ease — NOT transition: font-weight, which doesn't animate in non-variable fonts.
3. The font must be a variable font (e.g. DM Sans, Inter, or any Google Fonts variable font).
4. Add a width-reservation technique to prevent layout shift: use a ::after pseudo-element with the bold text and visibility: hidden to pre-reserve the bold width.
5. Include @media (prefers-reduced-motion: reduce) { transition: none }.

Variants:
A) Navigation links — subtle weight lift on hover.
B) List items — staggered weight animation using animation-delay on each item.

Edge cases:
- font-variation-settings overrides font-weight — always set both or use only font-variation-settings.
- Static fonts ignore this transition — ensure your font stack includes a variable font first.
- On touch devices :hover may be sticky — test with :focus-visible as well.

Why this matters in 2026

Transitioning font-weight between regular and bold used to cause a jarring jump because browsers had to swap between two separate font files. Variable fonts expose the weight as a continuous axis ('wght'), meaning CSS can interpolate through every intermediate value — 400, 437, 523, 700 — producing a genuinely smooth animation. This is one of the most elegant uses of variable font technology and adds tactile polish to navigation elements with zero JavaScript.

The logic

The key is using font-variation-settings: 'wght' 400 instead of font-weight: 400, because transition can interpolate font-variation-settings as a numeric value but cannot interpolate the keyword-based font-weight property. Setting both base and hover states via font-variation-settings gives the browser a clear numeric range to animate through. A ::after pseudo-element with the bold text and visibility: hidden can pre-reserve the wider bold width to prevent sibling elements from shifting on hover.

Accessibility & performance

The prefers-reduced-motion guard is important — while a weight change isn't as disorienting as movement, some users find any animated text distracting. Variable font transitions are GPU-composited and have no layout cost when using font-variation-settings exclusively. Ensure the resting weight (400) and hover weight (700) both pass WCAG AA contrast ratios independently, since users who don't hover will only see the lighter weight.