# `react-doctor/design-no-bold-heading`

Use `font-semibold` (600) or `font-medium` (500) on headings — 700+ crushes letter counter shapes at display sizes

- **Category:** Architecture
- **Severity:** warn
- **Source:** oxlint-plugin-react-doctor
- **Framework:** global
- **Enabled when:** always

## Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Fires on h1-h6 JSX elements when className contains the bare token font-bold, font-extrabold, or font-black (matched with whitespace/start before and whitespace/colon/end after), OR inline style has a numeric fontWeight at or above 700. False positive: a small heading (text-xs/text-sm) where the heavier weight doesn't actually crush counters.

## Fix prompt

Use this once validation confirms the diagnostic is real.

Swap to font-semibold (600) or font-medium (500), or set style.fontWeight to 500-600. At display sizes the 700+ range tightens internal counter shapes in e, a, o, g and reads as design-by-default — headings get visual weight from size, not stroke thickness. https://tailwindcss.com/docs/font-weight