Skip to main content
UI Guides

Search rules

Search all UI Guides rules by name, category, or source

contentRauno

Stable Font Weight on Hover

NEVER

NEVER: Change `font-weight` on hover or selected state — bolder text takes more space and reflows its neighbors. Reserve the space up front (or use color/background/opacity instead).

Font weight should not change on hover or selected state to prevent layout shift

/* reserve bold width so the label never reflows */
.item::after { content: attr(data-label); font-weight: 600; height: 0; visibility: hidden; }

Bad

Good

Why it matters

Changing font weight on hover causes text to take up different amounts of space, which shifts surrounding content. Use color, background, or opacity changes instead to indicate hover and selected states.

References

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.