useConsistentFontWeightNotation (CSS)
Language CSS
Summary
Section titled “Summary”- Rule available since:
v2.6.7 - Diagnostic Category:
lint/nursery/useConsistentFontWeightNotation - This rule has a safe fix.
- The default severity of this rule is information.
- Sources:
- Same as
font-weight-notation
- Same as
How to configure
Section titled “How to configure”{ "linter": { "rules": { "nursery": { "useConsistentFontWeightNotation": "error" } } }}Description
Section titled “Description”Enforce a consistent notation for font weights.
A font weight can be written as a number, such as 700, or as a keyword, such as bold.
The keywords normal and bold are the same as the numbers 400 and 700. Writing font
weights the same way everywhere makes styles easier to read and compare.
This rule checks the font-weight property, including the two weights allowed in
@font-face, and the weight in the font shorthand property. Values that come from
variables, such as var(--weight) or Sass variables, are ignored.
The keywords bolder and lighter set a weight relative to the parent element, so no
single number replaces them. With the "numeric" notation, they are reported without a
fix unless the ignoreRelative option is enabled.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”a { font-weight: bold; }code-block.css:1:18 lint/nursery/useConsistentFontWeightNotation FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This font weight is written as the keyword bold instead of a number.
> 1 │ a { font-weight: bold; }
│ ^^^^
2 │
ℹ Writing font weights the same way everywhere makes styles easier to read and compare.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
ℹ Safe fix: Use 700 instead.
1 │ - a·{·font-weight:·bold;·}
1 │ + a·{·font-weight:·700;·}
2 2 │
a { font: italic normal 20px sans-serif; }code-block.css:1:18 lint/nursery/useConsistentFontWeightNotation FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This font weight is written as the keyword normal instead of a number.
> 1 │ a { font: italic normal 20px sans-serif; }
│ ^^^^^^
2 │
ℹ Writing font weights the same way everywhere makes styles easier to read and compare.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
ℹ Safe fix: Use 400 instead.
1 │ - a·{·font:·italic·normal·20px·sans-serif;·}
1 │ + a·{·font:·italic·400·20px·sans-serif;·}
2 2 │
a { font-weight: lighter; }code-block.css:1:18 lint/nursery/useConsistentFontWeightNotation ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This font weight is written as the keyword lighter instead of a number.
> 1 │ a { font-weight: lighter; }
│ ^^^^^^^
2 │
ℹ Writing font weights the same way everywhere makes styles easier to read and compare.
ℹ The keyword lighter sets the weight relative to the parent element, so no single number can replace it. Use a number instead, or enable the ignoreRelative option to allow relative keywords.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
a { font-weight: 700; }a { font: italic 400 20px sans-serif; }a { font-weight: var(--weight); }@font-face { font-weight: 400 700; }Options
Section titled “Options”notation
Section titled “notation”Default: "numeric"
Whether font weights are written as numbers ("numeric"), or as keywords wherever a
keyword exists ("namedWherePossible"). Only 400 and 700 have keywords, so
"namedWherePossible" reports only those two numbers.
{ "linter": { "rules": { "nursery": { "useConsistentFontWeightNotation": { "level": "on", "options": { "notation": "namedWherePossible" } } } } }}Invalid
Section titled “Invalid”a { font-weight: 700; }code-block.css:1:18 lint/nursery/useConsistentFontWeightNotation FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This font weight is written as the number 700 instead of the keyword bold.
> 1 │ a { font-weight: 700; }
│ ^^^
2 │
ℹ Writing font weights the same way everywhere makes styles easier to read and compare.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
ℹ Safe fix: Use bold instead.
1 │ - a·{·font-weight:·700;·}
1 │ + a·{·font-weight:·bold;·}
2 2 │
a { font: italic 400 20px sans-serif; }code-block.css:1:18 lint/nursery/useConsistentFontWeightNotation FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This font weight is written as the number 400 instead of the keyword normal.
> 1 │ a { font: italic 400 20px sans-serif; }
│ ^^^
2 │
ℹ Writing font weights the same way everywhere makes styles easier to read and compare.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
ℹ Safe fix: Use normal instead.
1 │ - a·{·font:·italic·400·20px·sans-serif;·}
1 │ + a·{·font:·italic·normal·20px·sans-serif;·}
2 2 │
a { font-weight: bold; }a { font-weight: 600; }a { font: italic normal 20px sans-serif; }ignoreRelative
Section titled “ignoreRelative”Default: false
Whether to allow the keywords bolder and lighter when notation is "numeric".
{ "linter": { "rules": { "nursery": { "useConsistentFontWeightNotation": { "level": "on", "options": { "ignoreRelative": true } } } } }}Invalid
Section titled “Invalid”a { font-weight: bold; }code-block.css:1:18 lint/nursery/useConsistentFontWeightNotation FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This font weight is written as the keyword bold instead of a number.
> 1 │ a { font-weight: bold; }
│ ^^^^
2 │
ℹ Writing font weights the same way everywhere makes styles easier to read and compare.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
ℹ Safe fix: Use 700 instead.
1 │ - a·{·font-weight:·bold;·}
1 │ + a·{·font-weight:·700;·}
2 2 │
a { font-weight: bolder; }a { font: italic lighter 16px/3 cursive; }Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.