Firefox's `bolder` Default is a Problem for Variable Fonts

Variable fonts simplify the creation of diverse font styles from a single file. However, current browser rendering of <strong></strong> and <b></b> elements presents compatibility challenges with the wide range of font-weight values offered by variable fonts.

Browser Discrepancies in Default Font-Weight

<strong></strong> and <b></b> elements highlight text. Browsers achieve this by increasing font-weight. This works well generally. For instance, MDN Web Docs uses <strong></strong> in its "Found a problem?" section.

The issue arises with custom font-weights. While the default is 400, font-weight accepts values from 1 to 1000. Chrome and Firefox render <strong></strong> differently based on surrounding text's font-weight.

Chrome and Safari consistently use a font-weight of 700, whereas Firefox uses 400, 700, or 900, depending on the context.

The Source of the Discrepancy

Chrome and Firefox employ different font-weight values in their user agent stylesheets:

<code>/* Chrome and Safari */
strong, b {
  font-weight: bold;
}

/* Firefox */
strong, b {
  font-weight: bolder;
}</code>

bold equates to 700, while bolder is relative. The HTML Standard, however, recommends bolder (since 2012), a recommendation currently followed only by Firefox. The popular Normalize stylesheet addresses this inconsistency.

Evaluating the Defaults

Firefox's default aligns with the standard. But is it superior? Both defaults have flaws: Chrome's bold fails at higher font-weights (around 700), while Firefox's bolder struggles with lower weights (around 300).

In Firefox's worst-case scenario, <strong></strong> text becomes nearly invisible. The image below demonstrates text with a font-weight of 349 in Firefox. Can you spot the word within <strong></strong> tags? Firefox renders it at 400, a mere 51-point increase.

Conclusion

When using thin or variable fonts below 350 font-weight, <strong></strong> and <b></b> might be indistinct in Firefox. Manually setting font-weight for these elements is advisable to avoid relying on the browser's suboptimal default.

<code>/* Example: Defining regular and bold font-weights */
body {
  font-weight: 340;
}

b,
strong {
  font-weight: 620;
}</code>

bolder is problematic with variable fonts. Ideally, emphasized text should be easily visible regardless of surrounding text's weight. A consistent font-weight increase (e.g., a percentage) would be preferable. The CSS Working Group is discussing percentage-based font-weight values, as suggested by Lea Verou:

<code>/* Proposed percentage-based font-weight */
strong, b {
  font-weight: 150%;
}</code>

A 150% increase might be a better default than the current bold/bolder approach for variable fonts.

The above is the detailed content of Firefox's `bolder` Default is a Problem for Variable Fonts. For more information, please follow other related articles on the PHP Chinese website!