---
title: "Font weight changes on interaction (ui/hover-font-weight)"
description: "Bolder text is wider: the label reflows and its neighbours jump."
url: http://localhost:4173/rules/ui/hover-font-weight
updated: 2026-11-11
---

# Font weight changes on interaction

> `ui/hover-font-weight` is a vetd rule. It flags: Font weight changes on interaction. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `ui/hover-font-weight` |
| Severity | warning |
| Group | Interface craft: accessibility, motion and mobile |
| Tags | correctness |

## Why it matters

Bolder text is wider: the label reflows and its neighbours jump.

## How to fix it

Change color or background instead, or reserve the bold width with a hidden copy.

## Related rules

- [`ui/transition-all`](http://localhost:4173/rules/ui/transition-all.md)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "ui/hover-font-weight" }`. CLI: `npx vetd explain ui/hover-font-weight`.

---

[All 92 rules](http://localhost:4173/rules.md) · Previous: [`ui/press-scale`](http://localhost:4173/rules/ui/press-scale.md) · Next: [`ui/theme-switch-transitions`](http://localhost:4173/rules/ui/theme-switch-transitions.md)