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