react-doctor/no-wide-letter-spacing
Reserve wide tracking (letter-spacing > 0.05em) for short uppercase labels, navigation items, and buttons — not body text
- 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.
Confirm style.letterSpacing is greater than 0.05em AND the element does NOT have textTransform: 'uppercase'. The rule normalizes bare numbers and Npx to em assuming a 16px base. False positive: stylized hero brand-mark text where wide tracking is part of the established typographic system.
Fix prompt
Use this once validation confirms the diagnostic is real.
Remove letterSpacing (typefaces ship with optimal tracking) or pair wide tracking with textTransform: 'uppercase' on short labels, nav items, and pill buttons. For display sizes, slightly negative tracking often reads tighter and more polished than positive tracking. See https://practicaltypography.com/letterspacing.html
Related rules
More Architecture rules from the rules reference:
react-doctor/no-z-index-9999: Define a z-index scale in your design tokens (e.g. dropdown: 10, modal: 20, toast: 30). Create a new stacking context with `isolation: isolate` instead of escalating valuesreact-doctor/only-export-components: Move non-component exports out of files that export components.react-doctor/prefer-es6-class: Use one component style consistently — ES2015 `class extends React.Component` (default) over the legacy `createReactClass` factory.react-doctor/prefer-explicit-variants: Split into explicit variant components: render `<ThreadComposer />` and `<EditMessageComposer />` instead of one component switching subtrees on boolean props.react-doctor/prefer-function-component: Re-write the class component as a function component using hooks.