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